web/satellite/v2: add error page

This change adds an error page to the v2 app to be show when bad links
are visited.

Issue: #6681

Change-Id: I02652d2fc8459b249c4f95381772b0bc2d8b4765

web/satellite/vuetify-poc/src/App.vue

@@ -2,24 +2,40 @@
 // See LICENSE for copying information.
 
 <template>
-    <router-view />
+    <ErrorPage v-if="isErrorPageShown" />
+    <router-view v-else />
     <Notifications />
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { computed, onMounted } from 'vue';
 
 import { useConfigStore } from '@/store/modules/configStore';
+import { useAppStore } from '@poc/store/appStore';
+import { APIError } from '@/utils/error';
 
 import Notifications from '@poc/layouts/default/Notifications.vue';
+import ErrorPage from '@poc/components/ErrorPage.vue';
 
+const appStore = useAppStore();
 const configStore = useConfigStore();
 
+/**
+ * Indicates whether an error page should be shown in place of the router view.
+ */
+const isErrorPageShown = computed<boolean>((): boolean => {
+    return appStore.state.error.visible;
+});
+
 /**
  * Lifecycle hook after initial render.
  * Sets up variables from meta tags from config such satellite name, etc.
  */
 onMounted(async (): Promise<void> => {
-    await configStore.getConfig();
+    try {
+        await configStore.getConfig();
+    } catch (error) {
+        appStore.setErrorPage((error as APIError).status ?? 500, true);
+    }
 });
 </script>

web/satellite/vuetify-poc/src/components/ErrorPage.vue

@@ -0,0 +1,147 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="error-area d-flex flex-column justify-center">
+        <div class="error-area__logo-wrapper d-flex justify-center">
+            <v-img
+                v-if="theme.global.current.value.dark"
+                class="error-area__logo-wrapper__logo"
+                src="@poc/assets/logo-dark.svg"
+                width="120"
+                alt="Storj Logo"
+                @click="goToHomepage"
+            />
+            <v-img
+                v-else
+                class="error-area__logo-wrapper__logo"
+                src="@poc/assets/logo.svg"
+                width="120"
+                alt="Storj Logo"
+                @click="goToHomepage"
+            />
+        </div>
+        <div class="d-flex flex-column align-center text-center">
+            <h3 class="text-h3">{{ statusCode }}</h3>
+            <h4 class="text-h4 mb-5">{{ message }}</h4>
+            <v-btn
+                @click="onButtonClick"
+            >
+                {{ 'Go ' + (isFatal ? 'to homepage' : 'back') }}
+            </v-btn>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { VBtn, VImg } from 'vuetify/components';
+import { useTheme } from 'vuetify';
+
+import { useAppStore } from '@poc/store/appStore';
+import { useConfigStore } from '@/store/modules/configStore';
+
+const appStore = useAppStore();
+const configStore = useConfigStore();
+const router = useRouter();
+const theme = useTheme();
+
+const messages = new Map<number, string>([
+    [404, 'Oops, page not found.'],
+    [500, 'Internal server error.'],
+]);
+
+/**
+ * Retrieves the error's status code from the store.
+ */
+const statusCode = computed((): number => {
+    return appStore.state.error.statusCode;
+});
+
+/**
+ * Retrieves the message corresponding to the error's status code.
+ */
+const message = computed((): string => {
+    return messages.get(statusCode.value) || 'An error occurred.';
+});
+
+/**
+ * Indicates whether the error is unrecoverable.
+ */
+const isFatal = computed((): boolean => {
+    return appStore.state.error.fatal;
+});
+
+/**
+ * Navigates to the homepage.
+ */
+function goToHomepage(): void {
+    window.location.href = configStore.state.config.homepageURL || 'https://www.storj.io';
+}
+
+/**
+ * Navigates to the homepage if fatal or the previous route otherwise.
+ */
+function onButtonClick(): void {
+    if (isFatal.value) {
+        goToHomepage();
+        return;
+    }
+    router.back();
+}
+
+/**
+ * Lifecycle hook after initial render. Sets page title.
+ */
+onMounted(() => {
+    const satName = configStore.state.config.satelliteName;
+    document.title = statusCode.value.toString() + (satName ? ' | ' + satName : '');
+});
+</script>
+
+<style scoped lang="scss">
+    .error-area {
+        position: fixed;
+        inset: 0;
+        padding: 52px 24px;
+        box-sizing: border-box;
+        overflow-y: auto;
+
+        &:before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background: url('../../static/images/errors/world.svg') no-repeat center;
+            background-size: auto 75%;
+            z-index: -1;
+            opacity: 0.15;
+        }
+
+        &__logo-wrapper {
+            height: 30.89px;
+            position: absolute;
+            top: 52px;
+            left: 0;
+            right: 0;
+            margin-bottom: 52px;
+
+            &__logo {
+                height: 100%;
+                width: auto;
+                cursor: pointer;
+            }
+        }
+    }
+
+    @media screen and (height <= 500px) {
+
+        .error-area {
+            justify-content: flex-start;
+
+            &__logo-wrapper {
+                position: unset;
+            }
+        }
+    }
+</style>

web/satellite/vuetify-poc/src/router/index.ts

@@ -154,6 +154,13 @@ export function setupRouter(config: FrontendConfig): Router {
         const appStore = useAppStore();
         appStore.setIsNavigating(true);
 
+        if (!to.matched.length) {
+            appStore.setErrorPage(404);
+            return;
+        } else if (appStore.state.error.visible) {
+            appStore.removeErrorPage();
+        }
+
         if (to.name === RouteName.Projects && from.name === RouteName.Login) {
             appStore.toggleHasJustLoggedIn(true);
         }

web/satellite/vuetify-poc/src/store/appStore.ts

@@ -11,6 +11,15 @@ class AppState {
     public pathBeforeAccountPage: string | null = null;
     public hasJustLoggedIn = false;
     public isNavigating = false;
+    public error: ErrorPageState = new ErrorPageState();
+}
+
+class ErrorPageState {
+    constructor(
+        public statusCode = 0,
+        public fatal = false,
+        public visible = false,
+    ) {}
 }
 
 export const useAppStore = defineStore('vuetifyApp', () => {
@@ -50,6 +59,14 @@ export const useAppStore = defineStore('vuetifyApp', () => {
         state.pathBeforeAccountPage = null;
     }
 
+    function setErrorPage(statusCode: number, fatal = false): void {
+        state.error = new ErrorPageState(statusCode, fatal, true);
+    }
+
+    function removeErrorPage(): void {
+        state.error.visible = false;
+    }
+
     return {
         state,
         toggleHasJustLoggedIn,
@@ -58,6 +75,8 @@ export const useAppStore = defineStore('vuetifyApp', () => {
         toggleAccountSetup,
         setPathBeforeAccountPage,
         setIsNavigating,
+        setErrorPage,
+        removeErrorPage,
         clear,
     };
 });