update form validation

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

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.

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;
     }
   }

src/app/shared/components/login/mixins/mixin.scss

@@ -99,7 +99,7 @@
   font-weight: 600;
   cursor: pointer;
   &:hover {
-    background-color: #676eec;
+    background-color: #797ef3;
   }
 }
 

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>

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 {