Add password visibility toggles

A simple button to allow toggling password visibility at the sign-in form. Because life's too short to waste time re-typing passwords.
meanjs · Sep 17, 2015 · 317081b · 317081b
1 parent 3e69385
commit 317081b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/modules/users/client/views/authentication/signin.client.view.html b/modules/users/client/views/authentication/signin.client.view.html
@@ -12,7 +12,14 @@ <h3 class="col-md-12 text-center">Or with your account</h3>
         </div>
         <div class="form-group" show-errors>
           <label for="password">Password</label>
-          <input type="password" id="password" name="password" class="form-control" ng-model="credentials.password" placeholder="Password" required>
+          <div class="input-group">
+            <input type="{{ showPassword ? 'text' : 'password' }}" id="password" name="password" class="form-control" ng-model="credentials.password" placeholder="Password" required>
+            <span class="input-group-btn">
+              <button class="btn btn-default" type="button" ng-click="showPassword=!showPassword" aria-label="Toggle password visibility">
+                <i class="glyphicon" ng-class="{'glyphicon-eye-open': !showPassword, 'glyphicon-eye-close': showPassword}"></i>
+              </button>
+            </span>
+          </div>
           <div ng-messages="userForm.password.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Password is required.</p>
           </div>

diff --git a/modules/users/client/views/authentication/signup.client.view.html b/modules/users/client/views/authentication/signup.client.view.html
@@ -34,7 +34,14 @@ <h3 class="col-md-12 text-center">Or sign up using your email</h3>
         </div>
         <div class="form-group" show-errors>
           <label for="password">Password</label>
-            <input type="password" id="password" name="password" class="form-control" ng-model="credentials.password" placeholder="Password" popover="{{popoverMsg}}" popover-trigger="focus" password-validator required>
+          <div class="input-group">
+            <input type="{{ showPassword ? 'text' : 'password' }}" id="password" name="password" class="form-control" ng-model="credentials.password" placeholder="Password" popover="{{popoverMsg}}" popover-trigger="focus" password-validator required>
+            <span class="input-group-btn">
+              <button class="btn btn-default" type="button" ng-click="showPassword=!showPassword" aria-label="Toggle password visibility">
+                <i class="glyphicon" ng-class="{'glyphicon-eye-open': !showPassword, 'glyphicon-eye-close': showPassword}"></i>
+              </button>
+            </span>
+          </div>
           <div ng-messages="userForm.password.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Password is required.</p>
             <div ng-repeat="passwordError in passwordErrors">

diff --git a/modules/users/client/views/password/reset-password.client.view.html b/modules/users/client/views/password/reset-password.client.view.html
@@ -5,7 +5,14 @@ <h3 class="col-md-12 text-center">Reset your password</h3>
       <fieldset>
         <div class="form-group" show-errors>
           <label for="newPassword">New Password</label>
-          <input type="password" id="newPassword" name="newPassword" class="form-control" ng-model="passwordDetails.newPassword" placeholder="New Password" autocomplete="new-password" popover="{{popoverMsg}}" popover-trigger="focus" popover-placement="top" password-validator required>
+          <div class="input-group">
+            <input type="{{ showPassword ? 'text' : 'password' }}" id="newPassword" name="newPassword" class="form-control" ng-model="passwordDetails.newPassword" placeholder="New Password" autocomplete="new-password" popover="{{popoverMsg}}" popover-trigger="focus" popover-placement="top" password-validator required>
+            <span class="input-group-btn">
+              <button class="btn btn-default" type="button" ng-click="showPassword=!showPassword" aria-label="Toggle password visibility">
+                <i class="glyphicon" ng-class="{'glyphicon-eye-open': !showPassword, 'glyphicon-eye-close': showPassword}"></i>
+              </button>
+            </span>
+          </div>
           <div ng-messages="resetPasswordForm.newPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Enter a new password.</p>
             <div ng-repeat="passwordError in passwordErrors">
@@ -15,7 +22,7 @@ <h3 class="col-md-12 text-center">Reset your password</h3>
         </div>
         <div class="form-group" show-errors>
           <label for="verifyPassword">Verify Password</label>
-          <input type="password" id="verifyPassword" name="verifyPassword" class="form-control" ng-model="passwordDetails.verifyPassword" placeholder="Verify Password" password-verify="passwordDetails.newPassword" required>
+          <input type="{{ showPassword ? 'text' : 'password' }}" id="verifyPassword" name="verifyPassword" class="form-control" ng-model="passwordDetails.verifyPassword" placeholder="Verify Password" password-verify="passwordDetails.newPassword" required>
           <div ng-messages="resetPasswordForm.verifyPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Enter the password again to verify.</p>
             <p class="help-block error-text" ng-show=resetPasswordForm.verifyPassword.$error.passwordVerify>Passwords do not match.</p>

diff --git a/modules/users/client/views/settings/change-password.client.view.html b/modules/users/client/views/settings/change-password.client.view.html
@@ -4,14 +4,21 @@
       <fieldset>
         <div class="form-group" show-errors>
           <label for="currentPassword">Current Password</label>
-          <input type="password" id="currentPassword" name="currentPassword" class="form-control" ng-model="passwordDetails.currentPassword" placeholder="Current Password" required>
+          <div class="input-group">
+            <input type="{{ showPassword ? 'text' : 'password' }}" id="currentPassword" name="currentPassword" class="form-control" ng-model="passwordDetails.currentPassword" placeholder="Current Password" required>
+            <span class="input-group-btn">
+              <button class="btn btn-default" type="button" ng-click="showPassword=!showPassword" aria-label="Toggle password visibility">
+                <i class="glyphicon" ng-class="{'glyphicon-eye-open': !showPassword, 'glyphicon-eye-close': showPassword}"></i>
+              </button>
+            </span>
+          </div>
           <div ng-messages="passwordForm.currentPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Your current password is required.</p>
           </div>
         </div>
         <div class="form-group" show-errors>
           <label for="newPassword">New Password</label>
-          <input type="password" id="newPassword" name="newPassword" class="form-control" ng-model="passwordDetails.newPassword" placeholder="New Password" popover="{{popoverMsg}}" popover-trigger="focus" password-validator required>
+          <input type="{{ showPassword ? 'text' : 'password' }}" id="newPassword" name="newPassword" class="form-control" ng-model="passwordDetails.newPassword" placeholder="New Password" popover="{{popoverMsg}}" popover-trigger="focus" password-validator required>
           <div ng-messages="passwordForm.newPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Enter a new password.</p>
             <div ng-repeat="passwordError in passwordErrors">
@@ -21,7 +28,7 @@
         </div>
         <div class="form-group" show-errors>
           <label for="verifyPassword">Verify Password</label>
-          <input type="password" id="verifyPassword" name="verifyPassword" class="form-control" ng-model="passwordDetails.verifyPassword" placeholder="Verify Password" password-verify="passwordDetails.newPassword" required>
+          <input type="{{ showPassword ? 'text' : 'password' }}" id="verifyPassword" name="verifyPassword" class="form-control" ng-model="passwordDetails.verifyPassword" placeholder="Verify Password" password-verify="passwordDetails.newPassword" required>
           <div ng-messages="passwordForm.verifyPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Verify your new password.</p>
             <p class="help-block error-text" ng-show=passwordForm.verifyPassword.$error.passwordVerify>Passwords do not match.</p>