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

1 files changed, 42 insertions, 0 deletions

diff --git a/app/common/directives/password-confirmation.js b/app/common/directives/password-confirmation.js
new file mode 100644
index 0000000..253a6a6
--- /dev/null
+++ b/app/common/directives/password-confirmation.js
@@ -0,0 +1,42 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * Password confirmation validator
+   *
+   * To use, add attribute directive to password confirmation input field
+   * Also include attribute 'first-password' with value set to first password
+   * to check against
+   *
+   * <input password-confirmation first-password="ctrl.password"
+   * name="passwordConfirm">
+   *
+   */
+  angular.module('app.common.directives')
+      .directive('passwordConfirm', function() {
+        return {
+          restrict: 'A',
+          require: 'ngModel',
+          scope: {firstPassword: '='},
+          link: function(scope, element, attrs, controller) {
+            if (controller === undefined) {
+              return;
+            }
+            controller.$validators.passwordConfirm =
+                (modelValue, viewValue) => {
+                  const firstPassword =
+                      scope.firstPassword ? scope.firstPassword : '';
+                  const secondPassword = modelValue || viewValue || '';
+                  if (firstPassword == secondPassword) {
+                    return true;
+                  } else {
+                    return false;
+                  }
+                };
+            element.on('keyup', () => {
+              controller.$validate();
+            });
+          }
+        };
+      });
+})(window.angular);