1<div class="uib-modal__content modal__local-users"> 2 <div class="modal-header"> 3 <h2 class="modal-title" id="dialog_label"> 4 {{ modalCtrl.user.new ? 'Add user' : 'Modify user' }} 5 </h2> 6 <button type="button" class="btn btn--close" ng-click="$dismiss()" aria-label="Close"> 7 <icon file="icon-close.svg" aria-hidden="true"></icon> 8 </button> 9 </div> 10 <form name="form"> 11 <div class="modal-body"> 12 <!-- Manual unlock --> 13 <div class="row" ng-if="modalCtrl.user.locked && !modalCtrl.automaticLockout"> 14 <div class="column medium-9"> 15 <div class="notification-banner" 16 aria-live="polite" 17 ng-class="{'notification-banner--warning': !form.lock.$dirty, 18 'notification-banner--information': form.lock.$dirty}"> 19 <icon file="icon-warning.svg" aria-hidden="true" ng-if="!form.lock.$dirty"></icon> 20 <p class="notification-banner__text" ng-if="!form.lock.$dirty">Account locked</p> 21 <p class="notification-banner__text" ng-if="form.lock.$dirty">Click "Save" to unlock account</p> 22 </div> 23 </div> 24 <div class="column medium-3"> 25 <input 26 type="hidden" 27 name="lock" 28 ng-model="modalCtrl.manualUnlockProperty" 29 value="false"> 30 <button class="btn btn-primary" 31 type="button" 32 ng-click="form.lock.$setDirty()" 33 ng-disabled="form.lock.$dirty">Unlock</button> 34 </div> 35 </div> 36 <div class="row"> 37 <div class="column medium-6"> 38 <!-- Account Status --> 39 <fieldset class="field-group-container"> 40 <legend>Account Status</legend> 41 <label class="radio-label"> 42 <input type="radio" 43 name="accountStatus" 44 ng-value="true" 45 ng-model="modalCtrl.user.accountStatus" 46 ng-disabled="modalCtrl.user.isRoot"> 47 Enabled 48 </label> 49 <label class="radio-label"> 50 <input type="radio" 51 name="accountStatus1" 52 ng-value="false" 53 ng-model="modalCtrl.user.accountStatus" 54 ng-disabled="modalCtrl.user.isRoot"> 55 Disabled 56 </label> 57 </fieldset> 58 <!-- Username --> 59 <div class="field-group-container"> 60 <label for="username">Username</label> 61 <p class="label__helper-text">Cannot start with a number</p> 62 <p class="label__helper-text">No special characters except underscore</p> 63 <input id="username" 64 name="username" 65 type="text" 66 required 67 minlength="1" 68 maxlength="16" 69 ng-pattern="'^([a-zA-Z_][a-zA-Z0-9_]*)'" 70 ng-readonly="modalCtrl.user.isRoot" 71 ng-model="modalCtrl.user.username" 72 username-validator 73 existing-usernames="modalCtrl.existingUsernames"/> 74 <div ng-if="form.username.$invalid && form.username.$touched" class="form__validation-message"> 75 <span ng-show="form.username.$error.required"> 76 Field is required</span> 77 <span ng-show="form.username.$error.minlength || form.username.$error.maxlength"> 78 Length must be between <span class="nowrap">1 – 16</span> characters</span> 79 <span ng-show="form.username.$error.pattern"> 80 Invalid format</span> 81 <span ng-show="form.username.$error.duplicateUsername"> 82 Username already exists</span> 83 </div> 84 </div> 85 <!-- Privlege --> 86 <div class="field-group-container"> 87 <label for="privilege">Privilege</label> 88 <select id="privilege" 89 name="privilege" 90 required 91 ng-disabled="modalCtrl.user.isRoot" 92 ng-model="modalCtrl.user.privilege"> 93 <option ng-if="modalCtrl.user.new" 94 ng-selected="modalCtrl.user.new" 95 value="" 96 disabled> 97 Select an option 98 </option> 99 <option ng-value="role" 100 ng-repeat="role in modalCtrl.privilegeRoles"> 101 {{role}} 102 </option> 103 </select> 104 </div> 105 </div> 106 <div class="column medium-6"> 107 <!-- Password --> 108 <div class="field-group-container"> 109 <label for="password">User password</label> 110 <p class="label__helper-text">Password must between <span class="nowrap">{{modalCtrl.minPasswordLength}} – {{modalCtrl.maxPasswordLength}}</span> characters</p> 111 <input id="password" 112 name="password" 113 type="password" 114 ng-minlength="modalCtrl.minPasswordLength" 115 ng-maxlength="modalCtrl.maxPasswordLength" 116 autocomplete="new-password" 117 ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched" 118 ng-model="modalCtrl.user.password" 119 password-visibility-toggle 120 ng-click="form.password.$setTouched()" 121 placeholder="{{ 122 (modalCtrl.user.new || 123 form.password.$touched || 124 form.passwordConfirm.$touched) ? '' : '******'}}"/> 125 <div ng-if="form.password.$invalid && form.password.$dirty" class="form__validation-message"> 126 <span ng-show="form.password.$error.required"> 127 Field is required</span> 128 <span ng-show="form.password.$error.minlength || form.password.$error.maxlength"> 129 Length must be between <span class="nowrap">{{modalCtrl.minPasswordLength}} – {{modalCtrl.maxPasswordLength}}</span> characters</span> 130 </div> 131 </div> 132 <!-- Password confirm --> 133 <div class="field-group-container"> 134 <label for="passwordConfirm">Confirm user password</label> 135 <input id="passwordConfirm" 136 name="passwordConfirm" 137 type="password" 138 autocomplete="new-password" 139 ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched" 140 ng-model="modalCtrl.user.passwordConfirm" 141 password-visibility-toggle 142 password-confirm 143 first-password="form.password.$modelValue" 144 ng-click="form.passwordConfirm.$setTouched()" 145 placeholder="{{( 146 modalCtrl.user.new || 147 form.password.$touched || 148 form.passwordConfirm.$touched) ? '' : '******'}}"/> 149 <div ng-if="form.passwordConfirm.$invalid && form.passwordConfirm.$dirty" class="form__validation-message"> 150 <span ng-show="form.passwordConfirm.$error.required"> 151 Field is required</span> 152 <span ng-show="form.passwordConfirm.$error.passwordConfirm" 153 ng-hide="form.passwordConfirm.$error.required"> 154 Passwords do not match</span> 155 <span ng-show="form.passwordConfirm.$error.minlength || form.passwordConfirm.$error.maxlength"> 156 Length must be between <span class="nowrap">1 – 16</span> characters</span> 157 </div> 158 </div> 159 </div> 160 </div> 161 </div> 162 <div class="modal-footer"> 163 <button class="btn btn-secondary" ng-click="$dismiss()" type="button"> 164 Cancel 165 </button> 166 <button class="btn btn-primary" 167 type="submit" 168 ng-click="$close(form)" 169 ng-disabled="form.$invalid || form.$pristine" 170 ng-class="{'disabled': form.$invalid}"> 171 {{ modalCtrl.user.new ? 'Add user' : 'Save' }} 172 </button> 173 </div> 174 </form> 175</div> 176
