From 8d7aa24f70298a654413fce1db906253cdce65fb Mon Sep 17 00:00:00 2001
From: Arya Khochare <aryakhochare@gmail.com>
Date: Sun, 18 Jan 2026 22:22:45 +0530
Subject: [PATCH 1/2] add eye icon to password field in login

---
 .../password/log-in-password.component.html   | 22 ++++++++++++----
 .../password/log-in-password.component.scss   | 25 ++++++++++++++++++-
 .../password/log-in-password.component.ts     | 22 +++++++++++-----
 3 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html
index b85752110ff..df5246c3129 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -10,14 +10,26 @@
     required
     type="email"
     [attr.data-test]="'email' | dsBrowserOnly">
-  <input [attr.aria-label]="'login.form.password' |translate"
+ <div class="password-wrapper position-relative">
+  <input
+    [attr.aria-label]="'login.form.password' | translate"
     autocomplete="current-password"
-    class="form-control form-control-lg position-relative mb-3"
-    placeholder="{{'login.form.password' | translate}}"
+    class="form-control form-control-lg position-relative mb-3 pe-5"
+    placeholder="{{ 'login.form.password' | translate }}"
     formControlName="password"
     required
-    type="password"
-    [attr.data-test]="'password' | dsBrowserOnly">
+    [type]="showPassword ? 'text' : 'password'"
+    [attr.data-test]="'password' | dsBrowserOnly"
+  />
+  <button
+    type="button"
+    class="password-toggle"
+    (click)="togglePasswordVisibility()"
+    [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'"
+  >
+    <i class="fa fa-fw" [ngClass]="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
+  </button>
+</div>
   @if ((error | async) && hasError) {
     <div class="alert alert-danger" role="alert"
     @fadeOut>{{ (error | async) | translate }}</div>
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.scss b/src/app/shared/log-in/methods/password/log-in-password.component.scss
index 955252b51e9..b89449bf6e2 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.scss
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.scss
@@ -1,12 +1,14 @@
 .form-login .form-control:focus {
   z-index: 2;
 }
+
 .form-login input[type="email"] {
   margin-bottom: -1px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.form-login input[type="password"] {
+
+.form-login .password-wrapper .form-control {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -15,3 +17,24 @@
   white-space: normal;
   padding: .25rem .75rem;
 }
+
+.password-toggle {
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: #6c757d;
+  z-index: 5;
+
+  &:hover {
+    color: #495057;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.ts b/src/app/shared/log-in/methods/password/log-in-password.component.ts
index ac47f8f9295..e566c5e9413 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.ts
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
 import {
   Component,
   Inject,
@@ -67,6 +67,7 @@ import { BrowserOnlyPipe } from '../../../utils/browser-only.pipe';
     ReactiveFormsModule,
     RouterLink,
     TranslateModule,
+    NgClass,
   ],
 })
 export class LogInPasswordComponent implements OnInit {
@@ -122,6 +123,11 @@ export class LogInPasswordComponent implements OnInit {
    */
   canShowDivider$: Observable<boolean>;
 
+  /**
+   * Has password visibility.
+   * @type {boolean}
+   */
+  public showPassword = false;
 
   constructor(
     @Inject('authMethodProvider') public injectedAuthMethodModel: AuthMethod,
@@ -140,7 +146,6 @@ export class LogInPasswordComponent implements OnInit {
    * @method ngOnInit
    */
   public ngOnInit() {
-
     // set formGroup
     this.form = this.formBuilder.group({
       email: ['', Validators.required],
@@ -150,10 +155,10 @@ export class LogInPasswordComponent implements OnInit {
     // set error
     this.error = this.store.pipe(select(
       getAuthenticationError),
-    map((error) => {
-      this.hasError = (isNotEmpty(error));
-      return error;
-    }),
+      map((error) => {
+        this.hasError = (isNotEmpty(error));
+        return error;
+      }),
     );
 
     // set error
@@ -187,6 +192,11 @@ export class LogInPasswordComponent implements OnInit {
     return getForgotPasswordRoute();
   }
 
+  togglePasswordVisibility(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+
   /**
    * Reset error or message.
    */

From 93e5419622b71f634b7c982f15fd068edfd9eaf1 Mon Sep 17 00:00:00 2001
From: Arya Khochare <aryakhochare@gmail.com>
Date: Sun, 18 Jan 2026 23:04:00 +0530
Subject: [PATCH 2/2] lint errors fix

---
 .../methods/password/log-in-password.component.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.ts b/src/app/shared/log-in/methods/password/log-in-password.component.ts
index e566c5e9413..c7c691d07bf 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.ts
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.ts
@@ -1,4 +1,7 @@
-import { AsyncPipe, NgClass } from '@angular/common';
+import {
+  AsyncPipe,
+  NgClass,
+} from '@angular/common';
 import {
   Component,
   Inject,
@@ -64,10 +67,10 @@ import { BrowserOnlyPipe } from '../../../utils/browser-only.pipe';
     BrowserOnlyPipe,
     BtnDisabledDirective,
     FormsModule,
+    NgClass,
     ReactiveFormsModule,
     RouterLink,
     TranslateModule,
-    NgClass,
   ],
 })
 export class LogInPasswordComponent implements OnInit {
@@ -155,10 +158,10 @@ export class LogInPasswordComponent implements OnInit {
     // set error
     this.error = this.store.pipe(select(
       getAuthenticationError),
-      map((error) => {
-        this.hasError = (isNotEmpty(error));
-        return error;
-      }),
+    map((error) => {
+      this.hasError = (isNotEmpty(error));
+      return error;
+    }),
     );
 
     // set error