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/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;
+
+.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;
}
- 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;
- }
- .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;
- }
}