fix(frontend): loading state on login

B-urb · Oct 30, 2023 · 0185eef · 0185eef
1 parent b8d730e
commit 0185eef
Showing 1 changed file with 28 additions and 28 deletions.
diff --git 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,11 +70,12 @@
     </div>
   </div>
 </div>
+
 <style>
   .sso-login {
     text-align: center;
   }
   .sso-login .btn {
     margin: 0 5px;
   }
-</style>
+</style>