disable login btn on click

src/app/components/main-login/login/login.component.html

@@ -21,6 +21,7 @@
           required
           [ngClass]="{ aktivInput: emailField.valid && emailField.touched }"
           pattern="[^@]+@[^.]+\..+"
+          disabled="{{ loginService.isBtnDisabled }}"
         />
         @if (!emailField.valid && emailField.touched) {
         <p class="error">{{ "login.errorText" | translate }}</p>
@@ -44,6 +45,7 @@
           }"
           cols="30"
           rows="10"
+          disabled="{{ loginService.isBtnDisabled }}"
         />
         <img
           class="passwordEye"
@@ -86,6 +88,7 @@
         <button
           type="button"
           class="guestButton"
+          [disabled]="loginService.isBtnDisabled"
           (click)="loginService.guestLogin()"
         >
           {{ "login.BtnRight" | translate }}

src/app/components/main-login/login/login.component.scss

@@ -126,6 +126,9 @@ button {
     color: #fff;
     border: 1px solid #ffff;
   }
+  &:disabled {
+    @include buttonGrey;
+  }
 }
 .mobileRegisterContainer {
   display: none;

src/app/service/login.service.ts

@@ -42,6 +42,7 @@ export class loginService {
   isFirstLoad: boolean = true;
   passwordFieldType: string = 'password';
   passwordIcon: string = './assets/img/login/close-eye.svg';
+  isBtnDisabled: boolean = false;
   private hasAnimationPlayed = false;
   private introCompleteStatus = false;
   private secretKey: string = CryptoJSSecretKey.secretKey;
@@ -72,6 +73,7 @@ export class loginService {
    * Authenticates a user using their email and password, fetches the user document, and handles errors.
    */
   login() {
+    this.isBtnDisabled = true;
     const auth = getAuth();
     signInWithEmailAndPassword(auth, this.email, this.password)
       .then((userCredential) => {
@@ -86,10 +88,12 @@ export class loginService {
           .catch((error) => {
             console.error('Error when retrieving the user document:', error);
           });
+        this.isBtnDisabled = false;
       })
       .catch((error) => {
         const errorCode = error.code;
         this.switchCase(errorCode);
+        this.isBtnDisabled = false;
       });
   }
 
@@ -137,6 +141,7 @@ export class loginService {
    * Performs a guest login using predetermined credentials and updates the user's online status.
    */
   guestLogin() {
+    this.isBtnDisabled = true;
     const auth = getAuth();
     const email = 'guest@guestaccount.com';
     const password = 'guest@guestaccount.com';
@@ -149,12 +154,14 @@ export class loginService {
         this.getUserIdInLocalStorage(userId);
         this.email = '';
         this.password = '';
+        this.isBtnDisabled = false;
       })
       .catch((error) => {
         console.error(error);
         this.translate.get('login.errorText6').subscribe((res: string) => {
           this.errorMessage = res;
         });
+        this.isBtnDisabled = false;
       });
   }