diff options
Diffstat (limited to 'app/profile-settings/controllers')
| -rw-r--r-- | app/profile-settings/controllers/profile-settings-controller.html | 76 | ||||
| -rw-r--r-- | app/profile-settings/controllers/profile-settings-controller.js | 75 |
2 files changed, 151 insertions, 0 deletions
diff --git a/app/profile-settings/controllers/profile-settings-controller.html b/app/profile-settings/controllers/profile-settings-controller.html new file mode 100644 index 0000000..365cf7f --- /dev/null +++ b/app/profile-settings/controllers/profile-settings-controller.html @@ -0,0 +1,76 @@ + +<div class="row column"> + <div class="page-header"> + <h1>Profile settings</h1> + </div> +</div> +<div class="row column"> + <div class="column medium-12 large-5 xlarge-4"> + <section class="section"> + <div class="section-header"> + <h2 class="section-title">Profile information</h2> + </div> + <dl> + <dt class="label">Username</dt> + <dd>{{username}}</dd> + </dl> + </section> + </div> +</div> +<div class="row column"> + <div class="column medium-12 large-5 xlarge-4"> + <section class="section"> + <div class="section-header"> + <h2 class="section-title">Change password</h2> + </div> + <form name="form"> + <!-- Password --> + <div class="field-group-container"> + <label for="password">New password</label> + <p class="label__helper-text">Password must between <span class="nowrap">{{minPasswordLength}} – {{maxPasswordLength}}</span> characters</p> + <input id="password" + name="password" + type="password" + required + ng-minlength="minPasswordLength" + ng-maxlength="maxPasswordLength" + autocomplete="new-password" + ng-model="password" + password-visibility-toggle/> + <div ng-if="form.password.$invalid && form.password.$dirty" class="form__validation-message"> + <span ng-show="form.password.$error.required"> + Field is required</span> + <span ng-show="form.password.$error.minlength || form.password.$error.maxlength"> + Length must be between <span class="nowrap">{{minPasswordLength}} – {{maxPasswordLength}}</span> characters</span> + </div> + </div> + <!-- Password confirm --> + <div class="field-group-container"> + <label for="passwordConfirm">Confirm new password</label> + <input id="passwordConfirm" + name="passwordConfirm" + type="password" + required + autocomplete="new-password" + ng-model="passwordConfirm" + password-visibility-toggle + password-confirm + first-password="form.password.$modelValue"/> + <div ng-if="form.passwordConfirm.$invalid && form.passwordConfirm.$dirty" class="form__validation-message"> + <span ng-show="form.passwordConfirm.$error.required"> + Field is required</span> + <span ng-show="form.passwordConfirm.$error.passwordConfirm" + ng-hide="form.passwordConfirm.$error.required"> + Passwords do not match</span> + </div> + </div> + <!-- Form actions --> + <div class="field-group-container"> + <button class="btn btn-primary" type="submit" ng-click="onSubmit(form)"> + Change password + </button> + </div> + </form> + </section> + </div> +</div>
\ No newline at end of file diff --git a/app/profile-settings/controllers/profile-settings-controller.js b/app/profile-settings/controllers/profile-settings-controller.js new file mode 100644 index 0000000..404e055 --- /dev/null +++ b/app/profile-settings/controllers/profile-settings-controller.js @@ -0,0 +1,75 @@ +/** + * Controller for the profile settings page + * + * @module app/profile-settings/controllers/index + * @exports ProfileSettingsController + * @name ProfileSettingsController + */ + +window.angular && (function(angular) { + 'use strict'; + + angular.module('app.profileSettings') + .controller('profileSettingsController', [ + '$scope', 'APIUtils', 'dataService', 'toastService', + function($scope, APIUtils, dataService, toastService) { + $scope.username; + $scope.minPasswordLength; + $scope.maxPasswordLength; + $scope.password; + $scope.passwordConfirm; + + /** + * Make API call to update user password + * @param {string} password + */ + const updatePassword = function(password) { + $scope.loading = true; + APIUtils.updateUser($scope.username, null, password) + .then( + () => toastService.success( + 'Password has been updated successfully.')) + .catch((error) => { + console.log(JSON.stringify(error)); + toastService.error('Unable to update password.') + }) + .finally(() => { + $scope.password = ''; + $scope.passwordConfirm = ''; + $scope.form.$setPristine(); + $scope.form.$setUntouched(); + $scope.loading = false; + }) + }; + + /** + * API call to get account settings for min/max + * password length requirement + */ + const getAllUserAccountProperties = function() { + APIUtils.getAllUserAccountProperties().then((accountSettings) => { + $scope.minPasswordLength = accountSettings.MinPasswordLength; + $scope.maxPasswordLength = accountSettings.MaxPasswordLength; + }) + }; + + /** + * Callback after form submitted + */ + $scope.onSubmit = function(form) { + if (form.$valid) { + const password = form.password.$viewValue; + updatePassword(password); + } + }; + + /** + * Callback after view loaded + */ + $scope.$on('$viewContentLoaded', () => { + getAllUserAccountProperties(); + $scope.username = dataService.getUser(); + }); + } + ]); +})(angular); |
