Migrate to Bootstrap 5 and remove Vue compat plugin
Complete migration from Bootstrap 4 (bootstrap-vue) to Bootstrap 5
(bootstrap-vue-next) and remove the @vue/compat plugin to finalize
the Vue 3 migration.
Bundle size impact:
- Before (Bootstrap 4 + bootstrap-vue): 535 KiB gzipped
- After (Bootstrap 5 + bootstrap-vue-next): 511 KiB gzipped
- Reduction: 24 KiB (4.5% smaller)
Package updates:
- Update bootstrap 4.6.2 -> 5.3.8
- Update bootstrap-vue 2.23.1 -> bootstrap-vue-next 0.40.8
- Remove @vue/compat plugin
- Update vue 3.4.29 -> 3.5.24 and related packages
- Add mitt 3.0.1 for global event bus
- Add vue-demi 0.14.10 for library compatibility
Bootstrap 5 CSS updates:
- Replace directional classes: ml/mr/pl/pr -> ms/me/ps/pe
- Replace text-left/right -> text-start/end
- Replace sr-only -> visually-hidden / visually-hidden-focusable
- Update media breakpoint xs -> sm (Bootstrap 5 removed xs)
- Update color functions: gray("700") -> $gray-700
- Add form-switch border-radius for curved toggles
- Update alert, table, toast, form, and button styles
Bootstrap-Vue-Next API changes:
- Use createBootstrap() for plugin registration
- Update modal footer slots: #modal-footer -> #footer
- Fix form select events: @change -> @update:model-value
- Add v-model bindings to modals instead of manual show()/hide()
- Update toast system with custom plugin wrapping useToast()
- Register components and directives explicitly
Vue 3 specific updates:
- Replace $root.$emit with mitt event bus (eventBus.js)
- Update render function from h(App) to createApp(App)
- Add emits option to components
- Use h() instead of $createElement in mixins
- Add Vue 3 compile-time feature flags with documentation
- Update event listeners: $on/$off to eventBus methods
- Add beforeUnmount cleanup for event listeners
New components and significant additions:
- src/plugins/toast.js - Custom toast plugin wrapping useToast() for
Options API compatibility
- src/components/Global/ConfirmModal.vue - Global confirmation dialog
shim to replace Bootstrap 4's removed bvModal.msgBoxConfirm
- src/eventBus.js - mitt-based event bus with Vue 2-compatible API
- Navigation state preservation on page refresh implemented
Critical fixes:
- Add global API interceptor to strip Vue reactivity from payloads
- Preserve binary data (File, Blob, FormData) in API requests
- Fix Generate CSR modal v-model binding for proper open/close
- Remove debug logging and fix jest configuration
- Fix responsive text visibility in AppHeader
- Update BVTableSelectableMixin for proper row selection
- Fix BVToastMixin VNode rendering for Vue 3
Vue 3 modal fixes (lazy-loaded components):
- Add v-model support to network modals (ModalIpv4, ModalIpv6, ModalDns,
ModalHostname, ModalMacAddress, ModalDefaultGateway) by adding
modelValue prop, watcher on modelValue that triggers show(), and
update:modelValue emit in resetForm
- Remove lazy loading from TableIpv4, TableIpv6, TableDns to ensure
modal component refs are available when v-model triggers
- Fix modal title accessibility by adding title prop to modals
(ModalAddDestination, ModalUser, ModalAddRoleGroup, etc.)
i18n fixes (computed properties):
- Fix computed properties using i18n translations in ModalAddRoleGroup,
ModalUser, and ModalUploadCertificate
- Move useI18n() call from data() to setup() and return i18n object
- Use i18n.t() instead of $t in computed properties and templates
- Prevents "this.$t is not a function" and "_ctx.$t is not a function"
errors in Vue 3
Toast notification fixes:
- Fix toast progress bar visibility by setting progressProps to
undefined (documented way to opt-out) instead of false
- Change modelValue prop to interval for auto-dismiss timing
- Remove temporary CSS display:none hack from _toasts.scss
Network settings fixes:
- Fix checkbox @change event sending Vue reactive proxy object instead
of boolean by casting with !! operator in changeDomainNameState and
related methods in NetworkGlobalSettings.vue
- Ensures API receives plain boolean values in PATCH requests
Navigation fixes:
- Fix nav-link styling for navigation items without children by
replacing b-nav-item with router-link in AppNavigation.vue
- Prevents blue font color from .nav-link CSS class
Configuration updates:
- Remove vue-compat webpack configuration
- Add Vue 3 feature flags (__VUE_OPTIONS_API__, etc.)
- Add .cursor to .gitignore
Accessibility improvements:
- Add autocomplete attributes to password and credential inputs
- Add modal title props for screen reader support
Build completes successfully and UI behavior matches pre-migration.
Extracted features (to be submitted in follow-up PRs):
The following features were removed from this migration PR to keep it
focused on the Bootstrap 5 upgrade. They will be submitted separately:
1. UnresponsiveModal - Server connectivity watchdog with auto-retry
2. Auth token persistence - sessionStorage support for X-Auth-Token
3. Hardware store error handling - try/catch, dynamic discovery
4. Login page connecting indicator - Backend polling with spinner
5. Test updates - Jest setup and snapshot updates for
Bootstrap-Vue-Next
6. Documentation updates - Vue 3 and Vue I18n v9+ API documentation
7. Enhanced ConfirmModal - Feature-rich confirmation dialog with
custom actions
Change-Id: Ib76a58f324b3c926cf536e6e4626e4271639de38
Signed-off-by: Jason Westover <jwestover@nvidia.com>
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index a55b66c..29c1436 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -32,11 +32,11 @@
</b-col>
</b-row>
<b-row>
- <b-col xl="11" class="text-right">
+ <b-col xl="11" class="text-end">
<b-button
- v-b-modal.generate-csr
data-test-id="certificates-button-generateCsr"
variant="link"
+ @click="showCsr = true"
>
<icon-add />
{{ $t('pageCertificates.generateCsr') }}
@@ -57,6 +57,7 @@
responsive="md"
show-empty
hover
+ thead-class="table-light"
:busy="isBusy"
:fields="fields"
:items="tableItems"
@@ -94,8 +95,12 @@
</b-row>
<!-- Modals -->
- <modal-upload-certificate :certificate="modalCertificate" @ok="onModalOk" />
- <modal-generate-csr />
+ <modal-upload-certificate
+ v-model="showUpload"
+ :certificate="modalCertificate"
+ @ok="onModalOk"
+ />
+ <modal-generate-csr v-model="showCsr" />
</b-container>
</template>
@@ -115,6 +120,7 @@
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'Certificates',
@@ -134,11 +140,17 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
isBusy: true,
modalCertificate: null,
+ showUpload: false,
+ showCsr: false,
fileTypeCorrect: undefined,
fields: [
{
@@ -164,7 +176,7 @@
{
key: 'actions',
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
};
@@ -240,25 +252,23 @@
},
initModalUploadCertificate(certificate = null) {
this.modalCertificate = certificate;
- this.$bvModal.show('upload-certificate');
+ this.showUpload = true;
},
initModalDeleteCertificate(certificate) {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageCertificates.modal.deleteConfirmMessage', {
- issuedBy: certificate.issuedBy,
- certificate: certificate.certificate,
- }),
- {
- title: i18n.global.t('pageCertificates.deleteCertificate'),
- okTitle: i18n.global.t('global.action.delete'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) this.deleteCertificate(certificate);
- });
+ this.confirmDialog(
+ i18n.global.t('pageCertificates.modal.deleteConfirmMessage', {
+ issuedBy: certificate.issuedBy,
+ certificate: certificate.certificate,
+ }),
+ {
+ title: i18n.global.t('pageCertificates.deleteCertificate'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) this.deleteCertificate(certificate);
+ });
},
onModalOk({ addNew, file, type, location }) {
if (addNew) {
@@ -342,6 +352,9 @@
const fileTypeExtension = file.name.split('.').pop();
return fileTypeExtension === 'pem';
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
},
};
</script>
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index a74a1e4..53364de 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -3,6 +3,7 @@
<b-modal
id="generate-csr"
ref="modal"
+ v-model="isVisible"
size="lg"
no-stacking
:title="$t('pageCertificates.modal.generateACertificateSigningRequest')"
@@ -157,7 +158,8 @@
<b-col lg="6">
<b-form-group label-for="contact-person">
<template #label>
- {{ $t('pageCertificates.modal.contactPerson') }} -
+ {{ $t('pageCertificates.modal.contactPerson') }}
+ -
<span class="form-text d-inline">
{{ $t('global.form.optional') }}
</span>
@@ -175,7 +177,8 @@
<b-col lg="6">
<b-form-group label-for="email-address">
<template #label>
- {{ $t('pageCertificates.modal.emailAddress') }} -
+ {{ $t('pageCertificates.modal.emailAddress') }}
+ -
<span class="form-text d-inline">
{{ $t('global.form.optional') }}
</span>
@@ -193,7 +196,8 @@
<b-col lg="12">
<b-form-group label-for="alternate-name">
<template #label>
- {{ $t('pageCertificates.modal.alternateName') }} -
+ {{ $t('pageCertificates.modal.alternateName') }}
+ -
<span class="form-text d-inline">
{{ $t('global.form.optional') }}
</span>
@@ -218,7 +222,8 @@
data-test-id="modalGenerateCsr-input-alternateName"
>
<template #add-button-text>
- <icon-add /> {{ $t('global.action.add') }}
+ <icon-add />
+ {{ $t('global.action.add') }}
</template>
</b-form-tags>
</b-form-group>
@@ -311,7 +316,7 @@
</b-row>
</b-container>
</b-form>
- <template #modal-footer="{ ok, cancel }">
+ <template #footer="{ ok, cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -328,13 +333,14 @@
</b-modal>
<b-modal
id="csr-string"
+ v-model="showCsrString"
no-stacking
size="lg"
:title="$t('pageCertificates.modal.certificateSigningRequest')"
@hidden="onHiddenCsrStringModal"
>
{{ csrString }}
- <template #modal-footer>
+ <template #footer>
<b-btn variant="secondary" @click="copyCsrString">
<template v-if="csrStringCopied">
<icon-checkmark />
@@ -375,6 +381,13 @@
name: 'ModalGenerateCsr',
components: { IconAdd, IconCheckmark },
mixins: [BVToastMixin, VuelidateMixin],
+ props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ emits: ['update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -383,6 +396,7 @@
data() {
return {
$t: useI18n().t,
+ showCsrString: false,
form: {
certificateType: null,
country: null,
@@ -410,6 +424,14 @@
};
},
computed: {
+ isVisible: {
+ get() {
+ return this.modelValue;
+ },
+ set(value) {
+ this.$emit('update:modelValue', value);
+ },
+ },
certificateTypes() {
return this.$store.getters['certificates/certificateTypes'];
},
@@ -457,7 +479,7 @@
.dispatch('certificates/generateCsr', this.form)
.then(({ data: { CSRString } }) => {
this.csrString = CSRString;
- this.$bvModal.show('csr-string');
+ this.showCsrString = true;
this.v$.$reset();
});
},
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index 7a40bfb..927163e 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -1,18 +1,16 @@
<template>
- <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm">
- <template #modal-title>
- <template v-if="certificate">
- {{ $t('pageCertificates.replaceCertificate') }}
- </template>
- <template v-else>
- {{ $t('pageCertificates.addNewCertificate') }}
- </template>
- </template>
+ <b-modal
+ id="upload-certificate"
+ ref="modal"
+ :title="modalTitle"
+ @ok="onOk"
+ @hidden="resetForm"
+ >
<b-form>
<!-- Replace Certificate type -->
<template v-if="certificate !== null">
<dl class="mb-4">
- <dt>{{ $t('pageCertificates.modal.certificateType') }}</dt>
+ <dt>{{ i18n.t('pageCertificates.modal.certificateType') }}</dt>
<dd>{{ certificate.certificate }}</dd>
</dl>
</template>
@@ -20,7 +18,7 @@
<!-- Add new Certificate type -->
<template v-else>
<b-form-group
- :label="$t('pageCertificates.modal.certificateType')"
+ :label="i18n.t('pageCertificates.modal.certificateType')"
label-for="certificate-type"
>
<b-form-select
@@ -33,13 +31,13 @@
</b-form-select>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.certificateType.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
</b-form-group>
</template>
- <b-form-group :label="$t('pageCertificates.modal.certificateFile')">
+ <b-form-group :label="i18n.t('pageCertificates.modal.certificateFile')">
<form-file
id="certificate-file"
v-model="form.file"
@@ -48,7 +46,7 @@
>
<template #invalid>
<b-form-invalid-feedback role="alert">
- {{ $t('global.form.required') }}
+ {{ i18n.t('global.form.required') }}
</b-form-invalid-feedback>
</template>
</form-file>
@@ -56,14 +54,14 @@
</b-form>
<template #modal-ok>
<template v-if="certificate">
- {{ $t('global.action.replace') }}
+ {{ i18n.t('global.action.replace') }}
</template>
<template v-else>
- {{ $t('global.action.add') }}
+ {{ i18n.t('global.action.add') }}
</template>
</template>
<template #modal-cancel>
- {{ $t('global.action.cancel') }}
+ {{ i18n.t('global.action.cancel') }}
</template>
</b-modal>
</template>
@@ -94,13 +92,14 @@
},
emits: ['ok'],
setup() {
+ const i18n = useI18n();
return {
v$: useVuelidate(),
+ i18n,
};
},
data() {
return {
- $t: useI18n().t,
form: {
certificateType: null,
file: null,
@@ -108,6 +107,11 @@
};
},
computed: {
+ modalTitle() {
+ return this.certificate
+ ? this.i18n.t('pageCertificates.replaceCertificate')
+ : this.i18n.t('pageCertificates.addNewCertificate');
+ },
certificateTypes() {
return this.$store.getters['certificates/availableUploadTypes'];
},
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index 6de491a..a39b800 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -24,7 +24,7 @@
<b-form-group
class="m-0"
:label="$t('pageLdap.ariaLabel.ldapSettings')"
- label-class="sr-only"
+ label-class="visually-hidden-focusable"
:disabled="!form.ldapAuthenticationEnabled || loading"
>
<b-row>
@@ -50,12 +50,16 @@
</b-form-checkbox>
</b-form-group>
<dl>
- <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
+ <dt>
+ {{ $t('pageLdap.form.caCertificateValidUntil') }}
+ </dt>
<dd v-if="caCertificateExpiration">
{{ $filters.formatDate(caCertificateExpiration) }}
</dd>
<dd v-else>--</dd>
- <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
+ <dt>
+ {{ $t('pageLdap.form.ldapCertificateValidUntil') }}
+ </dt>
<dd v-if="ldapCertificateExpiration">
{{ $filters.formatDate(ldapCertificateExpiration) }}
</dd>
@@ -122,6 +126,7 @@
<b-form-input
id="bind-dn"
v-model="form.bindDn"
+ autocomplete="username"
data-test-id="ldap-input-bindDn"
:state="getValidationState(v$.form.bindDn)"
@change="v$.form.bindDn.$touch()"
@@ -143,6 +148,7 @@
id="bind-password"
v-model="form.bindPassword"
type="password"
+ autocomplete="current-password"
:state="getValidationState(v$.form.bindPassword)"
class="form-control-with-button"
@change="v$.form.bindPassword.$touch()"
@@ -173,7 +179,8 @@
<b-col sm="6" xl="4">
<b-form-group label-for="user-id-attribute">
<template #label>
- {{ $t('pageLdap.form.userIdAttribute') }} -
+ {{ $t('pageLdap.form.userIdAttribute') }}
+ -
<span class="form-text d-inline">
{{ $t('global.form.optional') }}
</span>
@@ -189,7 +196,8 @@
<b-col sm="6" xl="4">
<b-form-group label-for="group-id-attribute">
<template #label>
- {{ $t('pageLdap.form.groupIdAttribute') }} -
+ {{ $t('pageLdap.form.groupIdAttribute') }}
+ -
<span class="form-text d-inline">
{{ $t('global.form.optional') }}
</span>
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index f4dcb82..38ff473 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -1,13 +1,11 @@
<template>
- <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm">
- <template #modal-title>
- <template v-if="roleGroup">
- {{ $t('pageLdap.modal.editRoleGroup') }}
- </template>
- <template v-else>
- {{ $t('pageLdap.modal.addNewRoleGroup') }}
- </template>
- </template>
+ <b-modal
+ id="modal-role-group"
+ ref="modal"
+ :title="modalTitle"
+ @ok="onOk"
+ @hidden="resetForm"
+ >
<b-container>
<b-row>
<b-col sm="8">
@@ -15,7 +13,7 @@
<!-- Edit role group -->
<template v-if="roleGroup !== null">
<dl class="mb-4">
- <dt>{{ $t('pageLdap.modal.groupName') }}</dt>
+ <dt>{{ i18n.t('pageLdap.modal.groupName') }}</dt>
<dd style="word-break: break-all">{{ form.groupName }}</dd>
</dl>
</template>
@@ -23,7 +21,7 @@
<!-- Add new role group -->
<template v-else>
<b-form-group
- :label="$t('pageLdap.modal.groupName')"
+ :label="i18n.t('pageLdap.modal.groupName')"
label-for="role-group-name"
>
<b-form-input
@@ -33,13 +31,13 @@
@input="v$.form.groupName.$touch()"
/>
<b-form-invalid-feedback role="alert">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</b-form-invalid-feedback>
</b-form-group>
</template>
<b-form-group
- :label="$t('pageLdap.modal.groupPrivilege')"
+ :label="i18n.t('pageLdap.modal.groupPrivilege')"
label-for="privilege"
>
<b-form-select
@@ -51,28 +49,28 @@
>
<template v-if="!roleGroup" #first>
<b-form-select-option :value="null" disabled>
- {{ $t('global.form.selectAnOption') }}
+ {{ i18n.t('global.form.selectAnOption') }}
</b-form-select-option>
</template>
</b-form-select>
<b-form-invalid-feedback role="alert">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</b-form-invalid-feedback>
</b-form-group>
</b-form>
</b-col>
</b-row>
</b-container>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
- {{ $t('global.action.cancel') }}
+ {{ i18n.t('global.action.cancel') }}
</b-button>
<b-button form="role-group" type="submit" variant="primary" @click="onOk">
<template v-if="roleGroup">
- {{ $t('global.action.save') }}
+ {{ i18n.t('global.action.save') }}
</template>
<template v-else>
- {{ $t('global.action.add') }}
+ {{ i18n.t('global.action.add') }}
</template>
</b-button>
</template>
@@ -102,13 +100,14 @@
},
emits: ['ok', 'hidden'],
setup() {
+ const i18n = useI18n();
return {
v$: useVuelidate(),
+ i18n,
};
},
data() {
return {
- $t: useI18n().t,
form: {
groupName: null,
groupPrivilege: null,
@@ -116,6 +115,11 @@
};
},
computed: {
+ modalTitle() {
+ return this.roleGroup
+ ? this.i18n.t('pageLdap.modal.editRoleGroup')
+ : this.i18n.t('pageLdap.modal.addNewRoleGroup');
+ },
accountRoles() {
return this.$store.getters['userManagement/accountRoles'];
},
diff --git a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
index f73d927..8b8b3ac 100644
--- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -8,7 +8,7 @@
</b-col>
</b-row>
<b-row>
- <b-col class="text-right" md="9">
+ <b-col class="text-end" md="9">
<b-btn
variant="primary"
:disabled="!isServiceEnabled"
@@ -23,7 +23,9 @@
<b-col md="9">
<table-toolbar
ref="toolbar"
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
:actions="batchActions"
@clear-selected="clearSelectedRows($refs.table)"
@batch-action="onBatchAction"
@@ -35,8 +37,9 @@
show-empty
no-select-on-click
hover
- no-sort-reset
+ must-sort
sort-icon-left
+ thead-class="table-light"
:busy="isBusy"
:items="tableItems"
:fields="fields"
@@ -49,9 +52,11 @@
v-model="tableHeaderCheckboxModel"
:indeterminate="tableHeaderCheckboxIndeterminate"
:disabled="!isServiceEnabled"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -60,7 +65,9 @@
:disabled="!isServiceEnabled"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -84,6 +91,7 @@
</b-col>
</b-row>
<modal-add-role-group
+ v-model="showRoleGroupModal"
:role-group="activeRoleGroup"
@ok="saveRoleGroup"
@hidden="activeRoleGroup = null"
@@ -110,6 +118,7 @@
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
components: {
@@ -122,11 +131,16 @@
TableToolbar,
},
mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
isBusy: true,
activeRoleGroup: null,
+ showRoleGroupModal: false,
fields: [
{
key: 'checkbox',
@@ -146,7 +160,7 @@
key: 'actions',
sortable: false,
label: '',
- tdClass: 'text-right',
+ tdClass: 'text-end',
},
],
batchActions: [
@@ -190,31 +204,30 @@
},
methods: {
onBatchAction() {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
- okTitle: i18n.global.t('global.action.delete'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.startLoader();
- this.$store
- .dispatch('ldap/deleteRoleGroup', {
- roleGroups: this.selectedRows,
- })
- .then((success) => this.successToast(success))
- .catch(({ message }) => this.errorToast(message))
- .finally(() => this.endLoader());
- }
- });
+ const count = this.selectedRows.length;
+ this.confirmDialog(
+ i18n.global.t(
+ 'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
+ count,
+ ),
+ {
+ title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch('ldap/deleteRoleGroup', {
+ roleGroups: this.selectedRows,
+ })
+ .then((success) => this.successToast(success))
+ .catch(({ message }) => this.errorToast(message))
+ .finally(() => this.endLoader());
+ }
+ });
},
onTableRowAction(action, row) {
switch (action) {
@@ -222,34 +235,37 @@
this.initRoleGroupModal(row);
break;
case 'delete':
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
- groupName: row.groupName,
- }),
- {
- title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
- okTitle: i18n.global.t('global.action.delete'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.startLoader();
- this.$store
- .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
- .then((success) => this.successToast(success))
- .catch(({ message }) => this.errorToast(message))
- .finally(() => this.endLoader());
- }
- });
+ this.confirmDialog(
+ i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
+ groupName: row.groupName,
+ }),
+ {
+ title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch('ldap/deleteRoleGroup', {
+ roleGroups: [row],
+ })
+ .then((success) => this.successToast(success))
+ .catch(({ message }) => this.errorToast(message))
+ .finally(() => this.endLoader());
+ }
+ });
break;
}
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
initRoleGroupModal(roleGroup) {
this.activeRoleGroup = roleGroup;
- this.$bvModal.show('modal-role-group');
+ this.showRoleGroupModal = true;
},
saveRoleGroup({ addNew, groupName, groupPrivilege }) {
this.activeRoleGroup = null;
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 58d8363..b9a4323 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -5,7 +5,7 @@
<b-col md="8">
<b-row v-if="!modifySSHPolicyDisabled" class="setting-section">
<b-col class="d-flex align-items-center justify-content-between">
- <dl class="mr-3 w-75">
+ <dl class="me-3 w-75">
<dt>{{ $t('pagePolicies.ssh') }}</dt>
<dd>
{{ $t('pagePolicies.sshDescription') }}
@@ -18,7 +18,7 @@
switch
@change="changeSshProtocolState"
>
- <span class="sr-only">
+ <span class="visually-hidden-focusable">
{{ $t('pagePolicies.ssh') }}
</span>
<span v-if="sshProtocolState">
@@ -30,7 +30,7 @@
</b-row>
<b-row class="setting-section">
<b-col class="d-flex align-items-center justify-content-between">
- <dl class="mt-3 mr-3 w-75">
+ <dl class="mt-3 me-3 w-75">
<dt>{{ $t('pagePolicies.ipmi') }}</dt>
<dd>
{{ $t('pagePolicies.ipmiDescription') }}
@@ -43,7 +43,7 @@
switch
@change="changeIpmiProtocolState"
>
- <span class="sr-only">
+ <span class="visually-hidden-focusable">
{{ $t('pagePolicies.ipmi') }}
</span>
<span v-if="ipmiProtocolState">
@@ -55,7 +55,7 @@
</b-row>
<b-row class="setting-section">
<b-col class="d-flex align-items-center justify-content-between">
- <dl class="mt-3 mr-3 w-75">
+ <dl class="mt-3 me-3 w-75">
<dt>{{ $t('pagePolicies.vtpm') }}</dt>
<dd>
{{ $t('pagePolicies.vtpmDescription') }}
@@ -68,7 +68,7 @@
switch
@change="changeVtpmState"
>
- <span class="sr-only">
+ <span class="visually-hidden-focusable">
{{ $t('pagePolicies.vtpm') }}
</span>
<span v-if="vtpmState">
@@ -80,7 +80,7 @@
</b-row>
<b-row class="setting-section">
<b-col class="d-flex align-items-center justify-content-between">
- <dl class="mt-3 mr-3 w-75">
+ <dl class="mt-3 me-3 w-75">
<dt>{{ $t('pagePolicies.rtad') }}</dt>
<dd>
{{ $t('pagePolicies.rtadDescription') }}
@@ -93,7 +93,7 @@
switch
@change="changeRtadState"
>
- <span class="sr-only">
+ <span class="visually-hidden-focusable">
{{ $t('pagePolicies.rtad') }}
</span>
<span v-if="rtadState">
@@ -105,7 +105,7 @@
</b-row>
<b-row class="setting-section">
<b-col class="d-flex align-items-center justify-content-between">
- <dl class="mt-3 mr-3 w-75">
+ <dl class="mt-3 me-3 w-75">
<dt>{{ $t('pagePolicies.webSessionTimeOut') }}</dt>
<dd>
{{ $t('pagePolicies.webSessionTimeOutDescription') }}
@@ -117,7 +117,7 @@
id="session-timeout-options"
v-model="sessionTimeoutState"
:options="sessionTimeOutOptions"
- @change="saveSessionTimeoutValue"
+ @update:model-value="saveSessionTimeoutValue"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -154,12 +154,30 @@
modifySSHPolicyDisabled:
process.env.VUE_APP_MODIFY_SSH_POLICY_DISABLED === 'true',
sessionTimeOutOptions: [
- { value: 1800, text: i18n.global.t('pagePolicies.options.30minutes') },
- { value: 3600, text: i18n.global.t('pagePolicies.options.1hour') },
- { value: 7200, text: i18n.global.t('pagePolicies.options.2hours') },
- { value: 14400, text: i18n.global.t('pagePolicies.options.4hours') },
- { value: 28800, text: i18n.global.t('pagePolicies.options.8hours') },
- { value: 86400, text: i18n.global.t('pagePolicies.options.1day') },
+ {
+ value: 1800,
+ text: i18n.global.t('pagePolicies.options.30minutes'),
+ },
+ {
+ value: 3600,
+ text: i18n.global.t('pagePolicies.options.1hour'),
+ },
+ {
+ value: 7200,
+ text: i18n.global.t('pagePolicies.options.2hours'),
+ },
+ {
+ value: 14400,
+ text: i18n.global.t('pagePolicies.options.4hours'),
+ },
+ {
+ value: 28800,
+ text: i18n.global.t('pagePolicies.options.8hours'),
+ },
+ {
+ value: 86400,
+ text: i18n.global.t('pagePolicies.options.1day'),
+ },
],
};
},
@@ -246,9 +264,9 @@
.then((message) => this.successToast(message))
.catch(({ message }) => this.errorToast(message));
},
- saveSessionTimeoutValue(sessionTimeoutState) {
+ saveSessionTimeoutValue(value) {
this.$store
- .dispatch('policies/saveSessionTimeoutValue', sessionTimeoutState)
+ .dispatch('policies/saveSessionTimeoutValue', value)
.then((message) => this.successToast(message))
.catch(({ message }) => this.errorToast(message));
},
@@ -258,7 +276,7 @@
<style lang="scss" scoped>
.setting-section {
- border-bottom: 1px solid gray('300');
+ border-bottom: 1px solid $gray-300;
}
.session-timeout {
align-self: center;
diff --git a/src/views/SecurityAndAccess/Sessions/Sessions.vue b/src/views/SecurityAndAccess/Sessions/Sessions.vue
index 74dcf74..474ac95 100644
--- a/src/views/SecurityAndAccess/Sessions/Sessions.vue
+++ b/src/views/SecurityAndAccess/Sessions/Sessions.vue
@@ -21,7 +21,9 @@
<b-col>
<table-toolbar
ref="toolbar"
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
:actions="batchActions"
@clear-selected="clearSelectedRows($refs.table)"
@batch-action="onBatchAction"
@@ -35,7 +37,8 @@
no-select-on-click
hover
show-empty
- sort-by="sessionID"
+ thead-class="table-light"
+ :sort-by="['sessionID']"
:busy="isBusy"
:fields="fields"
:items="allConnections"
@@ -44,7 +47,7 @@
:per-page="perPage"
:current-page="currentPage"
@filtered="onFiltered"
- @row-selected="onRowSelected($event, allConnections.length)"
+ @row-selected="onRowSelected"
>
<!-- Checkbox column -->
<template #head(checkbox)>
@@ -52,9 +55,11 @@
v-model="tableHeaderCheckboxModel"
data-test-id="sessions-checkbox-selectAll"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -63,7 +68,9 @@
:data-test-id="`sessions-checkbox-selectRow-${row.index}`"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -126,17 +133,14 @@
perPage,
itemsPerPageOptions,
} from '@/components/Mixins/BVPaginationMixin';
-import BVTableSelectableMixin, {
- selectedRows,
- tableHeaderCheckboxModel,
- tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
+import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import SearchFilterMixin, {
searchFilter,
} from '@/components/Mixins/SearchFilterMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
components: {
@@ -159,6 +163,10 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -203,10 +211,7 @@
currentPage: currentPage,
itemsPerPageOptions: itemsPerPageOptions,
perPage: perPage,
- selectedRows: selectedRows,
searchTotalFilteredRows: 0,
- tableHeaderCheckboxModel: tableHeaderCheckboxModel,
- tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
searchFilter: searchFilter,
};
},
@@ -259,47 +264,41 @@
},
onTableRowAction(action, { uri }) {
if (action === 'disconnect') {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageSessions.modal.disconnectMessage'),
- {
- title: i18n.global.t('pageSessions.modal.disconnectTitle'),
- okTitle: i18n.global.t('pageSessions.action.disconnect'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) this.disconnectSessions([uri]);
- });
+ this.confirmDialog(
+ i18n.global.t('pageSessions.modal.disconnectMessage'),
+ {
+ title: i18n.global.t('pageSessions.modal.disconnectTitle'),
+ okTitle: i18n.global.t('pageSessions.action.disconnect'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) this.disconnectSessions([uri]);
+ });
}
},
onBatchAction(action) {
if (action === 'disconnect') {
const uris = this.selectedRows.map((row) => row.uri);
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageSessions.modal.disconnectMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageSessions.modal.disconnectTitle',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t('pageSessions.action.disconnect'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.disconnectSessions(uris);
- }
- });
+ const count = this.selectedRows.length;
+ this.confirmDialog(
+ i18n.global.t('pageSessions.modal.disconnectMessage', count),
+ {
+ title: i18n.global.t('pageSessions.modal.disconnectTitle', count),
+ okTitle: i18n.global.t('pageSessions.action.disconnect'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.disconnectSessions(uris);
+ }
+ });
}
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
},
};
</script>
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index a181ba7..ed5114a 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -100,7 +100,7 @@
</b-row>
</b-container>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button
variant="secondary"
data-test-id="userManagement-button-cancel"
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index af8903e..e86a2ec 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -1,13 +1,5 @@
<template>
- <b-modal id="modal-user" ref="modal" @hidden="resetForm">
- <template #modal-title>
- <template v-if="newUser">
- {{ $t('pageUserManagement.addUser') }}
- </template>
- <template v-else>
- {{ $t('pageUserManagement.editUser') }}
- </template>
- </template>
+ <b-modal id="modal-user" ref="modal" :title="modalTitle" @hidden="resetForm">
<b-form id="form-user" novalidate @submit.prevent="handleSubmit">
<b-container>
<!-- Manual unlock form control -->
@@ -15,10 +7,12 @@
<b-col sm="9">
<alert :show="true" variant="warning" small>
<template v-if="!v$.form.manualUnlock.$dirty">
- {{ $t('pageUserManagement.modal.accountLocked') }}
+ {{ i18n.t('pageUserManagement.modal.accountLocked') }}
</template>
<template v-else>
- {{ $t('pageUserManagement.modal.clickSaveToUnlockAccount') }}
+ {{
+ i18n.t('pageUserManagement.modal.clickSaveToUnlockAccount')
+ }}
</template>
</alert>
</b-col>
@@ -34,13 +28,15 @@
data-test-id="userManagement-button-manualUnlock"
@click="v$.form.manualUnlock.$touch()"
>
- {{ $t('pageUserManagement.modal.unlock') }}
+ {{ i18n.t('pageUserManagement.modal.unlock') }}
</b-button>
</b-col>
</b-row>
<b-row>
<b-col>
- <b-form-group :label="$t('pageUserManagement.modal.accountStatus')">
+ <b-form-group
+ :label="i18n.t('pageUserManagement.modal.accountStatus')"
+ >
<b-form-radio
v-model="form.status"
name="user-status"
@@ -48,7 +44,7 @@
data-test-id="userManagement-radioButton-statusEnabled"
@input="v$.form.status.$touch()"
>
- {{ $t('global.status.enabled') }}
+ {{ i18n.t('global.status.enabled') }}
</b-form-radio>
<b-form-radio
v-model="form.status"
@@ -58,18 +54,18 @@
:disabled="!newUser && originalUsername === disabled"
@input="v$.form.status.$touch()"
>
- {{ $t('global.status.disabled') }}
+ {{ i18n.t('global.status.disabled') }}
</b-form-radio>
</b-form-group>
<b-form-group
- :label="$t('pageUserManagement.modal.username')"
+ :label="i18n.t('pageUserManagement.modal.username')"
label-for="username"
>
<b-form-text id="username-help-block">
- {{ $t('pageUserManagement.modal.cannotStartWithANumber') }}
+ {{ i18n.t('pageUserManagement.modal.cannotStartWithANumber') }}
<br />
{{
- $t(
+ i18n.t(
'pageUserManagement.modal.noSpecialCharactersExceptUnderscore',
)
}}
@@ -86,20 +82,23 @@
/>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.username.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
<template v-else-if="v$.form.username.maxLength.$invalid">
{{
- $t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
+ i18n.t('global.form.lengthMustBeBetween', {
+ min: 1,
+ max: 16,
+ })
}}
</template>
<template v-else-if="v$.form.username.pattern.$invalid">
- {{ $t('global.form.invalidFormat') }}
+ {{ i18n.t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
</b-form-group>
<b-form-group
- :label="$t('pageUserManagement.modal.privilege')"
+ :label="i18n.t('pageUserManagement.modal.privilege')"
label-for="privilege"
>
<b-form-select
@@ -113,25 +112,25 @@
>
<template #first>
<b-form-select-option :value="null" disabled>
- {{ $t('global.form.selectAnOption') }}
+ {{ i18n.t('global.form.selectAnOption') }}
</b-form-select-option>
</template>
</b-form-select>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.privilege.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
</b-form-group>
</b-col>
<b-col>
<b-form-group
- :label="$t('pageUserManagement.modal.userPassword')"
+ :label="i18n.t('pageUserManagement.modal.userPassword')"
label-for="password"
>
<b-form-text id="password-help-block">
{{
- $t('pageUserManagement.modal.passwordMustBeBetween', {
+ i18n.t('pageUserManagement.modal.passwordMustBeBetween', {
min: passwordRequirements.minLength,
max: passwordRequirements.maxLength,
})
@@ -142,6 +141,7 @@
id="password"
v-model="form.password"
type="password"
+ autocomplete="new-password"
data-test-id="userManagement-input-password"
aria-describedby="password-help-block"
:state="getValidationState(v$.form.password)"
@@ -150,7 +150,7 @@
/>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.password.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
<template
v-if="
@@ -159,7 +159,7 @@
"
>
{{
- $t('pageUserManagement.modal.passwordMustBeBetween', {
+ i18n.t('pageUserManagement.modal.passwordMustBeBetween', {
min: passwordRequirements.minLength,
max: passwordRequirements.maxLength,
})
@@ -169,7 +169,7 @@
</input-password-toggle>
</b-form-group>
<b-form-group
- :label="$t('pageUserManagement.modal.confirmUserPassword')"
+ :label="i18n.t('pageUserManagement.modal.confirmUserPassword')"
label-for="password-confirmation"
>
<input-password-toggle>
@@ -178,6 +178,7 @@
v-model="form.passwordConfirmation"
data-test-id="userManagement-input-passwordConfirmation"
type="password"
+ autocomplete="new-password"
:state="getValidationState(v$.form.passwordConfirmation)"
class="form-control-with-button"
@input="v$.form.passwordConfirmation.$touch()"
@@ -186,14 +187,14 @@
<template
v-if="v$.form.passwordConfirmation.required.$invalid"
>
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
<template
v-else-if="
v$.form.passwordConfirmation.sameAsPassword.$invalid
"
>
- {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }}
+ {{ i18n.t('pageUserManagement.modal.passwordsDoNotMatch') }}
</template>
</b-form-invalid-feedback>
</input-password-toggle>
@@ -202,13 +203,13 @@
</b-row>
</b-container>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button
variant="secondary"
data-test-id="userManagement-button-cancel"
@click="cancel()"
>
- {{ $t('global.action.cancel') }}
+ {{ i18n.t('global.action.cancel') }}
</b-button>
<b-button
form="form-user"
@@ -218,10 +219,10 @@
@click="onOk"
>
<template v-if="newUser">
- {{ $t('pageUserManagement.addUser') }}
+ {{ i18n.t('pageUserManagement.addUser') }}
</template>
<template v-else>
- {{ $t('global.action.save') }}
+ {{ i18n.t('global.action.save') }}
</template>
</b-button>
</template>
@@ -258,13 +259,14 @@
},
emits: ['ok', 'hidden'],
setup() {
+ const i18n = useI18n();
return {
v$: useVuelidate(),
+ i18n,
};
},
data() {
return {
- $t: useI18n().t,
originalUsername: '',
form: {
status: true,
@@ -278,6 +280,11 @@
};
},
computed: {
+ modalTitle() {
+ return this.newUser
+ ? this.i18n.t('pageUserManagement.addUser')
+ : this.i18n.t('pageUserManagement.editUser');
+ },
newUser() {
return this.user ? false : true;
},
diff --git a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
index 7e9faef..03d0088 100644
--- a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
+++ b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
@@ -1,5 +1,12 @@
<template>
- <b-table stacked="sm" hover small :items="items" :fields="fields">
+ <b-table
+ stacked="sm"
+ hover
+ small
+ thead-class="table-light"
+ :items="items"
+ :fields="fields"
+ >
<template #cell(administrator)="data">
<template v-if="data.value">
<checkmark20 />
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index cb057a7..e59ffbc 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -2,7 +2,7 @@
<b-container fluid="xl">
<page-title />
<b-row>
- <b-col xl="9" class="text-right">
+ <b-col xl="9" class="text-end">
<b-button variant="link" @click="initModalSettings">
<icon-settings />
{{ $t('pageUserManagement.accountPolicySettings') }}
@@ -21,7 +21,9 @@
<b-col xl="9">
<table-toolbar
ref="toolbar"
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
:actions="tableToolbarActions"
@clear-selected="clearSelectedRows($refs.table)"
@batch-action="onBatchAction"
@@ -33,6 +35,7 @@
show-empty
no-select-on-click
hover
+ thead-class="table-light"
:busy="isBusy"
:fields="fields"
:items="tableItems"
@@ -45,9 +48,11 @@
v-model="tableHeaderCheckboxModel"
data-test-id="userManagement-checkbox-tableHeaderCheckbox"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -56,7 +61,9 @@
data-test-id="userManagement-checkbox-toggleSelectRow"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -88,22 +95,27 @@
<b-row>
<b-col xl="8">
<b-button
- v-b-toggle.collapse-role-table
data-test-id="userManagement-button-viewPrivilegeRoleDescriptions"
variant="link"
class="mt-3"
+ @click="showRoles = !showRoles"
>
<icon-chevron />
{{ $t('pageUserManagement.viewPrivilegeRoleDescriptions') }}
</b-button>
- <b-collapse id="collapse-role-table" class="mt-3">
+ <b-collapse id="collapse-role-table" :visible="showRoles" class="mt-3">
<table-roles />
</b-collapse>
</b-col>
</b-row>
<!-- Modals -->
- <modal-settings :settings="setting" @ok="saveAccountSettings" />
+ <modal-settings
+ v-model="showSettingsModal"
+ :settings="setting"
+ @ok="saveAccountSettings"
+ />
<modal-user
+ v-model="showUserModal"
:user="activeUser"
:password-requirements="passwordRequirements"
@ok="saveUser"
@@ -135,6 +147,7 @@
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'UserManagement',
@@ -156,6 +169,10 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -181,7 +198,7 @@
{
key: 'actions',
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
tableToolbarActions: [
@@ -201,6 +218,9 @@
selectedRows: selectedRows,
tableHeaderCheckboxModel: tableHeaderCheckboxModel,
tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+ showUserModal: false,
+ showSettingsModal: false,
+ showRoles: false,
};
},
computed: {
@@ -265,30 +285,28 @@
},
initModalUser(user) {
this.activeUser = user;
- this.$bvModal.show('modal-user');
+ this.showUserModal = true;
},
initModalDelete(user) {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', {
- user: user.username,
- }),
- {
- title: i18n.global.t('pageUserManagement.deleteUser'),
- okTitle: i18n.global.t('pageUserManagement.deleteUser'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.deleteUser(user);
- }
- });
+ this.confirmDialog(
+ i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', {
+ user: user.username,
+ }),
+ {
+ title: i18n.global.t('pageUserManagement.deleteUser'),
+ okTitle: i18n.global.t('pageUserManagement.deleteUser'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.deleteUser(user);
+ }
+ });
},
initModalSettings() {
this.setting = this.settings;
- this.$bvModal.show('modal-settings');
+ this.showSettingsModal = true;
},
saveUser({ isNewUser, userData }) {
this.startLoader();
@@ -315,41 +333,34 @@
.finally(() => this.endLoader());
},
onBatchAction(action) {
+ const count = this.selectedRows.length;
switch (action) {
case 'delete':
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageUserManagement.modal.batchDeleteConfirmMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageUserManagement.deleteUser',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t(
- 'pageUserManagement.deleteUser',
- this.selectedRows.length,
- ),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.startLoader();
- this.$store
- .dispatch('userManagement/deleteUsers', this.selectedRows)
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') this.successToast(message);
- if (type === 'error') this.errorToast(message);
- });
- })
- .finally(() => this.endLoader());
- }
- });
+ this.confirmDialog(
+ i18n.global.t(
+ 'pageUserManagement.modal.batchDeleteConfirmMessage',
+ count,
+ ),
+ {
+ title: i18n.global.t('pageUserManagement.deleteUser', count),
+ okTitle: i18n.global.t('pageUserManagement.deleteUser', count),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch('userManagement/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();
@@ -364,42 +375,37 @@
.finally(() => this.endLoader());
break;
case 'disable':
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageUserManagement.modal.batchDisableConfirmMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageUserManagement.disableUser',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t(
- 'pageUserManagement.disableUser',
- this.selectedRows.length,
- ),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((disableConfirmed) => {
- if (disableConfirmed) {
- this.startLoader();
- this.$store
- .dispatch('userManagement/disableUsers', this.selectedRows)
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') this.successToast(message);
- if (type === 'error') this.errorToast(message);
- });
- })
- .finally(() => this.endLoader());
- }
- });
+ this.confirmDialog(
+ i18n.global.t(
+ 'pageUserManagement.modal.batchDisableConfirmMessage',
+ count,
+ ),
+ {
+ title: i18n.global.t('pageUserManagement.disableUser', count),
+ okTitle: i18n.global.t('pageUserManagement.disableUser', count),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((disableConfirmed) => {
+ if (disableConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch('userManagement/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;
}
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
onTableRowAction(action, row) {
switch (action) {
case 'edit':