From: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
Date: Thu, 12 Oct 2023 10:53:38 +0000 (+0530)
Subject: Fix Bug 2295: No eye-icon in NG-UI
X-Git-Tag: release-v15.0-start~2
X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FNG-UI.git;a=commitdiff_plain;h=1132258413328f80cb8b2453dc4b3d24318bd3e5

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

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 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
                 <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>
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);
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 @@ export class LoginComponent implements OnInit {
     /** 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 @@ export class LoginComponent implements OnInit {
         }
     }
 
+    /** 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') ||