error vue, fixes

src/components/FatalError.vue

@@ -1,5 +1,5 @@
 <!--
-  Component that dispalys authentication related errors.
+  Component that displays oauth/login related errors.
 
   Part of the basebox sample Todo app.
   https://basebox.tech
@@ -22,19 +22,35 @@
 <script>
 export default {
   name: "OAuthError",
-  props: ["errorMsg"],
+  props: {
+    errorMsg: {
+      type: String,
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
   #error-message {
-    margin: 5rem 0;
+    h3 {
+      font-weight: bold;
+      font-size: 1.5em;
+    }
+    position: absolute;
+    min-height: 100%;
+    left: 0;
+    top: 0;
+    width: 100%;
     border: 1px solid #ff5050;
     border-radius: .5rem;
     padding: 2rem;
-    text-align: center;
+    background: #4a1c1c;
     p {
-      margin: 50px 0;
+      margin: 30px 0;
+    }
+    .btn {
+      margin-top: 20px;
+      display: inline-block;
     }
   }
 

src/router/index.js

@@ -8,7 +8,7 @@
 import { store } from "../store";
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import OAUthError from "../components/OAUthError.vue";
+import OAUthError from "../components/FatalError.vue";
 import { objectToQueryString } from "../util/net";
 import {createUser, oauthCallbackHandler} from "../util/oauth";
 
@@ -28,12 +28,6 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
     },
-    {
-      path: '/oauth-error',
-      name: 'oauth-error',
-      component: OAUthError,
-      props: true,
-    },
   ]
 })
 
@@ -51,14 +45,30 @@ router.beforeEach(async (to, from) => {
       await oauthCallbackHandler(queryString);
       /* Success; redirect to home */
     } catch (err) {
-      console.error("Failed to finish login: " + err);
+      const errorMsg = `Failed to get session info from basebox/finish OpenID Connect login:  ${err}`;
+      console.error(errorMsg);
+      /* show error component */
+      return {
+        name: "oauth-error",
+        params: {
+          errorMsg
+        }
+      }
     }
 
     /* We have to create the logged-in user explicitly; see comment for `createUser()` */
     try {
       await createUser();
     } catch (err) {
-      console.error("Failed to create user: " + err);
+      const errorMsg = `Failed to create user: ${err}`;
+      console.error(errorMsg);
+      /* show error component */
+      return {
+        name: "oauth-error",
+        params: {
+          errorMsg
+        }
+      }
     }
 
     return {name: 'home'};

src/store.js

@@ -17,6 +17,9 @@ export const store = reactive({
   /** basebox session data */
   session: {},
 
+  /** Fatal errort message, if any */
+  fatalError: "",
+
 });
 
 /**

src/views/HomeView.vue

@@ -9,6 +9,7 @@
 import { store } from "../store";
 import {loggedIn} from "../store";
 import TodoRoot from "../components/TodoRoot.vue";
+import FatalError from "../components/FatalError.vue";
 
 /**
  * Perform a login.
@@ -30,19 +31,25 @@ function login() {
 
     <TodoRoot v-if="loggedIn()" />
 
+    <FatalError v-if="store.fatalError" :error-msg="store.fatalError"/>
+
   </main>
 </template>
 
 <style lang="scss" scoped>
-  #login-prompt {
+main {
-    margin: 5rem 0;
+  position: relative;
-    border: 1px solid var(--color-border);
+}
-    border-radius: .5rem;
+
-    padding: 2rem;
+#login-prompt {
-    text-align: center;
+  margin: 5rem 0;
-    .btn {
+  border: 1px solid var(--color-border);
-      margin: 3rem 0 0 0;
+  border-radius: .5rem;
-    }
+  padding: 2rem;
+  text-align: center;
+  .btn {
+    margin: 3rem 0 0 0;
   }
+}
 
 </style>