Add form input field validation icons

Updates form validation to match updated style guide:
- Datepicker and password toggle form field
  padding adjusted to accomodate validation icons
- Valid form validation icon is hidden
- Adds carbon icons and enables validation icons in
  IBM environment

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I7edff1e9527ad2c2cfec236daacb83ad4864d785

9 files changed, 43 insertions, 19 deletions

diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index b7747bf3..60f4a84d 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -100,3 +100,30 @@
     fill: currentColor;
   }
 }
+
+.b-form-datepicker {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-dropdown + 1;
+  .btn {
+    padding: 0.4rem 1rem;
+      svg {
+        margin-left: 0;
+      }
+  }
+}
+
+// Form validation icon
+  .form-control.is-invalid,
+  .form-control.is-valid {
+    background-position: right 1rem bottom 50%;
+  }
+
+// Form validation icon with datepicker or password toggle icon
+.form-control-with-button {
+  &.is-invalid,
+  &.is-valid {
+    background-position: right 3rem bottom 50%;
+  }
+}
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 40fb7443..519a808f 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -49,7 +49,7 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-
+  padding: 0.4rem 1rem;
   svg {
     margin-left: 0;
     vertical-align: sub;
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index ab501ea3..538f0e05 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -12,6 +12,7 @@
             v-model="fromDate"
             placeholder="YYYY-MM-DD"
             :state="getValidationState($v.fromDate)"
+            class="form-control-with-button"
             @blur="$v.fromDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
@@ -58,6 +59,7 @@
             v-model="toDate"
             placeholder="YYYY-MM-DD"
             :state="getValidationState($v.toDate)"
+            class="form-control-with-button"
             @blur="$v.toDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
@@ -163,12 +165,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.b-form-datepicker {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: $zindex-dropdown + 1;
-}
-</style>
diff --git a/src/env/assets/styles/_ibm.scss b/src/env/assets/styles/_ibm.scss
index 12fe0bc9..bd2bc73a 100644
--- a/src/env/assets/styles/_ibm.scss
+++ b/src/env/assets/styles/_ibm.scss
@@ -47,3 +47,8 @@ $primary: $blue;
 $danger: $red;
 $success: $green;
 $warning: $yellow;
+
+// Validation icons
+$enable-validation-icons: true;
+$form-feedback-icon-valid: none;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$danger}'  width='32' height='32' viewbox='0 0 32 32'><path fill='none' d='M0 0h32v32H0z'/><path d='M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9l5.4 5.4L21.4 9l1.6 1.6-5.4 5.4 5.4 5.4-1.6 1.6z'/></svg>");
\ No newline at end of file
diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue
index 8bebed9c..618434b6 100644
--- a/src/views/AccessControl/Ldap/Ldap.vue
+++ b/src/views/AccessControl/Ldap/Ldap.vue
@@ -146,6 +146,7 @@
                             v-model="form.bindPassword"
                             type="password"
                             :state="getValidationState($v.form.bindPassword)"
+                            class="form-control-with-button"
                             @change="$v.form.bindPassword.$touch()"
                           />
                           <b-form-invalid-feedback role="alert">
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index 75961e34..7e6519d0 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -143,6 +143,7 @@
                   data-test-id="localUserManagement-input-password"
                   aria-describedby="password-help-block"
                   :state="getValidationState($v.form.password)"
+                  class="form-control-with-button"
                   @input="$v.form.password.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
@@ -178,6 +179,7 @@
                   data-test-id="localUserManagement-input-passwordConfirmation"
                   type="password"
                   :state="getValidationState($v.form.passwordConfirmation)"
+                  class="form-control-with-button"
                   @input="$v.form.passwordConfirmation.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index b2edcd47..fbf95d9d 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -22,6 +22,7 @@
             autofocus="autofocus"
             type="password"
             :state="getValidationState($v.form.password)"
+            class="form-control-with-button"
             @change="$v.form.password.$touch()"
           >
           </b-form-input>
@@ -42,6 +43,7 @@
             v-model="form.passwordConfirm"
             type="password"
             :state="getValidationState($v.form.passwordConfirm)"
+            class="form-control-with-button"
             @change="$v.form.passwordConfirm.$touch()"
           >
           </b-form-input>
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index e10c9ea5..b6bc8151 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -60,6 +60,7 @@
                     :state="getValidationState($v.form.manual.date)"
                     :disabled="form.configurationSelected === 'ntp'"
                     data-test-id="dateTimeSettings-input-manualDate"
+                    class="form-control-with-button"
                     @blur="$v.form.manual.date.$touch()"
                   />
                   <b-form-invalid-feedback role="alert">
@@ -400,12 +401,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.b-form-datepicker {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: $zindex-dropdown + 1;
-}
-</style>
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index dee8d399..8c68839d 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -44,6 +44,7 @@
                   aria-describedby="password-help-block"
                   :state="getValidationState($v.form.newPassword)"
                   data-test-id="profileSettings-input-newPassword"
+                  class="form-control-with-button"
                   @input="$v.form.newPassword.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
@@ -75,6 +76,7 @@
                   type="password"
                   :state="getValidationState($v.form.confirmPassword)"
                   data-test-id="profileSettings-input-confirmPassword"
+                  class="form-control-with-button"
                   @input="$v.form.confirmPassword.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">