bfg-common 1.5.689 → 1.5.690

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

@@ -1,216 +1,184 @@
-<template>
-  <form id="security-form" class="compact" @submit.prevent>
-    <div class="description">
-      {{ localization.myPreferences.twoFactorAuthentication }}
-    </div>
-
-    <div class="flex-align-center">
-      <label for="security">{{
-        localization.myPreferences.securityLabel
-      }}</label>
-      <input id="security" v-model="security" type="checkbox" class="switch" />
-    </div>
-
-    <div
-      v-if="
-        props.recovery && security && !initialSecurity && !otpEnabledSuccess
-      "
-      class="recovery-codes-wrap"
-    >
-      <p>
-        {{ localization.myPreferences.enterOtpForEnabled }}
-      </p>
-
-      <div class="recovery-codes">
-        <common-qr :qr-code-url="props.recovery.qr_code_url" />
-
-        <span>{{ localization.common.or }}</span>
-
-        <ul class="recovery-codes-list">
-          <li
-            v-for="item in props.recovery.recovery_codes"
-            :key="item"
-            class="recovery-codes-list-item"
-          >
-            {{ item }}
-          </li>
-        </ul>
-      </div>
-      <section class="form-block">
-        <div class="form-group">
-          <label for="otp">{{
-            localization.myPreferences.enterOtpForEnabled
-          }}</label>
-          <input id="otp" v-model="otp" type="text" />
-          <button class="btn btn-sm btn-primary" @click="onConfirm">
-            {{ localization.common.confirm }}
-          </button>
-          <atoms-loader v-if="isOtpLoading" test-id="2fa-enabled-loader" />
-        </div>
-      </section>
-    </div>
-
-    <div v-if="!security && initialSecurity && !otpDisabledSuccess">
-      <section class="form-block">
-        <div class="form-group">
-          <label for="otp">{{
-            localization.myPreferences.enterOtpForDisabled
-          }}</label>
-          <input id="otp" v-model="otp" type="text" />
-          <button class="btn btn-sm btn-primary" @click="onDisabled">
-            {{ localization.common.confirm }}
-          </button>
-          <atoms-loader v-if="isOtpLoading" test-id="2fa-disabled-loader" />
-        </div>
-      </section>
-    </div>
-  </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 props = defineProps<{
-  recovery?: UI_I_Recovery
-}>()
-const emits = defineEmits<{
-  (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
-    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 } = await useMyFetch<any, I_ErrorResponse>(
-    'ui/auth/2fa/disable',
-    {
-      method: 'POST',
-      body: {
-        otp: otp.value,
-      },
-    }
-  )
-  if (data.value) {
-    otpDisabledSuccess.value = true
-    otpEnabledSuccess.value = false
-    initialSecurity.value = false
-    otp.value = ''
-    emits('confirm', false)
-  }
-  isOtpLoading.value = false
-}
-</script>
-
-<style lang="scss" scoped>
-.description {
-  margin-bottom: 10px;
-}
-
-.recovery-codes-wrap {
-  margin: 10px 0;
-
-  .recovery-codes {
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-
-    .recovery-codes-list-item {
-      font-size: 12px;
-    }
-  }
-}
-
-label {
-  margin-right: 6px;
-}
-
-// TODO повторяется в ../view, необходимо вынести глобально
-input[type='checkbox'] {
-  --active: var(--checkbox-value-active-color);
-  --active-inner: var(--checkbox-mark-color);
-  --border: var(--checkbox-mark-color);
-  --background: var(--checkbox-mark-background-color);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  height: 20px;
-  outline: none;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  margin: 0;
-  cursor: pointer;
-  border: 1px solid var(--bc, var(--border));
-  background: var(--b, var(--background));
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  &:after {
-    content: '';
-    display: block;
-    left: 0;
-    top: 0;
-    position: absolute;
-    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
-      opacity var(--d-o, 0.2s);
-  }
-  &:checked {
-    --b: var(--active);
-    --bc: var(--active);
-    --d-o: 0.3s;
-    --d-t: 0.6s;
-    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
-  }
-}
-input[type='checkbox'] {
-  &.switch {
-    width: 35px;
-    border-radius: 11px;
-    &:after {
-      left: 2px;
-      top: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      width: 14px;
-      height: 14px;
-      border: 1px solid var(--bc, var(--border));
-      background: var(--ab, var(--border));
-      transform: translateX(var(--x, 0));
-    }
-    &:checked {
-      --ab: var(--active-inner);
-      --x: 14px;
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-}
-</style>
+<template>
+  <form id="security-form" class="compact" @submit.prevent>
+    <div class="description">
+      {{ localization.myPreferences.twoFactorAuthentication }}
+    </div>
+
+    <div class="flex-align-center">
+      <label for="security">{{
+        localization.myPreferences.securityLabel
+      }}</label>
+      <input id="security" v-model="security" type="checkbox" class="switch" />
+    </div>
+
+    <div
+      v-if="
+        props.recovery &&
+        security &&
+        !props.initialSecurity &&
+        !props.otpEnabledSuccess
+      "
+      class="recovery-codes-wrap"
+    >
+      <p>
+        {{ localization.myPreferences.enterOtpForEnabled }}
+      </p>
+
+      <div class="recovery-codes">
+        <common-qr :qr-code-url="props.recovery.qr_code_url" />
+
+        <span>{{ localization.common.or }}</span>
+
+        <ul class="recovery-codes-list">
+          <li
+            v-for="item in props.recovery.recovery_codes"
+            :key="item"
+            class="recovery-codes-list-item"
+          >
+            {{ item }}
+          </li>
+        </ul>
+      </div>
+      <section class="form-block">
+        <div class="form-group">
+          <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')">
+            {{ localization.common.confirm }}
+          </button>
+          <atoms-loader
+            v-if="props.isOtpLoading"
+            test-id="2fa-enabled-loader"
+          />
+        </div>
+      </section>
+    </div>
+
+    <div v-if="!security && props.initialSecurity && !props.otpDisabledSuccess">
+      <section class="form-block">
+        <div class="form-group">
+          <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')">
+            {{ localization.common.confirm }}
+          </button>
+          <atoms-loader
+            v-if="props.isOtpLoading"
+            test-id="2fa-disabled-loader"
+          />
+        </div>
+      </section>
+    </div>
+  </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
+  recovery: UI_I_Recovery
+}>()
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'disabled'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin-bottom: 10px;
+}
+
+.recovery-codes-wrap {
+  margin: 10px 0;
+
+  .recovery-codes {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+
+    .recovery-codes-list-item {
+      font-size: 12px;
+    }
+  }
+}
+
+label {
+  margin-right: 6px;
+}
+
+// TODO повторяется в ../view, необходимо вынести глобально
+input[type='checkbox'] {
+  --active: var(--checkbox-value-active-color);
+  --active-inner: var(--checkbox-mark-color);
+  --border: var(--checkbox-mark-color);
+  --background: var(--checkbox-mark-background-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  height: 20px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+  &:after {
+    content: '';
+    display: block;
+    left: 0;
+    top: 0;
+    position: absolute;
+    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
+      opacity var(--d-o, 0.2s);
+  }
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+}
+input[type='checkbox'] {
+  &.switch {
+    width: 35px;
+    border-radius: 11px;
+    &:after {
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      width: 14px;
+      height: 14px;
+      border: 1px solid var(--bc, var(--border));
+      background: var(--ab, var(--border));
+      transform: translateX(var(--x, 0));
+    }
+    &:checked {
+      --ab: var(--active-inner);
+      --x: 14px;
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+</style>

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

@@ -1,31 +1,90 @@
-<template>
-  <component
-    v-model:security="security"
-    :is="currentComponent"
-    :recovery="props.recovery"
-    @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 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(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-</script>
+<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"
+  />
+</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')
+
+const props = defineProps<{
+  recovery: UI_I_Recovery | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'confirm', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? 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/{TimeFormatNew.vue → New.vue}

@@ -22,7 +22,7 @@
             :test-id="item.testId"
             :label="item.label"
             :value="item.value"
-            size="sm"
+            size="md"
           />
         </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/{TimeFormatOld.vue → Old.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/timeFormat/TimeFormat.vue

@@ -1,12 +1,6 @@
 <template>
-  <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
+  <component
+    :is="currentComponent"
     v-model="timeItem"
     :description="description"
     :format-options="formatOptions"
@@ -28,6 +22,12 @@ const emits = defineEmits<{
   (event: 'update-time-format', value: UI_T_TimeValue): void
 }>()
 
+const currentComponent = computed(() =>
+  props.newView
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const config = useRuntimeConfig()

package/components/common/layout/theHeader/userMenu/modals/preferences/view/{ViewNew.vue → New.vue}

@@ -13,7 +13,7 @@
           {{ props.description }}
         </div>
 
-        <div class="flex-align-center">
+        <div class="flex-align-center new-view-switch-container">
           <ui-switch
             v-model="newViewLocal"
             :label="localization.common.newView"
@@ -28,11 +28,20 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
+const newViewLocal = defineModel<boolean>()
+
 const props = defineProps<{
   description: string
 }>()
 
-const newViewLocal = defineModel<boolean>()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
+
+<style lang="scss" scoped>
+.new-view-switch-container {
+  :deep(.switch-content .switch-label) {
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/view/{ViewOld.vue → Old.vue}

@@ -20,14 +20,14 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
+const newViewLocal = defineModel<boolean>()
+
 const props = defineProps<{
   description: string
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const newViewLocal = defineModel<boolean>()
-
 const isDisabled = ref<boolean>(true)
 // @ts-ignore
 window.tools = new Proxy(