diff options
Diffstat (limited to 'src/views')
64 files changed, 719 insertions, 493 deletions
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue index 002362a9..2680cc35 100644 --- a/src/views/ChangePassword/ChangePassword.vue +++ b/src/views/ChangePassword/ChangePassword.vue @@ -22,13 +22,13 @@ v-model="form.password" autofocus="autofocus" type="password" - :state="getValidationState($v.form.password)" + :state="getValidationState(v$.form.password)" class="form-control-with-button" - @change="$v.form.password.$touch()" + @change="v$.form.password.$touch()" > </b-form-input> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.password.required"> + <template v-if="!v$.form.password.required"> {{ $t('global.form.fieldRequired') }} </template> </b-form-invalid-feedback> @@ -43,16 +43,16 @@ id="password-confirm" v-model="form.passwordConfirm" type="password" - :state="getValidationState($v.form.passwordConfirm)" + :state="getValidationState(v$.form.passwordConfirm)" class="form-control-with-button" - @change="$v.form.passwordConfirm.$touch()" + @change="v$.form.passwordConfirm.$touch()" > </b-form-input> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.passwordConfirm.required"> + <template v-if="!v$.form.passwordConfirm.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-else-if="!$v.form.passwordConfirm.sameAsPassword"> + <template v-else-if="!v$.form.passwordConfirm.sameAsPassword"> {{ $t('global.form.passwordsDoNotMatch') }} </template> </b-form-invalid-feedback> @@ -78,6 +78,7 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin'; import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; export default { name: 'ChangePassword', @@ -90,6 +91,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { password: null, passwordConfirm: null, @@ -115,8 +117,8 @@ export default { this.$store.dispatch('authentication/logout'); }, changePassword() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; let data = { originalUsername: this.username, password: this.form.password, diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue index d05e32e1..a3f4d23e 100644 --- a/src/views/HardwareStatus/Inventory/Inventory.vue +++ b/src/views/HardwareStatus/Inventory/Inventory.vue @@ -64,6 +64,8 @@ import PageSection from '@/components/Global/PageSection'; import JumpLink16 from '@carbon/icons-vue/es/jump-link/16'; import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin'; import { chunk } from 'lodash'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { @@ -89,54 +91,55 @@ export default { }, data() { return { + $t: useI18n().t, links: [ { id: 'system', dataRef: 'system', href: '#system', - linkText: this.$t('pageInventory.system'), + linkText: i18n.global.t('pageInventory.system'), }, { id: 'bmc', dataRef: 'bmc', href: '#bmc', - linkText: this.$t('pageInventory.bmcManager'), + linkText: i18n.global.t('pageInventory.bmcManager'), }, { id: 'chassis', dataRef: 'chassis', href: '#chassis', - linkText: this.$t('pageInventory.chassis'), + linkText: i18n.global.t('pageInventory.chassis'), }, { id: 'dimms', dataRef: 'dimms', href: '#dimms', - linkText: this.$t('pageInventory.dimmSlot'), + linkText: i18n.global.t('pageInventory.dimmSlot'), }, { id: 'fans', dataRef: 'fans', href: '#fans', - linkText: this.$t('pageInventory.fans'), + linkText: i18n.global.t('pageInventory.fans'), }, { id: 'powerSupply', dataRef: 'powerSupply', href: '#powerSupply', - linkText: this.$t('pageInventory.powerSupplies'), + linkText: i18n.global.t('pageInventory.powerSupplies'), }, { id: 'processors', dataRef: 'processors', href: '#processors', - linkText: this.$t('pageInventory.processors'), + linkText: i18n.global.t('pageInventory.processors'), }, { id: 'assembly', dataRef: 'assembly', href: '#assembly', - linkText: this.$t('pageInventory.assemblies'), + linkText: i18n.global.t('pageInventory.assemblies'), }, ], }; diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue index 0825ad7b..5b19b42a 100644 --- a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue +++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue @@ -40,10 +40,16 @@ <script> import PageSection from '@/components/Global/PageSection'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import { useI18n } from 'vue-i18n'; export default { components: { PageSection }, mixins: [BVToastMixin], + data() { + return { + $t: useI18n().t, + }; + }, computed: { systems() { let systemData = this.$store.getters['system/systems'][0]; diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue index b9f59cc6..68bee056 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue @@ -76,12 +76,15 @@ import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -91,25 +94,25 @@ export default { }, { key: 'name', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, }, { key: 'partNumber', - label: this.$t('pageInventory.table.partNumber'), + label: i18n.global.t('pageInventory.table.partNumber'), formatter: this.dataFormatter, sortable: true, }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, sortable: true, }, { key: 'identifyLed', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue index 8c1e50d4..848322c0 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue @@ -88,14 +88,14 @@ <!-- BMC date and time --> <dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt> <dd> - {{ item.dateTime }} - {{ item.dateTime }} + {{ $filters.formatDate(item.dateTime) }} + {{ $filters.formatTime(item.dateTime) }} </dd> <!-- Reset date and time --> <dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt> <dd> - {{ item.lastResetTime }} - {{ item.lastResetTime }} + {{ $filters.formatDate(item.lastResetTime) }} + {{ $filters.formatTime(item.lastResetTime) }} </dd> </dl> </b-col> @@ -170,12 +170,15 @@ import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -185,22 +188,22 @@ export default { }, { key: 'id', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, }, { key: 'identifyLed', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue index 18ddfbaf..4458e33b 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue @@ -129,12 +129,15 @@ import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -144,23 +147,23 @@ export default { }, { key: 'id', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, tdClass: 'text-nowrap', }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, }, { key: 'identifyLed', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue index f3db133e..f4a850b0 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue @@ -203,6 +203,8 @@ import SearchFilterMixin, { import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, @@ -215,6 +217,7 @@ export default { ], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -224,29 +227,29 @@ export default { }, { key: 'id', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, tdClass: 'text-nowrap', }, { key: 'statusState', - label: this.$t('pageInventory.table.state'), + label: i18n.global.t('pageInventory.table.state'), formatter: this.dataFormatter, tdClass: 'text-nowrap', }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, }, { key: 'identifyLed', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue index 62f0b76b..f8db745e 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue @@ -113,6 +113,8 @@ import SearchFilterMixin, { import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, @@ -124,6 +126,7 @@ export default { ], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -134,26 +137,26 @@ export default { }, { key: 'name', - label: this.$t('pageInventory.table.name'), + label: i18n.global.t('pageInventory.table.name'), formatter: this.dataFormatter, sortable: true, }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, sortable: true, tdClass: 'text-nowrap', }, { key: 'partNumber', - label: this.$t('pageInventory.table.partNumber'), + label: i18n.global.t('pageInventory.table.partNumber'), formatter: this.dataFormatter, sortable: true, }, { key: 'serialNumber', - label: this.$t('pageInventory.table.serialNumber'), + label: i18n.global.t('pageInventory.table.serialNumber'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue index df03fdf2..ac64673b 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue @@ -134,6 +134,8 @@ import SearchFilterMixin, { import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, @@ -145,6 +147,7 @@ export default { ], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -155,26 +158,26 @@ export default { }, { key: 'id', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, sortable: true, tdClass: 'text-nowrap', }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, sortable: true, }, { key: 'identifyLed', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue index 2887fc49..4bdff54b 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue @@ -172,6 +172,8 @@ import SearchFilterMixin, { import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, @@ -184,6 +186,7 @@ export default { ], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -194,33 +197,33 @@ export default { }, { key: 'id', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, sortable: true, tdClass: 'text-nowrap', }, { key: 'statusState', - label: this.$t('pageInventory.table.state'), + label: i18n.global.t('pageInventory.table.state'), formatter: this.dataFormatter, sortable: true, tdClass: 'text-nowrap', }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, sortable: true, }, { key: 'identifyLed', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, sortable: false, }, diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue index 8ac1a259..2839c788 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue @@ -142,12 +142,15 @@ import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconChevron, PageSection, StatusIcon }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -157,29 +160,29 @@ export default { }, { key: 'id', - label: this.$t('pageInventory.table.id'), + label: i18n.global.t('pageInventory.table.id'), formatter: this.dataFormatter, }, { key: 'hardwareType', - label: this.$t('pageInventory.table.hardwareType'), + label: i18n.global.t('pageInventory.table.hardwareType'), formatter: this.dataFormatter, tdClass: 'text-nowrap', }, { key: 'health', - label: this.$t('pageInventory.table.health'), + label: i18n.global.t('pageInventory.table.health'), formatter: this.dataFormatter, tdClass: 'text-nowrap', }, { key: 'locationNumber', - label: this.$t('pageInventory.table.locationNumber'), + label: i18n.global.t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, }, { key: 'locationIndicatorActive', - label: this.$t('pageInventory.table.identifyLed'), + label: i18n.global.t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, }, ], diff --git a/src/views/HardwareStatus/Sensors/Sensors.vue b/src/views/HardwareStatus/Sensors/Sensors.vue index c4663a94..ac70e403 100644 --- a/src/views/HardwareStatus/Sensors/Sensors.vue +++ b/src/views/HardwareStatus/Sensors/Sensors.vue @@ -121,6 +121,8 @@ import TableSortMixin from '@/components/Mixins/TableSortMixin'; import SearchFilterMixin, { searchFilter, } from '@/components/Mixins/SearchFilterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'Sensors', @@ -147,6 +149,7 @@ export default { }, data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -157,49 +160,49 @@ export default { { key: 'name', sortable: true, - label: this.$t('pageSensors.table.name'), + label: i18n.global.t('pageSensors.table.name'), }, { key: 'status', sortable: true, - label: this.$t('pageSensors.table.status'), + label: i18n.global.t('pageSensors.table.status'), tdClass: 'text-nowrap', }, { key: 'lowerCritical', formatter: this.dataFormatter, - label: this.$t('pageSensors.table.lowerCritical'), + label: i18n.global.t('pageSensors.table.lowerCritical'), }, { key: 'lowerCaution', formatter: this.dataFormatter, - label: this.$t('pageSensors.table.lowerWarning'), + label: i18n.global.t('pageSensors.table.lowerWarning'), }, { key: 'currentValue', formatter: this.dataFormatter, - label: this.$t('pageSensors.table.currentValue'), + label: i18n.global.t('pageSensors.table.currentValue'), }, { key: 'upperCaution', formatter: this.dataFormatter, - label: this.$t('pageSensors.table.upperWarning'), + label: i18n.global.t('pageSensors.table.upperWarning'), }, { key: 'upperCritical', formatter: this.dataFormatter, - label: this.$t('pageSensors.table.upperCritical'), + label: i18n.global.t('pageSensors.table.upperCritical'), }, ], tableFilters: [ { key: 'status', - label: this.$t('pageSensors.table.status'), + label: i18n.global.t('pageSensors.table.status'), values: [ - this.$t('global.action.ok'), - this.$t('global.action.warning'), - this.$t('global.action.critical'), + i18n.global.t('global.action.ok'), + i18n.global.t('global.action.warning'), + i18n.global.t('global.action.critical'), ], }, ], @@ -253,7 +256,7 @@ export default { date.toISOString().slice(0, 10) + '_' + date.toString().split(':').join('-').split(' ')[4]; - return this.$t('pageSensors.exportFilePrefix') + date; + return i18n.global.t('pageSensors.exportFilePrefix') + date; }, }, }; diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue index 5a9869a4..04469118 100644 --- a/src/views/Logs/Dumps/Dumps.vue +++ b/src/views/Logs/Dumps/Dumps.vue @@ -84,8 +84,8 @@ <!-- Date and Time column --> <template #cell(dateTime)="{ value }"> - <p class="mb-0">{{ value }}</p> - <p class="mb-0">{{ value }}</p> + <p class="mb-0">{{ $filters.formatDate(value) }}</p> + <p class="mb-0">{{ $filters.formatTime(value) }}</p> </template> <!-- Size column --> @@ -171,6 +171,7 @@ import SearchFilterMixin, { } from '@/components/Mixins/SearchFilterMixin'; import TableFilter from '@/components/Global/TableFilter'; import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import i18n from '@/i18n'; export default { components: { @@ -210,22 +211,22 @@ export default { }, { key: 'dateTime', - label: this.$t('pageDumps.table.dateAndTime'), + label: i18n.global.t('pageDumps.table.dateAndTime'), sortable: true, }, { key: 'dumpType', - label: this.$t('pageDumps.table.dumpType'), + label: i18n.global.t('pageDumps.table.dumpType'), sortable: true, }, { key: 'id', - label: this.$t('pageDumps.table.id'), + label: i18n.global.t('pageDumps.table.id'), sortable: true, }, { key: 'size', - label: this.$t('pageDumps.table.size'), + label: i18n.global.t('pageDumps.table.size'), sortable: true, }, { @@ -238,13 +239,13 @@ export default { batchActions: [ { value: 'delete', - label: this.$t('global.action.delete'), + label: i18n.global.t('global.action.delete'), }, ], tableFilters: [ { key: 'dumpType', - label: this.$t('pageDumps.table.dumpType'), + label: i18n.global.t('pageDumps.table.dumpType'), values: [ 'BMC Dump Entry', 'Hostboot Dump Entry', @@ -279,11 +280,11 @@ export default { actions: [ { value: 'download', - title: this.$t('global.action.download'), + title: i18n.global.t('global.action.download'), }, { value: 'delete', - title: this.$t('global.action.delete'), + title: i18n.global.t('global.action.delete'), }, ], }; @@ -328,12 +329,15 @@ export default { onTableRowAction(action, dump) { if (action === 'delete') { this.$bvModal - .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), { - title: this.$tc('pageDumps.modal.deleteDump'), - okTitle: this.$tc('pageDumps.modal.deleteDump'), - cancelTitle: this.$t('global.action.cancel'), - autoFocusButton: 'ok', - }) + .msgBoxConfirm( + i18n.global.t('pageDumps.modal.deleteDumpConfirmation'), + { + title: i18n.global.t('pageDumps.modal.deleteDump'), + okTitle: i18n.global.t('pageDumps.modal.deleteDump'), + cancelTitle: i18n.global.t('global.action.cancel'), + autoFocusButton: 'ok', + }, + ) .then((deleteConfrimed) => { if (deleteConfrimed) { this.$store @@ -355,20 +359,20 @@ export default { if (action === 'delete') { this.$bvModal .msgBoxConfirm( - this.$tc( + i18n.global.t( 'pageDumps.modal.deleteDumpConfirmation', this.selectedRows.length, ), { - title: this.$tc( + title: i18n.global.t( 'pageDumps.modal.deleteDump', this.selectedRows.length, ), - okTitle: this.$tc( + okTitle: i18n.global.t( 'pageDumps.modal.deleteDump', this.selectedRows.length, ), - cancelTitle: this.$t('global.action.cancel'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue index 40cea7e3..7da3084f 100644 --- a/src/views/Logs/Dumps/DumpsForm.vue +++ b/src/views/Logs/Dumps/DumpsForm.vue @@ -9,7 +9,7 @@ id="selectDumpType" v-model="selectedDumpType" :options="dumpTypeOptions" - :state="getValidationState($v.selectedDumpType)" + :state="getValidationState(v$.selectedDumpType)" > <template #first> <b-form-select-option :value="null" disabled> @@ -39,6 +39,7 @@ import ModalConfirmation from './DumpsModalConfirmation'; import Alert from '@/components/Global/Alert'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import i18n from '@/i18n'; export default { components: { Alert, ModalConfirmation }, @@ -52,8 +53,8 @@ export default { return { selectedDumpType: null, dumpTypeOptions: [ - { value: 'bmc', text: this.$t('pageDumps.form.bmcDump') }, - { value: 'system', text: this.$t('pageDumps.form.systemDump') }, + { value: 'bmc', text: i18n.global.t('pageDumps.form.bmcDump') }, + { value: 'system', text: i18n.global.t('pageDumps.form.systemDump') }, ], }; }, @@ -64,8 +65,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; // System dump initiation if (this.selectedDumpType === 'system') { @@ -76,10 +77,15 @@ export default { this.$store .dispatch('dumps/createBmcDump') .then(() => - this.infoToast(this.$t('pageDumps.toast.successStartBmcDump'), { - title: this.$t('pageDumps.toast.successStartBmcDumpTitle'), - timestamp: true, - }), + this.infoToast( + i18n.global.t('pageDumps.toast.successStartBmcDump'), + { + title: i18n.global.t( + 'pageDumps.toast.successStartBmcDumpTitle', + ), + timestamp: true, + }, + ), ) .catch(({ message }) => this.errorToast(message)); } @@ -91,10 +97,15 @@ export default { this.$store .dispatch('dumps/createSystemDump') .then(() => - this.infoToast(this.$t('pageDumps.toast.successStartSystemDump'), { - title: this.$t('pageDumps.toast.successStartSystemDumpTitle'), - timestamp: true, - }), + this.infoToast( + i18n.global.t('pageDumps.toast.successStartSystemDump'), + { + title: i18n.global.t( + 'pageDumps.toast.successStartSystemDumpTitle', + ), + timestamp: true, + }, + ), ) .catch(({ message }) => this.errorToast(message)); }, diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue index 2a1e552f..4b68681b 100644 --- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue +++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue @@ -17,11 +17,11 @@ <status-icon status="danger" /> {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }} </p> - <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()"> + <b-form-checkbox v-model="confirmed" @input="v$.confirmed.$touch()"> {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }} </b-form-checkbox> <b-form-invalid-feedback - :state="getValidationState($v.confirmed)" + :state="getValidationState(v$.confirmed)" role="alert" > {{ $t('global.form.required') }} @@ -67,14 +67,14 @@ export default { }); }, handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok'); this.closeModal(); }, resetForm() { this.confirmed = false; - this.$v.$reset(); + this.v$.$reset(); }, }, }; diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue index c906fc69..e50be819 100644 --- a/src/views/Logs/EventLogs/EventLogs.vue +++ b/src/views/Logs/EventLogs/EventLogs.vue @@ -144,8 +144,8 @@ <!-- Modified date --> <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt> <dd v-if="item.modifiedDate"> - {{ item.modifiedDate }} - {{ item.modifiedDate }} + {{ $filters.formatDate(item.modifiedDate) }} + {{ $filters.formatTime(item.modifiedDate) }} </dd> <dd v-else>--</dd> </dl> @@ -170,8 +170,8 @@ </template> <!-- Date column --> <template #cell(date)="{ value }"> - <p class="mb-0">{{ value }}</p> - <p class="mb-0">{{ value }}</p> + <p class="mb-0">{{ $filters.formatDate(value) }}</p> + <p class="mb-0">{{ $filters.formatTime(value) }}</p> </template> <!-- Status column --> @@ -535,8 +535,8 @@ export default { onTableRowAction(action, { uri }) { if (action === 'delete') { this.$bvModal - .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { - title: this.$tc('pageEventLogs.modal.deleteTitle'), + .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteMessage'), { + title: i18n.global.t('pageEventLogs.modal.deleteTitle'), okTitle: i18n.global.t('global.action.delete'), cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', @@ -551,12 +551,12 @@ export default { const uris = this.selectedRows.map((row) => row.uri); this.$bvModal .msgBoxConfirm( - this.$tc( + i18n.global.t( 'pageEventLogs.modal.deleteMessage', this.selectedRows.length, ), { - title: this.$tc( + title: i18n.global.t( 'pageEventLogs.modal.deleteTitle', this.selectedRows.length, ), @@ -575,7 +575,7 @@ export default { ) .then(() => { this.successToast( - this.$tc( + i18n.global.t( 'pageEventLogs.toast.successDelete', uris.length, ), diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue index ad62afce..6d8ff907 100644 --- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue +++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue @@ -97,8 +97,8 @@ </template> <!-- Date column --> <template #cell(date)="{ value }"> - <p class="mb-0">{{ value }}</p> - <p class="mb-0">{{ value }}</p> + <p class="mb-0">{{ $filters.formatDate(value) }}</p> + <p class="mb-0">{{ $filters.formatTime(value) }}</p> </template> <!-- Actions column --> @@ -186,6 +186,8 @@ import TableRowExpandMixin, { import SearchFilterMixin, { searchFilter, } from '@/components/Mixins/SearchFilterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { @@ -218,6 +220,7 @@ export default { }, data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -226,20 +229,20 @@ export default { }, { key: 'date', - label: this.$t('pagePostCodeLogs.table.created'), + label: i18n.global.t('pagePostCodeLogs.table.created'), sortable: true, }, { key: 'timeStampOffset', - label: this.$t('pagePostCodeLogs.table.timeStampOffset'), + label: i18n.global.t('pagePostCodeLogs.table.timeStampOffset'), }, { key: 'bootCount', - label: this.$t('pagePostCodeLogs.table.bootCount'), + label: i18n.global.t('pagePostCodeLogs.table.bootCount'), }, { key: 'postCode', - label: this.$t('pagePostCodeLogs.table.postCode'), + label: i18n.global.t('pagePostCodeLogs.table.postCode'), }, { key: 'actions', @@ -278,11 +281,11 @@ export default { actions: [ { value: 'export', - title: this.$t('pagePostCodeLogs.action.exportLogs'), + title: i18n.global.t('pagePostCodeLogs.action.exportLogs'), }, { value: 'download', - title: this.$t('pagePostCodeLogs.action.downloadDetails'), + title: i18n.global.t('pagePostCodeLogs.action.downloadDetails'), }, ], }; @@ -316,11 +319,11 @@ export default { methods: { deleteAllLogs() { this.$bvModal - .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { - title: this.$t('pageEventLogs.modal.deleteAllTitle'), - okTitle: this.$t('global.action.delete'), + .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), { + title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'), + okTitle: i18n.global.t('global.action.delete'), okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'cancel', }) .then((deleteConfirmed) => { @@ -361,11 +364,11 @@ export default { date.toString().split(':').join('-').split(' ')[4]; let fileName; if (value === 'download') { - fileName = this.$t('pagePostCodeLogs.downloadFilePrefix'); + fileName = i18n.global.t('pagePostCodeLogs.downloadFilePrefix'); } else if (value === 'export') { - fileName = this.$t('pagePostCodeLogs.exportFilePrefix'); + fileName = i18n.global.t('pagePostCodeLogs.exportFilePrefix'); } else { - fileName = this.$t('pagePostCodeLogs.allExportFilePrefix'); + fileName = i18n.global.t('pagePostCodeLogs.allExportFilePrefix'); } return fileName + date; }, diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue index 40330b12..f59b0a21 100644 --- a/src/views/Operations/FactoryReset/FactoryReset.vue +++ b/src/views/Operations/FactoryReset/FactoryReset.vue @@ -60,6 +60,7 @@ import PageTitle from '@/components/Global/PageTitle'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import ModalReset from './FactoryResetModal'; +import { useI18n } from 'vue-i18n'; export default { name: 'FactoryReset', @@ -67,6 +68,7 @@ export default { mixins: [LoadingBarMixin, BVToastMixin], data() { return { + $t: useI18n().t, resetOption: 'resetBios', }; }, diff --git a/src/views/Operations/FactoryReset/FactoryResetModal.vue b/src/views/Operations/FactoryReset/FactoryResetModal.vue index 55ac1761..8784d4ae 100644 --- a/src/views/Operations/FactoryReset/FactoryResetModal.vue +++ b/src/views/Operations/FactoryReset/FactoryResetModal.vue @@ -32,13 +32,13 @@ <b-form-checkbox v-model="confirm" aria-describedby="reset-to-default-warning" - @input="$v.confirm.$touch()" + @input="v$.confirm.$touch()" > {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }} </b-form-checkbox> <b-form-invalid-feedback role="alert" - :state="getValidationState($v.confirm)" + :state="getValidationState(v$.confirm)" > {{ $t('global.form.fieldRequired') }} </b-form-invalid-feedback> @@ -66,6 +66,7 @@ <script> import StatusIcon from '@/components/Global/StatusIcon'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin'; +import { useI18n } from 'vue-i18n'; export default { components: { StatusIcon }, @@ -78,6 +79,7 @@ export default { }, data() { return { + $t: useI18n().t, confirm: false, }; }, @@ -98,15 +100,15 @@ export default { }, methods: { handleConfirm() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('okConfirm'); this.$nextTick(() => this.$refs.modal.hide()); this.resetConfirm(); }, resetConfirm() { this.confirm = false; - this.$v.$reset(); + this.v$.$reset(); }, }, }; diff --git a/src/views/Operations/Firmware/Firmware.vue b/src/views/Operations/Firmware/Firmware.vue index 44a721ae..db1a4c7e 100644 --- a/src/views/Operations/Firmware/Firmware.vue +++ b/src/views/Operations/Firmware/Firmware.vue @@ -46,6 +46,7 @@ import PageSection from '@/components/Global/PageSection'; import PageTitle from '@/components/Global/PageTitle'; import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; +import { useI18n } from 'vue-i18n'; export default { name: 'FirmwareSingleImage', @@ -64,6 +65,7 @@ export default { }, data() { return { + $t: useI18n().t, loading, isServerPowerOffRequired: process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true', diff --git a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue index 08e4ae91..94cac578 100644 --- a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue +++ b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue @@ -32,6 +32,7 @@ <script> import Alert from '@/components/Global/Alert'; +import { useI18n } from 'vue-i18n'; export default { components: { Alert }, @@ -42,6 +43,11 @@ export default { default: true, }, }, + data() { + return { + $t: useI18n().t, + }; + }, computed: { isOperationInProgress() { return this.$store.getters['controls/isOperationInProgress']; diff --git a/src/views/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/Operations/Firmware/FirmwareCardsBmc.vue index bfca14cf..2d18d5b8 100644 --- a/src/views/Operations/Firmware/FirmwareCardsBmc.vue +++ b/src/views/Operations/Firmware/FirmwareCardsBmc.vue @@ -58,6 +58,8 @@ import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import ModalSwitchToRunning from './FirmwareModalSwitchToRunning'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { IconSwitch, ModalSwitchToRunning, PageSection }, @@ -76,6 +78,7 @@ export default { }, data() { return { + $t: useI18n().t, loading, switchToBackupImageDisabled: process.env.VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true', @@ -87,9 +90,9 @@ export default { }, sectionTitle() { if (this.isSingleFileUploadEnabled) { - return this.$t('pageFirmware.sectionTitleBmcCardsCombined'); + return i18n.global.t('pageFirmware.sectionTitleBmcCardsCombined'); } - return this.$t('pageFirmware.sectionTitleBmcCards'); + return i18n.global.t('pageFirmware.sectionTitleBmcCards'); }, running() { return this.$store.getters['firmware/activeBmcFirmware']; @@ -117,18 +120,24 @@ export default { this.startLoader(); const timerId = setTimeout(() => { this.endLoader(); - this.infoToast(this.$t('pageFirmware.toast.verifySwitchMessage'), { - title: this.$t('pageFirmware.toast.verifySwitch'), - refreshAction: true, - }); + this.infoToast( + i18n.global.t('pageFirmware.toast.verifySwitchMessage'), + { + title: i18n.global.t('pageFirmware.toast.verifySwitch'), + refreshAction: true, + }, + ); }, 60000); this.$store .dispatch('firmware/switchBmcFirmwareAndReboot') .then(() => - this.infoToast(this.$t('pageFirmware.toast.rebootStartedMessage'), { - title: this.$t('pageFirmware.toast.rebootStarted'), - }), + this.infoToast( + i18n.global.t('pageFirmware.toast.rebootStartedMessage'), + { + title: i18n.global.t('pageFirmware.toast.rebootStarted'), + }, + ), ) .catch(({ message }) => { this.errorToast(message); diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue index 8fd0cac9..852e9fb1 100644 --- a/src/views/Operations/Firmware/FirmwareCardsHost.vue +++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue @@ -38,9 +38,15 @@ <script> import PageSection from '@/components/Global/PageSection'; +import { useI18n } from 'vue-i18n'; export default { components: { PageSection }, + data() { + return { + $t: useI18n().t, + }; + }, computed: { running() { return this.$store.getters['firmware/activeHostFirmware']; diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue index 554d1d45..dc3161b2 100644 --- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue +++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue @@ -82,6 +82,8 @@ import { useVuelidate } from '@vuelidate/core'; import FormFile from '@/components/Global/FormFile'; import ModalUpdateFirmware from './FirmwareModalUpdateFirmware'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { FormFile, ModalUpdateFirmware }, @@ -99,11 +101,12 @@ export default { }, setup() { return { - v$: useVuelidate(), + $v: useVuelidate(), }; }, data() { return { + $t: useI18n().t, loading, isWorkstationSelected: true, file: null, @@ -146,13 +149,16 @@ export default { this.startLoader(); const timerId = setTimeout(() => { this.endLoader(); - this.infoToast(this.$t('pageFirmware.toast.verifyUpdateMessage'), { - title: this.$t('pageFirmware.toast.verifyUpdate'), - refreshAction: true, - }); + this.infoToast( + i18n.global.t('pageFirmware.toast.verifyUpdateMessage'), + { + title: i18n.global.t('pageFirmware.toast.verifyUpdate'), + refreshAction: true, + }, + ); }, 360000); - this.infoToast(this.$t('pageFirmware.toast.updateStartedMessage'), { - title: this.$t('pageFirmware.toast.updateStarted'), + this.infoToast(i18n.global.t('pageFirmware.toast.updateStartedMessage'), { + title: i18n.global.t('pageFirmware.toast.updateStarted'), timestamp: true, }); if (this.isWorkstationSelected) { diff --git a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue index dc4a4973..9af8fb55 100644 --- a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue +++ b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue @@ -20,6 +20,7 @@ </template> <script> +import { useI18n } from 'vue-i18n'; export default { props: { backup: { @@ -27,5 +28,10 @@ export default { required: true, }, }, + data() { + return { + $t: useI18n().t, + }; + }, }; </script> diff --git a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue index 18355217..183cab75 100644 --- a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue +++ b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue @@ -28,7 +28,13 @@ </template> <script> +import { useI18n } from 'vue-i18n'; export default { + data() { + return { + $t: useI18n().t, + }; + }, computed: { runningBmc() { return this.$store.getters['firmware/activeBmcFirmware']; diff --git a/src/views/Operations/KeyClear/KeyClear.vue b/src/views/Operations/KeyClear/KeyClear.vue index fbdf4c46..7baad344 100644 --- a/src/views/Operations/KeyClear/KeyClear.vue +++ b/src/views/Operations/KeyClear/KeyClear.vue @@ -69,6 +69,8 @@ import PageTitle from '@/components/Global/PageTitle'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import Alert from '@/components/Global/Alert'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'KeyClear', @@ -76,6 +78,7 @@ export default { mixins: [LoadingBarMixin, BVToastMixin], data() { return { + $t: useI18n().t, keyOption: 'NONE', username: this.$store.getters['global/username'], }; @@ -86,11 +89,11 @@ export default { methods: { onKeyClearSubmit(valueSelected) { this.$bvModal - .msgBoxConfirm(this.$t('pageKeyClear.modal.clearAllMessage'), { - title: this.$t('pageKeyClear.modal.clearAllTitle'), - okTitle: this.$t('pageKeyClear.modal.clear'), + .msgBoxConfirm(i18n.global.t('pageKeyClear.modal.clearAllMessage'), { + title: i18n.global.t('pageKeyClear.modal.clearAllTitle'), + okTitle: i18n.global.t('pageKeyClear.modal.clear'), okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'cancel', }) .then((clearConfirmed) => { diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue index cc623e44..6e2a4eac 100644 --- a/src/views/Operations/Kvm/KvmConsole.vue +++ b/src/views/Operations/Kvm/KvmConsole.vue @@ -46,6 +46,8 @@ import StatusIcon from '@/components/Global/StatusIcon'; import IconLaunch from '@carbon/icons-vue/es/launch/20'; import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16'; import { throttle } from 'lodash'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; const Connecting = 0; const Connected = 1; @@ -62,6 +64,7 @@ export default { }, data() { return { + $t: useI18n().t, rfb: null, isConnected: false, terminalClass: this.isFullWindow ? 'full-window' : '', @@ -82,11 +85,11 @@ export default { }, serverStatus() { if (this.status === Connected) { - return this.$t('pageKvm.connected'); + return i18n.global.t('pageKvm.connected'); } else if (this.status === Disconnected) { - return this.$t('pageKvm.disconnected'); + return i18n.global.t('pageKvm.disconnected'); } - return this.$t('pageKvm.connecting'); + return i18n.global.t('pageKvm.connecting'); }, }, created() { diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue index e56e968f..0865d77d 100644 --- a/src/views/Operations/RebootBmc/RebootBmc.vue +++ b/src/views/Operations/RebootBmc/RebootBmc.vue @@ -11,8 +11,8 @@ {{ $t('pageRebootBmc.lastReboot') }} </dt> <dd v-if="lastBmcRebootTime"> - {{ lastBmcRebootTime }} - {{ lastBmcRebootTime }} + {{ $filters.formatDate(lastBmcRebootTime) }} + {{ $filters.formatTime(lastBmcRebootTime) }} </dd> <dd v-else>--</dd> </dl> @@ -38,6 +38,8 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'RebootBmc', @@ -47,6 +49,11 @@ export default { this.hideLoader(); next(); }, + data() { + return { + $t: useI18n().t, + }; + }, computed: { lastBmcRebootTime() { return this.$store.getters['controls/lastBmcRebootTime']; @@ -61,10 +68,10 @@ export default { methods: { onClick() { this.$bvModal - .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), { - title: this.$t('pageRebootBmc.modal.confirmTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), + .msgBoxConfirm(i18n.global.t('pageRebootBmc.modal.confirmMessage'), { + title: i18n.global.t('pageRebootBmc.modal.confirmTitle'), + okTitle: i18n.global.t('global.action.confirm'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }) .then((confirmed) => { diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue index 48a68345..b9d3f2e6 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLan.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -12,6 +12,7 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import SerialOverLanConsole from './SerialOverLanConsole'; +import { useI18n } from 'vue-i18n'; export default { name: 'SerialOverLan', @@ -20,5 +21,10 @@ export default { PageTitle, SerialOverLanConsole, }, + data() { + return { + $t: useI18n().t, + }; + }, }; </script> diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue index 8b4cd222..b711422f 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue @@ -50,6 +50,7 @@ import { Terminal } from 'xterm'; import { throttle } from 'lodash'; import IconLaunch from '@carbon/icons-vue/es/launch/20'; import StatusIcon from '@/components/Global/StatusIcon'; +import { useI18n } from 'vue-i18n'; export default { name: 'SerialOverLanConsole', @@ -66,6 +67,7 @@ export default { }, data() { return { + $t: useI18n().t, resizeConsoleWindow: null, }; }, diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue index c74fd01f..a7bcfaa9 100644 --- a/src/views/Operations/ServerPowerOperations/BootSettings.vue +++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue @@ -21,7 +21,7 @@ v-model="form.oneTimeBoot" class="mb-4" :disabled="form.bootOption === 'None'" - @change="$v.form.oneTimeBoot.$touch()" + @change="v$.form.oneTimeBoot.$touch()" > {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }} </b-form-checkbox> @@ -37,7 +37,7 @@ id="tpm-required-policy" v-model="form.tpmPolicyOn" aria-describedby="tpm-required-policy-help-block" - @change="$v.form.tpmPolicyOn.$touch()" + @change="v$.form.tpmPolicyOn.$touch()" > {{ $t('global.status.enabled') }} </b-form-checkbox> @@ -53,12 +53,14 @@ import { mapState } from 'vuex'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import { useI18n } from 'vue-i18n'; export default { name: 'BootSettings', mixins: [BVToastMixin, LoadingBarMixin], data() { return { + $t: useI18n().t, form: { bootOption: this.$store.getters['serverBootSettings/bootSource'], oneTimeBoot: this.$store.getters['serverBootSettings/overrideEnabled'], @@ -104,7 +106,7 @@ export default { methods: { handleSubmit() { this.startLoader(); - const tpmPolicyChanged = this.$v.form.tpmPolicyOn.$dirty; + const tpmPolicyChanged = this.v$.form.tpmPolicyOn.$dirty; let settings; let bootSource = this.form.bootOption; let overrideEnabled = this.form.oneTimeBoot; @@ -118,12 +120,12 @@ export default { .then((message) => this.successToast(message)) .catch(({ message }) => this.errorToast(message)) .finally(() => { - this.$v.form.$reset(); + this.v$.form.$reset(); this.endLoader(); }); }, onChangeSelect(selectedOption) { - this.$v.form.bootOption.$touch(); + this.v$.form.bootOption.$touch(); // Disable one time boot if selected boot option is 'None' if (selectedOption === 'None') this.form.oneTimeBoot = false; }, diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue index 4e26ee10..caa608e8 100644 --- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue +++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue @@ -44,8 +44,8 @@ v-if="lastPowerOperationTime" data-test-id="powerServerOps-text-lastPowerOp" > - {{ lastPowerOperationTime }} - {{ lastPowerOperationTime }} + {{ $filters.formatDate(lastPowerOperationTime) }} + {{ $filters.formatTime(lastPowerOperationTime) }} </dd> <dd v-else>--</dd> </dl> @@ -158,6 +158,8 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import BootSettings from './BootSettings'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import Alert from '@/components/Global/Alert'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'ServerPowerOperations', @@ -169,6 +171,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { rebootOption: 'orderly', shutdownOption: 'orderly', @@ -212,13 +215,15 @@ export default { this.$store.dispatch('controls/serverPowerOn'); }, rebootServer() { - const modalMessage = this.$t( + const modalMessage = i18n.global.t( 'pageServerPowerOperations.modal.confirmRebootMessage', ); const modalOptions = { - title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t( + 'pageServerPowerOperations.modal.confirmRebootTitle', + ), + okTitle: i18n.global.t('global.action.confirm'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }; @@ -237,13 +242,15 @@ export default { } }, shutdownServer() { - const modalMessage = this.$t( + const modalMessage = i18n.global.t( 'pageServerPowerOperations.modal.confirmShutdownMessage', ); const modalOptions = { - title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t( + 'pageServerPowerOperations.modal.confirmShutdownTitle', + ), + okTitle: i18n.global.t('global.action.confirm'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }; diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue index 61e20507..f8d4af0c 100644 --- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue +++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue @@ -18,12 +18,12 @@ id="serverUri" v-model="form.serverUri" type="text" - :state="getValidationState($v.form.serverUri)" + :state="getValidationState(v$.form.serverUri)" data-test-id="configureConnection-input-serverUri" - @input="$v.form.serverUri.$touch()" + @input="v$.form.serverUri.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.serverUri.required"> + <template v-if="!v$.form.serverUri.required"> {{ $t('global.form.fieldRequired') }} </template> </b-form-invalid-feedback> @@ -73,6 +73,7 @@ import { required } from '@vuelidate/validators'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; export default { mixins: [VuelidateMixin], @@ -93,6 +94,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { serverUri: null, username: null, @@ -118,8 +120,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; let connectionData = {}; Object.assign(connectionData, this.form); this.$emit('ok', connectionData); @@ -140,7 +142,7 @@ export default { this.form.username = null; this.form.password = null; this.form.isRW = false; - this.$v.$reset(); + this.v$.$reset(); }, onOk(bvModalEvt) { bvModalEvt.preventDefault(); diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue index 9ad1b1eb..e1580597 100644 --- a/src/views/Operations/VirtualMedia/VirtualMedia.vue +++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue @@ -104,6 +104,8 @@ import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import ModalConfigureConnection from './ModalConfigureConnection'; import NbdServer from '@/utilities/NBDServer'; import FormFile from '@/components/Global/FormFile'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'VirtualMedia', @@ -111,6 +113,7 @@ export default { mixins: [BVToastMixin, LoadingBarMixin], data() { return { + $t: useI18n().t, modalConfigureConnection: null, loadImageFromExternalServer: process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true' @@ -144,17 +147,21 @@ export default { token, ); device.nbd.socketStarted = () => - this.successToast(this.$t('pageVirtualMedia.toast.serverRunning')); + this.successToast( + i18n.global.t('pageVirtualMedia.toast.serverRunning'), + ); device.nbd.errorReadingFile = () => - this.errorToast(this.$t('pageVirtualMedia.toast.errorReadingFile')); + this.errorToast( + i18n.global.t('pageVirtualMedia.toast.errorReadingFile'), + ); device.nbd.socketClosed = (code) => { if (code === 1000) this.successToast( - this.$t('pageVirtualMedia.toast.serverClosedSuccessfully'), + i18n.global.t('pageVirtualMedia.toast.serverClosedSuccessfully'), ); else this.errorToast( - this.$t('pageVirtualMedia.toast.serverClosedWithErrors'), + i18n.global.t('pageVirtualMedia.toast.serverClosedWithErrors'), ); device.file = null; device.isActive = false; @@ -180,12 +187,14 @@ export default { }) .then(() => { this.successToast( - this.$t('pageVirtualMedia.toast.serverConnectionEstablished'), + i18n.global.t('pageVirtualMedia.toast.serverConnectionEstablished'), ); connectionData.isActive = true; }) .catch(() => { - this.errorToast(this.$t('pageVirtualMedia.toast.errorMounting')); + this.errorToast( + i18n.global.t('pageVirtualMedia.toast.errorMounting'), + ); this.isActive = false; }) .finally(() => this.endLoader()); @@ -195,12 +204,14 @@ export default { .dispatch('virtualMedia/unmountImage', connectionData.id) .then(() => { this.successToast( - this.$t('pageVirtualMedia.toast.serverClosedSuccessfully'), + i18n.global.t('pageVirtualMedia.toast.serverClosedSuccessfully'), ); connectionData.isActive = false; }) .catch(() => - this.errorToast(this.$t('pageVirtualMedia.toast.errorUnmounting')), + this.errorToast( + i18n.global.t('pageVirtualMedia.toast.errorUnmounting'), + ), ) .finally(() => this.endLoader()); }, diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index ef9ab126..506de112 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -5,7 +5,8 @@ <dl> <dt>{{ $t('pageOverview.bmcTime') }}</dt> <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime"> - {{ bmcTime }} {{ bmcTime }} + {{ $filters.formatDate(bmcTime) }} + {{ $filters.formatDate(bmcTime) }} </dd> <dd v-else>--</dd> </dl> diff --git a/src/views/PageNotFound/PageNotFound.vue b/src/views/PageNotFound/PageNotFound.vue index 91341dbb..77e596cd 100644 --- a/src/views/PageNotFound/PageNotFound.vue +++ b/src/views/PageNotFound/PageNotFound.vue @@ -5,8 +5,15 @@ </template> <script> import PageTitle from '@/components/Global/PageTitle'; +import { useI18n } from 'vue-i18n'; + export default { name: 'PageNotFound', components: { PageTitle }, + data() { + return { + $t: useI18n().t, + }; + }, }; </script> diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue index aa325745..6fc9c1e7 100644 --- a/src/views/ProfileSettings/ProfileSettings.vue +++ b/src/views/ProfileSettings/ProfileSettings.vue @@ -57,16 +57,16 @@ v-model="form.newPassword" type="password" aria-describedby="password-help-block" - :state="getValidationState($v.form.newPassword)" + :state="getValidationState(v$.form.newPassword)" data-test-id="profileSettings-input-newPassword" class="form-control-with-button" - @input="$v.form.newPassword.$touch()" + @input="v$.form.newPassword.$touch()" /> <b-form-invalid-feedback role="alert"> <template v-if=" - !$v.form.newPassword.minLength || - !$v.form.newPassword.maxLength + !v$.form.newPassword.minLength || + !v$.form.newPassword.maxLength " > {{ @@ -89,13 +89,13 @@ id="password-confirmation" v-model="form.confirmPassword" type="password" - :state="getValidationState($v.form.confirmPassword)" + :state="getValidationState(v$.form.confirmPassword)" data-test-id="profileSettings-input-confirmPassword" class="form-control-with-button" - @input="$v.form.confirmPassword.$touch()" + @input="v$.form.confirmPassword.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.confirmPassword.sameAsPassword"> + <template v-if="!v$.form.confirmPassword.sameAsPassword"> {{ $t('pageProfileSettings.passwordsDoNotMatch') }} </template> </b-form-invalid-feedback> @@ -152,6 +152,8 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'ProfileSettings', @@ -169,6 +171,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { newPassword: '', confirmPassword: '', @@ -209,9 +212,9 @@ export default { }, methods: { saveNewPasswordInputData() { - this.$v.form.confirmPassword.$touch(); - this.$v.form.newPassword.$touch(); - if (this.$v.$invalid) return; + this.v$.form.confirmPassword.$touch(); + this.v$.form.newPassword.$touch(); + if (this.v$.$invalid) return; let userData = { originalUsername: this.username, password: this.form.newPassword, @@ -223,7 +226,7 @@ export default { (this.form.newPassword = ''), (this.form.confirmPassword = ''), (this.form.currentPassword = ''); - this.$v.$reset(); + this.v$.$reset(); this.successToast(message); this.$store.dispatch('authentication/logout'); }) @@ -233,7 +236,7 @@ export default { localStorage.setItem('storedUtcDisplay', this.form.isUtcDisplay); this.$store.commit('global/setUtcTime', this.form.isUtcDisplay); this.successToast( - this.$t('pageProfileSettings.toast.successUpdatingTimeZone'), + i18n.global.t('pageProfileSettings.toast.successUpdatingTimeZone'), ); }, submitForm() { @@ -251,8 +254,8 @@ export default { } }, confirmAuthenticate() { - this.$v.form.newPassword.$touch(); - if (this.$v.$invalid) return; + this.v$.form.newPassword.$touch(); + if (this.v$.$invalid) return; const username = this.username; const password = this.form.currentPassword; @@ -263,9 +266,9 @@ export default { this.saveNewPasswordInputData(); }) .catch(() => { - this.$v.$reset(); + this.v$.$reset(); this.errorToast( - this.$t('pageProfileSettings.toast.wrongCredentials'), + i18n.global.t('pageProfileSettings.toast.wrongCredentials'), ); }); }, diff --git a/src/views/ResourceManagement/Power.vue b/src/views/ResourceManagement/Power.vue index 8a9503fd..12e4868b 100644 --- a/src/views/ResourceManagement/Power.vue +++ b/src/views/ResourceManagement/Power.vue @@ -56,14 +56,14 @@ data-test-id="power-input-powerCapValue" type="number" aria-describedby="power-help-text" - :state="getValidationState($v.powerCapValue)" + :state="getValidationState(v$.powerCapValue)" ></b-form-input> <b-form-invalid-feedback id="input-live-feedback" role="alert"> - <template v-if="!$v.powerCapValue.required"> + <template v-if="!v$.powerCapValue.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-else-if="!$v.powerCapValue.between"> + <template v-else-if="!v$.powerCapValue.between"> {{ $t('global.form.invalidValue') }} </template> </b-form-invalid-feedback> @@ -92,6 +92,7 @@ import { useVuelidate } from '@vuelidate/core'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import { requiredIf, between } from '@vuelidate/validators'; import { mapGetters } from 'vuex'; +import { useI18n } from 'vue-i18n'; export default { name: 'Power', @@ -108,6 +109,7 @@ export default { }, data() { return { + $t: useI18n().t, loading, }; }, @@ -125,7 +127,7 @@ export default { return this.powerCapValue !== null; }, set(value) { - this.$v.$reset(); + this.v$.$reset(); let newValue = null; if (value) { if (this.powerCapValue) { @@ -142,7 +144,7 @@ export default { return this.$store.getters['powerControl/powerCapValue']; }, set(value) { - this.$v.$touch(); + this.v$.$touch(); this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value); }, }, @@ -163,8 +165,8 @@ export default { }, methods: { submitForm() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.startLoader(); this.$store .dispatch('powerControl/setPowerControl', this.powerCapValue) diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue index bceab5d2..a55b66cc 100644 --- a/src/views/SecurityAndAccess/Certificates/Certificates.vue +++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue @@ -63,7 +63,7 @@ :empty-text="$t('global.table.emptyMessage')" > <template #cell(validFrom)="{ value }"> - {{ value }} + {{ $filters.formatDate(value) }} </template> <template #cell(validUntil)="{ value }"> @@ -71,7 +71,7 @@ v-if="getDaysUntilExpired(value) < 31" :status="getIconStatus(value)" /> - {{ value }} + {{ $filters.formatDate(value) }} </template> <template #cell(actions)="{ value, item }"> @@ -113,6 +113,8 @@ import Alert from '@/components/Global/Alert'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'Certificates', @@ -134,29 +136,30 @@ export default { }, data() { return { + $t: useI18n().t, isBusy: true, modalCertificate: null, fileTypeCorrect: undefined, fields: [ { key: 'certificate', - label: this.$t('pageCertificates.table.certificate'), + label: i18n.global.t('pageCertificates.table.certificate'), }, { key: 'issuedBy', - label: this.$t('pageCertificates.table.issuedBy'), + label: i18n.global.t('pageCertificates.table.issuedBy'), }, { key: 'issuedTo', - label: this.$t('pageCertificates.table.issuedTo'), + label: i18n.global.t('pageCertificates.table.issuedTo'), }, { key: 'validFrom', - label: this.$t('pageCertificates.table.validFrom'), + label: i18n.global.t('pageCertificates.table.validFrom'), }, { key: 'validUntil', - label: this.$t('pageCertificates.table.validUntil'), + label: i18n.global.t('pageCertificates.table.validUntil'), }, { key: 'actions', @@ -177,11 +180,11 @@ export default { actions: [ { value: 'replace', - title: this.$t('pageCertificates.replaceCertificate'), + title: i18n.global.t('pageCertificates.replaceCertificate'), }, { value: 'delete', - title: this.$t('pageCertificates.deleteCertificate'), + title: i18n.global.t('pageCertificates.deleteCertificate'), enabled: certificate.type === 'TrustStore Certificate' ? true : false, }, @@ -242,14 +245,14 @@ export default { initModalDeleteCertificate(certificate) { this.$bvModal .msgBoxConfirm( - this.$t('pageCertificates.modal.deleteConfirmMessage', { + i18n.global.t('pageCertificates.modal.deleteConfirmMessage', { issuedBy: certificate.issuedBy, certificate: certificate.certificate, }), { - title: this.$t('pageCertificates.deleteCertificate'), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t('pageCertificates.deleteCertificate'), + okTitle: i18n.global.t('global.action.delete'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) @@ -265,9 +268,13 @@ export default { this.addNewCertificate(file, type); } else { this.errorToast( - this.$t('pageCertificates.alert.incorrectCertificateFileType'), + i18n.global.t( + 'pageCertificates.alert.incorrectCertificateFileType', + ), { - title: this.$t('pageCertificates.toast.errorAddCertificate'), + title: i18n.global.t( + 'pageCertificates.toast.errorAddCertificate', + ), }, ); } diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue index 03ab8f4a..a74a1e46 100644 --- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue +++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue @@ -8,7 +8,7 @@ :title="$t('pageCertificates.modal.generateACertificateSigningRequest')" @ok="onOkGenerateCsrModal" @cancel="resetForm" - @hidden="$v.$reset()" + @hidden="v$.$reset()" > <b-form id="generate-csr-form" novalidate> <b-container fluid> @@ -25,8 +25,8 @@ v-model="form.certificateType" data-test-id="modalGenerateCsr-select-certificateType" :options="certificateOptions" - :state="getValidationState($v.form.certificateType)" - @input="$v.form.certificateType.$touch()" + :state="getValidationState(v$.form.certificateType)" + @input="v$.form.certificateType.$touch()" > <template #first> <b-form-select-option :value="null" disabled> @@ -49,8 +49,8 @@ v-model="form.country" data-test-id="modalGenerateCsr-select-country" :options="countryOptions" - :state="getValidationState($v.form.country)" - @input="$v.form.country.$touch()" + :state="getValidationState(v$.form.country)" + @input="v$.form.country.$touch()" > <template #first> <b-form-select-option :value="null" disabled> @@ -75,7 +75,7 @@ v-model="form.state" type="text" data-test-id="modalGenerateCsr-input-state" - :state="getValidationState($v.form.state)" + :state="getValidationState(v$.form.state)" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -92,7 +92,7 @@ v-model="form.city" type="text" data-test-id="modalGenerateCsr-input-city" - :state="getValidationState($v.form.city)" + :state="getValidationState(v$.form.city)" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -111,7 +111,7 @@ v-model="form.companyName" type="text" data-test-id="modalGenerateCsr-input-companyName" - :state="getValidationState($v.form.companyName)" + :state="getValidationState(v$.form.companyName)" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -128,7 +128,7 @@ v-model="form.companyUnit" type="text" data-test-id="modalGenerateCsr-input-companyUnit" - :state="getValidationState($v.form.companyUnit)" + :state="getValidationState(v$.form.companyUnit)" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -147,7 +147,7 @@ v-model="form.commonName" type="text" data-test-id="modalGenerateCsr-input-commonName" - :state="getValidationState($v.form.commonName)" + :state="getValidationState(v$.form.commonName)" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -240,8 +240,8 @@ v-model="form.keyPairAlgorithm" data-test-id="modalGenerateCsr-select-keyPairAlgorithm" :options="keyPairAlgorithmOptions" - :state="getValidationState($v.form.keyPairAlgorithm)" - @input="$v.form.keyPairAlgorithm.$touch()" + :state="getValidationState(v$.form.keyPairAlgorithm)" + @input="v$.form.keyPairAlgorithm.$touch()" > <template #first> <b-form-select-option :value="null" disabled> @@ -257,7 +257,7 @@ </b-row> <b-row> <b-col lg="12"> - <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'"> + <template v-if="v$.form.keyPairAlgorithm.$model === 'EC'"> <b-form-group :label="$t('pageCertificates.modal.keyCurveId')" label-for="key-curve-id" @@ -267,8 +267,8 @@ v-model="form.keyCurveId" data-test-id="modalGenerateCsr-select-keyCurveId" :options="keyCurveIdOptions" - :state="getValidationState($v.form.keyCurveId)" - @input="$v.form.keyCurveId.$touch()" + :state="getValidationState(v$.form.keyCurveId)" + @input="v$.form.keyCurveId.$touch()" > <template #first> <b-form-select-option :value="null" disabled> @@ -281,7 +281,7 @@ </b-form-invalid-feedback> </b-form-group> </template> - <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'"> + <template v-if="v$.form.keyPairAlgorithm.$model === 'RSA'"> <b-form-group :label="$t('pageCertificates.modal.keyBitLength')" label-for="key-bit-length" @@ -291,8 +291,8 @@ v-model="form.keyBitLength" data-test-id="modalGenerateCsr-select-keyBitLength" :options="keyBitLengthOptions" - :state="getValidationState($v.form.keyBitLength)" - @input="$v.form.keyBitLength.$touch()" + :state="getValidationState(v$.form.keyBitLength)" + @input="v$.form.keyBitLength.$touch()" > <template #first> <b-form-select-option :value="null" disabled> @@ -369,6 +369,7 @@ import { COUNTRY_LIST } from './CsrCountryCodes'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; export default { name: 'ModalGenerateCsr', @@ -381,6 +382,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { certificateType: null, country: null, @@ -449,14 +451,14 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$store .dispatch('certificates/generateCsr', this.form) .then(({ data: { CSRString } }) => { this.csrString = CSRString; this.$bvModal.show('csr-string'); - this.$v.$reset(); + this.v$.$reset(); }); }, resetForm() { diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue index 60170f1b..3a8cd3f0 100644 --- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue +++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue @@ -27,12 +27,12 @@ id="certificate-type" v-model="form.certificateType" :options="certificateOptions" - :state="getValidationState($v.form.certificateType)" - @input="$v.form.certificateType.$touch()" + :state="getValidationState(v$.form.certificateType)" + @input="v$.form.certificateType.$touch()" > </b-form-select> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.certificateType.required"> + <template v-if="!v$.form.certificateType.required"> {{ $t('global.form.fieldRequired') }} </template> </b-form-invalid-feedback> @@ -44,7 +44,7 @@ id="certificate-file" v-model="form.file" accept=".pem" - :state="getValidationState($v.form.file)" + :state="getValidationState(v$.form.file)" > <template #invalid> <b-form-invalid-feedback role="alert"> @@ -74,6 +74,7 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; import FormFile from '@/components/Global/FormFile'; +import { useI18n } from 'vue-i18n'; export default { components: { FormFile }, @@ -98,6 +99,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { certificateType: null, file: null, @@ -140,8 +142,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', { addNew: !this.certificate, file: this.form.file, @@ -162,7 +164,7 @@ export default { ? this.certificateOptions[0].value : null; this.form.file = null; - this.$v.$reset(); + this.v$.$reset(); }, onOk(bvModalEvt) { // prevent modal close diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue index 28d2b1cb..eab2737f 100644 --- a/src/views/SecurityAndAccess/Ldap/Ldap.vue +++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue @@ -44,7 +44,7 @@ :disabled=" !caCertificateExpiration || !ldapCertificateExpiration " - @change="$v.form.secureLdapEnabled.$touch()" + @change="v$.form.secureLdapEnabled.$touch()" > {{ $t('global.action.enable') }} </b-form-checkbox> @@ -52,12 +52,12 @@ <dl> <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt> <dd v-if="caCertificateExpiration"> - {{ caCertificateExpiration }} + {{ $filters.formatDate(caCertificateExpiration) }} </dd> <dd v-else>--</dd> <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt> <dd v-if="ldapCertificateExpiration"> - {{ ldapCertificateExpiration }} + {{ $filters.formatDate(ldapCertificateExpiration) }} </dd> <dd v-else>--</dd> </dl> @@ -105,8 +105,8 @@ id="server-uri" v-model="form.serverUri" data-test-id="ldap-input-serverUri" - :state="getValidationState($v.form.serverUri)" - @change="$v.form.serverUri.$touch()" + :state="getValidationState(v$.form.serverUri)" + @change="v$.form.serverUri.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -123,8 +123,8 @@ id="bind-dn" v-model="form.bindDn" data-test-id="ldap-input-bindDn" - :state="getValidationState($v.form.bindDn)" - @change="$v.form.bindDn.$touch()" + :state="getValidationState(v$.form.bindDn)" + @change="v$.form.bindDn.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -143,9 +143,9 @@ id="bind-password" v-model="form.bindPassword" type="password" - :state="getValidationState($v.form.bindPassword)" + :state="getValidationState(v$.form.bindPassword)" class="form-control-with-button" - @change="$v.form.bindPassword.$touch()" + @change="v$.form.bindPassword.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -162,8 +162,8 @@ id="base-dn" v-model="form.baseDn" data-test-id="ldap-input-baseDn" - :state="getValidationState($v.form.baseDn)" - @change="$v.form.baseDn.$touch()" + :state="getValidationState(v$.form.baseDn)" + @change="v$.form.baseDn.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -182,7 +182,7 @@ id="user-id-attribute" v-model="form.userIdAttribute" data-test-id="ldap-input-userIdAttribute" - @change="$v.form.userIdAttribute.$touch()" + @change="v$.form.userIdAttribute.$touch()" /> </b-form-group> </b-col> @@ -198,7 +198,7 @@ id="group-id-attribute" v-model="form.groupIdAttribute" data-test-id="ldap-input-groupIdAttribute" - @change="$v.form.groupIdAttribute.$touch()" + @change="v$.form.groupIdAttribute.$touch()" /> </b-form-group> </b-col> @@ -243,6 +243,7 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import InfoTooltip from '@/components/Global/InfoTooltip'; import TableRoleGroups from './TableRoleGroups'; +import { useI18n } from 'vue-i18n'; export default { name: 'Ldap', @@ -265,6 +266,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { ldapAuthenticationEnabled: this.$store.getters['ldap/isServiceEnabled'], secureLdapEnabled: false, @@ -388,8 +390,8 @@ export default { this.form.groupIdAttribute = groupsAttribute; }, handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; const data = { serviceEnabled: this.form.ldapAuthenticationEnabled, activeDirectoryEnabled: this.form.activeDirectoryEnabled, @@ -411,12 +413,12 @@ export default { }) .finally(() => { this.form.bindPassword = ''; - this.$v.form.$reset(); + this.v$.form.$reset(); this.endLoader(); }); }, onChangeServiceType(isActiveDirectoryEnabled) { - this.$v.form.activeDirectoryEnabled.$touch(); + this.v$.form.activeDirectoryEnabled.$touch(); const serviceType = isActiveDirectoryEnabled ? this.activeDirectory : this.ldap; @@ -425,7 +427,7 @@ export default { this.setFormValues(serviceType); }, onChangeldapAuthenticationEnabled(isServiceEnabled) { - this.$v.form.ldapAuthenticationEnabled.$touch(); + this.v$.form.ldapAuthenticationEnabled.$touch(); if (!isServiceEnabled) { // Request will fail if sent with empty values. // The frontend only checks for required fields diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue index 9b50abdc..d22aa6a6 100644 --- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue +++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue @@ -29,8 +29,8 @@ <b-form-input id="role-group-name" v-model="form.groupName" - :state="getValidationState($v.form.groupName)" - @input="$v.form.groupName.$touch()" + :state="getValidationState(v$.form.groupName)" + @input="v$.form.groupName.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} @@ -46,8 +46,8 @@ id="privilege" v-model="form.groupPrivilege" :options="accountRoles" - :state="getValidationState($v.form.groupPrivilege)" - @input="$v.form.groupPrivilege.$touch()" + :state="getValidationState(v$.form.groupPrivilege)" + @input="v$.form.groupPrivilege.$touch()" > <template v-if="!roleGroup" #first> <b-form-select-option :value="null" disabled> @@ -83,6 +83,7 @@ import { required, requiredIf } from '@vuelidate/validators'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; export default { mixins: [VuelidateMixin], @@ -106,6 +107,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { groupName: null, groupPrivilege: null, @@ -140,8 +142,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', { addNew: !this.roleGroup, groupName: this.form.groupName, @@ -157,7 +159,7 @@ export default { resetForm() { this.form.groupName = null; this.form.groupPrivilege = null; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { diff --git a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue index eeebfb9b..f73d9276 100644 --- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue +++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue @@ -108,6 +108,8 @@ import BVTableSelectableMixin, { import BVToastMixin from '@/components/Mixins/BVToastMixin'; import ModalAddRoleGroup from './ModalAddRoleGroup'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { @@ -122,6 +124,7 @@ export default { mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin], data() { return { + $t: useI18n().t, isBusy: true, activeRoleGroup: null, fields: [ @@ -132,12 +135,12 @@ export default { { key: 'groupName', sortable: true, - label: this.$t('pageLdap.tableRoleGroups.groupName'), + label: i18n.global.t('pageLdap.tableRoleGroups.groupName'), }, { key: 'groupPrivilege', sortable: true, - label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'), + label: i18n.global.t('pageLdap.tableRoleGroups.groupPrivilege'), }, { key: 'actions', @@ -149,7 +152,7 @@ export default { batchActions: [ { value: 'delete', - label: this.$t('global.action.delete'), + label: i18n.global.t('global.action.delete'), }, ], selectedRows: selectedRows, @@ -167,12 +170,12 @@ export default { actions: [ { value: 'edit', - title: this.$t('global.action.edit'), + title: i18n.global.t('global.action.edit'), enabled: this.isServiceEnabled, }, { value: 'delete', - title: this.$t('global.action.delete'), + title: i18n.global.t('global.action.delete'), enabled: this.isServiceEnabled, }, ], @@ -189,14 +192,14 @@ export default { onBatchAction() { this.$bvModal .msgBoxConfirm( - this.$tc( + i18n.global.t( 'pageLdap.modal.deleteRoleGroupBatchConfirmMessage', this.selectedRows.length, ), { - title: this.$t('pageLdap.modal.deleteRoleGroup'), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t('pageLdap.modal.deleteRoleGroup'), + okTitle: i18n.global.t('global.action.delete'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) @@ -221,13 +224,13 @@ export default { case 'delete': this.$bvModal .msgBoxConfirm( - this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', { + i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', { groupName: row.groupName, }), { - title: this.$t('pageLdap.modal.deleteRoleGroup'), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t('pageLdap.modal.deleteRoleGroup'), + okTitle: i18n.global.t('global.action.delete'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue index fb521750..6cba8832 100644 --- a/src/views/SecurityAndAccess/Policies/Policies.vue +++ b/src/views/SecurityAndAccess/Policies/Policies.vue @@ -137,6 +137,8 @@ import PageTitle from '@/components/Global/PageTitle'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'Policies', @@ -148,15 +150,16 @@ export default { }, data() { return { + $t: useI18n().t, modifySSHPolicyDisabled: process.env.VUE_APP_MODIFY_SSH_POLICY_DISABLED === 'true', sessionTimeOutOptions: [ - { value: 1800, text: this.$t('pagePolicies.options.30minutes') }, - { value: 3600, text: this.$t('pagePolicies.options.1hour') }, - { value: 7200, text: this.$t('pagePolicies.options.2hours') }, - { value: 14400, text: this.$t('pagePolicies.options.4hours') }, - { value: 28800, text: this.$t('pagePolicies.options.8hours') }, - { value: 86400, text: this.$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') }, ], }; }, diff --git a/src/views/SecurityAndAccess/Sessions/Sessions.vue b/src/views/SecurityAndAccess/Sessions/Sessions.vue index 636aafe0..74dcf744 100644 --- a/src/views/SecurityAndAccess/Sessions/Sessions.vue +++ b/src/views/SecurityAndAccess/Sessions/Sessions.vue @@ -135,6 +135,8 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import SearchFilterMixin, { searchFilter, } from '@/components/Mixins/SearchFilterMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { components: { @@ -159,6 +161,7 @@ export default { }, data() { return { + $t: useI18n().t, isBusy: true, fields: [ { @@ -167,22 +170,22 @@ export default { }, { key: 'sessionID', - label: this.$t('pageSessions.table.sessionID'), + label: i18n.global.t('pageSessions.table.sessionID'), class: 'text-center', }, { key: 'context', - label: this.$t('pageSessions.table.context'), + label: i18n.global.t('pageSessions.table.context'), class: 'text-center', }, { key: 'username', - label: this.$t('pageSessions.table.username'), + label: i18n.global.t('pageSessions.table.username'), class: 'text-center', }, { key: 'ipAddress', - label: this.$t('pageSessions.table.ipAddress'), + label: i18n.global.t('pageSessions.table.ipAddress'), class: 'text-center', }, { @@ -194,7 +197,7 @@ export default { batchActions: [ { value: 'disconnect', - label: this.$t('pageSessions.action.disconnect'), + label: i18n.global.t('pageSessions.action.disconnect'), }, ], currentPage: currentPage, @@ -220,7 +223,7 @@ export default { actions: [ { value: 'disconnect', - title: this.$t('pageSessions.action.disconnect'), + title: i18n.global.t('pageSessions.action.disconnect'), }, ], }; @@ -257,12 +260,15 @@ export default { onTableRowAction(action, { uri }) { if (action === 'disconnect') { this.$bvModal - .msgBoxConfirm(this.$tc('pageSessions.modal.disconnectMessage'), { - title: this.$tc('pageSessions.modal.disconnectTitle'), - okTitle: this.$t('pageSessions.action.disconnect'), - cancelTitle: this.$t('global.action.cancel'), - autoFocusButton: 'ok', - }) + .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]); }); @@ -273,17 +279,17 @@ export default { const uris = this.selectedRows.map((row) => row.uri); this.$bvModal .msgBoxConfirm( - this.$tc( + i18n.global.t( 'pageSessions.modal.disconnectMessage', this.selectedRows.length, ), { - title: this.$tc( + title: i18n.global.t( 'pageSessions.modal.disconnectTitle', this.selectedRows.length, ), - okTitle: this.$t('pageSessions.action.disconnect'), - cancelTitle: this.$t('global.action.cancel'), + okTitle: i18n.global.t('pageSessions.action.disconnect'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue index 8932eb56..91db8258 100644 --- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue +++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue @@ -27,17 +27,17 @@ type="number" aria-describedby="lockout-threshold-help-block" data-test-id="userManagement-input-lockoutThreshold" - :state="getValidationState($v.form.lockoutThreshold)" - @input="$v.form.lockoutThreshold.$touch()" + :state="getValidationState(v$.form.lockoutThreshold)" + @input="v$.form.lockoutThreshold.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.lockoutThreshold.required"> + <template v-if="!v$.form.lockoutThreshold.required"> {{ $t('global.form.fieldRequired') }} </template> <template v-if=" - !$v.form.lockoutThreshold.minLength || - !$v.form.lockoutThreshold.maxLength + !v$.form.lockoutThreshold.minLength || + !v$.form.lockoutThreshold.maxLength " > {{ @@ -60,7 +60,7 @@ class="mb-2" :value="0" data-test-id="userManagement-radio-manualUnlock" - @input="$v.form.unlockMethod.$touch()" + @input="v$.form.unlockMethod.$touch()" > {{ $t('pageUserManagement.modal.manual') }} </b-form-radio> @@ -69,7 +69,7 @@ name="unlock-method" :value="1" data-test-id="userManagement-radio-automaticUnlock" - @input="$v.form.unlockMethod.$touch()" + @input="v$.form.unlockMethod.$touch()" > {{ $t('pageUserManagement.modal.automaticAfterTimeout') }} </b-form-radio> @@ -82,15 +82,15 @@ aria-describedby="lockout-duration-help-block" type="number" data-test-id="userManagement-input-lockoutDuration" - :state="getValidationState($v.form.lockoutDuration)" - :readonly="$v.form.unlockMethod.$model === 0" - @input="$v.form.lockoutDuration.$touch()" + :state="getValidationState(v$.form.lockoutDuration)" + :readonly="v$.form.unlockMethod.$model === 0" + @input="v$.form.lockoutDuration.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.lockoutDuration.required"> + <template v-if="!v$.form.lockoutDuration.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-else-if="!$v.form.lockoutDuration.minvalue"> + <template v-else-if="!v$.form.lockoutDuration.minvalue"> {{ $t('global.form.mustBeAtLeast', { value: 1 }) }} </template> </b-form-invalid-feedback> @@ -124,6 +124,7 @@ <script> import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; import { required, @@ -147,6 +148,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { lockoutThreshold: 0, unlockMethod: 0, @@ -181,15 +183,15 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; let lockoutThreshold; let lockoutDuration; - if (this.$v.form.lockoutThreshold.$dirty) { + if (this.v$.form.lockoutThreshold.$dirty) { lockoutThreshold = this.form.lockoutThreshold; } - if (this.$v.form.unlockMethod.$dirty) { + if (this.v$.form.unlockMethod.$dirty) { lockoutDuration = this.form.unlockMethod ? this.form.lockoutDuration : 0; @@ -215,7 +217,7 @@ export default { this.form.lockoutDuration = this.settings.lockoutDuration ? this.settings.lockoutDuration : null; - this.$v.$reset(); // clear validations + this.v$.$reset(); // clear validations }, }, }; diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue index dca97363..44ab516d 100644 --- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue +++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue @@ -14,7 +14,7 @@ <b-row v-if="!newUser && manualUnlockPolicy && user.Locked"> <b-col sm="9"> <alert :show="true" variant="warning" small> - <template v-if="!$v.form.manualUnlock.$dirty"> + <template v-if="!v$.form.manualUnlock.$dirty"> {{ $t('pageUserManagement.modal.accountLocked') }} </template> <template v-else> @@ -30,9 +30,9 @@ /> <b-button variant="primary" - :disabled="$v.form.manualUnlock.$dirty" + :disabled="v$.form.manualUnlock.$dirty" data-test-id="userManagement-button-manualUnlock" - @click="$v.form.manualUnlock.$touch()" + @click="v$.form.manualUnlock.$touch()" > {{ $t('pageUserManagement.modal.unlock') }} </b-button> @@ -46,7 +46,7 @@ name="user-status" :value="true" data-test-id="userManagement-radioButton-statusEnabled" - @input="$v.form.status.$touch()" + @input="v$.form.status.$touch()" > {{ $t('global.status.enabled') }} </b-form-radio> @@ -56,7 +56,7 @@ data-test-id="userManagement-radioButton-statusDisabled" :value="false" :disabled="!newUser && originalUsername === disabled" - @input="$v.form.status.$touch()" + @input="v$.form.status.$touch()" > {{ $t('global.status.disabled') }} </b-form-radio> @@ -80,20 +80,20 @@ type="text" aria-describedby="username-help-block" data-test-id="userManagement-input-username" - :state="getValidationState($v.form.username)" + :state="getValidationState(v$.form.username)" :disabled="!newUser && originalUsername === disabled" - @input="$v.form.username.$touch()" + @input="v$.form.username.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.username.required"> + <template v-if="!v$.form.username.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-else-if="!$v.form.username.maxLength"> + <template v-else-if="!v$.form.username.maxLength"> {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 16 }) }} </template> - <template v-else-if="!$v.form.username.pattern"> + <template v-else-if="!v$.form.username.pattern"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> @@ -107,9 +107,9 @@ v-model="form.privilege" :options="privilegeTypes" data-test-id="userManagement-select-privilege" - :state="getValidationState($v.form.privilege)" + :state="getValidationState(v$.form.privilege)" :disabled="!newUser && originalUsername === 'root'" - @input="$v.form.privilege.$touch()" + @input="v$.form.privilege.$touch()" > <template #first> <b-form-select-option :value="null" disabled> @@ -118,7 +118,7 @@ </template> </b-form-select> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.privilege.required"> + <template v-if="!v$.form.privilege.required"> {{ $t('global.form.fieldRequired') }} </template> </b-form-invalid-feedback> @@ -144,17 +144,17 @@ type="password" data-test-id="userManagement-input-password" aria-describedby="password-help-block" - :state="getValidationState($v.form.password)" + :state="getValidationState(v$.form.password)" class="form-control-with-button" - @input="$v.form.password.$touch()" + @input="v$.form.password.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.password.required"> + <template v-if="!v$.form.password.required"> {{ $t('global.form.fieldRequired') }} </template> <template v-if=" - !$v.form.password.minLength || !$v.form.password.maxLength + !v$.form.password.minLength || !v$.form.password.maxLength " > {{ @@ -177,16 +177,16 @@ v-model="form.passwordConfirmation" data-test-id="userManagement-input-passwordConfirmation" type="password" - :state="getValidationState($v.form.passwordConfirmation)" + :state="getValidationState(v$.form.passwordConfirmation)" class="form-control-with-button" - @input="$v.form.passwordConfirmation.$touch()" + @input="v$.form.passwordConfirmation.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.passwordConfirmation.required"> + <template v-if="!v$.form.passwordConfirmation.required"> {{ $t('global.form.fieldRequired') }} </template> <template - v-else-if="!$v.form.passwordConfirmation.sameAsPassword" + v-else-if="!v$.form.passwordConfirmation.sameAsPassword" > {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }} </template> @@ -237,6 +237,7 @@ import { useVuelidate } from '@vuelidate/core'; import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; import Alert from '@/components/Global/Alert'; +import { useI18n } from 'vue-i18n'; export default { components: { Alert, InputPasswordToggle }, @@ -258,6 +259,7 @@ export default { }, data() { return { + $t: useI18n().t, originalUsername: '', form: { status: true, @@ -329,28 +331,28 @@ export default { let userData = {}; if (this.newUser) { - this.$v.$touch(); - if (this.$v.$invalid) return; + 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; + if (this.v$.$invalid) return; userData.originalUsername = this.originalUsername; - if (this.$v.form.status.$dirty) { + if (this.v$.form.status.$dirty) { userData.status = this.form.status; } - if (this.$v.form.username.$dirty) { + if (this.v$.form.username.$dirty) { userData.username = this.form.username; } - if (this.$v.form.privilege.$dirty) { + if (this.v$.form.privilege.$dirty) { userData.privilege = this.form.privilege; } - if (this.$v.form.password.$dirty) { + if (this.v$.form.password.$dirty) { userData.password = this.form.password; } - if (this.$v.form.manualUnlock.$dirty) { + if (this.v$.form.manualUnlock.$dirty) { // If form manualUnlock control $dirty then // set user Locked property to false userData.locked = false; @@ -376,13 +378,13 @@ export default { this.form.privilege = null; this.form.password = ''; this.form.passwordConfirmation = ''; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, requirePassword() { if (this.newUser) return true; - if (this.$v.form.password.$dirty) return true; - if (this.$v.form.passwordConfirmation.$dirty) return true; + if (this.v$.form.password.$dirty) return true; + if (this.v$.form.passwordConfirmation.$dirty) return true; return false; }, onOk(bvModalEvt) { diff --git a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue index 9fb8013d..5d928569 100644 --- a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue +++ b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue @@ -25,6 +25,7 @@ <script> import Checkmark20 from '@carbon/icons-vue/es/checkmark/20'; +import i18n from '@/i18n'; export default { components: { @@ -34,7 +35,7 @@ export default { return { items: [ { - description: this.$t( + description: i18n.global.t( 'pageUserManagement.tableRoles.configureComponentsManagedByThisService', ), administrator: true, @@ -43,7 +44,7 @@ export default { noaccess: false, }, { - description: this.$t( + description: i18n.global.t( 'pageUserManagement.tableRoles.configureManagerResources', ), administrator: true, @@ -52,7 +53,7 @@ export default { noaccess: false, }, { - description: this.$t( + description: i18n.global.t( 'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount', ), administrator: true, @@ -61,7 +62,7 @@ export default { noaccess: false, }, { - description: this.$t( + description: i18n.global.t( 'pageUserManagement.tableRoles.configureUsersAndTheirAccounts', ), administrator: true, @@ -70,7 +71,7 @@ export default { noaccess: false, }, { - description: this.$t( + description: i18n.global.t( 'pageUserManagement.tableRoles.logInToTheServiceAndReadResources', ), administrator: true, @@ -82,26 +83,26 @@ export default { fields: [ { key: 'description', - label: this.$t('pageUserManagement.tableRoles.privilege'), + label: i18n.global.t('pageUserManagement.tableRoles.privilege'), }, { key: 'administrator', - label: this.$t('pageUserManagement.tableRoles.administrator'), + label: i18n.global.t('pageUserManagement.tableRoles.administrator'), class: 'text-center', }, { key: 'operator', - label: this.$t('pageUserManagement.tableRoles.operator'), + label: i18n.global.t('pageUserManagement.tableRoles.operator'), class: 'text-center', }, { key: 'readonly', - label: this.$t('pageUserManagement.tableRoles.readOnly'), + label: i18n.global.t('pageUserManagement.tableRoles.readOnly'), class: 'text-center', }, { key: 'noaccess', - label: this.$t('pageUserManagement.tableRoles.noAccess'), + label: i18n.global.t('pageUserManagement.tableRoles.noAccess'), class: 'text-center', }, ], diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue index 9e33a63a..81b5d992 100644 --- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue +++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue @@ -133,6 +133,8 @@ import BVTableSelectableMixin, { } from '@/components/Mixins/BVTableSelectableMixin'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'UserManagement', @@ -156,6 +158,7 @@ export default { }, data() { return { + $t: useI18n().t, isBusy: true, activeUser: null, setting: {}, @@ -165,15 +168,15 @@ export default { }, { key: 'username', - label: this.$t('pageUserManagement.table.username'), + label: i18n.global.t('pageUserManagement.table.username'), }, { key: 'privilege', - label: this.$t('pageUserManagement.table.privilege'), + label: i18n.global.t('pageUserManagement.table.privilege'), }, { key: 'status', - label: this.$t('pageUserManagement.table.status'), + label: i18n.global.t('pageUserManagement.table.status'), }, { key: 'actions', @@ -184,15 +187,15 @@ export default { tableToolbarActions: [ { value: 'delete', - label: this.$t('global.action.delete'), + label: i18n.global.t('global.action.delete'), }, { value: 'enable', - label: this.$t('global.action.enable'), + label: i18n.global.t('global.action.enable'), }, { value: 'disable', - label: this.$t('global.action.disable'), + label: i18n.global.t('global.action.disable'), }, ], selectedRows: selectedRows, @@ -219,7 +222,7 @@ export default { { value: 'edit', enabled: this.editEnable(user), - title: this.$t('pageUserManagement.editUser'), + title: i18n.global.t('pageUserManagement.editUser'), }, { value: 'delete', @@ -229,7 +232,7 @@ export default { : true && user.UserName === 'root' ? false : true, - title: this.$tc('pageUserManagement.deleteUser'), + title: i18n.global.t('pageUserManagement.deleteUser'), }, ], ...user, @@ -267,13 +270,13 @@ export default { initModalDelete(user) { this.$bvModal .msgBoxConfirm( - this.$t('pageUserManagement.modal.deleteConfirmMessage', { + i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', { user: user.username, }), { - title: this.$tc('pageUserManagement.deleteUser'), - okTitle: this.$tc('pageUserManagement.deleteUser'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t('pageUserManagement.deleteUser'), + okTitle: i18n.global.t('pageUserManagement.deleteUser'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) @@ -316,20 +319,20 @@ export default { case 'delete': this.$bvModal .msgBoxConfirm( - this.$tc( + i18n.global.t( 'pageUserManagement.modal.batchDeleteConfirmMessage', this.selectedRows.length, ), { - title: this.$tc( + title: i18n.global.t( 'pageUserManagement.deleteUser', this.selectedRows.length, ), - okTitle: this.$tc( + okTitle: i18n.global.t( 'pageUserManagement.deleteUser', this.selectedRows.length, ), - cancelTitle: this.$t('global.action.cancel'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue index 00d7b45a..b86ebd22 100644 --- a/src/views/Settings/DateTime/DateTime.vue +++ b/src/views/Settings/DateTime/DateTime.vue @@ -18,14 +18,14 @@ <b-col lg="3"> <dl> <dt>{{ $t('pageDateTime.form.date') }}</dt> - <dd v-if="bmcTime">{{ bmcTime }}</dd> + <dd v-if="bmcTime">{{ $filters.formatDate(bmcTime) }}</dd> <dd v-else>--</dd> </dl> </b-col> <b-col lg="3"> <dl> <dt>{{ $t('pageDateTime.form.time.label') }}</dt> - <dd v-if="bmcTime">{{ bmcTime }}</dd> + <dd v-if="bmcTime">{{ $filters.formatTime(bmcTime) }}</dd> <dd v-else>--</dd> </dl> </b-col> @@ -56,17 +56,17 @@ <b-form-input id="input-manual-date" v-model="form.manual.date" - :state="getValidationState($v.form.manual.date)" + :state="getValidationState(v$.form.manual.date)" :disabled="ntpOptionSelected" data-test-id="dateTime-input-manualDate" class="form-control-with-button" - @blur="$v.form.manual.date.$touch()" + @blur="v$.form.manual.date.$touch()" /> <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.manual.date.pattern"> + <div v-if="!v$.form.manual.date.pattern"> {{ $t('global.form.invalidFormat') }} </div> - <div v-if="!$v.form.manual.date.required"> + <div v-if="!v$.form.manual.date.required"> {{ $t('global.form.fieldRequired') }} </div> </b-form-invalid-feedback> @@ -105,16 +105,16 @@ <b-form-input id="input-manual-time" v-model="form.manual.time" - :state="getValidationState($v.form.manual.time)" + :state="getValidationState(v$.form.manual.time)" :disabled="ntpOptionSelected" data-test-id="dateTime-input-manualTime" - @blur="$v.form.manual.time.$touch()" + @blur="v$.form.manual.time.$touch()" /> <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.manual.time.pattern"> + <div v-if="!v$.form.manual.time.pattern"> {{ $t('global.form.invalidFormat') }} </div> - <div v-if="!$v.form.manual.time.required"> + <div v-if="!v$.form.manual.time.required"> {{ $t('global.form.fieldRequired') }} </div> </b-form-invalid-feedback> @@ -139,13 +139,13 @@ <b-form-input id="input-ntp-1" v-model="form.ntp.firstAddress" - :state="getValidationState($v.form.ntp.firstAddress)" + :state="getValidationState(v$.form.ntp.firstAddress)" :disabled="manualOptionSelected" data-test-id="dateTime-input-ntpServer1" - @blur="$v.form.ntp.firstAddress.$touch()" + @blur="v$.form.ntp.firstAddress.$touch()" /> <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.ntp.firstAddress.required"> + <div v-if="!v$.form.ntp.firstAddress.required"> {{ $t('global.form.fieldRequired') }} </div> </b-form-invalid-feedback> @@ -210,6 +210,7 @@ import { useVuelidate } from '@vuelidate/core'; import { mapState } from 'vuex'; import { requiredIf, helpers } from '@vuelidate/validators'; +import { useI18n } from 'vue-i18n'; const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/; const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/; @@ -234,6 +235,7 @@ export default { }, data() { return { + $t: useI18n().t, locale: this.$store.getters['global/languagePreference'], form: { configurationSelected: 'manual', @@ -302,10 +304,10 @@ export default { this.emitChange(); }, bmcTime() { - this.form.manual.date = this.$options.filters.formatDate( + this.form.manual.date = this.$filters.formatDate( this.$store.getters['global/bmcTime'], ); - this.form.manual.time = this.$options.filters + this.form.manual.time = this.$filters .formatTime(this.$store.getters['global/bmcTime']) .slice(0, 5); }, @@ -320,8 +322,8 @@ export default { }, methods: { emitChange() { - if (this.$v.$invalid) return; - this.$v.$reset(); //reset to re-validate on blur + if (this.v$.$invalid) return; + this.v$.$reset(); //reset to re-validate on blur this.$emit('change', { manualDate: this.manualDate ? new Date(this.manualDate) : null, }); @@ -337,8 +339,8 @@ export default { ] = [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]]; }, submitForm() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.startLoader(); let dateTimeForm = {}; @@ -398,7 +400,7 @@ export default { }) .catch(({ message }) => this.errorToast(message)) .finally(() => { - this.$v.form.$reset(); + this.v$.form.$reset(); this.endLoader(); }); }, diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue index 8fe371ee..0e1bd881 100644 --- a/src/views/Settings/Network/ModalDns.vue +++ b/src/views/Settings/Network/ModalDns.vue @@ -16,14 +16,14 @@ id="staticDns" v-model="form.staticDns" type="text" - :state="getValidationState($v.form.staticDns)" - @input="$v.form.staticDns.$touch()" + :state="getValidationState(v$.form.staticDns)" + @input="v$.form.staticDns.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.staticDns.required"> + <template v-if="!v$.form.staticDns.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.form.staticDns.ipAddress"> + <template v-if="!v$.form.staticDns.ipAddress"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> @@ -47,6 +47,7 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; import { ipAddress, required } from '@vuelidate/validators'; +import { useI18n } from 'vue-i18n'; export default { mixins: [VuelidateMixin], @@ -57,6 +58,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { staticDns: null, }, @@ -74,8 +76,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', [this.form.staticDns]); this.closeModal(); }, @@ -86,7 +88,7 @@ export default { }, resetForm() { this.form.staticDns = null; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue index 1b3bab1d..b2155b7a 100644 --- a/src/views/Settings/Network/ModalHostname.vue +++ b/src/views/Settings/Network/ModalHostname.vue @@ -16,14 +16,14 @@ id="hostname" v-model="form.hostname" type="text" - :state="getValidationState($v.form.hostname)" - @input="$v.form.hostname.$touch()" + :state="getValidationState(v$.form.hostname)" + @input="v$.form.hostname.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.hostname.required"> + <template v-if="!v$.form.hostname.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.form.hostname.validateHostname"> + <template v-if="!v$.form.hostname.validateHostname"> {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }} </template> </b-form-invalid-feedback> @@ -52,6 +52,7 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; import { required, helpers } from '@vuelidate/validators'; +import { useI18n } from 'vue-i18n'; const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/); @@ -70,6 +71,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { hostname: '', }, @@ -92,8 +94,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', { HostName: this.form.hostname }); this.closeModal(); }, @@ -104,7 +106,7 @@ export default { }, resetForm() { this.form.hostname = this.hostname; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue index 2c3d9e88..a3b54826 100644 --- a/src/views/Settings/Network/ModalIpv4.vue +++ b/src/views/Settings/Network/ModalIpv4.vue @@ -16,14 +16,14 @@ id="ipAddress" v-model="form.ipAddress" type="text" - :state="getValidationState($v.form.ipAddress)" - @input="$v.form.ipAddress.$touch()" + :state="getValidationState(v$.form.ipAddress)" + @input="v$.form.ipAddress.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.ipAddress.required"> + <template v-if="!v$.form.ipAddress.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.form.ipAddress.ipAddress"> + <template v-if="!v$.form.ipAddress.ipAddress"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> @@ -38,14 +38,14 @@ id="gateway" v-model="form.gateway" type="text" - :state="getValidationState($v.form.gateway)" - @input="$v.form.gateway.$touch()" + :state="getValidationState(v$.form.gateway)" + @input="v$.form.gateway.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.gateway.required"> + <template v-if="!v$.form.gateway.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.form.gateway.ipAddress"> + <template v-if="!v$.form.gateway.ipAddress"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> @@ -62,14 +62,14 @@ id="subnetMask" v-model="form.subnetMask" type="text" - :state="getValidationState($v.form.subnetMask)" - @input="$v.form.subnetMask.$touch()" + :state="getValidationState(v$.form.subnetMask)" + @input="v$.form.subnetMask.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.subnetMask.required"> + <template v-if="!v$.form.subnetMask.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.form.subnetMask.ipAddress"> + <template v-if="!v$.form.subnetMask.ipAddress"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> @@ -93,6 +93,7 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; import { ipAddress, required } from '@vuelidate/validators'; +import { useI18n } from 'vue-i18n'; export default { mixins: [VuelidateMixin], @@ -109,6 +110,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { ipAddress: '', gateway: '', @@ -141,8 +143,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', { Address: this.form.ipAddress, Gateway: this.form.gateway, @@ -159,7 +161,7 @@ export default { this.form.ipAddress = null; this.form.gateway = this.defaultGateway; this.form.subnetMask = null; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue index 307eb8df..f3fcc02e 100644 --- a/src/views/Settings/Network/ModalMacAddress.vue +++ b/src/views/Settings/Network/ModalMacAddress.vue @@ -17,14 +17,14 @@ v-model.trim="form.macAddress" data-test-id="network-input-macAddress" type="text" - :state="getValidationState($v.form.macAddress)" - @change="$v.form.macAddress.$touch()" + :state="getValidationState(v$.form.macAddress)" + @change="v$.form.macAddress.$touch()" /> <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.macAddress.required"> + <div v-if="!v$.form.macAddress.required"> {{ $t('global.form.fieldRequired') }} </div> - <div v-if="!$v.form.macAddress.macAddress"> + <div v-if="!v$.form.macAddress.macAddress"> {{ $t('global.form.invalidFormat') }} </div> </b-form-invalid-feedback> @@ -53,6 +53,7 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; import { macAddress, required } from '@vuelidate/validators'; +import { useI18n } from 'vue-i18n'; export default { mixins: [VuelidateMixin], @@ -69,6 +70,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { macAddress: '', }, @@ -91,8 +93,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', { MACAddress: this.form.macAddress }); this.closeModal(); }, @@ -103,7 +105,7 @@ export default { }, resetForm() { this.form.macAddress = this.macAddress; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue index 0279cbe6..7a2e014c 100644 --- a/src/views/Settings/Network/Network.vue +++ b/src/views/Settings/Network/Network.vue @@ -64,6 +64,7 @@ import TableIpv4 from './TableIpv4.vue'; import TableIpv6 from './TableIpv6.vue'; import TableDns from './TableDns.vue'; import { mapState } from 'vuex'; +import { useI18n } from 'vue-i18n'; export default { name: 'Network', @@ -89,6 +90,7 @@ export default { }, data() { return { + $t: useI18n().t, currentHostname: '', currentMacAddress: '', defaultGateway: '', diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue index 0c062ea2..23ce6cac 100644 --- a/src/views/Settings/Network/NetworkGlobalSettings.vue +++ b/src/views/Settings/Network/NetworkGlobalSettings.vue @@ -133,6 +133,7 @@ import IconEdit from '@carbon/icons-vue/es/edit/16'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; import PageSection from '@/components/Global/PageSection'; import { mapState } from 'vuex'; +import { useI18n } from 'vue-i18n'; export default { name: 'GlobalNetworkSettings', @@ -141,6 +142,7 @@ export default { data() { return { + $t: useI18n().t, hostname: '', }; }, diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue index 023d29bc..ea837574 100644 --- a/src/views/Settings/Network/NetworkInterfaceSettings.vue +++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue @@ -62,6 +62,7 @@ import IconEdit from '@carbon/icons-vue/es/edit/16'; import PageSection from '@/components/Global/PageSection'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; import { mapState } from 'vuex'; +import { useI18n } from 'vue-i18n'; export default { name: 'Ipv4Table', @@ -78,6 +79,7 @@ export default { }, data() { return { + $t: useI18n().t, selectedInterface: '', linkStatus: '', linkSpeed: '', diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue index 569109f1..0de1dcab 100644 --- a/src/views/Settings/Network/TableDns.vue +++ b/src/views/Settings/Network/TableDns.vue @@ -46,6 +46,7 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import PageSection from '@/components/Global/PageSection'; import TableRowAction from '@/components/Global/TableRowAction'; import { mapState } from 'vuex'; +import { useI18n } from 'vue-i18n'; export default { name: 'DNSTable', @@ -65,23 +66,24 @@ export default { }, data() { return { + $t: useI18n().t, form: { dnsStaticTableItems: [], }, actions: [ { value: 'edit', - title: this.$t('global.action.edit'), + title: 'global.action.edit', }, { value: 'delete', - title: this.$t('global.action.delete'), + title: 'global.action.delete', }, ], dnsTableFields: [ { key: 'address', - label: this.$t('pageNetwork.table.ipAddress'), + label: 'pageNetwork.table.ipAddress', }, { key: 'actions', label: '', tdClass: 'text-right' }, ], @@ -116,7 +118,7 @@ export default { actions: [ { value: 'delete', - title: this.$t('pageNetwork.table.deleteDns'), + title: 'pageNetwork.table.deleteDns', }, ], }; diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue index 0a06e0e4..b95e7d39 100644 --- a/src/views/Settings/Network/TableIpv4.vue +++ b/src/views/Settings/Network/TableIpv4.vue @@ -71,6 +71,8 @@ import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import PageSection from '@/components/Global/PageSection'; import TableRowAction from '@/components/Global/TableRowAction'; import { mapState } from 'vuex'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'Ipv4Table', @@ -90,35 +92,36 @@ export default { }, data() { return { + $t: useI18n().t, form: { ipv4TableItems: [], }, actions: [ { value: 'edit', - title: this.$t('global.action.edit'), + title: i18n.global.t('global.action.edit'), }, { value: 'delete', - title: this.$t('global.action.delete'), + title: i18n.global.t('global.action.delete'), }, ], ipv4TableFields: [ { key: 'Address', - label: this.$t('pageNetwork.table.ipAddress'), + label: i18n.global.t('pageNetwork.table.ipAddress'), }, { key: 'Gateway', - label: this.$t('pageNetwork.table.gateway'), + label: i18n.global.t('pageNetwork.table.gateway'), }, { key: 'SubnetMask', - label: this.$t('pageNetwork.table.subnet'), + label: i18n.global.t('pageNetwork.table.subnet'), }, { key: 'AddressOrigin', - label: this.$t('pageNetwork.table.addressOrigin'), + label: i18n.global.t('pageNetwork.table.addressOrigin'), }, { key: 'actions', label: '', tdClass: 'text-right' }, ], @@ -178,7 +181,7 @@ export default { actions: [ { value: 'delete', - title: this.$t('pageNetwork.table.deleteIpv4'), + title: i18n.global.t('pageNetwork.table.deleteIpv4'), }, ], }; @@ -211,19 +214,19 @@ export default { this.$bvModal .msgBoxConfirm( state - ? this.$t('pageNetwork.modal.confirmEnableDhcp') - : this.$t('pageNetwork.modal.confirmDisableDhcp'), + ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp') + : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'), { - title: this.$t('pageNetwork.modal.dhcpConfirmTitle', { + title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', { dhcpState: state - ? this.$t('global.action.enable') - : this.$t('global.action.disable'), + ? i18n.global.t('global.action.enable') + : i18n.global.t('global.action.disable'), }), okTitle: state - ? this.$t('global.action.enable') - : this.$t('global.action.disable'), + ? i18n.global.t('global.action.enable') + : i18n.global.t('global.action.disable'), okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'cancel', }, ) diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue index dfa4865d..348540a2 100644 --- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue +++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue @@ -28,6 +28,8 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; export default { name: 'PowerRestorePolicy', @@ -44,6 +46,7 @@ export default { }, data() { return { + $t: useI18n().t, policyValue: null, options: [], }; @@ -74,7 +77,9 @@ export default { this.options.length = 0; this.powerRestorePolicies.map((item) => { this.options.push({ - text: this.$t(`pagePowerRestorePolicy.policiesDesc.${item.state}`), + text: i18n.global.t( + `pagePowerRestorePolicy.policiesDesc.${item.state}`, + ), value: `${item.state}`, }); }); diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue index f52acd72..91ef34f0 100644 --- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue +++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue @@ -15,17 +15,17 @@ <b-form-input id="ip-Address" v-model="form.ipAddress" - :state="getValidationState($v.form.ipAddress)" + :state="getValidationState(v$.form.ipAddress)" data-test-id="snmpAlerts-input-ipAddress" type="text" - @blur="$v.form.ipAddress.$touch()" + @blur="v$.form.ipAddress.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.ipAddress.required"> + <template v-if="!v$.form.ipAddress.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.form.ipAddress.ipAddress"> + <template v-if="!v$.form.ipAddress.ipAddress"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> @@ -43,13 +43,13 @@ id="port" v-model="form.port" type="text" - :state="getValidationState($v.form.port)" + :state="getValidationState(v$.form.port)" data-test-id="snmpAlerts-input-port" - @blur="$v.form.port.$touch()" + @blur="v$.form.port.$touch()" /> <b-form-invalid-feedback role="alert"> <template - v-if="!$v.form.port.minLength || !$v.form.port.maxLength" + v-if="!v$.form.port.minLength || !v$.form.port.maxLength" > {{ $t('global.form.valueMustBeBetween', { @@ -85,6 +85,7 @@ import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { useVuelidate } from '@vuelidate/core'; +import { useI18n } from 'vue-i18n'; export default { mixins: [VuelidateMixin], @@ -95,6 +96,7 @@ export default { }, data() { return { + $t: useI18n().t, form: { ipaddress: null, port: null, @@ -117,8 +119,8 @@ export default { }, methods: { handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; + this.v$.$touch(); + if (this.v$.$invalid) return; this.$emit('ok', { ipAddress: this.form.ipAddress, port: this.form.port, @@ -133,7 +135,7 @@ export default { resetForm() { this.form.ipAddress = ''; this.form.port = ''; - this.$v.$reset(); + this.v$.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { diff --git a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue index dba181f2..d18ea753 100644 --- a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue +++ b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue @@ -90,6 +90,9 @@ import BVTableSelectableMixin, { tableHeaderCheckboxModel, tableHeaderCheckboxIndeterminate, } from '@/components/Mixins/BVTableSelectableMixin'; +import { useI18n } from 'vue-i18n'; +import i18n from '@/i18n'; + export default { name: 'SnmpAlerts', components: { @@ -107,17 +110,18 @@ export default { }, data() { return { + $t: useI18n().t, fields: [ { key: 'checkbox', }, { key: 'IP', - label: this.$t('pageSnmpAlerts.table.ipaddress'), + label: i18n.global.t('pageSnmpAlerts.table.ipaddress'), }, { key: 'Port', - label: this.$t('pageSnmpAlerts.table.port'), + label: i18n.global.t('pageSnmpAlerts.table.port'), }, { key: 'actions', @@ -128,7 +132,7 @@ export default { tableToolbarActions: [ { value: 'delete', - label: this.$t('global.action.delete'), + label: i18n.global.t('global.action.delete'), }, ], selectedRows: selectedRows, @@ -164,7 +168,7 @@ export default { { value: 'delete', enabled: true, - title: this.$tc('pageSnmpAlerts.deleteDestination'), + title: i18n.global.t('pageSnmpAlerts.deleteDestination'), }, ], ...subscriptions, @@ -202,13 +206,15 @@ export default { initModalDeleteDestination(destination) { this.$bvModal .msgBoxConfirm( - this.$t('pageSnmpAlerts.modal.deleteConfirmMessage', { + i18n.global.t('pageSnmpAlerts.modal.deleteConfirmMessage', { destination: destination.id, }), { - title: this.$tc('pageSnmpAlerts.modal.deleteSnmpDestinationTitle'), - okTitle: this.$tc('pageSnmpAlerts.deleteDestination'), - cancelTitle: this.$t('global.action.cancel'), + title: i18n.global.t( + 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle', + ), + okTitle: i18n.global.t('pageSnmpAlerts.deleteDestination'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) @@ -230,20 +236,20 @@ export default { if (action === 'delete') { this.$bvModal .msgBoxConfirm( - this.$tc( + i18n.global.t( 'pageSnmpAlerts.modal.batchDeleteConfirmMessage', this.selectedRows.length, ), { - title: this.$tc( + title: i18n.global.t( 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle', this.selectedRows.length, ), - okTitle: this.$tc( + okTitle: i18n.global.t( 'pageSnmpAlerts.deleteDestination', this.selectedRows.length, ), - cancelTitle: this.$t('global.action.cancel'), + cancelTitle: i18n.global.t('global.action.cancel'), autoFocusButton: 'ok', }, ) |