Update local user layout and styles

Resubmitting after reverted–original commit here
https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28790

- Add BVConfig plugin to modify boostrap component
defaults
- Add vuelidate
- Add package and basic validations to user form
- Add all user form validations
- Add checks for edit user
- Create VuelidateMixin for shared methods
- Update Login to use Vuelidate

Signed-off-by: Yoshie Muranaka <[email protected]>
Signed-off-by: Derick Montague <[email protected]>
Change-Id: Ib50ee4d1fb5f14637c9460e77f0682869a86ac8a

Author: yoshiemuranaka

package-lock.json

@@ -19,6 +19,7 @@
     "vue": "2.6.10",
     "vue-date-fns": "^1.1.0",
     "vue-router": "3.1.3",
+    "vuelidate": "^0.7.4",
     "vuex": "3.0.1"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,29 @@
+.form-text {
+  margin-top: -$spacer / 4;
+  margin-bottom: $spacer / 2;
+  color: $gray-800;
+}
+
+.col-form-label {
+  color: $gray-800;
+  font-size: 14px;
+}
+
+.form-group {
+  margin-bottom: $spacer * 2;
+}
+
+.custom-select,
+.custom-control-label,
+.form-control {
+  //important needed to override validation colors on radio labels
+  color: $gray-900!important;
+  border-color: $gray-400!important;
+  &::before {
+    border-color: $primary;
+  }
+  &.is-invalid,
+  &:invalid {
+    border-bottom: 2px solid $danger!important;
+  }
+}

src/assets/styles/_form-components.scss

@@ -0,0 +1,7 @@
+.modal-header {
+  .close {
+    font-weight: normal;
+    color: $gray-900;
+    opacity: 1;
+  }
+}

src/assets/styles/_modal.scss

@@ -1,4 +1,5 @@
 $enable-rounded: false;
+$enable-validation-icons: false;
 
 // Required
 @import "~bootstrap/scss/functions";
@@ -52,4 +53,7 @@ $colors: map-remove($theme-colors, "light", "dark");
 
 @import "~bootstrap-vue/src/index.scss";
 
-@import "./buttons";
+@import "./buttons";
+@import "./form-components";
+@import "./modal";
+@import "./table";

src/assets/styles/_obmc-custom.scss

@@ -0,0 +1,21 @@
+.table-light {
+  td {
+    border-top: none;
+    border-bottom: 1px solid $gray-300;
+  }
+}
+
+.thead-light.thead-light {
+  th {
+    border: none;
+    color: $gray-900;
+  }
+}
+
+.table-cell__actions {
+  text-align: right;
+  .btn {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

src/assets/styles/_table.scss

@@ -0,0 +1,10 @@
+const VuelidateMixin = {
+  methods: {
+    getValidationState(model) {
+      const { $dirty, $error } = model;
+      return $dirty ? !$error : null;
+    }
+  }
+};
+
+export default VuelidateMixin;

src/components/Mixins/VuelidateMixin.js

@@ -7,6 +7,7 @@ import {
   AlertPlugin,
   BadgePlugin,
   ButtonPlugin,
+  BVConfigPlugin,
   CollapsePlugin,
   FormPlugin,
   FormCheckboxPlugin,
@@ -22,12 +23,20 @@ import {
   NavPlugin,
   TablePlugin
 } from 'bootstrap-vue';
+import Vuelidate from 'vuelidate';
 
 Vue.filter('date', dateFilter);
 
 Vue.use(AlertPlugin);
 Vue.use(BadgePlugin);
 Vue.use(ButtonPlugin);
+Vue.use(BVConfigPlugin, {
+  BFormText: { textVariant: 'black' },
+  BTable: {
+    headVariant: 'light',
+    footVariant: 'light'
+  }
+});
 Vue.use(CollapsePlugin);
 Vue.use(FormPlugin);
 Vue.use(FormCheckboxPlugin);
@@ -43,6 +52,7 @@ Vue.use(ModalPlugin);
 Vue.use(NavbarPlugin);
 Vue.use(NavPlugin);
 Vue.use(TablePlugin);
+Vue.use(Vuelidate);
 
 new Vue({
   router,

src/main.js

@@ -4,35 +4,28 @@ import Cookies from 'js-cookie';
 const AuthenticationStore = {
   namespaced: true,
   state: {
-    status: '',
+    authError: false,
     cookie: Cookies.get('XSRF-TOKEN')
   },
   getters: {
-    authStatus: state => state.status,
+    authError: state => state.authError,
     isLoggedIn: state => !!state.cookie
   },
   mutations: {
-    authRequest(state) {
-      state.status = 'processing';
-    },
     authSuccess(state) {
-      state.status = 'authenticated';
+      state.authError = false;
       state.cookie = Cookies.get('XSRF-TOKEN');
     },
     authError(state) {
-      state.status = 'error';
-    },
-    authReset(state) {
-      state.status = '';
+      state.authError = true;
     },
     logout(state) {
-      state.status = '';
+      state.authError = false;
       Cookies.remove('XSRF-TOKEN');
     }
   },
   actions: {
     login({ commit }, auth) {
-      commit('authRequest');
       return api
         .post('/login', { data: auth })
         .then(() => commit('authSuccess'))

src/store/modules/Authentication/AuthenticanStore.js

@@ -2,8 +2,8 @@
   <b-container class="ml-0">
     <PageTitle />
     <b-row>
-      <b-col lg="10">
-        <b-button @click="initModalSettings" variant="link">
+      <b-col lg="10" class="text-right">
+        <b-button variant="link" @click="initModalSettings">
           Account policy settings
           <icon-settings />
         </b-button>
@@ -15,11 +15,11 @@
     </b-row>
     <b-row>
       <b-col lg="10">
-        <b-table bordered show-empty head-variant="dark" :items="tableItems">
-          <template v-slot:head(actions)="data"></template>
+        <b-table show-empty :fields="fields" :items="tableItems">
           <template v-slot:cell(actions)="data">
             <b-button
               aria-label="Edit user"
+              title="Edit user"
               variant="link"
               :disabled="!data.value.edit"
               @click="initModalUser(data.item)"
@@ -28,6 +28,7 @@
             </b-button>
             <b-button
               aria-label="Delete user"
+              title="Delete user"
               variant="link"
               :disabled="!data.value.delete"
               @click="initModalDelete(data.item)"
@@ -42,19 +43,16 @@
       <b-col lg="8">
         <b-button v-b-toggle.collapse-role-table variant="link" class="mt-3">
           View privilege role descriptions
+          <icon-chevron />
         </b-button>
         <b-collapse id="collapse-role-table" class="mt-3">
           <table-roles />
         </b-collapse>
       </b-col>
     </b-row>
     <!-- Modals -->
-    <modal-settings v-bind:settings="settings"></modal-settings>
-    <modal-user
-      v-bind:user="activeUser"
-      @ok="saveUser"
-      @hidden="clearActiveUser"
-    ></modal-user>
+    <modal-settings :settings="settings"></modal-settings>
+    <modal-user :user="activeUser" @ok="saveUser"></modal-user>
   </b-container>
 </template>
 
@@ -63,6 +61,7 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconSettings from '@carbon/icons-vue/es/settings/20';
+import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
 
 import TableRoles from './TableRoles';
 import ModalUser from './ModalUser';
@@ -73,6 +72,7 @@ export default {
   name: 'local-users',
   components: {
     IconAdd,
+    IconChevron,
     IconEdit,
     IconSettings,
     IconTrashcan,
@@ -84,7 +84,17 @@ export default {
   data() {
     return {
       activeUser: null,
-      settings: null
+      settings: null,
+      fields: [
+        'username',
+        'privilege',
+        'status',
+        {
+          key: 'actions',
+          label: '',
+          tdClass: 'table-cell__actions'
+        }
+      ]
     };
   },
   created() {
@@ -108,7 +118,8 @@ export default {
           actions: {
             edit: true,
             delete: user.UserName === 'root' ? false : true
-          }
+          },
+          ...user
         };
       });
     }
@@ -143,18 +154,15 @@ export default {
         // fetch settings then show modal
       }
     },
-    saveUser({ newUser, form }) {
-      if (newUser) {
-        this.$store.dispatch('localUsers/createUser', form);
+    saveUser({ isNewUser, userData }) {
+      if (isNewUser) {
+        this.$store.dispatch('localUsers/createUser', userData);
       } else {
-        this.$store.dispatch('localUsers/updateUser', form);
+        this.$store.dispatch('localUsers/updateUser', userData);
       }
     },
     deleteUser({ username }) {
       this.$store.dispatch('localUsers/deleteUser', username);
-    },
-    clearActiveUser() {
-      this.activeUser = null;
     }
   }
 };
@@ -164,4 +172,9 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
+.btn.collapsed {
+  svg {
+    transform: rotate(180deg);
+  }
+}
 </style>