diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-12-04 20:09:36 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-27 17:29:34 +0300 |
commit | 463a57062a1e1f91743e53acb27e867fc4c7584c (patch) | |
tree | 27945784f430356b1a64de354289e935d7568dfc /src/views/AccessControl/LocalUserManagement/ModalUser.vue | |
parent | 28cb682967ef35b90f295834d2ffb105e1d30e21 (diff) | |
download | webui-vue-463a57062a1e1f91743e53acb27e867fc4c7584c.tar.xz |
Update local user component
- Add, edit, delete user basic functionality complete
- Rename components and creating separate modal components
- Update button styles to match design and included icons
- Update grid layout to use container with max width set
- Add aria labels to table action buttons
- Refactor LocalUserManagementStore
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Iab31ccabeb5a53ec03dc3ce3949fb20ded1ffbcf
Diffstat (limited to 'src/views/AccessControl/LocalUserManagement/ModalUser.vue')
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/ModalUser.vue | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue new file mode 100644 index 00000000..70cd6141 --- /dev/null +++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue @@ -0,0 +1,75 @@ +<template> + <b-modal + id="modal-user" + @ok="$emit('ok', { newUser, form })" + @hidden="$emit('hidden')" + > + <template v-slot:modal-title> + <template v-if="newUser"> + Add user + </template> + <template v-else> + 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> + <template v-slot:modal-ok> + <template v-if="newUser"> + Add user + </template> + <template v-else> + Save + </template> + </template> + </b-modal> +</template> + +<script> +export default { + props: ["user"], + data() { + return { + privilegeTypes: ["Administrator", "Operator", "ReadOnly", "NoAccess"] + }; + }, + computed: { + newUser() { + return this.user ? false : true; + }, + 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: "" + }; + } + } +}; +</script> |