bfg-common 1.5.831 → 1.5.832

package/assets/localization/local_be.json

@@ -3915,7 +3915,8 @@
     "backToLogin": "Вярнуцца да ўваходу",
     "qrcodeDescription": "Скануйце гэты QR-код з дапамогай праграмы-аўтэнтыфікатара альбо ўвядзіце адзін з гэтых кодаў уручную. Пасля гэтага пацвердзіце дзеянне, увёўшы аднаразовы код ніжэй.",
     "showNotification": "Паказваць апавяшчэнне",
-    "showNotificationDescription": "Паказваць апавяшчэнне, калі нешта ідзе не так"
+    "showNotificationDescription": "Паказваць апавяшчэнне, калі нешта ідзе не так",
+    "twoFactorMustBeEnabled": "Неабходна падключыць двухфактарную аўтэнтыфікацыю (2FA), інакш ваш акаўнт будзе заблакаваны."
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Палітыка двухфактарнай аўтэнтыфікацыі",

package/assets/localization/local_en.json

@@ -3919,7 +3919,8 @@
     "backToLogin": "Back to Login",
     "qrcodeDescription": "Scan this QR code with your authenticator app, or enter one of these codes manually. After that, confirm the action by entering the one-time code below.",
     "showNotification": "Show a notification",
-    "showNotificationDescription": "Show a notification when something goes wrong"
+    "showNotificationDescription": "Show a notification when something goes wrong",
+    "twoFactorMustBeEnabled": "Two-factor authentication (2FA) must be enabled, otherwise your account will be blocked."
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Two-factor policy",

package/assets/localization/local_hy.json

@@ -3919,7 +3919,8 @@
     "backToLogin": "Վերադառնալ մուտքի էջ",
     "qrcodeDescription": "Սկանավորեք այս QR կոդը ձեր նույնականացման հավելվածով կամ մուտքագրեք այս կոդերից մեկը ձեռքով: Դրանից հետո հաստատեք գործողությունը՝ ներքևում մուտքագրելով միանգամյա կոդը:",
     "showNotification": "Ցուցադրել ծանուցում",
-    "showNotificationDescription": "Ցուցադրել ծանուցում, երբ ինչ-որ բան սխալ է ընթանում"
+    "showNotificationDescription": "Ցուցադրել ծանուցում, երբ ինչ-որ բան սխալ է ընթանում",
+    "twoFactorMustBeEnabled": "Անհրաժեշտ է միացնել երկգործոն նույնականացում (2FA), հակառակ դեպքում ձեր հաշիվը կարգելափակվի:"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Երկու գործոնի քաղաքականություն",

package/assets/localization/local_kk.json

@@ -3919,7 +3919,8 @@
     "backToLogin": "Кіру бетіне оралу",
     "qrcodeDescription": "Бұл QR-кодты аутентификатор қолданбасымен сканерлеңіз немесе осы кодтардың бірін қолмен енгізіңіз. Содан кейін әрекетті төмендегі бір реттік кодты енгізу арқылы растаңыз.",
     "showNotification": "Хабарландыруды көрсету",
-    "showNotificationDescription": "Бірдеңе дұрыс емес болған кезде хабарландыруды көрсету"
+    "showNotificationDescription": "Бірдеңе дұрыс емес болған кезде хабарландыруды көрсету",
+    "twoFactorMustBeEnabled": "Екі факторлы аутентификацияны (2FA) қосу қажет, әйтпесе сіздің аккаунтыңыз бұғатталады."
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Екі факторлы саясат",

package/assets/localization/local_ru.json

@@ -3918,7 +3918,8 @@
     "backToLogin": "Вернуться ко входу",
     "qrcodeDescription": "Отсканируйте этот QR-код с помощью приложения-аутентификатора или введите один из этих кодов вручную. После этого подтвердите действие, введя одноразовый код ниже.",
     "showNotification": "Показывать уведомление",
-    "showNotificationDescription": "Показывать уведомление, когда что-то идёт не так"
+    "showNotificationDescription": "Показывать уведомление, когда что-то идёт не так",
+    "twoFactorMustBeEnabled": "Необходимо подключить двухфакторную аутентификацию (2FA), иначе ваш аккаунт будет заблокирован."
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Политика двухфакторной аутентификации",

package/assets/localization/local_zh.json

@@ -3916,7 +3916,8 @@
     "backToLogin": "返回登录",
     "qrcodeDescription": "使用您的身份验证器应用程序扫描此QR码，或手动输入其中一个代码。然后，通过输入下面的一次性代码来确认操作。",
     "showNotification": "显示通知",
-    "showNotificationDescription": "当出现问题时显示通知"
+    "showNotificationDescription": "当出现问题时显示通知",
+    "twoFactorMustBeEnabled": "必须启用双因素认证（2FA），否则您的账户将被锁定。"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "双因素策略",

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

@@ -1,136 +1,156 @@
-<template>
-  <atoms-modal
-    :title="localization.common.preferences"
-    :modal-loading="isLoading || props.securityLoader"
-    test-id="user-preferences-modal"
-    width="580px"
-    height="420px"
-    show
-    @hide="onHide"
-  >
-    <template #modalBody>
-      <atoms-nav-bar
-        v-model="selectedTab"
-        :items="tabsItems"
-        test-id="user-preferences-nav-bar"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-time-format
-        v-if="selectedTab === 'time-tab'"
-        v-model:time-format="timeFormat"
-        :new-view="props.newView"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-change-language
-        v-if="selectedTab === 'language-tab'"
-        :new-view="props.newView"
-        :selected-type="props.selectedLanguageType"
-        :selected-language="props.selectedLanguage"
-        @update-language="emits('update-language', $event)"
-        @update-is-browser="emits('update-is-browser', $event)"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-inventory
-        v-if="selectedTab === 'inventory-tab' && isSphere"
-        v-model="vmInHostsClusters"
-        :new-view="props.newView"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-default-console
-        v-if="selectedTab === 'console-tab' && isSphere"
-        v-model="consoleValue"
-        :new-view="props.newView"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-security
-        v-if="selectedTab === 'security-tab'"
-        v-model:security="security"
-        :recovery="props.recovery"
-        @confirm="emits('security-confirm', $event)"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-view
-        v-if="selectedTab === 'view-tab'"
-        v-model:new-view-local="newViewLocal"
-        v-model:is-show-notification="isShowNotification"
-        :new-view="props.newView"
-      />
-    </template>
-
-    <template #modalFooter>
-      <button
-        id="user-preferences-cancel-button"
-        data-id="user-preferences-cancel-button"
-        class="btn btn-outline"
-        @click="onHide"
-      >
-        {{ localization.common.cancel }}
-      </button>
-      <button
-        id="user-preferences-apply-button"
-        data-id="user-preferences-apply-button"
-        class="btn btn-primary"
-        @click="onSubmit"
-      >
-        {{ localization.common.save }}
-      </button>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
-import type { UI_T_UserPreferenceTab } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/models/types'
-import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
-import { preferencesTabs } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs'
-
-const security = defineModel<boolean>('security')
-const isShowNotification = defineModel<boolean>('isShowNotification')
-const newViewLocal = defineModel<boolean>('newViewLocal')
-const timeFormat = defineModel<UI_T_TimeValue>('timeFormat')
-const consoleValue = defineModel<string>('consoleValue')
-const vmInHostsClusters = defineModel<boolean>('vmInHostsClusters')
-
-const props = defineProps<{
-  project: UI_T_Project
-  selectedLanguage: UI_T_LangValue
-  selectedLanguageType: UI_T_LangValue
-  newView: boolean
-  securityLoader: boolean // для Сферы
-  recovery: UI_I_Recovery | null // для Сферы
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'update-language', value: string): void
-  (event: 'update-is-browser', value: string): void
-  (event: 'security-confirm', value: boolean): void
-  (event: 'submit'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isLoading = ref<boolean>(false)
-
-const isSphere = ref<boolean>(props.project === 'sphere')
-const selectedTab = ref<UI_T_UserPreferenceTab>('time-tab')
-
-const tabsItems = computed<UI_I_CollapseNavItem[]>(() =>
-  preferencesTabs(localization.value, props.project)
-)
-
-const onSubmit = (): void => {
-  isLoading.value = true
-  emits('submit')
-}
-
-const onHide = (): void => {
-  emits('hide')
-
-  if (isSphere.value) {
-    selectedTab.value = 'time-tab'
-  }
-}
-</script>
+<template>
+  <atoms-modal
+    :title="localization.common.preferences"
+    :modal-loading="isLoading || props.securityLoader"
+    test-id="user-preferences-modal"
+    width="580px"
+    height="420px"
+    show
+    @hide="onHide"
+  >
+    <template #modalBody>
+      <atoms-nav-bar
+        v-model="selectedTab"
+        :items="tabsItems"
+        test-id="user-preferences-nav-bar"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-time-format
+        v-if="selectedTab === 'time-tab'"
+        v-model:time-format="timeFormat"
+        :new-view="props.newView"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-change-language
+        v-if="selectedTab === 'language-tab'"
+        :new-view="props.newView"
+        :selected-type="props.selectedLanguageType"
+        :selected-language="props.selectedLanguage"
+        @update-language="emits('update-language', $event)"
+        @update-is-browser="emits('update-is-browser', $event)"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-inventory
+        v-if="selectedTab === 'inventory-tab' && isSphere"
+        v-model="vmInHostsClusters"
+        :new-view="props.newView"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-default-console
+        v-if="selectedTab === 'console-tab' && isSphere"
+        v-model="consoleValue"
+        :new-view="props.newView"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-security
+        v-if="selectedTab === 'security-tab'"
+        v-model:security="security"
+        :recovery="props.recovery"
+        :is-on-fa-important="isOn2FaImportant"
+        @confirm="emits('security-confirm', $event)"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-view
+        v-if="selectedTab === 'view-tab'"
+        v-model:new-view-local="newViewLocal"
+        v-model:is-show-notification="isShowNotification"
+        :new-view="props.newView"
+      />
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="user-preferences-cancel-button"
+        data-id="user-preferences-cancel-button"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.common.cancel }}
+      </button>
+      <button
+        id="user-preferences-apply-button"
+        data-id="user-preferences-apply-button"
+        class="btn btn-primary"
+        @click="onSubmit"
+      >
+        {{ localization.common.save }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
+import type { UI_T_UserPreferenceTab } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/models/types'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
+import { UI_E_TopNotificationActionId } from '~/components/common/layout/topNotification/lib/models/enums'
+import { preferencesTabs } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs'
+
+const security = defineModel<boolean>('security')
+const isShowNotification = defineModel<boolean>('isShowNotification')
+const newViewLocal = defineModel<boolean>('newViewLocal')
+const timeFormat = defineModel<UI_T_TimeValue>('timeFormat')
+const consoleValue = defineModel<string>('consoleValue')
+const vmInHostsClusters = defineModel<boolean>('vmInHostsClusters')
+
+const props = defineProps<{
+  project: UI_T_Project
+  selectedLanguage: UI_T_LangValue
+  selectedLanguageType: UI_T_LangValue
+  newView: boolean
+  securityLoader: boolean // для Сферы
+  recovery: UI_I_Recovery | null // для Сферы
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'update-language', value: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'security-confirm', value: boolean): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isLoading = ref<boolean>(false)
+
+const isSphere = ref<boolean>(props.project === 'sphere')
+const selectedTab = ref<UI_T_UserPreferenceTab>('time-tab')
+
+const tabsItems = computed<UI_I_CollapseNavItem[]>(() =>
+  preferencesTabs(localization.value, props.project)
+)
+
+const onSubmit = (): void => {
+  isLoading.value = true
+  emits('submit')
+}
+
+const onHide = (): void => {
+  emits('hide')
+
+  if (isSphere.value) {
+    selectedTab.value = 'time-tab'
+  }
+}
+
+// TODO refactoring
+const { $store }: any = useNuxtApp()
+const topNotifications = computed<number>(
+  () => $store.getters['main/getTopNotificationActionId']
+)
+const isOn2FaImportant = ref<boolean>(false)
+watch(
+  topNotifications,
+  (newValue) => {
+    if (newValue === UI_E_TopNotificationActionId.on2Fa || newValue === UI_E_TopNotificationActionId.on2FaImportant) {
+      isOn2FaImportant.value = newValue === UI_E_TopNotificationActionId.on2FaImportant
+      selectedTab.value = 'security-tab'
+      $store.dispatch('main/A_SET_TOP_NOTIFICATION_ACTION_ID', -1)
+    }
+  },
+  { immediate: true }
+)
+</script>

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

@@ -1,184 +1,196 @@
-<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 | null
-}>()
-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>
+<template>
+  <form id="security-form" class="compact" @submit.prevent>
+<!--    TODO new view-->
+    <div v-if="props.isOnFaImportant">
+      <atoms-alert
+        :hide-close-icon="true"
+        :items="[localization.myPreferences.twoFactorMustBeEnabled]"
+        status="alert-warning"
+        class="mb-1"
+        test-id="on-2-fa-alert"
+      />
+    </div>
+
+    <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 | null
+  isOnFaImportant: boolean
+}>()
+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

@@ -10,6 +10,7 @@
     :recovery="props.recovery"
     :otp-error-api-text="otpErrorApiText"
     :otp-disabled-error-api-text="otpDisabledErrorApiText"
+    :is-on-fa-important="props.isOnFaImportant"
     @confirm="onConfirm"
     @disabled="onDisabled"
   />
@@ -22,6 +23,7 @@ const security = defineModel<boolean>('security')
 
 const props = defineProps<{
   recovery: UI_I_Recovery | null
+  isOnFaImportant: boolean
 }>()
 
 const emits = defineEmits<{

package/components/common/layout/topNotification/TopNotification.vue

@@ -26,4 +26,8 @@ const onRemove = (id: number): void => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(.ui-notification) {
+  padding: 8px 20px
+}
+</style>

package/components/common/layout/topNotification/lib/models/enums.ts

@@ -1,3 +1,5 @@
 export const UI_E_TopNotificationActionId = {
   changePassword: 0,
+  on2Fa: 1,
+  on2FaImportant: 2,
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.831",
+  "version": "1.5.832",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",