disable register btn on click

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

@@ -45,14 +45,22 @@
     <div class="ownAvatarContainer">
       <div>{{ "chooseAvatar.ownAvatar" | translate }}</div>
       <div>
-        <button class="BtnUpload" (click)="fileInput.click()">
+        <button
+          class="BtnUpload"
+          (click)="fileInput.click()"
+          [disabled]="loginService.isBtnDisabled"
+        >
           {{ "chooseAvatar.avatarBtn" | translate }}
         </button>
       </div>
     </div>
 
     <div class="avatarBottom">
-      <button class="hoverBtn" (click)="loginService.register()">
+      <button
+        class="aktivButton"
+        (click)="loginService.register()"
+        [disabled]="loginService.isBtnDisabled"
+      >
         {{ "chooseAvatar.Btn" | translate }}
       </button>
     </div>

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

@@ -76,6 +76,9 @@ section {
     background-color: #444df2;
     color: #ffff;
   }
+  &:disabled {
+    @include buttonGrey;
+  }
 }
 
 .avatarBottom {
@@ -89,9 +92,10 @@ button {
   @include buttonGrey;
   cursor: pointer;
 }
-.hoverBtn {
+.aktivButton {
-  &:hover {
+  @include aktivButtonBlue;
-    background-color: #676eec;
+  &:disabled {
+    @include buttonGrey;
   }
 }
 @media (max-width: 570px) {

src/app/service/login.service.ts

@@ -64,6 +64,7 @@ export class loginService {
     let currentUser = this.userService.getCurrentUserId();
     if (currentUser !== null) {
       this.router.navigate([`/main`]);
+      this.isBtnDisabled = false;
     }
   }
 
@@ -88,7 +89,6 @@ export class loginService {
           .catch((error) => {
             console.error('Error when retrieving the user document:', error);
           });
-        this.isBtnDisabled = false;
       })
       .catch((error) => {
         const errorCode = error.code;
@@ -154,7 +154,6 @@ export class loginService {
         this.getUserIdInLocalStorage(userId);
         this.email = '';
         this.password = '';
-        this.isBtnDisabled = false;
       })
       .catch((error) => {
         console.error(error);
@@ -171,6 +170,7 @@ export class loginService {
    * Registers a new user with Firebase authentication and stores user data in Firestore.
    */
   register() {
+    this.isBtnDisabled = true;
     const auth = getAuth();
     createUserWithEmailAndPassword(auth, this.email, this.password)
       .then((userCredential) => {
@@ -190,6 +190,7 @@ export class loginService {
       .catch((error) => {
         console.error(error);
         this.deleteUserFormData();
+        this.isBtnDisabled = false;
       });
   }