From 5ea167820bb5f1cdfe4b501eb3c70daf1a3732d3 Mon Sep 17 00:00:00 2001 From: Dixsie Wolmers Date: Mon, 27 Jul 2020 17:50:43 -0500 Subject: 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 Change-Id: I7edff1e9527ad2c2cfec236daacb83ad4864d785 --- src/assets/styles/bmc/custom/_forms.scss | 27 ++++++++++++++++++++++ src/components/Global/InputPasswordToggle.vue | 2 +- src/components/Global/TableDateFilter.vue | 11 ++------- src/env/assets/styles/_ibm.scss | 5 ++++ src/views/AccessControl/Ldap/Ldap.vue | 1 + .../LocalUserManagement/ModalUser.vue | 2 ++ src/views/ChangePassword/ChangePassword.vue | 2 ++ .../DateTimeSettings/DateTimeSettings.vue | 10 +------- src/views/ProfileSettings/ProfileSettings.vue | 2 ++ 9 files changed, 43 insertions(+), 19 deletions(-) (limited to 'src') 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()" /> @@ -58,6 +59,7 @@ v-model="toDate" placeholder="YYYY-MM-DD" :state="getValidationState($v.toDate)" + class="form-control-with-button" @blur="$v.toDate.$touch()" /> @@ -163,12 +165,3 @@ export default { } }; - - 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,"); \ 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()" /> 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()" /> @@ -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()" /> 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()" > @@ -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()" > 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()" /> @@ -400,12 +401,3 @@ export default { } }; - - 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()" /> @@ -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()" /> -- cgit v1.2.3