diff options
author | Sandeepa Singh <sandeepa.singh@ibm.com> | 2021-07-26 12:35:39 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-08-10 22:20:42 +0300 |
commit | b440616c23b61166ae6d87839a70eec31bdca235 (patch) | |
tree | d72769d4aa425e96e47419515b85a8631d8e99d7 /src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue | |
parent | f67f769f2304bca64d2b9758e22c21203960eef9 (diff) | |
download | webui-vue-b440616c23b61166ae6d87839a70eec31bdca235.tar.xz |
IA update: Update access and control section
This is the fifth commit of the information architecture changes and
has the following changes:
- The icon for access and control has been updated
- Access and control section has been updated to security and
access section
- Security settings page has been updated to policies page and moved to
security and access section
- Client sessions page has been updated to sessions page
- Local user management page has been updated to user management page
- SSL certificates page has been updated to certificates page
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Ie93cee9002742ecf7d33615636f4f159f4395fc4
Diffstat (limited to 'src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue')
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue | 386 |
1 files changed, 0 insertions, 386 deletions
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue deleted file mode 100644 index fb5ba16e..00000000 --- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue +++ /dev/null @@ -1,386 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title /> - <b-row> - <b-col xl="9" class="text-right"> - <b-button variant="link" @click="initModalSettings"> - <icon-settings /> - {{ $t('pageLocalUserManagement.accountPolicySettings') }} - </b-button> - <b-button - variant="primary" - data-test-id="localUserManagement-button-addUser" - @click="initModalUser(null)" - > - <icon-add /> - {{ $t('pageLocalUserManagement.addUser') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col xl="9"> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - :actions="tableToolbarActions" - @clear-selected="clearSelectedRows($refs.table)" - @batch-action="onBatchAction" - /> - <b-table - ref="table" - responsive="md" - selectable - show-empty - no-select-on-click - hover - :fields="fields" - :items="tableItems" - :empty-text="$t('global.table.emptyMessage')" - @row-selected="onRowSelected($event, tableItems.length)" - > - <!-- Checkbox column --> - <template #head(checkbox)> - <b-form-checkbox - v-model="tableHeaderCheckboxModel" - data-test-id="localUserManagement-checkbox-tableHeaderCheckbox" - :indeterminate="tableHeaderCheckboxIndeterminate" - @change="onChangeHeaderCheckbox($refs.table)" - > - <span class="sr-only">{{ $t('global.table.selectAll') }}</span> - </b-form-checkbox> - </template> - <template #cell(checkbox)="row"> - <b-form-checkbox - v-model="row.rowSelected" - data-test-id="localUserManagement-checkbox-toggleSelectRow" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - - <!-- table actions column --> - <template #cell(actions)="{ item }"> - <table-row-action - v-for="(action, index) in item.actions" - :key="index" - :value="action.value" - :enabled="action.enabled" - :title="action.title" - @click-table-action="onTableRowAction($event, item)" - > - <template #icon> - <icon-edit - v-if="action.value === 'edit'" - :data-test-id="`localUserManagement-tableRowAction-edit-${index}`" - /> - <icon-trashcan - v-if="action.value === 'delete'" - :data-test-id="`localUserManagement-tableRowAction-delete-${index}`" - /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> - <b-row> - <b-col xl="8"> - <b-button - v-b-toggle.collapse-role-table - data-test-id="localUserManagement-button-viewPrivilegeRoleDescriptions" - variant="link" - class="mt-3" - > - <icon-chevron /> - {{ $t('pageLocalUserManagement.viewPrivilegeRoleDescriptions') }} - </b-button> - <b-collapse id="collapse-role-table" class="mt-3"> - <table-roles /> - </b-collapse> - </b-col> - </b-row> - <!-- Modals --> - <modal-settings :settings="settings" @ok="saveAccountSettings" /> - <modal-user - :user="activeUser" - :password-requirements="passwordRequirements" - @ok="saveUser" - @hidden="activeUser = null" - /> - </b-container> -</template> - -<script> -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 ModalUser from './ModalUser'; -import ModalSettings from './ModalSettings'; -import PageTitle from '@/components/Global/PageTitle'; -import TableRoles from './TableRoles'; -import TableToolbar from '@/components/Global/TableToolbar'; -import TableRowAction from '@/components/Global/TableRowAction'; - -import BVTableSelectableMixin, { - selectedRows, - tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate, -} from '@/components/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; - -export default { - name: 'LocalUsers', - components: { - IconAdd, - IconChevron, - IconEdit, - IconSettings, - IconTrashcan, - ModalSettings, - ModalUser, - PageTitle, - TableRoles, - TableRowAction, - TableToolbar, - }, - mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin], - beforeRouteLeave(to, from, next) { - this.hideLoader(); - next(); - }, - data() { - return { - activeUser: null, - fields: [ - { - key: 'checkbox', - }, - { - key: 'username', - label: this.$t('pageLocalUserManagement.table.username'), - }, - { - key: 'privilege', - label: this.$t('pageLocalUserManagement.table.privilege'), - }, - { - key: 'status', - label: this.$t('pageLocalUserManagement.table.status'), - }, - { - key: 'actions', - label: '', - tdClass: 'text-right text-nowrap', - }, - ], - tableToolbarActions: [ - { - value: 'delete', - label: this.$t('global.action.delete'), - }, - { - value: 'enable', - label: this.$t('global.action.enable'), - }, - { - value: 'disable', - label: this.$t('global.action.disable'), - }, - ], - selectedRows: selectedRows, - tableHeaderCheckboxModel: tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, - }; - }, - computed: { - allUsers() { - return this.$store.getters['localUsers/allUsers']; - }, - tableItems() { - // transform user data to table data - return this.allUsers.map((user) => { - return { - username: user.UserName, - privilege: user.RoleId, - status: user.Locked - ? 'Locked' - : user.Enabled - ? 'Enabled' - : 'Disabled', - actions: [ - { - value: 'edit', - enabled: true, - title: this.$t('pageLocalUserManagement.editUser'), - }, - { - value: 'delete', - enabled: user.UserName === 'root' ? false : true, - title: this.$tc('pageLocalUserManagement.deleteUser'), - }, - ], - ...user, - }; - }); - }, - settings() { - return this.$store.getters['localUsers/accountSettings']; - }, - passwordRequirements() { - return this.$store.getters['localUsers/accountPasswordRequirements']; - }, - }, - created() { - this.startLoader(); - this.$store.dispatch('localUsers/getUsers').finally(() => this.endLoader()); - this.$store.dispatch('localUsers/getAccountSettings'); - this.$store.dispatch('localUsers/getAccountRoles'); - }, - methods: { - initModalUser(user) { - this.activeUser = user; - this.$bvModal.show('modal-user'); - }, - initModalDelete(user) { - this.$bvModal - .msgBoxConfirm( - this.$t('pageLocalUserManagement.modal.deleteConfirmMessage', { - user: user.username, - }), - { - title: this.$tc('pageLocalUserManagement.deleteUser'), - okTitle: this.$tc('pageLocalUserManagement.deleteUser'), - cancelTitle: this.$t('global.action.cancel'), - } - ) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - this.deleteUser(user); - } - }); - }, - initModalSettings() { - this.$bvModal.show('modal-settings'); - }, - saveUser({ isNewUser, userData }) { - this.startLoader(); - if (isNewUser) { - this.$store - .dispatch('localUsers/createUser', userData) - .then((success) => this.successToast(success)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - } else { - this.$store - .dispatch('localUsers/updateUser', userData) - .then((success) => this.successToast(success)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - } - }, - deleteUser({ username }) { - this.startLoader(); - this.$store - .dispatch('localUsers/deleteUser', username) - .then((success) => this.successToast(success)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - }, - onBatchAction(action) { - switch (action) { - case 'delete': - this.$bvModal - .msgBoxConfirm( - this.$tc( - 'pageLocalUserManagement.modal.batchDeleteConfirmMessage', - this.selectedRows.length - ), - { - title: this.$tc( - 'pageLocalUserManagement.deleteUser', - this.selectedRows.length - ), - okTitle: this.$tc( - 'pageLocalUserManagement.deleteUser', - this.selectedRows.length - ), - cancelTitle: this.$t('global.action.cancel'), - } - ) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - this.startLoader(); - this.$store - .dispatch('localUsers/deleteUsers', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') this.successToast(message); - if (type === 'error') this.errorToast(message); - }); - }) - .finally(() => this.endLoader()); - } - }); - break; - case 'enable': - this.startLoader(); - this.$store - .dispatch('localUsers/enableUsers', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') this.successToast(message); - if (type === 'error') this.errorToast(message); - }); - }) - .finally(() => this.endLoader()); - break; - case 'disable': - this.startLoader(); - this.$store - .dispatch('localUsers/disableUsers', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') this.successToast(message); - if (type === 'error') this.errorToast(message); - }); - }) - .finally(() => this.endLoader()); - break; - } - }, - onTableRowAction(action, row) { - switch (action) { - case 'edit': - this.initModalUser(row); - break; - case 'delete': - this.initModalDelete(row); - break; - default: - break; - } - }, - saveAccountSettings(settings) { - this.startLoader(); - this.$store - .dispatch('localUsers/saveAccountSettings', settings) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - }, - }, -}; -</script> - -<style lang="scss" scoped> -.btn.collapsed { - svg { - transform: rotate(180deg); - } -} -</style> |