cloudron-box/dashboard/src/Index.vue

<script setup>

import { onMounted, ref } from 'vue';
import { Notification } from 'pankow';
import { API_ORIGIN, TOKEN_TYPES } from './constants.js';
import ProfileModel from './models/ProfileModel.js';
import DashboardModel from './models/DashboardModel.js';
import Sidebar from './components/Sidebar.vue';
import Headerbar from './components/Headerbar.vue';
import AppsView from './views/AppsView.vue';
import AppConfigureView from './views/AppConfigureView.vue';
import AppstoreView from './views/AppstoreView.vue';
import BackupsView from './views/BackupsView.vue';
import BrandingView from './views/BrandingView.vue';
import DomainsView from './views/DomainsView.vue';
import EmailView from './views/EmailView.vue';
import EmailDomainView from './views/EmailDomainView.vue';
import EmailsEventlogView from './views/EmailsEventlogView.vue';
import EventlogView from './views/EventlogView.vue';
import MailboxesView from './views/MailboxesView.vue';
import MailinglistsView from './views/MailinglistsView.vue';
import NetworkView from './views/NetworkView.vue';
import ProfileView from './views/ProfileView.vue';
import ServicesView from './views/ServicesView.vue';
import SettingsView from './views/SettingsView.vue';
import SupportView from './views/SupportView.vue';
import SystemView from './views/SystemView.vue';
import UserDirectoryView from './views/UserDirectoryView.vue';
import UsersView from './views/UsersView.vue';
import VolumesView from './views/VolumesView.vue';

const VIEWS = {
  APPS: 'apps',
  APP: 'app',
  APPSTORE: 'appstore',
  BACKUPS: 'backups',
  BRANDING: 'branding',
  DOMAINS: 'domains',
  EMAIL: 'email',
  EMAIL_DOMAIN: 'email-domain',
  EMAILS_EVENTLOG: 'emails-eventlog',
  EMAILS_MAILBOXES: 'emails-mailboxes',
  EMAILS_MAILINGLISTS: 'emails-mailinglists',
  EVENTLOG: 'eventlog',
  NETWORK: 'network',
  PROFILE: 'profile',
  SERVICES: 'services',
  SETTINGS: 'settings',
  SUPPORT: 'support',
  SYSTEM: 'system',
  USER_DIRECTORY: 'user-directory',
  USERS: 'users',
  VOLUMES: 'volumes',
};

const dashboardModel = DashboardModel.create();
const profileModel = ProfileModel.create();

const view = ref('');
const profile = ref({});
const subscription = ref({
  plan: {},
});
const config = ref({});

function onHashChange() {
  const v = location.hash.slice(2);

  if (v === VIEWS.APPS) {
    view.value = VIEWS.APPS;
  } else if (v.indexOf(VIEWS.APPSTORE) === 0) {
    view.value = VIEWS.APPSTORE;
  } else if (v.indexOf(VIEWS.APP) === 0) {
    view.value = VIEWS.APP;
  } else if (v === VIEWS.BACKUPS) {
    view.value = VIEWS.BACKUPS;
  } else if (v === VIEWS.BRANDING) {
    view.value = VIEWS.BRANDING;
  } else if (v === VIEWS.DOMAINS) {
    view.value = VIEWS.DOMAINS;
  } else if (v === VIEWS.EMAIL) {
    view.value = VIEWS.EMAIL;
  } else if (v === VIEWS.EMAILS_EVENTLOG) {
    view.value = VIEWS.EMAILS_EVENTLOG;
  } else if (v === VIEWS.EMAILS_MAILBOXES) {
    view.value = VIEWS.EMAILS_MAILBOXES;
  } else if (v === VIEWS.EMAILS_MAILINGLISTS) {
    view.value = VIEWS.EMAILS_MAILINGLISTS;
  } else if (v.indexOf(VIEWS.EMAIL) === 0) {
    view.value = VIEWS.EMAIL_DOMAIN;
  } else if (v === VIEWS.EVENTLOG) {
    view.value = VIEWS.EVENTLOG;
  } else if (v === VIEWS.NETWORK) {
    view.value = VIEWS.NETWORK;
  } else if (v === VIEWS.PROFILE) {
    view.value = VIEWS.PROFILE;
  } else if (v === VIEWS.SERVICES) {
    view.value = VIEWS.SERVICES;
  } else if (v === VIEWS.SETTINGS) {
    view.value = VIEWS.SETTINGS;
  } else if (v === VIEWS.SUPPORT) {
    view.value = VIEWS.SUPPORT;
  } else if (v === VIEWS.SYSTEM) {
    view.value = VIEWS.SYSTEM;
  } else if (v === VIEWS.USER_DIRECTORY) {
    view.value = VIEWS.USER_DIRECTORY;
  } else if (v === VIEWS.USERS) {
    view.value = VIEWS.USERS;
  } else if (v === VIEWS.VOLUMES) {
    view.value = VIEWS.VOLUMES;
  } else {
    window.location.hash = '/' + VIEWS.APPS;
  }
}

onMounted(async () => {
  if (!localStorage.token) {
    localStorage.setItem('redirectToHash', window.location.hash);

    // start oidc flow
    window.location.href =  `${API_ORIGIN}/openid/auth?client_id=` + (API_ORIGIN ? TOKEN_TYPES.ID_DEVELOPMENT : TOKEN_TYPES.ID_WEBADMIN) + '&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';

    return;
  }

  window.addEventListener('hashchange', onHashChange);
  onHashChange();

  let [error, result] = await profileModel.get();
  if (error) return console.error(error);
  profile.value = result;

  [error, result] = await dashboardModel.config();
  if (error) return console.error(error);
  config.value = result;

  // TODO need to be reactive when name or icon changes
  window.document.title = result.cloudronName;
  document.getElementById('favicon').href = `${API_ORIGIN}/api/v1/cloudron/avatar?ts=${Date.now()}`;
});

</script>

<template>
  <div style="overflow: hidden; height: 100%;">
    <Notification />

    <div style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">

      <Sidebar :profile="profile" :config="config"/>

      <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
        <Headerbar :subscription="subscription" :profile="profile"/>

        <div style="overflow: auto; flex-grow: 1;">
          <AppsView v-if="view === VIEWS.APPS" />
          <AppConfigureView v-else-if="view === VIEWS.APP" />
          <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
          <BackupsView v-else-if="view === VIEWS.BACKUPS" />
          <BrandingView v-else-if="view === VIEWS.BRANDING" />
          <DomainsView v-else-if="view === VIEWS.DOMAINS" />
          <EmailView v-else-if="view === VIEWS.EMAIL" />
          <EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
          <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
          <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
          <MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
          <MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
          <NetworkView v-else-if="view === VIEWS.NETWORK" />
          <ProfileView v-else-if="view === VIEWS.PROFILE" />
          <ServicesView v-else-if="view === VIEWS.SERVICES" />
          <SettingsView v-else-if="view === VIEWS.SETTINGS" />
          <SupportView v-else-if="view === VIEWS.SUPPORT" />
          <SystemView v-else-if="view === VIEWS.SYSTEM" />
          <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
          <UsersView v-else-if="view === VIEWS.USERS" />
          <VolumesView v-else-if="view === VIEWS.VOLUMES" />
        </div>
      </div>
    </div>

  </div>
</template>