diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-07-28 01:50:43 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-08-18 17:49:09 +0300 |
commit | 5ea167820bb5f1cdfe4b501eb3c70daf1a3732d3 (patch) | |
tree | 036f5394be2aadd70db9c0d11db34fe37408e96b /src/views | |
parent | dc3fa2e0382145126101dc6df04d0338a119824f (diff) | |
download | webui-vue-5ea167820bb5f1cdfe4b501eb3c70daf1a3732d3.tar.xz |
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
Diffstat (limited to 'src/views')
5 files changed, 8 insertions, 9 deletions
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"> |