From 19ed9ebaeb933aa235afae757f363d3bc8cfaff5 Mon Sep 17 00:00:00 2001
From: Markus Thielen <markus.thielen@basebox.tech>
Date: Thu, 9 Mar 2023 14:29:25 +0100
Subject: [PATCH] error vue, fixes

---
 .../{OAUthError.vue => FatalError.vue}        | 26 +++++++++++++----
 src/router/index.js                           | 28 +++++++++++++------
 src/store.js                                  |  3 ++
 src/views/HomeView.vue                        | 25 +++++++++++------
 4 files changed, 59 insertions(+), 23 deletions(-)
 rename src/components/{OAUthError.vue => FatalError.vue} (54%)

diff --git a/src/components/OAUthError.vue b/src/components/FatalError.vue
similarity index 54%
rename from src/components/OAUthError.vue
rename to src/components/FatalError.vue
index c0bbc43..eade193 100644
--- a/src/components/OAUthError.vue
+++ b/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;
     }
   }
 
diff --git a/src/router/index.js b/src/router/index.js
index 2ea8559..b5c74ce 100644
--- a/src/router/index.js
+++ b/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'};
diff --git a/src/store.js b/src/store.js
index 72953c4..3813642 100644
--- a/src/store.js
+++ b/src/store.js
@@ -17,6 +17,9 @@ export const store = reactive({
   /** basebox session data */
   session: {},
 
+  /** Fatal errort message, if any */
+  fatalError: "",
+
 });
 
 /**
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f686087..4760dba 100644
--- a/src/views/HomeView.vue
+++ b/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 {
-    margin: 5rem 0;
-    border: 1px solid var(--color-border);
-    border-radius: .5rem;
-    padding: 2rem;
-    text-align: center;
-    .btn {
-      margin: 3rem 0 0 0;
-    }
+main {
+  position: relative;
+}
+
+#login-prompt {
+  margin: 5rem 0;
+  border: 1px solid var(--color-border);
+  border-radius: .5rem;
+  padding: 2rem;
+  text-align: center;
+  .btn {
+    margin: 3rem 0 0 0;
   }
+}
 
 </style>
\ No newline at end of file