Add loading spinner when logging in

CS3219-AY2425S1 · Nov 13, 2024 · 37d714e · 37d714e
1 parent c32f45e
commit 37d714e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/...rep-fe/src/app/login/login.component.scss → ...prep-fe/src/app/login/login.component.css b/...rep-fe/src/app/login/login.component.scss → ...prep-fe/src/app/login/login.component.css
@@ -67,6 +67,9 @@ input.ng-valid.ng-touched {
   border-radius: 0.5rem;
   cursor: pointer;
   font-family: "Signika", sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .submit:hover {
@@ -91,3 +94,28 @@ button:disabled {
   background-color: grey;
   cursor: not-allowed;
 }
+
+button:disabled:hover {
+  background-color: grey;
+  cursor: not-allowed;
+}
+
+.spinner {
+  display: flex;
+  border: 3px solid #ffffff;
+  border-top: 3px solid rgb(255, 78, 196);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  flex-direction: space-around;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/peer-prep-fe/src/app/login/login.component.html b/peer-prep-fe/src/app/login/login.component.html
@@ -2,14 +2,6 @@
   <div class="form-container">
     <h2>Login</h2>
     <form id="userForm" [formGroup]="loginForm">
-      <!-- Username -->
-      <!-- <label for="name">Name:</label>
-      <div *ngIf="createAccountForm.get('username')?.invalid && createAccountForm.get('username')?.touched"
-        class="error-message">
-        <small *ngIf="createAccountForm.get('username')?.hasError('required')">Username is required</small>
-      </div>
-      <input type="text" id="name" formControlName="username"> -->
-
       <!-- Email -->
       <label for="email">Email:</label>
       <div
@@ -48,19 +40,14 @@ <h2>Login</h2>
         class="submit"
         type="submit"
         (click)="loginAccount()"
-        [disabled]="loginForm.invalid">
-        Login
+        [disabled]="loginForm.invalid || isLoading">
+        <ng-container *ngIf="isLoading">
+          <span class="spinner"></span> 
+        </ng-container>
+        <ng-container *ngIf="!isLoading">
+          Login
+        </ng-container>
       </button>
     </form>
-    <!-- <button
-      class="create-account"
-      routerLink="/create-account"
-      routerLinkActive="activebutton">
-      Create Account
-    </button> -->
   </div>
-  <!-- <div class="button">
-    
-    <div id="google-login-button" class="login-button btn btn-primary" (click)="signInWithGoogle()"></div>
-  </div> -->
 </div>
diff --git a/peer-prep-fe/src/app/login/login.component.ts b/peer-prep-fe/src/app/login/login.component.ts
@@ -27,6 +27,9 @@ const MODULES: any[] = [
   styleUrl: "./login.component.scss"
 })
 export class LoginComponent {
+
+  isLoading = false;
+
   constructor(
     private router: Router,
     private authService: authService
@@ -44,12 +47,13 @@ export class LoginComponent {
     return window.location.hostname !== "localhost"
   }
 
-  loginAccount() {
+  async loginAccount() {
+    this.isLoading = true
     let apiUrl: string = this.isProduction() ? `${baseUrlProduction}/auth/login` : "http://localhost:3001/auth/login"
 
     if (this.loginForm.invalid) {
     }
-
+    
     fetch(apiUrl, {
       method: "POST",
       headers: {
@@ -70,8 +74,8 @@ export class LoginComponent {
         // return response.json(); // Parse the JSON from the response
       })
       .then((data) => {
+        this.isLoading = false;
         this.authService.login(data)
-        //this.router.navigate(["/landing"]) // Redirect to homepage when succesfully created account
         console.log(data) // Handle the response data
       })
       .catch((error) => {