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

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

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

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