diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-01-06 18:36:16 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-01-31 01:33:12 +0300 |
commit | 4b0fc1dbb3f60a485d3ba7ec27d7654a8ea0d382 (patch) | |
tree | 0b2c344755c9c0c58681b95c4d452d661267fbda /src/views/AccessControl/LocalUserManagement/ModalUser.vue | |
parent | 6109113cc9e7e481b6f37b25c329ac64fcb7dbfc (diff) | |
download | webui-vue-4b0fc1dbb3f60a485d3ba7ec27d7654a8ea0d382.tar.xz |
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
Diffstat (limited to 'src/views/AccessControl/LocalUserManagement/ModalUser.vue')
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/ModalUser.vue | 272 |
1 files changed, 233 insertions, 39 deletions
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue index 73aa164c..e3ceb7df 100644 --- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue +++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue @@ -1,9 +1,5 @@ <template> - <b-modal - id="modal-user" - @ok="$emit('ok', { newUser, form })" - @hidden="$emit('hidden')" - > + <b-modal id="modal-user" ref="modal" @ok="onOk" @hidden="resetForm"> <template v-slot:modal-title> <template v-if="newUser"> Add user @@ -12,27 +8,121 @@ Edit user </template> </template> - <b-form> - <b-form-group label="Account status"> - <b-form-radio v-model="form.status" name="user-status" value="true" - >Enabled</b-form-radio - > - <b-form-radio v-model="form.status" name="user-status" value="false" - >Disabled</b-form-radio - > - </b-form-group> - <b-form-group label="Username"> - <b-form-input type="text" v-model="form.username" /> - </b-form-group> - <b-form-group label="Privilege"> - <b-form-select - v-model="form.privilege" - :options="privilegeTypes" - ></b-form-select> - </b-form-group> - <b-form-group label="Password"> - <b-form-input type="password" v-model="form.password" /> - </b-form-group> + <b-form novalidate @submit="handleSubmit"> + <b-container> + <b-row> + <b-col> + <b-form-group label="Account status"> + <b-form-radio + v-model="form.status" + name="user-status" + :value="true" + @input="$v.form.status.$touch()" + > + Enabled + </b-form-radio> + <b-form-radio + v-model="form.status" + name="user-status" + :value="false" + @input="$v.form.status.$touch()" + > + Disabled + </b-form-radio> + </b-form-group> + <b-form-group label="Username" label-for="username"> + <b-form-text id="username-help-block"> + Cannot start with a number + <br /> + No special characters except underscore + </b-form-text> + <b-form-input + v-model="form.username" + type="text" + id="username" + aria-describedby="username-help-block" + :state="getValidationState($v.form.username)" + :disabled="!newUser && originalUsername === 'root'" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.username.required"> + Field required + </template> + <template v-else-if="!$v.form.username.maxLength"> + Length must be between 1 – 16 characters + </template> + <template v-else-if="!$v.form.username.pattern"> + Invalid format + </template> + </b-form-invalid-feedback> + </b-form-group> + <b-form-group label="Privilege"> + <b-form-select + v-model="form.privilege" + :options="privilegeTypes" + :state="getValidationState($v.form.privilege)" + @input="$v.form.privilege.$touch()" + > + </b-form-select> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.privilege.required"> + Field required + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col> + <b-form-group label="User password" label-for="password"> + <b-form-text id="password-help-block" text-variant="black"> + <!-- TODO: Should be dynamic values --> + Password must between 8 – 20 characters + </b-form-text> + <b-form-input + v-model="form.password" + type="password" + id="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> + </b-form-group> + <b-form-group + label="Confirm user password" + label-for="password-confirmation" + > + <b-form-input + v-model="form.passwordConfirmation" + type="password" + id="password-confirmation" + :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> + </b-form-group> + </b-col> + </b-row> + </b-container> </b-form> <template v-slot:modal-ok> <template v-if="newUser"> @@ -46,29 +136,133 @@ </template> <script> +import { + required, + maxLength, + minLength, + sameAs, + helpers, + requiredIf +} from 'vuelidate/lib/validators'; +import VuelidateMixin from '../../../components/Mixins/VuelidateMixin.js'; + export default { props: ['user'], + mixins: [VuelidateMixin], data() { return { - privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess'] + privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess'], + originalUsername: '', + form: { + status: true, + username: '', + privilege: '', + password: '', + passwordConfirmation: '' + } }; }, computed: { newUser() { return this.user ? false : true; + } + }, + watch: { + user: function(value) { + if (value === null) return; + this.originalUsername = value.username; + this.form.username = value.username; + this.form.status = value.Enabled; + this.form.privilege = value.privilege; + } + }, + validations: { + form: { + status: { + required + }, + username: { + required, + maxLength: maxLength(16), + pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/) + }, + privilege: { + required + }, + password: { + required: requiredIf(function() { + return this.requirePassword(); + }), + minLength: minLength(8), //TODO: Update to dynamic backend values + maxLength: maxLength(20) //TODO: UPdate to dynamic backend values + }, + passwordConfirmation: { + required: requiredIf(function() { + return this.requirePassword(); + }), + sameAsPassword: sameAs('password') + } + } + }, + methods: { + handleSubmit() { + let userData = {}; + + if (this.newUser) { + this.$v.$touch(); + if (this.$v.$invalid) return; + userData.username = this.form.username; + userData.status = this.form.status; + userData.privilege = this.form.privilege; + userData.password = this.form.password; + } else { + if (this.$v.$invalid) return; + userData.originalUsername = this.originalUsername; + if (this.$v.form.status.$dirty) { + userData.status = this.form.status; + } + if (this.$v.form.username.$dirty) { + userData.username = this.form.username; + } + if (this.$v.form.privilege.$dirty) { + userData.privilege = this.form.privilege; + } + if (this.$v.form.password.$dirty) { + userData.password = this.form.password; + } + if (Object.entries(userData).length === 1) { + this.closeModal(); + return; + } + } + + this.$emit('ok', { isNewUser: this.newUser, userData }); + this.closeModal(); + }, + closeModal() { + this.$nextTick(() => { + this.$refs.modal.hide(); + }); + }, + resetForm() { + this.form.originalUsername = ''; + this.form.status = true; + this.form.username = ''; + this.form.privilege = ''; + this.form.password = ''; + this.form.passwordConfirmation = ''; + this.$v.$reset(); + }, + requirePassword() { + if (this.newUser) return true; + if (this.$v.form.password.$dirty) return true; + if (this.$v.form.passwordConfirmation.$dirty) return true; + return false; }, - form() { - return { - originalUsername: this.newUser ? null : this.user.username, - status: this.newUser - ? true - : this.user.status === 'Enabled' - ? true - : false, - username: this.newUser ? '' : this.user.username, - privilege: this.newUser ? '' : this.user.privilege, - password: '' - }; + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); } } }; |