From 0185eef655464b9906a3fc00918ad9e8c23ce45b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Urban?= <burban@inovex.de>
Date: Mon, 30 Oct 2023 11:25:37 +0100
Subject: [PATCH] fix(frontend): loading state on login

---
 frontend/src/Login.svelte | 56 +++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/frontend/src/Login.svelte b/frontend/src/Login.svelte
index 1e579e1..61237c9 100644
--- a/frontend/src/Login.svelte
+++ b/frontend/src/Login.svelte
@@ -1,13 +1,12 @@
 <script>
-
-  import {navigate} from "svelte-routing";
+  import { navigate } from "svelte-routing";
 
   let email = '';
   let password = '';
   let message = '';
+  let isRedirecting = false;
 
   async function login() {
-    console.log("test1")
     try {
       const response = await fetch('/api/login', {
         method: 'POST',
@@ -18,22 +17,14 @@
         body: JSON.stringify({ email, password })
       });
 
-      console.log(response)
-
-      //const data = await response.json();
-      console.log("test.2")
-
       if (response.ok) {
-        console.log("test2")
         message = "Login successful!";
-
-        setTimeout(()=> {
-          window.location.href = "/api/redirect"
-        },2000)
-        // Optionally, set a token, redirect the user, or perform other actions
-        // For example: localStorage.setItem('token', data.token);
+        isRedirecting = true;
+        setTimeout(() => {
+          window.location.href = "/api/redirect";
+        }, 2000);
       } else {
-        message = data.error || "Login failed!";
+        message = response.error || "Login failed!";
       }
     } catch (error) {
       message = "An error occurred: " + error.message;
@@ -44,18 +35,26 @@
 <div class="container mt-5">
   <div class="row justify-content-center">
     <div class="col-md-4">
-      <h2>Login</h2>
-      <form>
-        <div class="mb-3">
-          <label for="email" class="form-label">Email address</label>
-          <input type="email" class="form-control" id="email" bind:value={email}>
-        </div>
-        <div class="mb-3">
-          <label for="password" class="form-label">Password</label>
-          <input type="password" class="form-control" id="password" bind:value={password}>
+      {#if !isRedirecting}
+        <h2>Login</h2>
+        <form>
+          <div class="mb-3">
+            <label for="email" class="form-label">Email address</label>
+            <input type="email" class="form-control" id="email" bind:value={email}>
+          </div>
+          <div class="mb-3">
+            <label for="password" class="form-label">Password</label>
+            <input type="password" class="form-control" id="password" bind:value={password}>
+          </div>
+          <button type="button" class="btn btn-primary" on:click={login}>Login</button>
+        </form>
+      {:else}
+        <div class="text-center">
+          <span class="sr-only">Loading...</span>
+          <div class="spinner-border" role="status"/>
+          <p class="mt-3">Redirecting, please wait...</p>
         </div>
-        <button type="button" class="btn btn-primary" on:click={login}>Login</button>
-      </form>
+      {/if}
     </div>
     <div class="sso-login mt-4">
       <p>Or login with:</p>
@@ -71,6 +70,7 @@
     </div>
   </div>
 </div>
+
 <style>
   .sso-login {
     text-align: center;
@@ -78,4 +78,4 @@
   .sso-login .btn {
     margin: 0 5px;
   }
-</style>
\ No newline at end of file
+</style>