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>

9 files changed, 87 insertions, 63 deletions

diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js
index 9dc006e5..d4174e3d 100644
--- a/src/store/modules/Settings/NetworkStore.js
+++ b/src/store/modules/Settings/NetworkStore.js
@@ -145,15 +145,15 @@ const NetworkStore = {
         )
         .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 @@ const NetworkStore = {
         )
         .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 @@ const NetworkStore = {
         )
         .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 968b5597..d54ddc2f 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 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         defaultGateway: '',
       },
@@ -89,8 +98,8 @@ export default {
   },
   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 @@ export default {
     },
     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 0e1bd881..179d831f 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 b2155b7a..5eeffb3a 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 a3b54826..7b4c62e9 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 5b2e1c20..78f803af 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 @@ const validatePrefixLength = helpers.regex(
 
 export default {
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         ipAddress: '',
         prefixLength: '',
@@ -104,8 +115,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,
         PrefixLength: parseInt(this.form.prefixLength),
@@ -120,7 +131,7 @@ export default {
     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 f3fcc02e..137a3591 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 0de1dcab..b0e5d807 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -47,6 +47,7 @@ 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: 'DNSTable',
@@ -83,7 +84,7 @@ export default {
       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 5a16e9dc..bdebc277 100644
--- a/src/views/Settings/Network/TableIpv6.vue
+++ b/src/views/Settings/Network/TableIpv6.vue
@@ -92,6 +92,8 @@ import PageSection from '@/components/Global/PageSection';
 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 @@ export default {
   },
   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 @@ export default {
           actions: [
             {
               value: 'delete',
-              title: this.$t('pageNetwork.table.deleteIpv6'),
+              title: i18n.global.t('pageNetwork.table.deleteIpv6'),
             },
           ],
         };
@@ -254,19 +257,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'),
           },
         )
         .then((dhcpEnableConfirmed) => {