diff options
Diffstat (limited to 'app/users/controllers/user-accounts-modal-user.html')
| -rw-r--r-- | app/users/controllers/user-accounts-modal-user.html | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/app/users/controllers/user-accounts-modal-user.html b/app/users/controllers/user-accounts-modal-user.html new file mode 100644 index 0000000..7df5ea1 --- /dev/null +++ b/app/users/controllers/user-accounts-modal-user.html @@ -0,0 +1,149 @@ +<div class="uib-modal__content modal__local-users"> + <div class="modal-header"> + <h2 class="modal-title" id="dialog_label"> + {{ modalCtrl.user.new ? 'Add user' : 'Modify user' }} + </h2> + <button type="button" class="btn btn--close" ng-click="$dismiss()" aria-label="Close"> + <icon file="icon-close.svg" aria-hidden="true"></icon> + </button> + </div> + <form name="form"> + <div class="modal-body"> + <div class="row"> + <div class="column medium-6"> + <!-- Account Status --> + <fieldset class="field-group-container"> + <legend>Account Status</legend> + <label class="radio-label"> + <input type="radio" + name="accountStatus" + ng-value="true" + ng-model="modalCtrl.user.accountStatus" + ng-disabled="modalCtrl.user.isRoot"> + Enabled + </label> + <label class="radio-label"> + <input type="radio" + name="accountStatus1" + ng-value="false" + ng-model="modalCtrl.user.accountStatus" + ng-disabled="modalCtrl.user.isRoot"> + Disabled + </label> + </fieldset> + <!-- Username --> + <div class="field-group-container"> + <label for="username">Username</label> + <p class="label__helper-text">Cannot start with a number</p> + <p class="label__helper-text">No special characters except underscore</p> + <input id="username" + name="username" + type="text" + required + minlength="1" + maxlength="16" + ng-pattern="'^([a-zA-Z_][a-zA-Z0-9_]*)'" + ng-readonly="modalCtrl.user.isRoot" + ng-model="modalCtrl.user.username" + username-validator + existing-usernames="modalCtrl.existingUsernames"/> + <div ng-if="form.username.$invalid && form.username.$touched" class="form__validation-message"> + <span ng-show="form.username.$error.required"> + Field is required</span> + <span ng-show="form.username.$error.minlength || form.username.$error.maxlength"> + Length must be between <span class="nowrap">1 – 16</span> characters</span> + <span ng-show="form.username.$error.pattern"> + Invalid format</span> + <span ng-show="form.username.$error.duplicateUsername"> + Username already exists</span> + </div> + </div> + <!-- Privlege --> + <div class="field-group-container"> + <label for="privilege">Privilege</label> + <select id="privilege" + name="privilege" + required + ng-disabled="modalCtrl.user.isRoot" + ng-model="modalCtrl.user.privilege"> + <option ng-if="modalCtrl.user.new" + ng-selected="modalCtrl.user.new" + value="" + disabled> + Select an option + </option> + <option ng-value="role" + ng-repeat="role in modalCtrl.privilegeRoles"> + {{role}} + </option> + </select> + </div> + </div> + <div class="column medium-6"> + <!-- Password --> + <div class="field-group-container"> + <label for="password">User password</label> + <p class="label__helper-text">Password must between <span class="nowrap">{{modalCtrl.minPasswordLength}} – {{modalCtrl.maxPasswordLength}}</span> characters</p> + <input id="password" + name="password" + type="password" + ng-minlength="modalCtrl.minPasswordLength" + ng-maxlength="modalCtrl.maxPasswordLength" + autocomplete="new-password" + ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched" + ng-model="modalCtrl.user.password" + ng-click="form.password.$setTouched()" + placeholder="{{ + (modalCtrl.user.new || + form.password.$touched || + form.passwordConfirm.$touched) ? '' : '******'}}"/> + <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">{{modalCtrl.minPasswordLength}} – {{modalCtrl.maxPasswordLength}}</span> characters</span> + </div> + </div> + <!-- Password confirm --> + <div class="field-group-container"> + <label for="passwordConfirm">Confirm user password</label> + <input id="passwordConfirm" + name="passwordConfirm" + type="password" + autocomplete="new-password" + ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched" + ng-model="modalCtrl.user.passwordConfirm" + password-confirm + first-password="form.password.$modelValue" + ng-click="form.passwordConfirm.$setTouched()" + placeholder="{{( + modalCtrl.user.new || + form.password.$touched || + form.passwordConfirm.$touched) ? '' : '******'}}"/> + <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> + <span ng-show="form.passwordConfirm.$error.minlength || form.passwordConfirm.$error.maxlength"> + Length must be between <span class="nowrap">1 – 16</span> characters</span> + </div> + </div> + </div> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-secondary" ng-click="$dismiss()" type="button"> + Cancel + </button> + <button class="btn btn-primary" + type="submit" + ng-click="$close(form)" + ng-disabled="form.$invalid || form.$pristine" + ng-class="{'disabled': form.$invalid}"> + {{ modalCtrl.user.new ? 'Add user' : 'Save' }} + </button> + </div> + </form> +</div> |
