From fb3a31a4fd61c6cde4e5a0e0d15746e2f798c5d9 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 10 Aug 2022 16:07:24 +1200
Subject: [PATCH] feat(login): allow-show-hide-password-in-login-screen EE-3885
 (#7433)

* feat(login): allow show/hide password EE-3885
---
 app/assets/css/app.css                     |  8 +++++
 app/portainer/views/auth/auth.html         | 35 +++++++++++++++-------
 app/portainer/views/auth/authController.js | 12 ++++++++
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index f56036ede..62a96a09a 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -881,3 +881,11 @@ json-tree .branch-preview {
   color: var(--text-link-hover-color);
   text-decoration-line: underline;
 }
+
+input[style*='background-image: url("data:image/png'] + [data-cy='auth-passwordInputToggle'] {
+  right: 20px;
+}
+
+input[style*='background-image: url("data:image/png'] {
+  padding-right: 60px;
+}
diff --git a/app/portainer/views/auth/auth.html b/app/portainer/views/auth/auth.html
index 53072e74c..5a39fcaf2 100644
--- a/app/portainer/views/auth/auth.html
+++ b/app/portainer/views/auth/auth.html
@@ -70,18 +70,33 @@
             <!-- password input -->
             <div ng-if="ctrl.state.showStandardLogin">
               <div class="pb-2">Password</div>
-              <input
-                id="password"
-                type="password"
-                class="form-control"
-                name="password"
-                ng-model="ctrl.formValues.Password"
-                data-cy="auth-passwordInput"
-                placeholder="Enter your password"
-              />
+              <div class="relative">
+                <input
+                  id="password"
+                  ng-attr-type="{{ ctrl.state.passwordInputType }}"
+                  class="form-control pr-10"
+                  name="password"
+                  ng-model="ctrl.formValues.Password"
+                  autocomplete="off"
+                  data-cy="auth-passwordInput"
+                  placeholder="Enter your password"
+                />
+                <button
+                  data-cy="auth-passwordInputToggle"
+                  type="button"
+                  ng-click="ctrl.toggleShowPassword()"
+                  class="absolute top-0 right-0 h-[34px] w-[50px] border-none flex justify-center items-center bg-transparent"
+                  tooltip-append-to-body="true"
+                  tooltip-placement="top"
+                  tooltip-class="portainer-tooltip"
+                  uib-tooltip="{{ ctrl.state.passwordInputType === 'password' ? 'Show password' : 'Hide password' }}"
+                >
+                  <pr-icon icon="ctrl.state.passwordInputType === 'password' ? 'eye-off' : 'eye'" feather="true" size="'md'"></pr-icon>
+                </button>
+              </div>
             </div>
 
-            <div class="form-group" ng-if="ctrl.state.showStandardLogin">
+            <div class="form-group overflow-auto" ng-if="ctrl.state.showStandardLogin">
               <!-- login button -->
               <div class="col-sm-12 d-flex">
                 <button
diff --git a/app/portainer/views/auth/authController.js b/app/portainer/views/auth/authController.js
index fd291f4c3..56e7ac9a3 100644
--- a/app/portainer/views/auth/authController.js
+++ b/app/portainer/views/auth/authController.js
@@ -41,6 +41,7 @@ class AuthenticationController {
       Password: '',
     };
     this.state = {
+      passwordInputType: 'password',
       showOAuthLogin: false,
       showStandardLogin: false,
       AuthenticationError: '',
@@ -65,6 +66,16 @@ class AuthenticationController {
    * UTILS FUNCTIONS SECTION
    */
 
+  toggleShowPassword() {
+    this.state.passwordInputType = this.state.passwordInputType === 'text' ? 'password' : 'text';
+  }
+
+  // set the password input type to password, so that browser autofills don't treat the input as text
+  setPasswordInputType(inputType) {
+    this.state.passwordInputType = inputType;
+    document.getElementById('password').setAttribute('type', inputType);
+  }
+
   logout(error) {
     this.Authentication.logout();
     this.state.loginInProgress = false;
@@ -185,6 +196,7 @@ class AuthenticationController {
   }
 
   authenticateUser() {
+    this.setPasswordInputType('password');
     return this.$async(this.authenticateUserAsync);
   }