bfg-common 1.5.833 → 1.5.834

package/assets/localization/local_be.json

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

package/assets/localization/local_en.json

@@ -3920,7 +3920,8 @@
     "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",
-    "twoFactorMustBeEnabled": "Two-factor authentication (2FA) must be enabled, otherwise your account will be blocked."
+    "twoFactorMustBeEnabled": "Two-factor authentication (2FA) must be enabled, otherwise your account will be blocked.",
+    "twoFactorMustWarning": "You have {0} days left to enable two-factor authentication (2FA), otherwise your account will be blocked (disabled)."
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Two-factor policy",

package/assets/localization/local_hy.json

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

package/assets/localization/local_kk.json

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

package/assets/localization/local_zh.json

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

package/components/common/layout/theHeader/Old.vue

@@ -1,258 +1,258 @@
-<template>
-  <div class="main-nav">
-    <header class="header header-7">
-      <div class="header-nav">
-        <div class="nav-link">
-          <button
-            id="inventory-menu-trigger"
-            data-id="inventory-menu-toggle-button"
-            class="inventory-menu-trigger"
-            @click="emits('toggle-main-menu')"
-          >
-            <span class="inventory-menu-link">
-              <span class="nav-icon">
-                <atoms-the-icon class="menu-icon" name="menu" />
-              </span>
-            </span>
-          </button>
-        </div>
-      </div>
-      <div class="branding">
-        <nuxt-link
-          id="header-shortcuts-link"
-          data-id="header-shortcuts-link"
-          to="/shortcuts"
-        >
-          <span class="title pointer"
-            >{{ props.companyName }}<sup><b>®</b></sup>
-            {{ props.projectName }}</span
-          >
-        </nuxt-link>
-      </div>
-      <form style="width: 100%; height: 100%" @click="onTemp">
-        <atoms-input-search />
-      </form>
-
-      <div class="settings header-actions">
-        <div class="divider" />
-        <a
-          id="global-refresh-button"
-          data-id="global-refresh-button"
-          class="nav-link tid-global-refresh-button"
-          @click="emits('global-refresh')"
-        >
-          <span class="nav-icon">
-            <atoms-the-icon
-              v-show="!props.globalRefreshLoading"
-              class="reset-icon"
-              name="reset"
-            />
-            <span
-              :class="[
-                'spinner spinner-inline spinner-inverse global-refresh-active',
-                { 'spinner-paused': !props.globalRefreshLoading },
-              ]"
-            ></span>
-          </span>
-        </a>
-        <div class="divider" />
-
-        <common-layout-the-header-user-menu
-          v-model:security="security"
-          v-model:is-show-notification="isShowNotification"
-          v-model:new-view-local="newViewLocal"
-          v-model:time-format="timeFormat"
-          v-model:console-value="consoleValue"
-          v-model:vm-in-hosts-clusters="vmInHostsClusters"
-          v-model:is-dark-theme="isDarkTheme"
-          :hostname="props.hostname"
-          :is-preference="props.isPreference"
-          :selected-language-type="props.selectedLanguageType"
-          :selected-language="props.selectedLang.value"
-          :new-view="props.newView"
-          :project="props.project"
-          :security-loader="props.securityLoader"
-          :recovery="props.recovery"
-          @show-preference="emits('show-preference')"
-          @hide-preference="emits('hide-preference')"
-          @update-language="onUpdateLanguage"
-          @update-is-browser="emits('update-is-browser', $event)"
-          @security-confirm="emits('security-confirm', $event)"
-          @submit-preferences="emits('submit-preferences')"
-        />
-
-        <div class="divider" />
-
-        <common-layout-the-header-feedback
-          :is-show-feedback="isShowFeedback"
-          @show="isShowFeedback = true"
-          @hide="isShowFeedback = false"
-        />
-
-        <div class="divider" />
-
-        <common-layout-the-header-help-menu :project-name="props.projectName" />
-
-        <div class="divider" />
-      </div>
-    </header>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
-import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
-
-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 isDarkTheme = defineModel<boolean>('isDarkTheme')
-
-const props = defineProps<{
-  companyName: string
-  betaText: string
-  globalRefreshLoading: boolean
-  project: UI_T_Project
-  projectName: string
-  hostname: string
-  isPreference: boolean
-  selectedLanguageType: string
-  selectedLang: UI_I_Dropdown
-  newView: boolean
-  securityLoader: boolean // для Сферы
-  recovery: UI_I_Recovery | null // для Сферы
-}>()
-
-const emits = defineEmits<{
-  (event: 'toggle-main-menu'): void
-  (event: 'global-refresh'): void
-  (event: 'show-preference'): void
-  (event: 'hide-preference'): void
-  (event: 'update-language', value: UI_I_Dropdown): void
-  (event: 'update-is-browser', value: string): void
-  (event: 'security-confirm', value: boolean): void
-  (event: 'submit-preferences'): void
-}>()
-
-const onUpdateLanguage = (language: string): void => {
-  const languageObj = findInLocals(language)
-  emits('update-language', languageObj)
-}
-
-const isShowFeedback = ref<boolean>(false)
-
-const onTemp = (): void => {
-  useLocalStorage('temp', true)
-}
-</script>
-
-<style scoped lang="scss">
-.main-nav {
-  position: relative;
-  left: 0;
-
-  header {
-    height: 62px;
-    align-items: center;
-    padding-left: 0;
-
-    .nav-link::before,
-    .nav-link::after {
-      display: none !important;
-    }
-
-    .inventory-menu-trigger {
-      padding: 0 0 0 60px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      position: relative;
-      outline: none;
-
-      .nav-icon {
-        padding: 0;
-        width: auto;
-        font-size: inherit;
-        display: flex;
-        align-items: center;
-        background: transparent;
-        border: none;
-
-        .menu-icon {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          height: 24px;
-          width: 24px;
-          fill: #fafafa;
-          display: inline-block;
-          margin: 0;
-          vertical-align: middle;
-        }
-      }
-    }
-
-    .branding {
-      width: auto;
-      min-width: auto;
-      padding-left: 9px;
-      padding-right: 20px;
-
-      a {
-        position: relative;
-        padding-right: 4px;
-      }
-    }
-
-    .settings {
-      align-items: center;
-
-      a.nav-link {
-        display: flex;
-        padding: 0;
-        cursor: pointer;
-
-        .reset-icon {
-          width: 24px;
-          height: 24px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          fill: #fafafa;
-        }
-
-        .spinner {
-          line-height: 24px;
-          vertical-align: middle;
-          height: 24px;
-          width: 24px;
-          min-height: 24px;
-          min-width: 24px;
-          z-index: var(--z-fixed);
-
-          &.spinner-paused {
-            animation-play-state: paused;
-            display: none;
-          }
-        }
-      }
-      .divider {
-        height: 40px;
-        display: flex;
-        flex: 0 0 auto;
-        width: 1px;
-        background: #fafafa;
-        opacity: 0.15;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="main-nav">
+    <header class="header header-7">
+      <div class="header-nav">
+        <div class="nav-link">
+          <button
+            id="inventory-menu-trigger"
+            data-id="inventory-menu-toggle-button"
+            class="inventory-menu-trigger"
+            @click="emits('toggle-main-menu')"
+          >
+            <span class="inventory-menu-link">
+              <span class="nav-icon">
+                <atoms-the-icon class="menu-icon" name="menu" />
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="branding">
+        <nuxt-link
+          id="header-shortcuts-link"
+          data-id="header-shortcuts-link"
+          to="/shortcuts"
+        >
+          <span class="title pointer"
+            >{{ props.companyName }}<sup><b>®</b></sup>
+            {{ props.projectName }}</span
+          >
+        </nuxt-link>
+      </div>
+      <form style="width: 100%; height: 100%" @click="onTemp">
+        <atoms-input-search />
+      </form>
+
+      <div class="settings header-actions">
+        <div class="divider" />
+        <a
+          id="global-refresh-button"
+          data-id="global-refresh-button"
+          class="nav-link tid-global-refresh-button"
+          @click="emits('global-refresh')"
+        >
+          <span class="nav-icon">
+            <atoms-the-icon
+              v-show="!props.globalRefreshLoading"
+              class="reset-icon"
+              name="reset"
+            />
+            <span
+              :class="[
+                'spinner spinner-inline spinner-inverse global-refresh-active',
+                { 'spinner-paused': !props.globalRefreshLoading },
+              ]"
+            ></span>
+          </span>
+        </a>
+        <div class="divider" />
+
+        <common-layout-the-header-user-menu
+          v-model:security="security"
+          v-model:is-show-notification="isShowNotification"
+          v-model:new-view-local="newViewLocal"
+          v-model:time-format="timeFormat"
+          v-model:console-value="consoleValue"
+          v-model:vm-in-hosts-clusters="vmInHostsClusters"
+          v-model:is-dark-theme="isDarkTheme"
+          :hostname="props.hostname"
+          :is-preference="props.isPreference"
+          :selected-language-type="props.selectedLanguageType"
+          :selected-language="props.selectedLang.value"
+          :new-view="props.newView"
+          :project="props.project"
+          :security-loader="props.securityLoader"
+          :recovery="props.recovery"
+          @show-preference="emits('show-preference')"
+          @hide-preference="emits('hide-preference')"
+          @update-language="onUpdateLanguage"
+          @update-is-browser="emits('update-is-browser', $event)"
+          @security-confirm="emits('security-confirm', $event)"
+          @submit-preferences="emits('submit-preferences')"
+        />
+
+        <div class="divider" />
+
+        <common-layout-the-header-feedback
+          :is-show-feedback="isShowFeedback"
+          @show="isShowFeedback = true"
+          @hide="isShowFeedback = false"
+        />
+
+        <div class="divider" />
+
+        <common-layout-the-header-help-menu :project-name="props.projectName" />
+
+        <div class="divider" />
+      </div>
+    </header>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
+import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
+
+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 isDarkTheme = defineModel<boolean>('isDarkTheme')
+
+const props = defineProps<{
+  companyName: string
+  betaText: string
+  globalRefreshLoading: boolean
+  project: UI_T_Project
+  projectName: string
+  hostname: string
+  isPreference: boolean
+  selectedLanguageType: string
+  selectedLang: UI_I_Dropdown
+  newView: boolean
+  securityLoader: boolean // для Сферы
+  recovery: UI_I_Recovery | null // для Сферы
+}>()
+
+const emits = defineEmits<{
+  (event: 'toggle-main-menu'): void
+  (event: 'global-refresh'): void
+  (event: 'show-preference'): void
+  (event: 'hide-preference'): void
+  (event: 'update-language', value: UI_I_Dropdown): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'security-confirm', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+
+const onUpdateLanguage = (language: string): void => {
+  const languageObj = findInLocals(language)
+  emits('update-language', languageObj)
+}
+
+const isShowFeedback = ref<boolean>(false)
+
+const onTemp = (): void => {
+  useLocalStorage('temp', true)
+}
+</script>
+
+<style scoped lang="scss">
+.main-nav {
+  position: relative;
+  left: 0;
+
+  header {
+    height: 62px;
+    align-items: center;
+    padding-left: 0;
+
+    .nav-link::before,
+    .nav-link::after {
+      display: none !important;
+    }
+
+    .inventory-menu-trigger {
+      padding: 0 0 0 60px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      position: relative;
+      outline: none;
+
+      .nav-icon {
+        padding: 0;
+        width: auto;
+        font-size: inherit;
+        display: flex;
+        align-items: center;
+        background: transparent;
+        border: none;
+
+        .menu-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: 24px;
+          width: 24px;
+          fill: #fafafa;
+          display: inline-block;
+          margin: 0;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .branding {
+      width: auto;
+      min-width: auto;
+      padding-left: 9px;
+      padding-right: 20px;
+
+      a {
+        position: relative;
+        padding-right: 4px;
+      }
+    }
+
+    .settings {
+      align-items: center;
+
+      a.nav-link {
+        display: flex;
+        padding: 0;
+        cursor: pointer;
+
+        .reset-icon {
+          width: 24px;
+          height: 24px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          fill: #fafafa;
+        }
+
+        .spinner {
+          line-height: 24px;
+          vertical-align: middle;
+          height: 24px;
+          width: 24px;
+          min-height: 24px;
+          min-width: 24px;
+          z-index: var(--z-fixed);
+
+          &.spinner-paused {
+            animation-play-state: paused;
+            display: none;
+          }
+        }
+      }
+      .divider {
+        height: 40px;
+        display: flex;
+        flex: 0 0 auto;
+        width: 1px;
+        background: #fafafa;
+        opacity: 0.15;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,156 +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"
-        :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>
+<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,196 +1,196 @@
-<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>
+<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/package.json

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