bfg-common 1.5.708 → 1.5.710

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/{ChangeLanguageNew.vue → New.vue}

@@ -19,7 +19,7 @@
             :test-id="item.testId"
             :label="item.label"
             :value="item.value"
-            size="sm"
+            size="md"
           />
 
           <span v-if="item.selectLang" class="select-language">
@@ -56,7 +56,6 @@ const emits = defineEmits<{
   (event: 'update-is-browser', value: string): void
 }>()
 
-// const config = useRuntimeConfig()
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const selectedLanguageLocal = computed<UI_I_Dropdown>({

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/{ChangeLanguageOld.vue → Old.vue}

@@ -53,8 +53,6 @@ const emits = defineEmits<{
   (event: 'update-is-browser', value: string): void
 }>()
 
-// const config = useRuntimeConfig()
-
 const selectedLanguageLocal = computed<UI_T_LangValue>({
   get() {
     return props.selectedLanguage

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/DefaultConsole.vue

@@ -1,11 +1,6 @@
 <template>
-  <common-layout-the-header-user-menu-modals-preferences-default-console-new
-    v-if="props.newView"
-    v-model="consoleValue"
-    :console-options="consoleOptions"
-  />
-  <common-layout-the-header-user-menu-modals-preferences-default-console-old
-    v-else
+  <component
+    :is="currentComponent"
     v-model="consoleValue"
     :console-options="consoleOptions"
   />
@@ -25,6 +20,12 @@ const emits = defineEmits<{
   (event: 'update-remote-console', value: string): void
 }>()
 
+const currentComponent = computed(() =>
+  props.newView
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const consoleOptions = readonly<UI_I_RadioItemConsole[]>(

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/{DefaultConsoleNew.vue → New.vue}

@@ -25,7 +25,7 @@
             :label="item.label"
             :value="item.value"
             :disabled="item.disabled"
-            size="sm"
+            size="md"
           />
         </div>
       </div>
@@ -37,13 +37,13 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItemConsole } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces'
 
+const consoleValue = defineModel<string>()
+
 const props = defineProps<{
   consoleOptions: UI_I_RadioItemConsole[]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-
-const consoleValue = defineModel<string>()
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/{DefaultConsoleOld.vue → Old.vue}

@@ -30,13 +30,13 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItemConsole } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces'
 
+const consoleValue = defineModel<string>()
+
 const props = defineProps<{
   consoleOptions: UI_I_RadioItemConsole[]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-
-const consoleValue = defineModel<string>()
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/preferences/inventory/Inventory.vue

@@ -1,12 +1,5 @@
 <template>
-  <common-layout-the-header-user-menu-modals-preferences-inventory-new
-    v-if="props.newView"
-    v-model="vmInHostsClusters"
-  />
-  <common-layout-the-header-user-menu-modals-preferences-inventory-old
-    v-else
-    v-model="vmInHostsClusters"
-  />
+  <component :is="currentComponent" v-model="vmInHostsClusters" />
 </template>
 
 <script setup lang="ts">
@@ -19,6 +12,12 @@ const emits = defineEmits<{
   (event: 'update-vm-clusters', value: boolean): void
 }>()
 
+const currentComponent = computed(() =>
+  props.newView
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const vmInHostsClusters = computed<boolean>({
   get() {
     return props.vmCluster

package/components/common/layout/theHeader/userMenu/modals/preferences/inventory/{InventoryNew.vue → New.vue}

@@ -20,6 +20,7 @@
           v-model="vmInHostsClusters"
           :label-text="localization.common.virtualMachinesLabel"
           test-id="user-preferences-inventory-show-vms-checkbox"
+          size="md"
         />
       </div>
     </div>
@@ -29,7 +30,7 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const vmInHostsClusters = defineModel<boolean>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/inventory/{InventoryOld.vue → Old.vue}

@@ -23,9 +23,9 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const vmInHostsClusters = defineModel<boolean>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/layout/theHeader/userMenu/modals/preferences/security/New.vue

@@ -1,17 +1,282 @@
 <template>
-  <form id="security-form">
-    New View
-  </form>
+  <!-- TODO Shorten code by the new component for the form -->
+  <div class="flex">
+    <ui-modal-icon>
+      <ui-icon name="security" width="20" height="20" />
+    </ui-modal-icon>
+    <div>
+      <div class="form-first-title">
+        {{ localization.common.security }}
+      </div>
+      <div class="form-second-title">
+        {{ localization.myPreferences.twoFactorAuthentication2 }}
+      </div>
+
+      <div class="flex-align-center new-view-switch-container">
+        <ui-switch
+          v-model="security"
+          :label="localization.myPreferences.securityLabel"
+          test-id="view-switch"
+        />
+      </div>
+      <div
+        v-if="
+          props.recovery &&
+          security &&
+          !props.initialSecurity &&
+          !props.otpEnabledSuccess
+        "
+        class="recovery-codes-wrap mt-4"
+      >
+        <p class="description-block mb-3">
+          {{ localization.myPreferences.enterOtpForEnabled }}
+        </p>
+
+        <div class="recovery-codes flex items-center p-3 mb-4">
+          <common-qr
+            :qr-code-url="props.recovery.qr_code_url"
+            width="112"
+            height="112"
+          />
+
+          <span class="or-text">{{ localization.common.or }}</span>
+
+          <div class="flex items-center p-3">
+            <ul class="recovery-codes-list">
+              <li
+                v-for="item in props.recovery.recovery_codes"
+                :key="item"
+                class="recovery-codes-list-item code-text"
+              >
+                {{ item }}
+              </li>
+            </ul>
+            <ui-icon
+              name="copy"
+              class="copy-icon"
+              width="16"
+              height="16"
+              @click="onCopyCode"
+            />
+          </div>
+        </div>
+        <section class="form-block">
+          <div class="form-group flex items-center flex-wrap">
+            <label for="otp" class="mr-3">{{
+              localization.myPreferences.enterOtpCode
+            }}</label>
+            <div class="input-block-container mr-2">
+              <ui-input
+                id="otp"
+                v-model="otp"
+                :placeholder="localization.myPreferences.otpCode"
+                :error="errorOtpInput"
+                test-id="otp"
+                size="sm"
+              />
+            </div>
+            <ui-button
+              :is-loading="props.isOtpLoading"
+              test-id="confirm-otp-code"
+              class="btn btn-sm btn-primary"
+              @click="onConfirm"
+            >
+              {{ localization.common.confirm }}
+            </ui-button>
+          </div>
+        </section>
+      </div>
+
+      <div
+        v-if="!security && props.initialSecurity && !props.otpDisabledSuccess"
+        class="turning-off-block"
+      >
+        <section class="form-block">
+          <div class="form-group flex items-center flex-wrap">
+            <label for="otp" class="mb-3">{{
+              localization.myPreferences.enterOtpForDisabled
+            }}</label>
+            <div class="input-block-container mr-2">
+              <ui-input
+                id="otp"
+                v-model="otp"
+                :placeholder="localization.myPreferences.otpCode"
+                :error="errorDisabledOtpInput"
+                test-id="otp"
+                size="sm"
+              />
+            </div>
+            <ui-button
+              :is-loading="props.isOtpLoading"
+              test-id="disabled-otp-code"
+              class="btn btn-sm btn-primary"
+              @click="onDisabled"
+            >
+              {{ localization.common.confirm }}
+            </ui-button>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-// import type { UI_I_Localization } from '~/lib/models/interfaces'
-//
-// const props = defineProps<{
-//   description: string
-// }>()
-//
-// const newViewLocal = defineModel<boolean>()
-//
-// const localization = computed<UI_I_Localization>(() => useLocal())
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
+
+const security = defineModel<boolean>('security')
+const otp = defineModel<string>('otp')
+
+const props = defineProps<{
+  initialSecurity: boolean
+  isOtpLoading: boolean
+  otpEnabledSuccess: boolean
+  otpDisabledSuccess: boolean
+  otpErrorApiText: string
+  otpDisabledErrorApiText: string
+  recovery: UI_I_Recovery
+}>()
+
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'disabled'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onCopyCode = (): void => {
+  const currentCopiedCode = props.recovery.recovery_codes[0] || ''
+  navigator.clipboard.writeText(currentCopiedCode)
+}
+
+const errorOtpInput = ref<string>('')
+const onConfirm = (): void => {
+  if (!otp.value) {
+    errorOtpInput.value = localization.value.common.fieldRequired
+  } else if (otp.value.length < 6) {
+    errorOtpInput.value = localization.value.myPreferences.otpCodeErrorLength
+  } else {
+    errorOtpInput.value = ''
+    emits('confirm')
+  }
+}
+
+const errorDisabledOtpInput = ref<string>('')
+const onDisabled = (): void => {
+  if (!otp.value) {
+    errorDisabledOtpInput.value = localization.value.common.fieldRequired
+  } else if (otp.value.length < 6) {
+    errorDisabledOtpInput.value =
+      localization.value.myPreferences.otpCodeErrorLength
+  } else {
+    errorDisabledOtpInput.value = ''
+    emits('disabled')
+  }
+}
+
+watch(
+  () => props.otpErrorApiText,
+  (newValue) => {
+    if (newValue) {
+      errorOtpInput.value = newValue
+    }
+  }
+)
+
+watch(
+  () => props.otpDisabledErrorApiText,
+  (newValue) => {
+    if (newValue) {
+      errorDisabledOtpInput.value = newValue
+    }
+  }
+)
 </script>
+
+<style>
+:root {
+  --security-block-qr-bg-color: #ffffff;
+  --security-block-qr-border-color: #e9ebed;
+  --security-block-qr-or-text: #4d5d69;
+  --security-block-qr-code-text: #4d5d69;
+  --security-block-qr-first-rect: #ffffff;
+  --security-block-qr-path: #1b2a37;
+  --security-block-form-block-label: #4d5d69;
+}
+:root.dark-theme {
+  --security-block-qr-bg-color: #1b2a371f;
+  --security-block-qr-border-color: #e9ebed1f;
+  --security-block-qr-or-text: #9da6ad;
+  --security-block-qr-code-text: #e9eaec;
+  --security-block-qr-first-rect: rgba(255, 255, 255, 0);
+  --security-block-qr-path: #e9eaec;
+  --security-block-form-block-label: #9da6ad;
+}
+</style>
+<style>
+.recovery-codes-wrap {
+  .description-block {
+    font-size: 13px;
+    font-weight: 400;
+    color: #9da6ad;
+    line-height: 18px;
+  }
+  .recovery-codes {
+    justify-content: space-around;
+    border: 1px solid var(--security-block-qr-border-color);
+    background-color: var(--security-block-qr-bg-color);
+    border-radius: 8px;
+    grid-column-gap: 12px;
+
+    .qrcode {
+      padding: 8px;
+
+      rect:first-child {
+        fill: var(--security-block-qr-first-rect);
+      }
+      path {
+        fill: var(--security-block-qr-path);
+      }
+      rect:not(:first-child) {
+        fill: var(--security-block-qr-path);
+      }
+    }
+    .or-text {
+      color: var(--security-block-qr-or-text);
+    }
+    .code-text {
+      color: var(--security-block-qr-code-text);
+    }
+    .copy-icon {
+      color: #008fd6;
+      cursor: pointer;
+      margin-left: 10px;
+
+      &:hover {
+        color: #0081c1;
+      }
+    }
+  }
+  .form-group {
+    label {
+      color: var(--security-block-form-block-label) !important;
+    }
+    .input-block-container {
+      width: 160px;
+      height: 32px;
+    }
+  }
+}
+.turning-off-block {
+  .form-group {
+    label {
+      color: var(--security-block-form-block-label) !important;
+    }
+    .input-block-container {
+      width: 160px;
+      height: 32px;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/security/Old.vue

@@ -13,7 +13,10 @@
 
     <div
       v-if="
-        props.recovery && security && !initialSecurity && !otpEnabledSuccess
+        props.recovery &&
+        security &&
+        !props.initialSecurity &&
+        !props.otpEnabledSuccess
       "
       class="recovery-codes-wrap"
     >
@@ -22,7 +25,7 @@
       </p>
 
       <div class="recovery-codes">
-        <common-qrcode :qr-code-url="props.recovery.qr_code_url" />
+        <common-qr :qr-code-url="props.recovery.qr_code_url" />
 
         <span>{{ localization.common.or }}</span>
 
@@ -38,27 +41,35 @@
       </div>
       <section class="form-block">
         <div class="form-group">
-          <label for="otp">{{ localization.myPreferences.enterOtpForEnabled }}</label>
+          <label for="otp">{{
+            localization.myPreferences.enterOtpForEnabled
+          }}</label>
           <input id="otp" v-model="otp" type="text" />
-          <button class="btn btn-sm btn-primary" @click="onConfirm">
+          <button class="btn btn-sm btn-primary" @click="emits('confirm')">
             {{ localization.common.confirm }}
           </button>
-          <atoms-loader v-if="isOtpLoading" test-id="2fa-enabled-loader" />
+          <atoms-loader
+            v-if="props.isOtpLoading"
+            test-id="2fa-enabled-loader"
+          />
         </div>
       </section>
     </div>
 
-    <div v-if="!security && initialSecurity && !otpDisabledSuccess">
+    <div v-if="!security && props.initialSecurity && !props.otpDisabledSuccess">
       <section class="form-block">
         <div class="form-group">
-          <label for="otp"
-            >{{ localization.myPreferences.enterOtpForDisabled }}</label
-          >
+          <label for="otp">{{
+            localization.myPreferences.enterOtpForDisabled
+          }}</label>
           <input id="otp" v-model="otp" type="text" />
-          <button class="btn btn-sm btn-primary" @click="onDisabled">
+          <button class="btn btn-sm btn-primary" @click="emits('disabled')">
             {{ localization.common.confirm }}
           </button>
-          <atoms-loader v-if="isOtpLoading" test-id="2fa-disabled-loader"/>
+          <atoms-loader
+            v-if="props.isOtpLoading"
+            test-id="2fa-disabled-loader"
+          />
         </div>
       </section>
     </div>
@@ -70,58 +81,21 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
 
 const security = defineModel<boolean>('security')
+const otp = defineModel<string>('otp')
 
 const props = defineProps<{
-  recovery?: UI_I_Recovery
+  initialSecurity: boolean
+  isOtpLoading: boolean
+  otpEnabledSuccess: boolean
+  otpDisabledSuccess: boolean
+  recovery: UI_I_Recovery
 }>()
 const emits = defineEmits<{
-  (event: 'confirm', value: boolean): void
+  (event: 'confirm'): void
+  (event: 'disabled'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-
-const initialSecurity = ref<boolean>(security.value || false)
-
-// TODO refactoring and move to Sphere
-const otp = ref<string>('')
-const isOtpLoading = ref<boolean>(false)
-
-const otpEnabledSuccess = ref<boolean>(false)
-const onConfirm = async (): Promise<void> => {
-  isOtpLoading.value = true
-  const { data } = await useMyFetch<any, any>('ui/auth/2fa/confirm', {
-    method: 'POST',
-    body: {
-      otp: otp.value,
-    },
-  })
-  if (data.value) {
-    otpEnabledSuccess.value = true
-    otpDisabledSuccess.value = false
-    emits('confirm', true)
-  }
-  isOtpLoading.value = false
-}
-
-const otpDisabledSuccess = ref<boolean>(false)
-const onDisabled = async (): Promise<void> => {
-  isOtpLoading.value = true
-  const { data } = await useMyFetch<any, I_ErrorResponse>(
-    'ui/auth/2fa/disable',
-    {
-      method: 'POST',
-      body: {
-        otp: otp.value,
-      },
-    }
-  )
-  if (data.value) {
-    otpDisabledSuccess.value = true
-    otpEnabledSuccess.value = false
-    emits('confirm', false)
-  }
-  isOtpLoading.value = false
-}
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/preferences/security/Security.vue

@@ -1,26 +1,33 @@
 <template>
   <component
     v-model:security="security"
+    v-model:otp="otp"
     :is="currentComponent"
+    :initial-security="initialSecurity"
+    :is-otp-loading="isOtpLoading"
+    :otp-enabled-success="otpEnabledSuccess"
+    :otp-disabled-success="otpDisabledSuccess"
     :recovery="props.recovery"
-    @confirm="emits('confirm', $event)"
+    :otp-error-api-text="otpErrorApiText"
+    :otp-disabled-error-api-text="otpDisabledErrorApiText"
+    @confirm="onConfirm"
+    @disabled="onDisabled"
   />
 </template>
 
 <script setup lang="ts">
-import type {
-  UI_I_Recovery
-} from "~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces";
+import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
+
+const security = defineModel<boolean>('security')
 
 const props = defineProps<{
   recovery: UI_I_Recovery | null
 }>()
+
 const emits = defineEmits<{
   (event: 'confirm', value: boolean): void
 }>()
 
-const security = defineModel<boolean>('security')
-
 const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 const currentComponent = computed(() =>
@@ -28,4 +35,56 @@ const currentComponent = computed(() =>
     ? defineAsyncComponent(() => import('./New.vue'))
     : defineAsyncComponent(() => import('./Old.vue'))
 )
+
+const initialSecurity = ref<boolean>(security.value || false)
+
+// TODO refactoring and move to Sphere
+const otp = ref<string>('')
+const isOtpLoading = ref<boolean>(false)
+
+const otpEnabledSuccess = ref<boolean>(false)
+const otpErrorApiText = ref<string>('')
+const otpDisabledErrorApiText = ref<string>('')
+const onConfirm = async (): Promise<void> => {
+  otpErrorApiText.value = ''
+  isOtpLoading.value = true
+  const { data, error } = await useMyFetch<any, any>('ui/auth/2fa/confirm', {
+    method: 'POST',
+    body: {
+      otp: otp.value,
+    },
+  })
+  otpErrorApiText.value = error.value.data
+  if (data.value) {
+    otpEnabledSuccess.value = true
+    otpDisabledSuccess.value = false
+    initialSecurity.value = true
+    otp.value = ''
+    emits('confirm', true)
+  }
+  isOtpLoading.value = false
+}
+
+const otpDisabledSuccess = ref<boolean>(false)
+const onDisabled = async (): Promise<void> => {
+  isOtpLoading.value = true
+  const { data, error } = await useMyFetch<any, I_ErrorResponse>(
+    'ui/auth/2fa/disable',
+    {
+      method: 'POST',
+      body: {
+        otp: otp.value,
+      },
+    }
+  )
+  otpDisabledErrorApiText.value = error.value.data
+  if (data.value) {
+    otpDisabledSuccess.value = true
+    otpEnabledSuccess.value = false
+    initialSecurity.value = false
+    otp.value = ''
+    emits('confirm', false)
+  }
+  isOtpLoading.value = false
+}
 </script>