Initial move from angular shell to vue

dashboard/src/components/ApiTokens.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
 import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from 'pankow';
 import { copyToClipboard, prettyLongDate } from 'pankow/utils';

dashboard/src/components/AppPasswords.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
 import { Button, Dialog, Dropdown, FormGroup, TextInput, TableView, InputDialog } from 'pankow';
 import { prettyLongDate, copyToClipboard } from 'pankow/utils';

dashboard/src/components/CpuUsage.vue

@@ -2,7 +2,7 @@
 
 import { ref, onMounted, useTemplateRef } from 'vue';
 import Chart from 'chart.js/auto';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
 

dashboard/src/components/Headerbar.vue

@@ -0,0 +1,63 @@
+<script setup>
+
+const props = defineProps(['profile', 'subscription']);
+
+</script>
+
+<template>
+  <div class="headerbar">
+    <div style="flex-grow: 1;"></div>
+    <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
+      <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
+        {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
+      </span>
+    </div>
+    <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
+      <span class="badge badge-danger">Subscription Expired</span>
+    </div>
+    <a v-show="profile.isAtLeastAdmin" href="#/notifications">
+      <i class="fas fa-bell" v-if="notificationCount"></i>
+      <i class="far fa-bell" v-else></i>
+      <span v-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
+    </a>
+    <a v-show="profile.isAtLeastAdmin" href="#/support">
+      <i class="fa fa-question fa-fw"></i>
+    </a>
+    <a href="#/profile">
+      <img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}
+    </a>
+  </div>
+</template>
+
+<style scoped>
+
+.headerbar {
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  gap: 15px;
+}
+
+.headerbar a {
+  display: flex;
+  align-items: center;
+  padding: 6px 15px;
+  border-radius: var(--pankow-border-radius);
+  color: var(--pankow-text-color);
+}
+
+.headerbar a:focus,
+.headerbar a:active,
+.headerbar a:hover {
+  text-decoration: none;
+  background-color: var(--pankow-color-background-hover);
+}
+
+.headerbar-avatar {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  border-radius: var(--pankow-border-radius);
+}
+
+</style>

dashboard/src/components/MemoryUsage.vue

@@ -2,7 +2,7 @@
 
 import { ref, onMounted, useTemplateRef } from 'vue';
 import Chart from 'chart.js/auto';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
 

dashboard/src/components/Sidebar.vue

@@ -0,0 +1,158 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+
+const props = defineProps(['config', 'profile']);
+
+// only applies to mobile for now
+const isOpen = ref(false);
+
+function onToggle() {
+  isOpen.value = !isOpen.value;
+}
+
+function onClose() {
+  isOpen.value = false;
+}
+
+function isActive(view) {
+  return window.location.hash.slice(1) === view;
+}
+
+onMounted(() => {
+
+});
+
+</script>
+
+<template>
+  <div>
+    <div @click="onToggle()" class="sidebar-toggle-button"><i class="fa-solid fa-bars"></i></div>
+
+    <div class="sidebar" :class="{ 'open': isOpen }">
+      <a href="#/" class="sidebar-logo" @click="onClose()">
+        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+      </a>
+      <div class="sidebar-list">
+        <a class="sidebar-item" :class="{ active: isActive('/apps') }" href="#/apps" @click="onClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/appstore')}" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/users')}" v-show="profile.isAtLeastUserManager" href="#/users" @click="onClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/backups')}" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/branding')}" v-show="profile.isAtLeastAdmin" href="#/branding" @click="onClose()"><i class="fa fa-passport fa-fw"></i> {{ $t('branding.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/domains')}" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/email')}" v-show="profile.isAtLeastMailManager" href="#/email" @click="onClose()"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/emails-mailboxes')}" v-show="profile.isAtLeastMailManager" href="#/emails-mailboxes" @click="onClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/emails-mailinglists')}" v-show="profile.isAtLeastMailManager" href="#/emails-mailinglists" @click="onClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/eventlog')}" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/network')}" v-show="profile.isAtLeastAdmin" href="#/network" @click="onClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/services')}" v-show="profile.isAtLeastAdmin" href="#/services" @click="onClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/settings')}" v-show="profile.isAtLeastAdmin" href="#/settings" @click="onClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/user-directory')}" v-show="profile.isAtLeastAdmin" href="#/user-directory" @click="onClose()"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/volumes')}" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
+        <a class="sidebar-item" :class="{ active: isActive('/system')}" v-show="profile.isAtLeastAdmin" href="#/system" @click="onClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.sidebar-toggle-button {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+}
+
+.sidebar {
+  position: relative;
+  z-index: 1000;
+  transition: all 250ms ease;
+  min-width: 280px;
+  height: 100%;
+  white-space: nowrap !important;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--navbar-background);
+  border-right: 1px solid var(--pankow-color-background-hover);
+  padding: 22px 10px 10px 10px;
+  margin-right: 20px;
+}
+
+@media(max-width:767px) {
+  .sidebar {
+    margin-right: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    min-width: 0;
+    padding: 22px 0 10px 0;
+    border-right: 0;
+  }
+
+  .sidebar.open {
+    width: 100%;
+    padding: 22px 10px 10px 10px;
+  }
+}
+
+.sidebar-logo img {
+  margin-right: 10px;
+}
+
+.sidebar-logo,
+.sidebar-logo:hover {
+  display: flex;
+  align-items: center;
+  color: var(--pankow-text-color);
+  text-decoration: none;
+  padding-left: 10px;
+}
+
+.sidebar-list {
+  overflow: auto;
+  padding-top: 20px;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+}
+
+.sidebar-list:hover {
+  scrollbar-color: var(--color-neutral-border) transparent;
+}
+
+.sidebar-item {
+  display: block;
+  color: var(--pankow-text-color);
+  border-radius: 3px;
+  padding: 10px 15px;
+}
+
+.sidebar-item i {
+  opacity: 0.5;
+  margin-right: 10px;
+}
+
+.sidebar-item.active {
+  color: var(--pankow-color-primary);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.sidebar-item:hover {
+  background-color: #e9ecef;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .sidebar-item:hover {
+    background-color: var(--card-background);
+  }
+}
+
+.sidebar-item.active i ,
+.sidebar-item:hover i {
+  opacity: 1;
+}
+
+</style>