commit 1132258413328f80cb8b2453dc4b3d24318bd3e5
author SANDHYA.JS <sandhya.j@tataelxsi.co.in> Thu Oct 12 16:23:38 2023 +0530
committer jssan <sandhya.j@tataelxsi.co.in> Wed Nov 08 09:46:56 2023 +0100
tree 978240fb2c8fbd9cdcfad9ada29c23786c6cc0e2
parent 382448fed3f9d4d4cf9ac614e1275208d18b752f

Fix Bug 2295: No eye-icon in NG-UI

	- Added Visibility function for password in login page

Change-Id: I1413806f7c1d32832f805d5952c7841ac8bed2ad
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>

src/app/login/LoginComponent.html

diff --git a/src/app/login/LoginComponent.html b/src/app/login/LoginComponent.html
index 296d51b..12c88f2 100644
--- a/src/app/login/LoginComponent.html
+++ b/src/app/login/LoginComponent.html
@@ -32,11 +32,11 @@
                 <div *ngIf="loginForm.controls['userName'].errors.required">{{'PAGE.LOGIN.USERNAMEVALIDMESSAGE' | translate}}</div>
             </div>
             <div class="wrap-input">
-                <input autocomplete="off" class="input-control" type="password" formControlName="password" placeholder="{{ 'PAGE.LOGIN.PASSWORD' | translate }}"
-                />
+                <input autocomplete="off" class="input-control" [type]="visiblePassword?'text':'password'" formControlName="password" placeholder="{{ 'PAGE.LOGIN.PASSWORD' | translate }} "/>
                 <span class="input-icon">
                     <i class="fa fa-lock" aria-hidden="true"></i>
                 </span>
+                <i *ngIf="loginForm.controls['password'].value" class="input-icon-eye" (click)="onShowPassword()" [ngClass]="visiblePassword?'fa fa-eye-slash':'fa fa-eye'"></i>
             </div>
             <div *ngIf="submitted && loginForm.controls['password'].errors" class="input-validation-msg">
                 <div *ngIf="loginForm.controls['password'].errors.required">{{'PAGE.LOGIN.PASSWORDVALIDMESSAGE' | translate}}</div>

src/app/login/LoginComponent.scss

diff --git a/src/app/login/LoginComponent.scss b/src/app/login/LoginComponent.scss
index dc1a51b..895fe22 100644
--- a/src/app/login/LoginComponent.scss
+++ b/src/app/login/LoginComponent.scss
@@ -101,6 +101,20 @@
           pointer-events: none;
           color: $gray-600;
         }
+        .input-icon-eye {
+          @include font(null, 13px, null);
+          @include flexbox(flex, null, null, null, center, null);
+          @include roundedCorners(25);
+          @include position_value(absolute, null, null, 0, 0);
+          left: 245px;
+          top: 4px;
+          @include transition(all, 0.5s, null, null);
+          color: $gray-600;
+          cursor: pointer;
+        }
+        input::-ms-reveal, input::-ms-clear {
+          display: none;
+      }
       }
       .submit-btn {
         @include background(null, $white, null, null, null);

src/app/login/LoginComponent.ts

diff --git a/src/app/login/LoginComponent.ts b/src/app/login/LoginComponent.ts
index 53f6f98..45573e2 100644
--- a/src/app/login/LoginComponent.ts
+++ b/src/app/login/LoginComponent.ts
@@ -126,6 +126,9 @@
     /** contains the passwordIn observable value @public */
     public changePassword: boolean;
 
+    /** To show the visiblity of password @public */
+    public visiblePassword: boolean;
+
     /** Utilizes auth service for any auth operations @private */
     private authService: AuthenticationService;
 
@@ -284,6 +287,11 @@
         }
     }
 
+    /** To Show or Hide the Password @public */
+    public onShowPassword(): void {
+        this.visiblePassword = !this.visiblePassword;
+    }
+
     /** To display password expiry Toaster with required data @public */
     public passwordExpiryToaster(): void {
         if ((this.accountNoOfDays === '1' && this.passwordNoOfDays === '1') ||