Vuelidate, I18n, and filter are upgraded to vue3
While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter global function for date and time format implemented
in the main.js file and those files which as called the filter
functions.
Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index bceab5d..a55b66c 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 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 @@
},
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 @@
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 @@
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 @@
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 03ab8f4..a74a1e4 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 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 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
certificateType: null,
country: null,
@@ -449,14 +451,14 @@
},
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 60170f1..3a8cd3f 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 { useVuelidate } from '@vuelidate/core';
import FormFile from '@/components/Global/FormFile';
+import { useI18n } from 'vue-i18n';
export default {
components: { FormFile },
@@ -98,6 +99,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
certificateType: null,
file: null,
@@ -140,8 +142,8 @@
},
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 @@
? 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 28d2b1c..eab2737 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 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 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
ldapAuthenticationEnabled: this.$store.getters['ldap/isServiceEnabled'],
secureLdapEnabled: false,
@@ -388,8 +390,8 @@
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 @@
})
.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 @@
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 9b50abd..d22aa6a 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 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
groupName: null,
groupPrivilege: null,
@@ -140,8 +142,8 @@
},
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 @@
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 eeebfb9..f73d927 100644
--- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -108,6 +108,8 @@
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 @@
mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
data() {
return {
+ $t: useI18n().t,
isBusy: true,
activeRoleGroup: null,
fields: [
@@ -132,12 +135,12 @@
{
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 @@
batchActions: [
{
value: 'delete',
- label: this.$t('global.action.delete'),
+ label: i18n.global.t('global.action.delete'),
},
],
selectedRows: selectedRows,
@@ -167,12 +170,12 @@
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 @@
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 @@
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 fb52175..6cba883 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -137,6 +137,8 @@
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 @@
},
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 636aafe..74dcf74 100644
--- a/src/views/SecurityAndAccess/Sessions/Sessions.vue
+++ b/src/views/SecurityAndAccess/Sessions/Sessions.vue
@@ -135,6 +135,8 @@
import SearchFilterMixin, {
searchFilter,
} from '@/components/Mixins/SearchFilterMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
components: {
@@ -159,6 +161,7 @@
},
data() {
return {
+ $t: useI18n().t,
isBusy: true,
fields: [
{
@@ -167,22 +170,22 @@
},
{
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 @@
batchActions: [
{
value: 'disconnect',
- label: this.$t('pageSessions.action.disconnect'),
+ label: i18n.global.t('pageSessions.action.disconnect'),
},
],
currentPage: currentPage,
@@ -220,7 +223,7 @@
actions: [
{
value: 'disconnect',
- title: this.$t('pageSessions.action.disconnect'),
+ title: i18n.global.t('pageSessions.action.disconnect'),
},
],
};
@@ -257,12 +260,15 @@
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 @@
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 8932eb5..91db825 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 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
lockoutThreshold: 0,
unlockMethod: 0,
@@ -181,15 +183,15 @@
},
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 @@
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 dca9736..44ab516 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 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 @@
},
data() {
return {
+ $t: useI18n().t,
originalUsername: '',
form: {
status: true,
@@ -329,28 +331,28 @@
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 @@
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 9fb8013..5d92856 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 @@
return {
items: [
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.configureComponentsManagedByThisService',
),
administrator: true,
@@ -43,7 +44,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.configureManagerResources',
),
administrator: true,
@@ -52,7 +53,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount',
),
administrator: true,
@@ -61,7 +62,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.configureUsersAndTheirAccounts',
),
administrator: true,
@@ -70,7 +71,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.logInToTheServiceAndReadResources',
),
administrator: true,
@@ -82,26 +83,26 @@
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 43f3a40..99c344b 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -133,6 +133,8 @@
} 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 @@
},
data() {
return {
+ $t: useI18n().t,
isBusy: true,
activeUser: null,
setting: {},
@@ -165,15 +168,15 @@
},
{
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 @@
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 @@
{
value: 'edit',
enabled: this.editEnable(user),
- title: this.$t('pageUserManagement.editUser'),
+ title: i18n.global.t('pageUserManagement.editUser'),
},
{
value: 'delete',
@@ -229,7 +232,7 @@
: true && user.UserName === 'root'
? false
: true,
- title: this.$tc('pageUserManagement.deleteUser'),
+ title: i18n.global.t('pageUserManagement.deleteUser'),
},
],
...user,
@@ -267,13 +270,13 @@
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 @@
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',
},
)