web/satellite/v2: support v2 app on root path

This change updates the v2 app to support being served on the root path of the console server. This includes conditionally setting the root of the vue router as v2 or not and making sure internal links work correctly regardless of how the app is being served. Issue: #6681 Change-Id: Iaa5e147adcd79aa06d4f9857200de90f46131f19
storj · Jan 17, 2024 · 9aae5b7 · 9aae5b7
1 parent a89668f
commit 9aae5b7
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 35 deletions.
diff --git a/web/satellite/index-vuetify.html b/web/satellite/index-vuetify.html
@@ -6,8 +6,32 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="dns-prefetch" href="https://js.stripe.com">
         <title>Storj</title>
+
+        <style>
+            #pre-app-loader {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100vh;
+            }
+
+            #pre-app-loader div {
+                border: 4px solid rgb(1,73,255);
+                border-top: 4px solid transparent;
+                border-radius: 50%;
+                width: 50px;
+                height: 50px;
+                animation: spin .7s linear infinite;
+            }
+
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+        </style>
     </head>
     <body>
+        <div id="pre-app-loader"><div></div></div>
         <div id="app"></div>
         <script type="module" src="/vuetify-poc/src/main.ts"></script>
     </body>

diff --git a/web/satellite/src/store/modules/configStore.ts b/web/satellite/src/store/modules/configStore.ts
@@ -22,6 +22,8 @@ export const useConfigStore = defineStore('config', () => {
         return state.config.pricingPackagesEnabled ? RouteConfig.PricingPlanStep : RouteConfig.OverviewStep;
     });
 
+    const optionalV2Path = computed((): string => !state.config.prefixVuetifyUI ? '' : '/' + import.meta.env.VITE_VUETIFY_PREFIX);
+
     async function getConfig(): Promise<FrontendConfig> {
         const result = await configApi.get();
 
@@ -33,6 +35,7 @@ export const useConfigStore = defineStore('config', () => {
     return {
         state,
         firstOnboardingStep,
+        optionalV2Path,
         getConfig,
     };
 });
diff --git a/web/satellite/src/utils/httpClient.ts b/web/satellite/src/utils/httpClient.ts
@@ -2,6 +2,7 @@
 // See LICENSE for copying information.
 
 import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
+import { useConfigStore } from '@/store/modules/configStore';
 
 /**
  * HttpClient is a custom wrapper around fetch api.
@@ -103,7 +104,7 @@ export class HttpClient {
             setTimeout(() => {
                 const origin = window.location.origin;
                 if (document.querySelector('.v-overlay-container')) {
-                    window.location.href = origin + '/' + import.meta.env.VITE_VUETIFY_PREFIX + '/login';
+                    window.location.href = origin + useConfigStore().optionalV2Path + '/login';
                     return;
                 }
                 window.location.href = origin + '/login';

diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -311,10 +311,10 @@ async function onLogout(): Promise<void> {
         notify.error(error.message);
     }
 
-    analyticsStore.pageVisit(RouteConfig.Login.path);
     await router.push(RouteConfig.Login.path);
-    // TODO this reload will be unnecessary once vuetify poc has its own login and/or becomes the primary app
-    location.reload();
+    if (configStore.state.config.prefixVuetifyUI) {
+        location.reload();
+    }
 }
 
 </script>

diff --git a/web/satellite/vuetify-poc/src/main.ts b/web/satellite/vuetify-poc/src/main.ts
@@ -18,9 +18,12 @@ import { registerPlugins } from '@poc/plugins';
 
 const app = createApp(App);
 
-registerPlugins(app);
+registerPlugins(app).then(() => {
+    const loader = document.getElementById('pre-app-loader');
+    loader?.remove();
 
-app.mount('#app');
+    app.mount('#app');
+});
 
 // By default, Papa Parse uses a blob URL for loading its worker.
 // This isn't supported by our content security policy, so we override the URL.

diff --git a/web/satellite/vuetify-poc/src/plugins/index.ts b/web/satellite/vuetify-poc/src/plugins/index.ts
@@ -12,11 +12,13 @@ import { App, watch } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import THEME_URLS from 'virtual:vuetify-theme-css';
 
-import { router, startTitleWatcher } from '../router';
+import { setupRouter } from '../router';
 
 import vuetify from './vuetify';
 
-import NotificatorPlugin from '@/utils/plugins/notificator';
+import NotificatorPlugin, { Notificator } from '@/utils/plugins/notificator';
+import { useConfigStore } from '@/store/modules/configStore';
+import { FrontendConfig } from '@/types/config.gen';
 
 const pinia = createPinia();
 setActivePinia(pinia);
@@ -59,12 +61,16 @@ function setupTheme() {
     });
 }
 
-export function registerPlugins(app: App<Element>) {
+export async function registerPlugins(app: App<Element>) {
     setupTheme();
-    app
-        .use(vuetify)
-        .use(router)
-        .use(pinia)
-        .use(NotificatorPlugin);
-    startTitleWatcher();
+    app.use(vuetify).use(pinia).use(NotificatorPlugin);
+
+    let config = new FrontendConfig();
+    try {
+        config = await useConfigStore().getConfig();
+    } catch (e) {
+        new Notificator().notifyError(e);
+    }
+    const router = setupRouter(config);
+    app.use(router);
 }
diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts
@@ -2,11 +2,12 @@
 // See LICENSE for copying information.
 
 import { watch } from 'vue';
-import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
+import { RouteRecordRaw, createRouter, createWebHistory, Router } from 'vue-router';
 
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAppStore } from '@poc/store/appStore';
+import { FrontendConfig } from '@/types/config.gen';
 
 export enum RouteName {
     Billing = 'Billing',
@@ -141,25 +142,27 @@ const routes: RouteRecordRaw[] = [
     },
 ];
 
-export const router = createRouter({
-    history: createWebHistory(import.meta.env.VITE_VUETIFY_PREFIX),
-    routes,
-});
+export function setupRouter(config: FrontendConfig): Router {
+    const basePath = !config.prefixVuetifyUI ? '' : import.meta.env.VITE_VUETIFY_PREFIX;
+    const history = createWebHistory(basePath);
+    const router = createRouter({
+        history,
+        routes,
+    });
 
-router.beforeEach((to, from, next) => {
-    const appStore = useAppStore();
-    appStore.setIsNavigating(true);
+    router.beforeEach((to, from, next) => {
+        const appStore = useAppStore();
+        appStore.setIsNavigating(true);
 
-    if (to.name === RouteName.Projects && from.name === RouteName.Login) {
-        appStore.toggleHasJustLoggedIn(true);
-    }
+        if (to.name === RouteName.Projects && from.name === RouteName.Login) {
+            appStore.toggleHasJustLoggedIn(true);
+        }
 
-    next();
-});
+        next();
+    });
 
-router.afterEach(() => useAppStore().setIsNavigating(false));
+    router.afterEach(() => useAppStore().setIsNavigating(false));
 
-export function startTitleWatcher(): void {
     const projectsStore = useProjectsStore();
     const configStore = useConfigStore();
 
@@ -176,6 +179,6 @@ export function startTitleWatcher(): void {
             document.title = parts.join(' | ');
         },
     );
-}
 
-export default router;
+    return router;
+}
diff --git a/web/satellite/vuetify-poc/src/views/Login.vue b/web/satellite/vuetify-poc/src/views/Login.vue
@@ -224,7 +224,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/v2/login';
+            window.location.href = satellite.address + configStore.optionalV2Path + '/login';
         }
     },
 });

diff --git a/web/satellite/vuetify-poc/src/views/PasswordReset.vue b/web/satellite/vuetify-poc/src/views/PasswordReset.vue
@@ -123,7 +123,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/v2/password-reset';
+            window.location.href = satellite.address + configStore.optionalV2Path + '/password-reset';
         }
     },
 });

diff --git a/web/satellite/vuetify-poc/src/views/Signup.vue b/web/satellite/vuetify-poc/src/views/Signup.vue
@@ -354,7 +354,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/v2/login';
+            window.location.href = satellite.address + configStore.optionalV2Path + '/signup';
         }
     },
 });