- Changed fields when creating subaccount

Support-pl · Aug 27, 2024 · 46be3fa · 46be3fa
1 parent 829115a
commit 46be3fa
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 53 deletions.
diff --git a/src/components/cloud/create/ioneProducts.vue b/src/components/cloud/create/ioneProducts.vue
@@ -16,7 +16,8 @@
       justify="space-between"
       align="middle"
     >
-      <a-col v-if="slider.key == 'cpu' && isHighCPUExist" style="display: flex; width: 70px">
+      <a-col v-if="slider.key === 'cpu' && isHighCPUExist" class="hcpu-block">
+        <span style="display: inline-block">{{ slider.prefix }}</span>
         <a-badge>
           <template #count>
             <span>
@@ -26,25 +27,18 @@
             </span>
           </template>
 
-          <span
-            style="margin-right: 5px; transition: 0.2s"
-            :style="{ borderBottom: `3px double ${(options.highCPU) ? 'var(--main)' : 'transparent'}` }"
-          >
-            {{ slider.prefix }}
-          </span>
-
-          <up-icon
-            style="font-size: 18px; cursor: pointer; transition: 0.2s"
-            :style="(options.highCPU) ? 'color: var(--main)' : null"
-            :rotate="90"
+          <a-switch
+            size="small"
+            :checked="options.highCPU"
             @click="setOptions('highCPU', !options.highCPU)"
           />
         </a-badge>
       </a-col>
 
       <a-col v-else>
-        <span style="display: inline-block; width: 70px">{{ slider.prefix }}</span>
+        <span style="display: inline-block; width: 75px">{{ slider.prefix }}</span>
       </a-col>
+
       <a-col
         v-if="resources[slider.key].length > 1"
         :sm="{ span: 18, order: 0 }"
@@ -93,9 +87,6 @@ import { defineAsyncComponent, watch, nextTick, ref, computed, inject } from 'vu
 import { useRoute } from 'vue-router'
 import { usePlansStore } from '@/stores/plans.js'
 
-const upIcon = defineAsyncComponent(
-  () => import('@ant-design/icons-vue/DoubleLeftOutlined')
-)
 const questionCircleIcon = defineAsyncComponent(
   () => import('@ant-design/icons-vue/QuestionCircleOutlined')
 )
@@ -264,6 +255,13 @@ function findProduct (group, cpu = options.cpu.size, ram = options.ram.size) {
   color: var(--gloomy_font);
 }
 
+.hcpu-block {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 75px;
+}
+
 @media (max-width: 576px) {
   .order__grid {
     grid-template-columns: 1fr 1fr;

diff --git a/src/components/settings/accountCreate.vue b/src/components/settings/accountCreate.vue
@@ -14,41 +14,49 @@
       <a-input v-model:value="form[key]" :disabled="isDisabled" />
     </a-form-item>
 
-    <a-form-item
-      :label="`${capitalize($t('clientinfo.countryname'))}:`"
-      name="countryname"
-    >
-      <a-select
-        v-model:value="form.countryname"
-        show-search
-        :filter-option="searchCountries"
-        :disabled="isDisabled"
-      >
-        <a-select-option v-for="country in countries" :key="country.code">
-          {{ $t(`country.${country.code}`) }}
-        </a-select-option>
-      </a-select>
+    <a-form-item :label="`${capitalize($t('clientinfo.phonenumber'))}:`">
+      <a-row :gutter="8">
+        <a-col :span="5">
+          <a-select
+            v-model:value="phonecode"
+            show-search
+            :filter-option="searchCountries"
+            :disabled="isDisabled"
+          >
+            <a-select-option v-for="country in countries" :key="country.dial_code">
+              {{ country.dial_code }}
+            </a-select-option>
+          </a-select>
+        </a-col>
+
+        <a-col :span="19">
+          <a-form-item no-style name="phonenumber">
+            <input
+              v-model="form.phonenumber"
+              v-phone.hidden="phonecode"
+              type="tel"
+              class="user__input"
+              :disabled="!phonecode || isDisabled"
+            >
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form-item>
 
     <a-form-item
-      :label="`${capitalize($t('clientinfo.phonenumber'))}:`"
-      name="phonenumber"
+      v-if="isPasswordVisible"
+      :label="`${capitalize($t('clientinfo.password'))}:`"
+      name="password"
     >
-      <input
-        v-model="form.phonenumber"
-        v-phone="phonecode"
-        type="tel"
-        class="user__input"
-        :disabled="!form.countryname || isDisabled"
-      >
+      <a-input v-model:value="form.password" />
     </a-form-item>
 
     <a-form-item
       v-if="isPasswordVisible"
-      :label="`${capitalize($t('clientinfo.password'))}:`"
-      name="password"
+      :label="`${capitalize($t('clientinfo.password again'))}:`"
+      name="passwordAgain"
     >
-      <a-input v-model:value="form.password" />
+      <a-input v-model:value="form.passwordAgain" />
     </a-form-item>
 
     <a-space style="margin-top: 10px">
@@ -103,14 +111,20 @@ const rules = computed(() => ({
   email: [reqRule],
   lastname: [reqRule],
   firstname: [reqRule],
-  countryname: [reqRule],
   phonenumber: [reqRule],
-  password: [reqRule]
+  password: [reqRule],
+  passwordAgain: [{
+    required: true,
+    trigger: 'change',
+    validator (_, value) {
+      if (value !== form.value.password) {
+        return Promise.reject(i18n.t('Password mismatch'))
+      }
+      return Promise.resolve()
+    }
+  }]
 }))
-
-const phonecode = computed(() =>
-  countries.find(({ code }) => code === form.value.countryname)?.dial_code
-)
+const phonecode = ref('')
 
 function searchCountries (input, option) {
   const country = option.children(option)[0].children.toLowerCase()
@@ -145,8 +159,7 @@ async function createAccount () {
       currency: authStore.userdata.currency,
       data: {
         email: form.value.email,
-        country: form.value.countryname,
-        phone: form.value.phonenumber
+        phone: `${phonecode.value} ${form.value.phonenumber}`
       }
     })
 
@@ -169,7 +182,6 @@ onMounted(() => {
       email: props.account.data.email,
       lastname: props.account.title.split(' ').at(0),
       firstname: props.account.title.split(' ').at(-1),
-      countryname: props.account.data.country,
       phonenumber: props.account.data.phone
     }
   }

diff --git a/src/main.js b/src/main.js
@@ -44,7 +44,7 @@ app.config.globalProperties.dateFormat = (value) => {
 }
 
 app.directive('phone', {
-  updated (el, { value: code }) {
+  updated (el, { value: code, modifiers }) {
     const start = el.selectionStart
     const { length } = el.value
 
@@ -62,7 +62,11 @@ app.directive('phone', {
     else if (x[4] === '') el.value = `${x[1]} ${x[2]}-${x[3]}`
     else el.value = `${x[1]} ${x[2]}-${x[3]}-${x[4]}`
 
-    if (code) el.value = `${code} ${el.value}`
+    if (code && !modifiers.hidden) {
+      el.value = `${code} ${el.value}`
+    } else {
+      el.value = el.value.replace(`${code} `, '')
+    }
     const currentStart = el.selectionStart
 
     el.selectionStart = currentStart - length + start