From a9373ebe5f4ac7c16a1f541090ffa3f083c3c59e Mon Sep 17 00:00:00 2001
From: 639852 <sasha.bobyliev@mail.ru>
Date: Thu, 22 Aug 2024 10:04:20 +0400
Subject: [PATCH] - Added subaccount creation

---
 .../cloud/modules/ovh vps/panels/plan.vue     |  19 +-
 src/components/settings/accountCreate.vue     | 206 ++++++++++++++++++
 src/functions.js                              |   1 +
 src/i18n/locales/en.json                      |   1 +
 src/i18n/locales/ru.json                      |   1 +
 src/routes/cloud/cloudPage.vue                |   4 +
 src/routes/settings/settings.vue              |  80 ++++++-
 src/stores/namespaces.js                      |  44 ++++
 8 files changed, 350 insertions(+), 6 deletions(-)
 create mode 100644 src/components/settings/accountCreate.vue

diff --git a/src/components/cloud/modules/ovh vps/panels/plan.vue b/src/components/cloud/modules/ovh vps/panels/plan.vue
index e3f07c26..53aa6dc4 100644
--- a/src/components/cloud/modules/ovh vps/panels/plan.vue	
+++ b/src/components/cloud/modules/ovh vps/panels/plan.vue	
@@ -40,6 +40,18 @@
       <a-col>
         <span style="display: inline-block; width: 70px">CPU:</span>
       </a-col>
+      <a-col v-if="resources.cpu.length > 1" :sm="{ span: 18, order: 0 }" :xs="{ span: 24, order: 1 }">
+        <a-slider
+          style="margin-top: 10px"
+          :marks="{ ...resources.cpu }"
+          :tip-formatter="null"
+          :max="resources.cpu.length - 1"
+          :min="0"
+          :value="resources.cpu.indexOf(options.cpu.size)"
+          @change="(i) => setOptions('cpu.size', resources.cpu[i])"
+          @after-change="setResources(productKey)"
+        />
+      </a-col>
       <a-col class="changing__field" style="text-align: right">
         <loading-icon v-if="options.cpu.size === 'loading'" />
         <template v-else>
@@ -221,19 +233,22 @@ watch(products, async (value) => {
 })
 
 const resources = computed(() => {
+  const cpu = new Set()
   const ram = new Set()
   const disk = new Set()
 
   const filteredPlans = props.products.filter(({ group }) => group === product.value)
 
   filteredPlans.forEach(({ resources }) => {
+    cpu.add(resources.cpu)
     ram.add(resources.ram / 1024)
     disk.add(resources.disk / 1024)
   })
 
   return {
-    ram: Array.from(ram).sort((a, b) => a - b),
-    disk: Array.from(disk).sort((a, b) => a - b)
+    cpu: Array.from(cpu).toSorted((a, b) => a - b),
+    ram: Array.from(ram).toSorted((a, b) => a - b),
+    disk: Array.from(disk).toSorted((a, b) => a - b)
   }
 })
 
diff --git a/src/components/settings/accountCreate.vue b/src/components/settings/accountCreate.vue
new file mode 100644
index 00000000..c9019203
--- /dev/null
+++ b/src/components/settings/accountCreate.vue
@@ -0,0 +1,206 @@
+<template>
+  <a-form
+    ref="formRef"
+    layout="vertical"
+    :model="form"
+    :rules="rules"
+  >
+    <a-form-item
+      v-for="key of mainKeys"
+      :key="key"
+      :label="`${capitalize($t(`clientinfo.${key}`))}:`"
+      :name="key"
+    >
+      <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>
+
+    <a-form-item
+      :label="`${capitalize($t('clientinfo.phonenumber'))}:`"
+      name="phonenumber"
+    >
+      <input
+        v-model="form.phonenumber"
+        v-phone="phonecode"
+        type="tel"
+        class="user__input"
+        :disabled="!form.countryname || isDisabled"
+      >
+    </a-form-item>
+
+    <a-form-item
+      v-if="isPasswordVisible"
+      :label="`${capitalize($t('clientinfo.password'))}:`"
+      name="password"
+    >
+      <a-input v-model:value="form.password" />
+    </a-form-item>
+
+    <a-space style="margin-top: 10px">
+      <a-button
+        v-if="isPasswordVisible"
+        type="primary"
+        :loading="isCreateLoading"
+        @click="createAccount"
+      >
+        {{ $t('Submit') }}
+      </a-button>
+
+      <a-button danger @click="emits('cancel')">
+        {{ $t('Cancel') }}
+      </a-button>
+    </a-space>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth.js'
+import { useNamespasesStore } from '@/stores/namespaces.js'
+import { useNotification } from '@/hooks/utils'
+import countries from '@/assets/countries.json'
+
+const props = defineProps({
+  account: { type: Object, default: null }
+})
+const emits = defineEmits(['cancel'])
+
+const i18n = useI18n()
+const authStore = useAuthStore()
+const namespacesStore = useNamespasesStore()
+const { openNotification } = useNotification()
+
+const mainKeys = ['firstname', 'lastname', 'email']
+const formRef = ref(null)
+const form = ref({})
+
+const isDisabled = computed(() => props.account)
+const isPasswordVisible = computed(() => !props.account)
+const isCreateLoading = ref(false)
+
+const reqRule = reactive({
+  required: true,
+  message: 'Field is required',
+  trigger: 'change'
+})
+const rules = computed(() => ({
+  email: [reqRule],
+  lastname: [reqRule],
+  firstname: [reqRule],
+  countryname: [reqRule],
+  phonenumber: [reqRule],
+  password: [reqRule]
+}))
+
+const phonecode = computed(() =>
+  countries.find(({ code }) => code === form.value.countryname)?.dial_code
+)
+
+function searchCountries (input, option) {
+  const country = option.children(option)[0].children.toLowerCase()
+
+  return country.includes(input.toLowerCase())
+}
+
+async function createAccount () {
+  try {
+    await formRef.value.validate()
+  } catch {
+    openNotification('error', {
+      message: i18n.t('ssl_product.fields is required')
+    })
+    return
+  }
+
+  isCreateLoading.value = true
+  try {
+    const namespace = namespacesStore.namespaces.find(({ access }) =>
+      access.namespace === authStore.userdata.uuid
+    )
+
+    await namespacesStore.createAccount({
+      title: `${form.value.firstname} ${form.value.lastname}`,
+      auth: {
+        type: 'standard',
+        data: [form.value.email, form.value.password]
+      },
+      namespace: namespace.uuid,
+      currency: authStore.userdata.currency,
+      data: {
+        email: form.value.email,
+        country: form.value.countryname,
+        phone: form.value.phonenumber
+      }
+    })
+
+    openNotification('success', { message: `${i18n.t('Done')}!` })
+    emits('cancel')
+  } catch (error) {
+    openNotification('error', {
+      message: error.response?.data?.message ?? error.message ?? error
+    })
+  } finally {
+    isCreateLoading.value = false
+  }
+}
+
+onMounted(() => {
+  reqRule.message = `${i18n.t('ssl_product.field is required')}`
+
+  if (props.account) {
+    form.value = {
+      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
+    }
+  }
+})
+
+const theme = inject('theme')
+const inputColors = computed(() => (theme.value)
+  ? ({ background: 'var(--bright_bg)', border: 'var(--bright_font)' })
+  : ({ background: 'inherit', border: 'var(--border_color)' })
+)
+
+if (namespacesStore.namespaces.length < 1) {
+  namespacesStore.fetch()
+}
+</script>
+
+<style scoped>
+.user__input {
+  padding: 4px 11px;
+  font-size: 14px;
+  width: 100%;
+  border: 1px solid v-bind('inputColors.border');
+  border-radius: 6px;
+  transition: all 0.2s;
+  background: v-bind('inputColors.background');
+}
+
+.user__input:disabled {
+  color: v-bind('inputColors.background');
+  background-color: v-bind('inputColors.border');
+  border-color: v-bind('inputColors.border');
+  box-shadow: none;
+  cursor: not-allowed;
+}
+</style>
diff --git a/src/functions.js b/src/functions.js
index 4a62d213..fbcde2eb 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -177,6 +177,7 @@ export function transformInstances (instances) {
     if (inst.state?.meta.state === 5) status = 'SUSPENDED'
     if (inst.data.suspended_manually) status = 'SUSPENDED'
     if (inst.state?.meta.state === 'BUILD') status = 'BUILD'
+    if (!inst.state && !inst.data.is_monitored) status = 'INIT'
 
     const result = {
       ...inst,
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index e9f61a06..1eb6e296 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -370,6 +370,7 @@
     "share": "Share",
     "link": "link",
     "account": "account",
+    "subaccounts": "subaccounts",
     "with": "with",
     "Servers": "Virtual Servers",
     "Virtual": "Web Hosting",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 2c4d1051..377e2248 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -370,6 +370,7 @@
     "share": "поделиться",
     "link": "привязать",
     "account": "аккаунт",
+    "subaccounts": "субаккаунты",
     "with": "с",
     "Servers": "Сервера",
     "Virtual": "Хостинг",
diff --git a/src/routes/cloud/cloudPage.vue b/src/routes/cloud/cloudPage.vue
index c9bbe343..cc7a7eba 100644
--- a/src/routes/cloud/cloudPage.vue
+++ b/src/routes/cloud/cloudPage.vue
@@ -395,6 +395,10 @@ export default {
       if (this.VM.server_on) {
         return this.VM.vm_info?.STATE?.replaceAll('_', ' ') ?? 'UNKNOWN'
       }
+
+      if (!this.VM.state && !this.VM.data.is_monitored) {
+        return 'INIT'
+      }
       if (!this.VM.state) return 'UNKNOWN'
 
       const state = this.VM.state.meta?.lcm_state_str ?? this.VM.state.state
diff --git a/src/routes/settings/settings.vue b/src/routes/settings/settings.vue
index 26513bb1..66897350 100644
--- a/src/routes/settings/settings.vue
+++ b/src/routes/settings/settings.vue
@@ -152,6 +152,47 @@
           </div>
         </a-spin>
 
+        <div class="settings__item" @click="showModal('accounts')">
+          <div class="settings__logo">
+            <accounts-icon />
+          </div>
+          <div class="settings__title">
+            {{ capitalize($t('subaccounts')) }}
+          </div>
+
+          <a-modal
+            :title="capitalize($t('subaccounts'))"
+            :open="modal.accounts"
+            :footer="false"
+            @cancel="closeModal('accounts')"
+          >
+            <account-create
+              v-if="isAccountCreateVisible"
+              :account="currentAccount"
+              @cancel="currentAccount = null; isAccountCreateVisible = false"
+            />
+            <template v-else>
+              <div
+                v-for="account of subaccounts"
+                :key="account.uuid"
+                class="singleLang"
+                @click="currentAccount = account; isAccountCreateVisible = true"
+              >
+                <span class="singleLang__title">
+                  {{ account.title }}
+                </span>
+              </div>
+
+              <a-button type="primary" style="margin-top: 10px" @click="isAccountCreateVisible = true">
+                {{ $t('Add') }}
+                <template #icon>
+                  <account-add-icon />
+                </template>
+              </a-button>
+            </template>
+          </a-modal>
+        </div>
+
         <div class="settings__item" @click="showModal('QR')">
           <div class="settings__logo">
             <qrcode-icon />
@@ -208,12 +249,15 @@
 import { defineAsyncComponent } from 'vue'
 import { mapStores } from 'pinia'
 import config from '@/appconfig.js'
+
 import { useAuthStore } from '@/stores/auth.js'
+import { useNamespasesStore } from '@/stores/namespaces.js'
 
 import notification from '@/mixins/notification.js'
 import balance from '@/components/ui/balance.vue'
 import addFunds from '@/components/ui/addFunds.vue'
 import addSSH from '@/components/ui/addSSH.vue'
+import accountCreate from '@/components/settings/accountCreate.vue'
 
 const rightIcon = defineAsyncComponent(
   () => import('@ant-design/icons-vue/RightOutlined')
@@ -245,12 +289,21 @@ const qrcodeIcon = defineAsyncComponent(
   () => import('@ant-design/icons-vue/QrcodeOutlined')
 )
 
+const accountsIcon = defineAsyncComponent(
+  () => import('@ant-design/icons-vue/TeamOutlined')
+)
+const accountAddIcon = defineAsyncComponent(
+  () => import('@ant-design/icons-vue/UsergroupAddOutlined')
+)
+
 export default {
   name: 'SettingsView',
   components: {
     balance,
     addFunds,
     addSSH,
+    accountCreate,
+
     rightIcon,
     userIcon,
     globalIcon,
@@ -259,7 +312,9 @@ export default {
     closeIcon,
     copyIcon,
     loginIcon,
-    qrcodeIcon
+    qrcodeIcon,
+    accountsIcon,
+    accountAddIcon
   },
   mixins: [notification],
   data () {
@@ -267,17 +322,20 @@ export default {
       isAuthLoading: false,
       confirmLoading: false,
       user_btn: false,
+      isAccountCreateVisible: false,
+      currentAccount: null,
       modal: {
         login: false,
         language: false,
         addFunds: false,
+        accounts: false,
         SSH: false,
         QR: false
       }
     }
   },
   computed: {
-    ...mapStores(useAuthStore),
+    ...mapStores(useAuthStore, useNamespasesStore),
     isVisible () {
       if (this.isAuthLoading) return true
       return !localStorage.getItem('oauth') && this.authStore.loginButtons.length > 0
@@ -286,6 +344,11 @@ export default {
       if (!localStorage.getItem('oauth')) return true
       return !this.authStore.billingUser.paid_stop
     },
+    subaccounts () {
+      return this.namespacesStore.accounts.filter(({ uuid }) =>
+        uuid !== this.authStore.userdata.uuid
+      )
+    },
     langs () {
       return config.languages
     },
@@ -300,10 +363,19 @@ export default {
     }
   },
   async created () {
-    if (this.authStore.loginButtons.length > 0) return
+    try {
+      await this.namespacesStore.fetchAccounts()
+    } catch (error) {
+      this.openNotificationWithIcon('error', {
+        message: error.response?.data.message ?? error.message ?? error
+      })
+    }
+
     try {
       this.isAuthLoading = true
-      await this.authStore.fetchAuth()
+      if (this.authStore.loginButtons.length < 1) {
+        await this.authStore.fetchAuth()
+      }
     } finally {
       this.isAuthLoading = false
     }
diff --git a/src/stores/namespaces.js b/src/stores/namespaces.js
index e654af7e..c31e0abf 100644
--- a/src/stores/namespaces.js
+++ b/src/stores/namespaces.js
@@ -5,11 +5,14 @@ import api from '@/api.js'
 
 export const useNamespasesStore = defineStore('namespaces', () => {
   const authStore = useAuthStore()
+
   const namespaces = ref([])
+  const accounts = ref([])
   const isLoading = ref(false)
 
   return {
     namespaces,
+    accounts,
     isLoading,
 
     async fetch () {
@@ -27,6 +30,47 @@ export const useNamespasesStore = defineStore('namespaces', () => {
       } finally {
         isLoading.value = false
       }
+    },
+
+    async fetchAccounts () {
+      try {
+        isLoading.value = true
+        const response = await api.post('/accounts', {
+          filters: {}
+        })
+
+        accounts.value = response.pool
+        return response
+      } catch (error) {
+        console.error(error)
+        throw error
+      } finally {
+        isLoading.value = false
+      }
+    },
+
+    async createAccount (account) {
+      try {
+        const response = await api.accounts.create(account)
+
+        this.fetchAccounts()
+        return response
+      } catch (error) {
+        console.error(error)
+        throw error
+      }
+    },
+
+    async updateAccount (account) {
+      try {
+        const response = await api.accounts.update(account.uuid, account)
+
+        this.fetchAccounts()
+        return response
+      } catch (error) {
+        console.error(error)
+        throw error
+      }
     }
   }
 })