Network page validation and i18n issue fix
In network page invalid if condition changed, added validations and i18n
function changed based on the vue 3 support.
Change-Id: If5b9c00f6da722984f1c568cfbcb6b34537c3df1
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js
index 9dc006e..d4174e3 100644
--- a/src/store/modules/Settings/NetworkStore.js
+++ b/src/store/modules/Settings/NetworkStore.js
@@ -145,15 +145,15 @@
)
.then(dispatch('getEthernetData'))
.then(() => {
- return i18n.t('pageNetwork.toast.successSaveNetworkSettings', {
- setting: i18n.t('pageNetwork.dhcp6'),
+ return i18n.global.t('pageNetwork.toast.successSaveNetworkSettings', {
+ setting: i18n.global.t('pageNetwork.dhcp6'),
});
})
.catch((error) => {
console.log(error);
throw new Error(
- i18n.t('pageNetwork.toast.errorSaveNetworkSettings', {
- setting: i18n.t('pageNetwork.dhcp6'),
+ i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
+ setting: i18n.global.t('pageNetwork.dhcp6'),
}),
);
});
@@ -335,15 +335,15 @@
)
.then(dispatch('getEthernetData'))
.then(() => {
- return i18n.t('pageNetwork.toast.successSaveNetworkSettings', {
- setting: i18n.t('pageNetwork.ipv6'),
+ return i18n.global.t('pageNetwork.toast.successSaveNetworkSettings', {
+ setting: i18n.global.t('pageNetwork.ipv6'),
});
})
.catch((error) => {
console.log(error);
throw new Error(
- i18n.t('pageNetwork.toast.errorSaveNetworkSettings', {
- setting: i18n.t('pageNetwork.ipv6'),
+ i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
+ setting: i18n.global.t('pageNetwork.ipv6'),
}),
);
});
@@ -377,15 +377,15 @@
)
.then(dispatch('getEthernetData'))
.then(() => {
- return i18n.t('pageNetwork.toast.successSaveNetworkSettings', {
- setting: i18n.t('pageNetwork.ipv6'),
+ return i18n.global.t('pageNetwork.toast.successSaveNetworkSettings', {
+ setting: i18n.global.t('pageNetwork.ipv6'),
});
})
.catch((error) => {
console.log(error);
throw new Error(
- i18n.t('pageNetwork.toast.errorSaveNetworkSettings', {
- setting: i18n.t('pageNetwork.ipv6'),
+ i18n.global.t('pageNetwork.toast.errorSaveNetworkSettings', {
+ setting: i18n.global.t('pageNetwork.ipv6'),
}),
);
});
diff --git a/src/views/Settings/Network/ModalDefaultGateway.vue b/src/views/Settings/Network/ModalDefaultGateway.vue
index 968b559..d54ddc2 100644
--- a/src/views/Settings/Network/ModalDefaultGateway.vue
+++ b/src/views/Settings/Network/ModalDefaultGateway.vue
@@ -17,14 +17,14 @@
v-model.trim="form.defaultGateway"
data-test-id="network-input-gateway"
type="text"
- :state="getValidationState($v.form.defaultGateway)"
- @change="$v.form.defaultGateway.$touch()"
+ :state="getValidationState(v$.form.defaultGateway)"
+ @change="v$.form.defaultGateway.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <div v-if="!$v.form.defaultGateway.required">
+ <div v-if="v$.form.defaultGateway.required.$invalid">
{{ $t('global.form.fieldRequired') }}
</div>
- <div v-if="!$v.form.defaultGateway.validateGateway">
+ <div v-if="v$.form.defaultGateway.validateGateway.$invalid">
{{ $t('global.form.invalidFormat') }}
</div>
</b-form-invalid-feedback>
@@ -50,7 +50,10 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
+import { helpers } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
const validateGateway = helpers.regex(
'validateGateway',
@@ -65,8 +68,14 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
+ $t: useI18n().t,
form: {
defaultGateway: '',
},
@@ -89,8 +98,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok', { IPv6DefaultGateway: this.form.defaultGateway });
this.closeModal();
},
@@ -101,7 +110,7 @@
},
resetForm() {
this.form.defaultGateway = this.defaultGateway;
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 0e1bd88..179d831 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -20,10 +20,10 @@
@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.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!v$.form.staticDns.ipAddress">
+ <template v-if="v$.form.staticDns.ipAddress.$invalid">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index b2155b7..5eeffb3 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -20,10 +20,10 @@
@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.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!v$.form.hostname.validateHostname">
+ <template v-if="v$.form.hostname.validateHostname.$invalid">
{{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }}
</template>
</b-form-invalid-feedback>
@@ -50,8 +50,8 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
-
-import { required, helpers } from '@vuelidate/validators';
+import { helpers } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
import { useI18n } from 'vue-i18n';
const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index a3b5482..7b4c62e 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -20,10 +20,10 @@
@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.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!v$.form.ipAddress.ipAddress">
+ <template v-if="v$.form.ipAddress.ipAddress.$invalid">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -42,10 +42,10 @@
@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.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!v$.form.gateway.ipAddress">
+ <template v-if="v$.form.gateway.ipAddress.$invalid">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -66,10 +66,10 @@
@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.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!v$.form.subnetMask.ipAddress">
+ <template v-if="v$.form.subnetMask.ipAddress.$invalid">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
diff --git a/src/views/Settings/Network/ModalIpv6.vue b/src/views/Settings/Network/ModalIpv6.vue
index 5b2e1c2..78f803a 100644
--- a/src/views/Settings/Network/ModalIpv6.vue
+++ b/src/views/Settings/Network/ModalIpv6.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.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.ipAddress.validateIpv6">
+ <template v-if="v$.form.ipAddress.validateIpv6.$invalid">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -38,14 +38,16 @@
id="prefixLength"
v-model="form.prefixLength"
type="text"
- :state="getValidationState($v.form.prefixLength)"
- @input="$v.form.prefixLength.$touch()"
+ :state="getValidationState(v$.form.prefixLength)"
+ @input="v$.form.prefixLength.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.prefixLength.required">
+ <template v-if="v$.form.prefixLength.required.$invalid">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.prefixLength.validatePrefixLength">
+ <template
+ v-if="v$.form.prefixLength.validatePrefixLength.$invalid"
+ >
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -66,7 +68,10 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
+import { helpers } from 'vuelidate/lib/validators';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
const validateIpv6 = helpers.regex(
'validateIpv6',
@@ -80,8 +85,14 @@
export default {
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
+ $t: useI18n().t,
form: {
ipAddress: '',
prefixLength: '',
@@ -104,8 +115,8 @@
},
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,
PrefixLength: parseInt(this.form.prefixLength),
@@ -120,7 +131,7 @@
resetForm() {
this.form.ipAddress = null;
this.form.prefixLength = 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 f3fcc02..137a359 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -21,10 +21,10 @@
@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.$invalid">
{{ $t('global.form.fieldRequired') }}
</div>
- <div v-if="!v$.form.macAddress.macAddress">
+ <div v-if="v$.form.macAddress.macAddress.$invalid">
{{ $t('global.form.invalidFormat') }}
</div>
</b-form-invalid-feedback>
@@ -51,8 +51,8 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
-
-import { macAddress, required } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
+import { macAddress } from 'vuelidate/lib/validators';
import { useI18n } from 'vue-i18n';
export default {
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index 0de1dca..b0e5d80 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -47,6 +47,7 @@
import TableRowAction from '@/components/Global/TableRowAction';
import { mapState } from 'vuex';
import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
name: 'DNSTable',
@@ -83,7 +84,7 @@
dnsTableFields: [
{
key: 'address',
- label: 'pageNetwork.table.ipAddress',
+ label: i18n.global.t('pageNetwork.table.ipAddress'),
},
{ key: 'actions', label: '', tdClass: 'text-right' },
],
diff --git a/src/views/Settings/Network/TableIpv6.vue b/src/views/Settings/Network/TableIpv6.vue
index 5a16e9d..bdebc27 100644
--- a/src/views/Settings/Network/TableIpv6.vue
+++ b/src/views/Settings/Network/TableIpv6.vue
@@ -92,6 +92,8 @@
import TableRowAction from '@/components/Global/TableRowAction';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import { mapState } from 'vuex';
+import i18n from '@/i18n';
+import { useI18n } from 'vue-i18n';
export default {
name: 'Ipv6Table',
@@ -111,31 +113,32 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
ipv6TableItems: [],
},
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'),
},
],
ipv6TableFields: [
{
key: 'Address',
- label: this.$t('pageNetwork.table.ipAddress'),
+ label: i18n.global.t('pageNetwork.table.ipAddress'),
},
{
key: 'PrefixLength',
- label: this.$t('pageNetwork.table.prefixLength'),
+ label: i18n.global.t('pageNetwork.table.prefixLength'),
},
{
key: 'AddressOrigin',
- label: this.$t('pageNetwork.table.addressOrigin'),
+ label: i18n.global.t('pageNetwork.table.addressOrigin'),
},
{ key: 'actions', label: '', tdClass: 'text-right' },
],
@@ -212,7 +215,7 @@
actions: [
{
value: 'delete',
- title: this.$t('pageNetwork.table.deleteIpv6'),
+ title: i18n.global.t('pageNetwork.table.deleteIpv6'),
},
],
};
@@ -254,19 +257,19 @@
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'),
},
)
.then((dhcpEnableConfirmed) => {