frontend/src/views/web/change-password.html
<section class="ev-md-container-ui text-center">
<div class="row">
<div class="ev-md-container ev-card-panel">
<div class="col s12 m6 offset-m3">
<!-- <div class=" ev-card-panel ev-z-depth-5"> -->
<div class="ev-md-container ev-card-body change-password-card">
<div class="pass-title">Change Password</div>
<form name="profileForm" ng-submit="profile.changePassword(profileForm.$valid)" novalidate>
<div class="input-field align-left">
<input id="old_password" name="old_password" type="{{canShowOldPassword ? 'text' : 'password'}}" class="text-dark-black dark-autofill w-400" ng-model="profile.user.old_password" ng-minlength="8" required focus-if>
<span class="form-icon form-icon-dark" ng-click="profile.toggleOldPasswordVisibility()">
<i ng-if="!canShowOldPassword" class="fa fa-eye pointer"></i>
<i ng-if="canShowOldPassword" class="fa fa-eye-slash pointer"></i>
</span>
<label for="old_password">Old Password*</label>
<div class="wrn-msg text-highlight" ng-messages="profileForm.old_password.$error" ng-if="profileForm.old_password.$touched || profileForm.$submitted">
<p ng-message="minlength">password is less than 8 characters.</p>
<p ng-message="required">Old password is required</p>
</div>
</div>
<div class="input-field align-left">
<input id="new_password1" name="new_password1" type="{{canShowNewPassword ? 'text' : 'password'}}" class="text-dark-black dark-autofill w-400" ng-model="profile.user.new_password1" ng-minlength="8" required match="profile.user.old_password">
<span class="form-icon form-icon-dark" ng-click="profile.toggleNewPasswordVisibility()">
<i ng-if="!canShowNewPassword" class="fa fa-eye pointer"></i>
<i ng-if="canShowNewPassword" class="fa fa-eye-slash pointer"></i>
</span>
<label for="new_password1">New Password*</label>
<div class="wrn-msg text-highlight" ng-messages="profileForm.new_password1.$error" ng-if="profileForm.new_password1.$touched || profileForm.$submitted">
<p ng-message="minlength">password is less than 8 characters.</p>
<p ng-message="required">New password is required</p>
<p ng-message="match">Old password cannot be same as New Password</p>
</div>
</div>
<div class="input-field align-left">
<input id="new_password2" name="new_password2" type="{{canShowNewConfirmPassword ? 'text' : 'password'}}" class="text-dark-black dark-autofill w-400" ng-model="profile.user.new_password2" ng-minlength="8" compare-to="profile.user.new_password1" required>
<span class="form-icon form-icon-dark" ng-click="profile.toggleNewConfirmVisibility()">
<i ng-if="!canShowNewConfirmPassword" class="fa fa-eye pointer"></i>
<i ng-if="canShowNewConfirmPassword" class="fa fa-eye-slash pointer"></i>
</span>
<label for="new_password2">New Password (Again)*</label>
<div class="wrn-msg text-highlight" ng-messages="profileForm.new_password2.$error" ng-if="profileForm.new_password2.$touched || profileForm.$submitted">
<p ng-message="compareTo">Password do not match</p>
<p ng-message="minlength">password is less than 8 characters.</p>
<p ng-message="required">Confirm new password is required</p>
</div>
</div>
<div class="align-left reg-control">
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" type="submit" value="Submit">Submit</button>
</div>
<div ng-if="profile.isFormError" class="wrn-msg text-highlight align-right"> {{profile.FormError}}</div>
</form>
</div>
</div>
<!-- </div> -->
</div>
</div>
</section>