bfg-common 1.5.773 → 1.5.775

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

@@ -1,282 +1,17 @@
 <template>
-  <!-- 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>
+  <form id="security-form">
+    New View
+  </form>
 </template>
 
 <script setup lang="ts">
-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 | null
-}>()
-
-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
-    }
-  }
-)
+// 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())
 </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,10 +13,7 @@
 
     <div
       v-if="
-        props.recovery &&
-        security &&
-        !props.initialSecurity &&
-        !props.otpEnabledSuccess
+        props.recovery && security && !initialSecurity && !otpEnabledSuccess
       "
       class="recovery-codes-wrap"
     >
@@ -25,7 +22,7 @@
       </p>
 
       <div class="recovery-codes">
-        <common-qr :qr-code-url="props.recovery.qr_code_url" />
+        <common-qrcode :qr-code-url="props.recovery.qr_code_url" />
 
         <span>{{ localization.common.or }}</span>
 
@@ -41,35 +38,27 @@
       </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="emits('confirm')">
+          <button class="btn btn-sm btn-primary" @click="onConfirm">
             {{ localization.common.confirm }}
           </button>
-          <atoms-loader
-            v-if="props.isOtpLoading"
-            test-id="2fa-enabled-loader"
-          />
+          <atoms-loader v-if="isOtpLoading" test-id="2fa-enabled-loader" />
         </div>
       </section>
     </div>
 
-    <div v-if="!security && props.initialSecurity && !props.otpDisabledSuccess">
+    <div v-if="!security && initialSecurity && !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="emits('disabled')">
+          <button class="btn btn-sm btn-primary" @click="onDisabled">
             {{ localization.common.confirm }}
           </button>
-          <atoms-loader
-            v-if="props.isOtpLoading"
-            test-id="2fa-disabled-loader"
-          />
+          <atoms-loader v-if="isOtpLoading" test-id="2fa-disabled-loader"/>
         </div>
       </section>
     </div>
@@ -81,21 +70,58 @@ 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
-  recovery: UI_I_Recovery | null
+  recovery?: UI_I_Recovery
 }>()
 const emits = defineEmits<{
-  (event: 'confirm'): void
-  (event: 'disabled'): void
+  (event: 'confirm', value: boolean): 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,33 +1,26 @@
 <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"
-    :otp-error-api-text="otpErrorApiText"
-    :otp-disabled-error-api-text="otpDisabledErrorApiText"
-    @confirm="onConfirm"
-    @disabled="onDisabled"
+    @confirm="emits('confirm', $event)"
   />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
-
-const security = defineModel<boolean>('security')
+import type {
+  UI_I_Recovery
+} from "~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces";
 
 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(() =>
@@ -35,56 +28,4 @@ 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>

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/TimeFormat.vue

@@ -1,7 +1,13 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model="timeFormat"
+  <common-layout-the-header-user-menu-modals-preferences-time-format-new
+    v-if="props.newView"
+    v-model="timeItem"
+    :description="description"
+    :format-options="formatOptions"
+  />
+  <common-layout-the-header-user-menu-modals-preferences-time-format-old
+    v-else
+    v-model="timeItem"
     :description="description"
     :format-options="formatOptions"
   />
@@ -13,16 +19,14 @@ import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMe
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 import { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
 
-const timeFormat = defineModel<UI_T_TimeValue>('timeFormat')
 const props = defineProps<{
+  timeFormat: UI_T_TimeValue
   newView: boolean
 }>()
 
-const currentComponent = computed(() =>
-  props.newView
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
+const emits = defineEmits<{
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -38,4 +42,13 @@ const description = computed<string>(() =>
 const formatOptions = readonly<UI_I_RadioItem[]>(
   formatOptionsFunc(localization.value)
 )
+
+const timeItem = computed<UI_T_TimeValue>({
+  get() {
+    return props.timeFormat
+  },
+  set(newValue: UI_T_TimeValue) {
+    emits('update-time-format', newValue)
+  },
+})
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/{New.vue → TimeFormatNew.vue}

@@ -22,7 +22,7 @@
             :test-id="item.testId"
             :label="item.label"
             :value="item.value"
-            size="md"
+            size="sm"
           />
         </div>
       </div>
@@ -35,14 +35,14 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 
-const timeItem = defineModel<UI_T_TimeValue>()
-
 const props = defineProps<{
   description: string
   formatOptions: UI_I_RadioItem[]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+
+const timeItem = defineModel<UI_T_TimeValue>()
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/{Old.vue → TimeFormatOld.vue}

@@ -23,12 +23,12 @@
 import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 
-const timeItem = defineModel<UI_T_TimeValue>()
-
 const props = defineProps<{
   description: string
   formatOptions: UI_I_RadioItem[]
 }>()
+
+const timeItem = defineModel<UI_T_TimeValue>()
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/preferences/view/View.vue

@@ -1,8 +1,12 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model="newViewLocal"
-    v-model:is-show-notification="isShowNotification"
+  <common-layout-the-header-user-menu-modals-preferences-view-new
+    v-if="props.newView"
+    v-model="model"
+    :description="description"
+  />
+  <common-layout-the-header-user-menu-modals-preferences-view-old
+    v-else
+    v-model="model"
     :description="description"
   />
 </template>
@@ -10,20 +14,16 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const newViewLocal = defineModel<boolean>('newViewLocal')
-const isShowNotification = defineModel<boolean>('isShowNotification')
-
 const props = defineProps<{
   newView: boolean
+  newViewLocal: boolean
 }>()
 
-const config = useRuntimeConfig()
+const emits = defineEmits<{
+  (event: 'update-is-new-view', value: boolean): void
+}>()
 
-const currentComponent = computed(() =>
-  props.newView
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
+const config = useRuntimeConfig()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -33,4 +33,13 @@ const description = computed<string>(() => {
     String(config.public[`TRADEMARK_${useEnvLanguage()}`])
   )
 })
+
+const model = computed<boolean>({
+  get() {
+    return props.newViewLocal
+  },
+  set(newValue: boolean) {
+    emits('update-is-new-view', newValue)
+  },
+})
 </script>