Update local user table to new design
This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common table actions (sort, select row)
are shared.
- Created new components directory to store shared components
- Add password-confirmation directive
- Remove some error handling from API utils so it can be
handled in the UI
TODO:
- Add show/hide toggle to password fields
- Enhance table component with icons
- Manual user unlock
- Batch table actions
- Role table
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I03c95874d2942a2450a5da2f1d2a8bb895aa1746
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>