diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-20 18:29:58 +0300 |
|---|---|---|
| committer | Gunnar Mills <gmills@us.ibm.com> | 2020-02-22 00:28:11 +0300 |
| commit | 4ee8d290a5d45ce93419c819a6e7544d3a009b99 (patch) | |
| tree | 8cfbfcb861adb2d67104b34bf6cb5ab08aa079fc /src/views/AccessControl/LocalUserManagement/ModalUser.vue | |
| parent | 8048c9a0c469f04cacc8a777416a707540de90f8 (diff) | |
| download | webui-vue-4ee8d290a5d45ce93419c819a6e7544d3a009b99.tar.xz | |
Create password visibility toggle
Reusable component to show/hide password input fields,
added to local user form.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I90fb865e51d99788a225812b057f4d8bacad1bc8
Diffstat (limited to 'src/views/AccessControl/LocalUserManagement/ModalUser.vue')
| -rw-r--r-- | src/views/AccessControl/LocalUserManagement/ModalUser.vue | 80 |
1 files changed, 43 insertions, 37 deletions
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue index d156c3da..448276b5 100644 --- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue +++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue @@ -77,48 +77,52 @@ <!-- TODO: Should be dynamic values --> Password must between 8 – 20 characters </b-form-text> - <b-form-input - id="password" - v-model="form.password" - type="password" - aria-describedby="password-help-block" - :state="getValidationState($v.form.password)" - @input="$v.form.password.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.password.required"> - Field required - </template> - <template - v-if=" - !$v.form.password.minLength || !$v.form.password.maxLength - " - > - Length must be between 8 – 20 characters - </template> - </b-form-invalid-feedback> + <input-password-toggle> + <b-form-input + id="password" + v-model="form.password" + type="password" + aria-describedby="password-help-block" + :state="getValidationState($v.form.password)" + @input="$v.form.password.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.password.required"> + Field required + </template> + <template + v-if=" + !$v.form.password.minLength || !$v.form.password.maxLength + " + > + Length must be between 8 – 20 characters + </template> + </b-form-invalid-feedback> + </input-password-toggle> </b-form-group> <b-form-group label="Confirm user password" label-for="password-confirmation" > - <b-form-input - id="password-confirmation" - v-model="form.passwordConfirmation" - type="password" - :state="getValidationState($v.form.passwordConfirmation)" - @input="$v.form.passwordConfirmation.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.passwordConfirmation.required"> - Field required - </template> - <template - v-else-if="!$v.form.passwordConfirmation.sameAsPassword" - > - Passwords do not match - </template> - </b-form-invalid-feedback> + <input-password-toggle> + <b-form-input + id="password-confirmation" + v-model="form.passwordConfirmation" + type="password" + :state="getValidationState($v.form.passwordConfirmation)" + @input="$v.form.passwordConfirmation.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.passwordConfirmation.required"> + Field required + </template> + <template + v-else-if="!$v.form.passwordConfirmation.sameAsPassword" + > + Passwords do not match + </template> + </b-form-invalid-feedback> + </input-password-toggle> </b-form-group> </b-col> </b-row> @@ -145,8 +149,10 @@ import { requiredIf } from 'vuelidate/lib/validators'; import VuelidateMixin from '../../../components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '../../../components/Global/InputPasswordToggle'; export default { + components: { InputPasswordToggle }, mixins: [VuelidateMixin], props: { user: { |