diff options
Diffstat (limited to 'src/views/AccessControl/LocalUserManagement')
3 files changed, 57 insertions, 261 deletions
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue index 0ca3428d..b016dcc6 100644 --- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue +++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue @@ -2,7 +2,7 @@ <b-container class="ml-0"> <page-title /> <b-row> - <b-col lg="10" class="text-right"> + <b-col lg="10"> <b-button variant="link" @click="initModalSettings"> Account policy settings <icon-settings /> @@ -15,11 +15,11 @@ </b-row> <b-row> <b-col lg="10"> - <b-table show-empty :fields="fields" :items="tableItems"> + <b-table bordered show-empty head-variant="dark" :items="tableItems"> + <template v-slot:head(actions)="data"></template> <template v-slot:cell(actions)="data"> <b-button aria-label="Edit user" - title="Edit user" variant="link" :disabled="!data.value.edit" @click="initModalUser(data.item)" @@ -28,7 +28,6 @@ </b-button> <b-button aria-label="Delete user" - title="Delete user" variant="link" :disabled="!data.value.delete" @click="initModalDelete(data.item)" @@ -43,7 +42,6 @@ <b-col lg="8"> <b-button v-b-toggle.collapse-role-table variant="link" class="mt-3"> View privilege role descriptions - <icon-chevron /> </b-button> <b-collapse id="collapse-role-table" class="mt-3"> <table-roles /> @@ -52,7 +50,11 @@ </b-row> <!-- Modals --> <modal-settings :settings="settings"></modal-settings> - <modal-user :user="activeUser" @ok="saveUser"></modal-user> + <modal-user + :user="activeUser" + @ok="saveUser" + @hidden="clearActiveUser" + ></modal-user> </b-container> </template> @@ -61,7 +63,6 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import IconEdit from '@carbon/icons-vue/es/edit/20'; import IconAdd from '@carbon/icons-vue/es/add--alt/20'; import IconSettings from '@carbon/icons-vue/es/settings/20'; -import IconChevron from '@carbon/icons-vue/es/chevron--up/20'; import TableRoles from './TableRoles'; import ModalUser from './ModalUser'; @@ -72,7 +73,6 @@ export default { name: 'LocalUsers', components: { IconAdd, - IconChevron, IconEdit, IconSettings, IconTrashcan, @@ -84,17 +84,7 @@ export default { data() { return { activeUser: null, - settings: null, - fields: [ - 'username', - 'privilege', - 'status', - { - key: 'actions', - label: '', - tdClass: 'table-cell__actions' - } - ] + settings: null }; }, computed: { @@ -115,8 +105,7 @@ export default { actions: { edit: true, delete: user.UserName === 'root' ? false : true - }, - ...user + } }; }); } @@ -154,15 +143,18 @@ export default { // fetch settings then show modal } }, - saveUser({ isNewUser, userData }) { - if (isNewUser) { - this.$store.dispatch('localUsers/createUser', userData); + saveUser({ newUser, form }) { + if (newUser) { + this.$store.dispatch('localUsers/createUser', form); } else { - this.$store.dispatch('localUsers/updateUser', userData); + this.$store.dispatch('localUsers/updateUser', form); } }, deleteUser({ username }) { this.$store.dispatch('localUsers/deleteUser', username); + }, + clearActiveUser() { + this.activeUser = null; } } }; @@ -172,9 +164,4 @@ export default { h1 { margin-bottom: 2rem; } -.btn.collapsed { - svg { - transform: rotate(180deg); - } -} </style> diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue index 59e57062..d84fb6d5 100644 --- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue +++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue @@ -1,5 +1,9 @@ <template> - <b-modal id="modal-user" ref="modal" @ok="onOk" @hidden="resetForm"> + <b-modal + id="modal-user" + @ok="$emit('ok', { newUser, form })" + @hidden="$emit('hidden')" + > <template v-slot:modal-title> <template v-if="newUser"> Add user @@ -8,116 +12,27 @@ Edit user </template> </template> - <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-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" - aria-describedby="username-help-block" - :state="getValidationState('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-for="Privilege"> - <b-form-select - v-model="form.privilege" - required - :options="privilegeTypes" - :state="getValidationState('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-for="User 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" - aria-describedby="password-help-block" - :state="getValidationState('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-for="Confirm user password"> - <b-form-input - v-model="form.passwordConfirmation" - type="password" - :state="getValidationState('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> + <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 v-model="form.username" type="text" /> + </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 v-model="form.password" type="password" /> + </b-form-group> </b-form> <template v-slot:modal-ok> <template v-if="newUser"> @@ -131,15 +46,6 @@ </template> <script> -import { - required, - maxLength, - minLength, - sameAs, - helpers, - requiredIf -} from 'vuelidate/lib/validators'; - export default { props: { user: { @@ -149,122 +55,25 @@ export default { }, data() { return { - privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess'], - originalUsername: '', - form: { - status: true, - username: '', - privilege: '', - password: '', - passwordConfirmation: '' - } + privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess'] }; }, 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), - maxLength: maxLength(20) - }, - 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(); - }, - getValidationState(name) { - const { $dirty, $error } = this.$v.form[name]; - return $dirty ? !$error : null; - }, - requirePassword() { - if (this.newUser) return true; - if (this.$v.form.password.$dirty) return true; - if (this.$v.form.passwordConfirmation.$dirty) return true; - return false; }, - onOk(bvModalEvt) { - // prevent modal close - bvModalEvt.preventDefault(); - this.handleSubmit(); + 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: '' + }; } } }; diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue index 0927c55d..ad313bef 100644 --- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue +++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue @@ -1,5 +1,5 @@ <template> - <b-table small :items="items" :fields="fields"> + <b-table bordered small head-variant="dark" :items="items" :fields="fields"> <template v-slot:cell(administrator)="data"> <template v-if="data.value"> <checkmark20 /> |