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, 25 insertions, 69 deletions

diff --git a/app/users/styles/user-accounts.scss b/app/users/styles/user-accounts.scss
index a91bca6..9658b90 100644
--- a/app/users/styles/user-accounts.scss
+++ b/app/users/styles/user-accounts.scss
@@ -1,75 +1,31 @@
-.acnt-prop-header {
-  width: 100%;
-  border-bottom: 2px solid $border-color-01;
-  margin: 0px 0px 15px;
+.local-users__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }
-.user-manage__form {
-  width: 100%;
-  .dropdown__button {
-    margin-bottom: 1.2em;
-  }
-  label {
-    width: 100%;
-    min-width: 210px;
-    font-weight: 700;
-    margin-right: 4em;
-  }
-  select,
-  input {
-    width: 225px;
-    width: 225px;
-  }
-  fieldset {
-    display: block;
-    padding-left: 1.5em;
-    margin-bottom: 1em;
-    border-bottom: 1px solid $border-color-01;
+
+.local-users__actions,
+.local-users__table .bmc-table {
+  max-width: 900px;
+}
+
+.modal__local-users,
+.modal__local-users-settings {
+  .modal-body {
+    padding-left: 0;
+    padding-right: 0;
   }
-  .acnt-prop__input-wrapper,
-  .user-manage__input-wrapper {
-    margin-bottom: 5px;
-    select {
-      margin-bottom: 0;
+}
+
+.modal__local-users {
+  input[type="password"] {
+    &::placeholder {
+      color: $primary-dark;
+      font-weight: bold;
     }
-  }
-  .acnt-prop__span-wrapper {
-    position: relative;
-    height: 20px;
-    margin-bottom: 5px;
-  }
-  .password-toggle {
-    position: absolute;
-    right: 20px;
-    top: .6em;
-    padding: 3px;
-    font-size: .8em;
-  }
-  .acnt-prop__submit-wrapper,
-  .user-manage__submit-wrapper {
-    width: 100%;
-    margin-top: 6px;
-    padding-top: 1px;
-    border-top: 1px solid $border-color-01;
-    button {
-      float: right;
-      margin: .5em;
+    &::-ms-placeholder {
+      color: $primary-dark;
+      font-weight: bold;
     }
   }
-  .user-manage__error {
-    background: lighten($status-error, 20%);
-    padding: 1em;
-    text-align: center;
-    font-size: 1em;
-    border: 1px solid $status-error;
-    color: $primary-dark;
-    font-family: "Courier New", Helvetica, Arial, sans-serif;
-    font-weight: 700;
-  }
-  .user-manage__success {
-    color: $primary-accent;
-    padding: 1em;
-    font-size: 1em;
-    font-family: "Courier New", Helvetica, Arial, sans-serif;
-    font-weight: 500;
-  }
 }