buttons cannot be clicked multiple times

frontend/src/app/components/auth/auth.component.html

@@ -39,7 +39,10 @@
       [imgPath]="'play'"
       [imgPath]="'arrow_right'"
       [imgReverse]="true"
-      [disabled]="!isUserEmailValid(authData.mail) && authData.mail.length > 0"
+      [disabled]="
+        (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
+        authData.send
+      "
     ></app-btn-large>
   </form>
 </section>

frontend/src/app/components/auth/auth.component.ts

@@ -16,6 +16,7 @@ import { AuthService } from '../../services/auth.service';
 export class AuthComponent {
   authData = {
     mail: '',
+    send: false,
   };
 
   constructor(
@@ -42,11 +43,13 @@ export class AuthComponent {
       email: this.authData.mail,
     };
     try {
+      this.authData.send = true;
       await this.authService.checkAuthUserMail(body);
       const queryParams = { mail: this.authData.mail };
       this.router.navigate(['/register'], { queryParams });
       this.errorService.clearError();
     } catch (error) {
+      this.authData.send = false;
       this.errorService.handleError(error);
     }
   }

frontend/src/app/components/auth/forgot-password/forgot-password.component.html

@@ -38,7 +38,7 @@
       </div>
       <app-btn-large
         [value]="'Send Email'"
-        [disabled]="!isUserEmailValid(authData.mail)"
+        [disabled]="!isUserEmailValid(authData.mail) || authData.send"
       ></app-btn-large>
     </form>
     } @else { @if (sendMailSuccess) {
@@ -132,7 +132,8 @@
           !isUserEmailValid(authData.mail) ||
           authData.password !== authData.passwordConfirm ||
           !authData.password ||
-          !authData.passwordConfirm
+          !authData.passwordConfirm ||
+          authData.send
         "
       ></app-btn-large>
     </form>

frontend/src/app/components/auth/forgot-password/forgot-password.component.ts

@@ -19,6 +19,7 @@ export class ForgotPasswordComponent implements OnInit {
     token: '',
     password: '',
     passwordConfirm: '',
+    send: false,
   };
 
   sendMailSuccess: boolean = false;
@@ -70,10 +71,12 @@ export class ForgotPasswordComponent implements OnInit {
       email: this.authData.mail,
     };
     try {
+      this.authData.send = true;
       await this.authService.forgotPassword(body);
       this.sendMailSuccess = true;
       this.errorService.clearError();
     } catch (error) {
+      this.authData.send = false;
       this.sendMailSuccess = false;
       this.errorService.handleError(error);
     }
@@ -85,14 +88,14 @@ export class ForgotPasswordComponent implements OnInit {
       token: this.authData.token,
       new_password: this.authData.password,
     };
-    console.log(body);
-
     try {
+      this.authData.send = true;
       await this.authService.changePassword(body);
       this.queryEmail = false;
       this.queryEmailSuccess = true;
       this.errorService.clearError();
     } catch (error) {
+      this.authData.send = false;
       this.errorService.handleError(error);
     }
   }

frontend/src/app/components/auth/login/login.component.html

@@ -83,13 +83,16 @@
             !authData.mail ||
             (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
             !password.valid ||
-            authData.guestLogin
+            authData.guestLogin ||
+            authData.send
           "
         ></app-btn-large>
         <app-btn-large
           [value]="'Guest Log in'"
           [disabled]="
-            authData.guestLogin || (!!authData.mail && !!authData.password)
+            authData.guestLogin ||
+            (!!authData.mail && !!authData.password) ||
+            authData.send
           "
           (click)="guestLogin()"
         ></app-btn-large>

frontend/src/app/components/auth/login/login.component.ts

@@ -45,6 +45,7 @@ export class LoginComponent {
       password: environment.guestPassword,
     };
     try {
+      this.authData.send = true;
       await this.authService.login(body, this.authData.checkbox);
       this.authData.mail = '';
       this.authData.password = '';
@@ -52,6 +53,7 @@ export class LoginComponent {
       this.router.navigate(['/browse/']);
       this.errorService.clearError();
     } catch (error) {
+      this.authData.send = false;
       this.errorService.handleError(error);
     }
   }
@@ -63,11 +65,13 @@ export class LoginComponent {
         password: this.authData.password,
       };
       try {
+        this.authData.send = true;
         await this.authService.login(body, this.authData.checkbox);
         ngForm.resetForm();
         this.router.navigate(['/browse/']);
         this.errorService.clearError();
       } catch (error) {
+        this.authData.send = false;
         this.errorService.handleError(error);
       }
     }

frontend/src/app/components/auth/register/register.component.html

@@ -123,7 +123,8 @@
           authData.password !== authData.passwordConfirm ||
           !authData.password ||
           !authData.passwordConfirm ||
-          !authData.privacyPolicy
+          !authData.privacyPolicy ||
+          authData.send
         "
       ></app-btn-large>
     </form>

frontend/src/app/components/auth/register/register.component.ts

@@ -19,6 +19,7 @@ export class RegisterComponent implements OnInit {
     password: '',
     passwordConfirm: '',
     privacyPolicy: false,
+    send: false,
   };
 
   registrationSuccess: boolean = false;
@@ -49,11 +50,13 @@ export class RegisterComponent implements OnInit {
         password: this.authData.password,
       };
       try {
+        this.authData.send = true;
         await this.authService.register(body);
         ngForm.resetForm();
         this.registrationSuccess = true;
         this.errorService.clearError();
       } catch (error) {
+        this.authData.send = false;
         this.errorService.handleError(error);
       }
     }

frontend/src/app/components/auth/verify-email/verify-email.component.ts

@@ -18,6 +18,7 @@ export class VerifyEmailComponent {
   authData = {
     mail: '',
     token: '',
+    send: false,
   };
 
   constructor(
@@ -40,10 +41,12 @@ export class VerifyEmailComponent {
       token: this.authData.token,
     };
     try {
+      this.authData.send = true;
       await this.authService.verifyEmail(body);
       this.verified = true;
       this.errorService.clearError();
     } catch (error) {
+      this.authData.send = false;
       this.verified = false;
       this.errorService.handleError(error);
     }