Added eye icon to password field in login

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>

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

src/app/shared/log-in/methods/password/log-in-password.component.ts

@@ -1,4 +1,7 @@
-import { AsyncPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  NgClass,
+} from '@angular/common';
 import {
   Component,
   Inject,
@@ -64,6 +67,7 @@ import { BrowserOnlyPipe } from '../../../utils/browser-only.pipe';
     BrowserOnlyPipe,
     BtnDisabledDirective,
     FormsModule,
+    NgClass,
     ReactiveFormsModule,
     RouterLink,
     TranslateModule,
@@ -122,6 +126,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 +149,6 @@ export class LogInPasswordComponent implements OnInit {
    * @method ngOnInit
    */
   public ngOnInit() {
-
     // set formGroup
     this.form = this.formBuilder.group({
       email: ['', Validators.required],
@@ -187,6 +195,11 @@ export class LogInPasswordComponent implements OnInit {
     return getForgotPasswordRoute();
   }
 
+  togglePasswordVisibility(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+
   /**
    * Reset error or message.
    */