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-settings.html b/app/users/controllers/user-accounts-modal-settings.html
new file mode 100644
index 0000000..d48809f
--- /dev/null
+++ b/app/users/controllers/user-accounts-modal-settings.html
@@ -0,0 +1,85 @@
+<div class="uib-modal__content modal__local-users-settings">
+ <div class="modal-header">
+ <h2 class="modal-title" id="dialog_label">Account policy settings</h2>
+ <button type="button" class="btn btn--close float-right" 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">
+ <!-- Max login attempts -->
+ <div class="field-group-container">
+ <label for="maxLogin">Max failed login attempts</label>
+ <p class="label__helper-text">Value must be between <span class="nowrap">0 – 65535</span></p>
+ <input id="maxLogin"
+ name="maxLogin"
+ type="number"
+ required
+ min="0"
+ max="65535"
+ ng-model="modalCtrl.settings.maxLogin" />
+ <div ng-if="form.maxLogin.$invalid && form.maxLogin.$dirty" class="form__validation-message">
+ <span ng-show="form.maxLogin.$error.required">
+ Field is required</span>
+ <span ng-show="form.maxLogin.$error.min || form.maxLogin.$error.max">
+ Value must be between <span class="nowrap">1 - 65535</span></span>
+ </div>
+ </div>
+ </div>
+ <div class="column medium-6">
+ <!-- User unlock method -->
+ <fieldset class="field-group-container">
+ <legend>User unlock method</legend>
+ <!-- Automatic radio option -->
+ <label class="radio-label">
+ <input name="lockoutMethod"
+ type="radio"
+ ng-value="1"
+ ng-model="modalCtrl.settings.lockoutMethod">
+ Automatic after timeout
+ </label>
+ <!-- Automatic timeout value -->
+ <div class="field-group-container radio-option__input-field-group">
+ <label for="lockoutMethod1">Timeout duration (seconds)</label>
+ <p class="label__helper-text" id="lockoutMethod1Helper">Must be at least 1</p>
+ <input id="lockoutMethod1"
+ name="timeoutDuration"
+ type="number"
+ aria-describedby="lockoutMethod1Helper"
+ ng-min="modalCtrl.settings.lockoutMethod ? 1 : null"
+ ng-disabled="!modalCtrl.settings.lockoutMethod"
+ ng-required="modalCtrl.settings.lockoutMethod"
+ ng-model="modalCtrl.settings.timeoutDuration"/>
+ <div ng-if="form.timeoutDuration.$invalid && form.timeoutDuration.$touched" class="form__validation-message">
+ <span ng-show="form.timeoutDuration.$error.required">
+ Field is required</span>
+ <span ng-show="form.timeoutDuration.$error.min">
+ Value must be at least 1</span>
+ </div>
+ </div>
+ <!-- Manual radio option -->
+ <label class="radio-label">
+ <input name="lockoutMethod"
+ type="radio"
+ ng-value="0"
+ ng-model="modalCtrl.settings.lockoutMethod">
+ Manual
+ </label>
+ </fieldset>
+ </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}">
+ Save
+ </button>
+ </div>
+ </form>
+</div>