From 8dbf568d7998d08bc73a21678123f83c8ab3bbd8 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 30 May 2024 13:09:07 +0200
Subject: [PATCH] disable register btn on click

---
 .../choose-avatar/choose-avatar.component.html       | 12 ++++++++++--
 .../choose-avatar/choose-avatar.component.scss       | 10 +++++++---
 src/app/service/login.service.ts                     |  5 +++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/app/components/main-login/choose-avatar/choose-avatar.component.html b/src/app/components/main-login/choose-avatar/choose-avatar.component.html
index 2784a31..22a3990 100644
--- a/src/app/components/main-login/choose-avatar/choose-avatar.component.html
+++ b/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>
diff --git a/src/app/components/main-login/choose-avatar/choose-avatar.component.scss b/src/app/components/main-login/choose-avatar/choose-avatar.component.scss
index 5057af6..233e1e7 100644
--- a/src/app/components/main-login/choose-avatar/choose-avatar.component.scss
+++ b/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 {
-  &:hover {
-    background-color: #676eec;
+.aktivButton {
+  @include aktivButtonBlue;
+  &:disabled {
+    @include buttonGrey;
   }
 }
 @media (max-width: 570px) {
diff --git a/src/app/service/login.service.ts b/src/app/service/login.service.ts
index 727008f..02d4a35 100644
--- a/src/app/service/login.service.ts
+++ b/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;
       });
   }