added toggle password visibility

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

@@ -41,6 +41,7 @@
           id="password"
           name="password"
           #password="ngModel"
+          [type]="loginSerivce.passwordFieldType"
           placeholder="Password"
           class="custom-input"
           [(ngModel)]="loginData.password"
@@ -53,7 +54,11 @@
           alt=""
         />
         } @else {
-        <img class="custom-img" alt="" />
+        <img
+          class="passwordEye"
+          (click)="loginSerivce.togglePasswordVisibility()"
+          [src]="loginSerivce.passwordIcon"
+        />
         }
         <div class="error-msg">
           @if (!password.valid && password.touched) {

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

@@ -57,6 +57,11 @@ section {
       top: 88px;
     }
   }
+  .passwordEye {
+    position: absolute;
+    right: -5px;
+    top: 88px;
+  }
   .custom-input:focus + .custom-img {
     display: none;
   }

src/app/components/login/register/register.component.html

@@ -68,6 +68,7 @@
           id="password"
           name="password"
           #password="ngModel"
+          [type]="loginSerivce.passwordFieldType"
           placeholder="Password"
           class="custom-input"
           [(ngModel)]="registerData.password"
@@ -80,7 +81,11 @@
           alt=""
         />
         } @else {
-        <img class="custom-img" alt="" />
+        <img
+          class="passwordEye"
+          (click)="loginSerivce.togglePasswordVisibility()"
+          [src]="loginSerivce.passwordIcon"
+        />
         }
         <div class="error-msg">
           @if (!password.valid && password.touched) {
@@ -94,6 +99,7 @@
           id="passwordConfirm"
           name="passwordConfirm"
           #passwordConfirm="ngModel"
+          [type]="loginSerivce.passwordFieldType"
           placeholder="Confirm Password"
           class="custom-input"
           [(ngModel)]="registerData.passwordConfirm"
@@ -106,7 +112,11 @@
           alt=""
         />
         } @else {
-        <img class="custom-img" alt="" />
+        <img
+          class="passwordEyeConfirm"
+          (click)="loginSerivce.togglePasswordVisibility()"
+          [src]="loginSerivce.passwordIcon"
+        />
         }
         <div class="error-msg">
           @if (!passwordConfirm.valid && passwordConfirm.touched) {

src/app/components/login/register/register.component.scss

@@ -75,10 +75,20 @@ section {
     }
     &:nth-child(11) {
       position: absolute;
-      right: 0;
+      right: 0px;
       top: 262px;
     }
   }
+  .passwordEye {
+    position: absolute;
+    right: -5px;
+    top: 176px;
+  }
+  .passwordEyeConfirm {
+    position: absolute;
+    right: -5px;
+    top: 262px;
+  }
   .custom-input:focus + .custom-img {
     display: none;
   }

src/app/services/login.service.ts

@@ -24,6 +24,8 @@ import { User } from '../interfaces/user.interface';
 })
 export class LoginService {
   firestore: Firestore = inject(Firestore);
+  passwordFieldType: string = 'password';
+  passwordIcon: string = './assets/img/login/close-eye.svg';
   errorCode: string = '';
 
   constructor(
@@ -176,6 +178,19 @@ export class LoginService {
     window.location.reload();
   }
 
+  togglePasswordVisibility() {
+    this.passwordFieldType =
+      this.passwordFieldType === 'password' ? 'text' : 'password';
+    this.toggleIcon();
+  }
+
+  toggleIcon() {
+    this.passwordIcon =
+      this.passwordIcon === './../../../assets/img/login/close-eye.svg'
+        ? './../../../assets/img/login/open-eye.svg'
+        : './../../../assets/img/login/close-eye.svg';
+  }
+
   getUserIdInLocalStorage(userId: string) {
     localStorage.setItem('currentUserJOIN', JSON.stringify(userId));
   }

src/assets/img/login/close-eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#434343"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"/></svg>

src/assets/img/login/open-eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#434343"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>