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 <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ib50ee4d1fb5f14637c9460e77f0682869a86ac8a

4 files changed, 62 insertions, 1 deletions

diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/_form-components.scss
new file mode 100644
index 00000000..41b291b2
--- /dev/null
+++ b/src/assets/styles/_form-components.scss
@@ -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;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/_modal.scss b/src/assets/styles/_modal.scss
new file mode 100644
index 00000000..b20327e7
--- /dev/null
+++ b/src/assets/styles/_modal.scss
@@ -0,0 +1,7 @@
+.modal-header {
+  .close {
+    font-weight: normal;
+    color: $gray-900;
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index e87e01bb..d20e64e4 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.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";
\ No newline at end of file
+@import "./buttons";
+@import "./form-components";
+@import "./modal";
+@import "./table";
\ No newline at end of file
diff --git a/src/assets/styles/_table.scss b/src/assets/styles/_table.scss
new file mode 100644
index 00000000..ff1ed302
--- /dev/null
+++ b/src/assets/styles/_table.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;
+  }
+}