From 5aaf7624816fefea45b4b780da6da3006b0fe25e Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Wed, 29 May 2024 21:47:11 +0200
Subject: [PATCH] update form validation

---
 src/app/components/main-login/login/login.component.html | 9 +++++----
 src/app/components/main-login/login/login.component.ts   | 7 +++++++
 .../shared/components/login/footer/footer.component.scss | 2 +-
 src/app/shared/components/login/mixins/mixin.scss        | 2 +-
 .../login/start-header/start-header.component.html       | 2 +-
 .../login/start-header/start-header.component.scss       | 6 ++----
 6 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/components/main-login/login/login.component.html b/src/app/components/main-login/login/login.component.html
index 9f9aac1..559cdac 100644
--- a/src/app/components/main-login/login/login.component.html
+++ b/src/app/components/main-login/login/login.component.html
@@ -23,7 +23,8 @@
           pattern="[^@]+@[^.]+\..+"
           disabled="{{ loginService.isBtnDisabled }}"
         />
-        @if (!emailField.valid && emailField.touched) {
+        @if (!emailField.valid && emailField.touched &&
+        !loginService.isBtnDisabled) {
         <p class="error">{{ "login.errorText" | translate }}</p>
         }
       </div>
@@ -53,13 +54,13 @@
           [src]="loginService.passwordIcon"
           alt="Toggle visibility"
         />
-        @if (!passwordField.valid && passwordField.touched) {
+        @if (!passwordField.valid && passwordField.touched &&
+        !loginService.isBtnDisabled && isPasswordFieldEmpty()) {
         <p class="error">{{ "login.errorText2" | translate }}</p>
-        } @if (loginService.errorMessage) {
+        } @if (loginService.errorMessage && !isPasswordFieldEmpty()) {
         <p class="error">{{ loginService.errorMessage }}</p>
         }
       </div>
-
       <div class="passwordContainer">
         <span routerLink="/passwordForget">{{
           "login.midText" | translate
diff --git a/src/app/components/main-login/login/login.component.ts b/src/app/components/main-login/login/login.component.ts
index 4ca05df..813f116 100644
--- a/src/app/components/main-login/login/login.component.ts
+++ b/src/app/components/main-login/login/login.component.ts
@@ -52,6 +52,13 @@ export class LoginComponent {
     }
   }
 
+  isPasswordFieldEmpty(): boolean {
+    return (
+      !this.loginService.password ||
+      this.loginService.password.trim().length === 0
+    );
+  }
+
   /**
    * Handles form submission by triggering the login process through a login service.
    * This method would typically be called when a user submits a form associated with logging in.
diff --git a/src/app/shared/components/login/footer/footer.component.scss b/src/app/shared/components/login/footer/footer.component.scss
index 0133ec4..294b106 100644
--- a/src/app/shared/components/login/footer/footer.component.scss
+++ b/src/app/shared/components/login/footer/footer.component.scss
@@ -6,7 +6,6 @@
   padding-top: 132px;
   padding-bottom: 24px;
   width: 100vw;
-
   > a {
     font-size: 18px;
     font-weight: 400px;
@@ -18,6 +17,7 @@
     border-radius: 100px;
     border: 1px solid #eceefe;
     &:hover {
+      color: #444df2;
       border: 1px solid #444df2;
     }
   }
diff --git a/src/app/shared/components/login/mixins/mixin.scss b/src/app/shared/components/login/mixins/mixin.scss
index 91dc3ec..61632d2 100644
--- a/src/app/shared/components/login/mixins/mixin.scss
+++ b/src/app/shared/components/login/mixins/mixin.scss
@@ -99,7 +99,7 @@
   font-weight: 600;
   cursor: pointer;
   &:hover {
-    background-color: #676eec;
+    background-color: #797ef3;
   }
 }
 
diff --git a/src/app/shared/components/login/start-header/start-header.component.html b/src/app/shared/components/login/start-header/start-header.component.html
index 8df587d..2392d2d 100644
--- a/src/app/shared/components/login/start-header/start-header.component.html
+++ b/src/app/shared/components/login/start-header/start-header.component.html
@@ -36,7 +36,7 @@
     <div>
       <span>{{ "start-header.new" | translate }}</span>
       <div class="createAccountContainer">
-        <span routerLink="/register" class="createAccoun">{{
+        <span routerLink="/register" class="createAccount">{{
           "start-header.create" | translate
         }}</span>
       </div>
diff --git a/src/app/shared/components/login/start-header/start-header.component.scss b/src/app/shared/components/login/start-header/start-header.component.scss
index 9740725..a037ed0 100644
--- a/src/app/shared/components/login/start-header/start-header.component.scss
+++ b/src/app/shared/components/login/start-header/start-header.component.scss
@@ -33,7 +33,7 @@
   justify-content: end;
 }
 
-.createAccoun {
+.createAccount {
   text-align: end;
   font-family: Figtree, sans-serif, Nunito;
   color: #797ef3;
@@ -47,8 +47,6 @@
   font-size: 18px;
   margin-right: -13px;
   &:hover {
-    font-weight: 500;
-    background-color: #eceefe;
     color: #444df2;
     border: 1px solid #444df2;
   }
@@ -235,7 +233,7 @@
       align-items: center;
     }
   }
-  .createAccoun {
+  .createAccount {
     margin-right: 0;
   }
   .logoEndPosition {