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