From f602e715207949da70c5ad592b21ff583285c835 Mon Sep 17 00:00:00 2001
From: rubikscraft <contact@rubikscraft.nl>
Date: Sun, 4 Sep 2022 14:43:19 +0200
Subject: [PATCH] add loading info to register and login

---
 .../src/app/routes/user/login/login.component.html     | 10 ++++++++--
 frontend/src/app/routes/user/login/login.component.ts  |  4 ++++
 .../app/routes/user/register/register.component.html   | 10 ++++++++--
 .../src/app/routes/user/register/register.component.ts |  6 ++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/routes/user/login/login.component.html b/frontend/src/app/routes/user/login/login.component.html
index 3e78e32..4e6f562 100644
--- a/frontend/src/app/routes/user/login/login.component.html
+++ b/frontend/src/app/routes/user/login/login.component.html
@@ -40,8 +40,14 @@
       </div>
 
       <div class="col-12 py-2">
-        <button mat-raised-button color="accent" class="mx-2" type="submit">
-          LOGIN
+        <button
+          mat-raised-button
+          color="accent"
+          class="mx-2"
+          type="submit"
+          [disabled]="loading"
+        >
+          {{ loading ? 'LOADING...' : 'LOGIN' }}
         </button>
         <button
           *ngIf="showRegister"
diff --git a/frontend/src/app/routes/user/login/login.component.ts b/frontend/src/app/routes/user/login/login.component.ts
index b3eb4de..cd34a2c 100644
--- a/frontend/src/app/routes/user/login/login.component.ts
+++ b/frontend/src/app/routes/user/login/login.component.ts
@@ -19,6 +19,7 @@ export class LoginComponent implements OnInit {
   private readonly logger = new Logger(LoginComponent.name);
 
   public showRegister = false;
+  public loading = false;
 
   public readonly model = new LoginControl();
 
@@ -52,7 +53,10 @@ export class LoginComponent implements OnInit {
       return;
     }
 
+    this.loading = true;
     const user = await this.userService.login(data.username, data.password);
+    this.loading = false;
+
     if (HasFailed(user)) {
       this.logger.error(user.getReason());
       this.utilService.showSnackBar(
diff --git a/frontend/src/app/routes/user/register/register.component.html b/frontend/src/app/routes/user/register/register.component.html
index fc465c5..8758a0d 100644
--- a/frontend/src/app/routes/user/register/register.component.html
+++ b/frontend/src/app/routes/user/register/register.component.html
@@ -66,8 +66,14 @@
         >
           LOGIN
         </button>
-        <button mat-flat-button color="accent" class="mx-2" type="submit">
-          REGISTER
+        <button
+          mat-flat-button
+          color="accent"
+          class="mx-2"
+          type="submit"
+          [disabled]="loading"
+        >
+          {{ loading ? 'LOADING...' : 'REGISTER' }}
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/routes/user/register/register.component.ts b/frontend/src/app/routes/user/register/register.component.ts
index 1b8cbc0..f32371e 100644
--- a/frontend/src/app/routes/user/register/register.component.ts
+++ b/frontend/src/app/routes/user/register/register.component.ts
@@ -19,6 +19,7 @@ export class RegisterComponent implements OnInit {
   private readonly logger = new Logger(RegisterComponent.name);
 
   public showLogin = false;
+  public loading = false;
 
   public readonly model = new RegisterControl();
 
@@ -52,8 +53,11 @@ export class RegisterComponent implements OnInit {
       return;
     }
 
+    this.loading = true;
     const user = await this.userService.register(data.username, data.password);
     if (HasFailed(user)) {
+      this.loading = false;
+
       this.logger.error(user.getReason());
       this.utilService.showSnackBar(
         'Register failed, please try again',
@@ -86,6 +90,8 @@ export class RegisterComponent implements OnInit {
       );
     }
 
+    this.loading = false;
+
     this.router.navigate(['/']);
   }