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/directives/username-validator.js b/app/users/directives/username-validator.js
new file mode 100644
index 0000000..d8c5848
--- /dev/null
+++ b/app/users/directives/username-validator.js
@@ -0,0 +1,38 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ /**
+ * Username validator
+ *
+ * Checks if entered username is a duplicate
+ * Provide existingUsernames scope that should be an array of
+ * existing usernames
+ *
+ * <input username-validator existing-usernames="[]"/>
+ *
+ */
+ angular.module('app.users').directive('usernameValidator', function() {
+ return {
+ restrict: 'A', require: 'ngModel', scope: {existingUsernames: '='},
+ link: function(scope, element, attrs, controller) {
+ if (scope.existingUsernames === undefined) {
+ return;
+ }
+ controller.$validators.duplicateUsername =
+ (modelValue, viewValue) => {
+ const enteredUsername = modelValue || viewValue;
+ const matchedExisting = scope.existingUsernames.find(
+ (username) => username === enteredUsername);
+ if (matchedExisting) {
+ return false;
+ } else {
+ return true;
+ }
+ };
+ element.on('blur', () => {
+ controller.$validate();
+ });
+ }
+ }
+ });
+})(window.angular);