Merge branch 'feature/24-login-error-redirect' into 'development'

Resolve "Login Error Redirect"

Closes #24

See merge request denbi/object-storage-access-ui!19

src/App.vue

@@ -23,8 +23,8 @@ onBeforeMount(() => {
       // ❗️ Avoid an infinite redirect
       to.name !== "login"
     ) {
-      // redirect the user to the login page
-      return { name: "login" };
+      // redirect the user to the login page and preserve query params for login error message
+      return { name: "login", query: to.query };
     }
   });
 });

src/views/LoginView.vue

 <script setup lang="ts">
-import { onBeforeMount } from "vue";
+import { onBeforeMount, onMounted } from "vue";
 import { useAuthStore } from "@/stores/auth";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { OpenAPI } from "@/client";
+import { Toast } from "bootstrap";
 
 const router = useRouter();
+const route = useRoute();
 
 const store = useAuthStore();
 
+let errorToast: Toast | null = null;
+
 onBeforeMount(() => {
   if (store.authenticated) {
     // If user is authenticated redirect him to the dashboard
     router.push({ name: "buckets" });
   }
 });
+
+onMounted(() => {
+  errorToast = new Toast("#loginErrorToast");
+  // if there is a query param 'login_error' show the error toast
+  if (route.query.login_error != null) {
+    errorToast?.show();
+  }
+});
 </script>
 
 <template>
+  <div class="toast-container position-fixed top-toast end-0 p-3">
+    <div
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      class="toast text-bg-danger align-items-center border-0"
+      style="--bs-bg-opacity: 0.7"
+      data-bs-config='{"delay":8000}'
+      data-bs-autohide="true"
+      id="loginErrorToast"
+    >
+      <div class="toast-header text-bg-danger">
+        <strong class="me-auto">Login Error</strong>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="toast"
+          aria-label="Close"
+        ></button>
+      </div>
+      <div class="toast-body">
+        <p>
+          There has been some kind of error during the login.<br />
+          Please try again later.
+        </p>
+        <p>Error Code: {{ route.query.login_error }}</p>
+      </div>
+    </div>
+  </div>
   <div
     class="card text-center bg-dark ms-md-auto position-fixed top-50 start-50 translate-middle"
   >
-    <div class="card-header text-dark bg-light">LoginView</div>
+    <div class="card-header text-dark bg-light">S3Proxy</div>
     <div class="card-body p-5">
       <h5 class="card-title text-light">Login</h5>
       <p class="card-text text-secondary">