refactor(multi): updated to latest version

javascript-version/views/pages/account-settings/AccountSettingsAccount.vue

@@ -168,6 +168,7 @@ const currencies = [
                 cols="12"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.firstName"
                   placeholder="John"
                   label="First Name"
@@ -180,6 +181,7 @@ const currencies = [
                 cols="12"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.lastName"
                   placeholder="Doe"
                   label="Last Name"
@@ -192,6 +194,7 @@ const currencies = [
                 md="6"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.email"
                   label="E-mail"
                   placeholder="johndoe@gmail.com"
@@ -205,6 +208,7 @@ const currencies = [
                 md="6"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.org"
                   label="Organization"
                   placeholder="ThemeSelection"
@@ -217,6 +221,7 @@ const currencies = [
                 md="6"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.phone"
                   label="Phone Number"
                   placeholder="+1 (917) 543-9876"
@@ -229,6 +234,7 @@ const currencies = [
                 md="6"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.address"
                   label="Address"
                   placeholder="123 Main St, New York, NY 10001"
@@ -241,6 +247,7 @@ const currencies = [
                 md="6"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.state"
                   label="State"
                   placeholder="New York"
@@ -253,6 +260,7 @@ const currencies = [
                 md="6"
               >
                 <VTextField
+                  :id="useId()"
                   v-model="accountDataLocal.zip"
                   label="Zip Code"
                   placeholder="10001"
@@ -265,6 +273,7 @@ const currencies = [
                 md="6"
               >
                 <VSelect
+                  :id="useId()"
                   v-model="accountDataLocal.country"
                   label="Country"
                   :items="['USA', 'Canada', 'UK', 'India', 'Australia']"
@@ -278,6 +287,7 @@ const currencies = [
                 md="6"
               >
                 <VSelect
+                  :id="useId()"
                   v-model="accountDataLocal.language"
                   label="Language"
                   placeholder="Select Language"
@@ -291,6 +301,7 @@ const currencies = [
                 md="6"
               >
                 <VSelect
+                  :id="useId()"
                   v-model="accountDataLocal.timezone"
                   label="Timezone"
                   placeholder="Select Timezone"
@@ -305,6 +316,7 @@ const currencies = [
                 md="6"
               >
                 <VSelect
+                  :id="useId()"
                   v-model="accountDataLocal.currency"
                   label="Currency"
                   placeholder="Select Currency"
@@ -341,6 +353,7 @@ const currencies = [
         <VCardText>
           <div>
             <VCheckbox
+              :id="useId()"
               v-model="isAccountDeactivated"
               label="I confirm my account deactivation"
             />

javascript-version/views/pages/account-settings/AccountSettingsNotification.vue

@@ -62,13 +62,22 @@ const selectedNotification = ref('Only when I\'m online')
             {{ device.type }}
           </td>
           <td>
-            <VCheckbox v-model="device.email" />
+            <VCheckbox
+              :id="useId()"
+              v-model="device.email"
+            />
           </td>
           <td>
-            <VCheckbox v-model="device.browser" />
+            <VCheckbox
+              :id="useId()"
+              v-model="device.browser"
+            />
           </td>
           <td>
-            <VCheckbox v-model="device.app" />
+            <VCheckbox
+              :id="useId()"
+              v-model="device.app"
+            />
           </td>
         </tr>
       </tbody>
@@ -87,6 +96,7 @@ const selectedNotification = ref('Only when I\'m online')
             sm="6"
           >
             <VSelect
+              :id="useId()"
               v-model="selectedNotification"
               mandatory
               :items="['Only when I\'m online', 'Anytime']"

javascript-version/views/pages/account-settings/AccountSettingsSecurity.vue

@@ -131,6 +131,7 @@ const recentDevices = [
               >
                 <!-- 👉 current password -->
                 <VTextField
+                  :id="useId()"
                   v-model="currentPassword"
                   :type="isCurrentPasswordVisible ? 'text' : 'password'"
                   :append-inner-icon="isCurrentPasswordVisible ? 'bx-hide' : 'bx-show'"
@@ -149,6 +150,7 @@ const recentDevices = [
               >
                 <!-- 👉 new password -->
                 <VTextField
+                  :id="useId()"
                   v-model="newPassword"
                   :type="isNewPasswordVisible ? 'text' : 'password'"
                   :append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
@@ -165,6 +167,7 @@ const recentDevices = [
               >
                 <!-- 👉 confirm password -->
                 <VTextField
+                  :id="useId()"
                   v-model="confirmPassword"
                   :type="isConfirmPasswordVisible ? 'text' : 'password'"
                   :append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
@@ -257,6 +260,7 @@ const recentDevices = [
                   <!-- 👉 Choose API Key -->
                   <VCol cols="12">
                     <VSelect
+                      :id="useId()"
                       label="Choose the API key type you want to create"
                       placeholder="Select API key type"
                       :items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']"
@@ -266,6 +270,7 @@ const recentDevices = [
                   <!-- 👉 Name the API Key -->
                   <VCol cols="12">
                     <VTextField
+                      :id="useId()"
                       label="Name the API key"
                       placeholder="Name the API key"
                     />