| <div id="user-accounts"> |
| <div class="row column"> |
| <h1>Manage user account</h1> |
| <div class="column small-12 page-header"> |
| <h2 class="h4">Change password</h2> |
| </div> |
| </div> |
| <section class="row column" aria-label="change password form"> |
| <form class="user-manage__form" role="form" action=""> |
| <fieldset> |
| <legend aria-label="user manager" class="accessible-text">Change password form</legend> |
| <div class="row column"> |
| <label for="user-manage__current-password">Current password</label> |
| <input id="user-manage__current-password" type="password" ng-model="oldPassword" class="user-manage__current-password inline"/> |
| </div> |
| <div class="inline"> |
| <label for="user-manage__new-password">New password</label> |
| <div class="user-manage__input-wrapper inline"> |
| <input id="user-manage__new-password" type="{{showpassword ? 'text' : 'password'}}" ng-model="password" class="user-manage__new-password inline"/> |
| <button ng-model="showpassword" ng-click="togglePassword = !togglePassword; showpassword = !showpassword;" class="password-toggle"> |
| <span ng-hide="togglePassword">Show</span> |
| <span ng-show="togglePassword">Hide</span> |
| </button> |
| </div> |
| </div> |
| <div class="inline"> |
| <label for="user-manage__verify-password">Retype new password</label> |
| <div class="user-manage__input-wrapper inline"> |
| <input id="user-manage__verify-password" type="{{showpasswordVerify ? 'text' : 'password'}}" ng-model="passwordVerify" class="user-manage__verify-password inline"/> |
| <button ng-model="showpasswordVerify" ng-click="toggleVerify = !toggleVerify; showpasswordVerify = !showpasswordVerify;" class="password-toggle"> |
| <span ng-hide="toggleVerify">Show</span> |
| <span ng-show="toggleVerify">Hide</span> |
| </button> |
| </div> |
| </div> |
| </fieldset> |
| <div class="user-manage__submit-wrapper"> |
| <button class="btn-primary inline" ng-click="changePassword(oldPassword, password, passwordVerify)">Save change</button> |
| </div> |
| <p ng-class="'change-password__' + state" role="alert"> |
| {{state === 'error' ? errorMsg : ''}} |
| {{state === 'success' ? 'Success! User Password has been changed!' : ''}} |
| </p> |
| </form> |
| </section> |
| </div> |