bfg-common 1.3.467 → 1.3.468

package/components/common/layout/theHeader/userMenu/modals/changePassword/ChangePassword.vue

@@ -0,0 +1,210 @@
+<template>
+  <atoms-modal
+    width="580px"
+    test-id="change-password"
+    :show="props.show"
+    :title="localization.changePassword"
+    :second-title="props.hostname"
+    :disabled-submit="buttonDisabled"
+    @hide="onHideModal"
+    @submit="onChangePassword"
+  >
+    <template #modalBody>
+      <form id="change-password-form" class="compact" @submit.prevent>
+        <section class="form-block">
+          <div class="form-group">
+            <label for="current-password-field"
+              >{{ localization.currentPassword }}:</label
+            >
+            <input
+              id="current-password-field"
+              v-model="form.password.value"
+              data-id="change-password-input"
+              type="password"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="new-password-field"
+              >{{ localization.newPassword }}:</label
+            >
+
+            <div class="form-group__input">
+              <atoms-tooltip-error
+                :has-error="isValid"
+                selector="#new-password-field"
+              >
+                <template #elem>
+                  <input
+                    id="new-password-field"
+                    v-model="form.newPassword.value"
+                    data-id="new-password-input"
+                    type="password"
+                  />
+                </template>
+                <template #content>{{ errorText }}</template>
+              </atoms-tooltip-error>
+              <atoms-the-icon
+                v-show="isValid"
+                class="is-error tooltip-trigger"
+                name="info"
+              />
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="confirm-password-field"
+              >{{ localization.confirmPassword }}:</label
+            >
+
+            <div class="form-group__input">
+              <atoms-tooltip-error
+                :has-error="isValid"
+                selector="#confirm-password-field"
+              >
+                <template #elem>
+                  <input
+                    id="confirm-password-field"
+                    v-model="form.confirmPassword.value"
+                    data-id="confirm-password-input"
+                    type="password"
+                  />
+                </template>
+                <template #content>{{ errorText }}</template>
+              </atoms-tooltip-error>
+              <atoms-the-icon
+                v-show="isValid"
+                class="is-error tooltip-trigger"
+                name="info"
+              />
+            </div>
+          </div>
+        </section>
+      </form>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { API_UI_I_Error } from '~/lib/models/store/interfaces'
+import type {
+  UI_I_ChangePasswordBodyRequest,
+  UI_I_FormChangePassword,
+} from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { defaultFormFunc } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/config/form'
+
+const props = defineProps<{
+  show: boolean
+  hostname: string
+  project: UI_T_Project
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store, $validation }: any = useNuxtApp()
+const validation = $validation.call({})
+
+const isValid = ref<boolean>(false)
+const errorText = ref<string>('')
+const form = ref<UI_I_FormChangePassword>(
+  useDeepCopy(defaultFormFunc(localization.value))
+)
+
+const setForm = (): void => {
+  form.value = useDeepCopy(defaultFormFunc(localization.value))
+  validation.setForm(form)
+}
+setForm()
+
+const buttonDisabled = computed<boolean>(() => {
+  const { password, confirmPassword, newPassword } = form.value
+  return (
+    password.value &&
+    confirmPassword.value &&
+    newPassword.value !== confirmPassword.value
+  )
+})
+
+const onChangePassword = async (): Promise<void> => {
+  const valid = validation.touch()
+  const { newPassword, password } = form.value
+
+  if (newPassword.value === password.value) {
+    showValidationErrors(localization.value.newPasswordMustDifferentOld)
+    return
+  }
+  if (!valid.isValid) {
+    showValidationErrors(valid.errors.confirmPassword[0])
+    return
+  }
+
+  onHideModal()
+
+  const sendData: UI_I_ChangePasswordBodyRequest = {
+    current_password: password.value,
+    new_password: newPassword.value,
+  }
+
+  let url = ''
+  if (props.project === 'sphere') {
+    const { id } = useLocalStorage('userData')
+
+    url = `ui/users/${id}/passwd`
+  } else if (props.project === 'procurator') {
+    url = '/ui/passwd'
+  }
+
+  const { error } = await useMyFetch<never, API_UI_I_Error>(url, {
+    method: 'POST',
+    body: sendData,
+    key: Date.now().toString(),
+  })
+
+  if (error.value?.data && error.value.data.error_code !== 0) {
+    $store.dispatch('main/A_SHOW_NOTIFICATION', {
+      status: 'error',
+      headline: localization.value.operationFailed,
+      messages: [
+        {
+          title: 'Error',
+          descriptions: [error.value.data.error_message],
+        },
+      ],
+    })
+  }
+}
+
+const showValidationErrors = (text: string): void => {
+  isValid.value = true
+  errorText.value = text
+}
+
+const onHideModal = (): void => {
+  emits('hide')
+  setForm()
+  isValid.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.form-block {
+  .form-group {
+    &:not(:first-child) input {
+      width: 100%;
+    }
+    &__input {
+      display: flex;
+      width: 100%;
+    }
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/changePassword/lib/config/form.ts

@@ -0,0 +1,31 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_FormChangePassword } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
+
+export const defaultFormFunc = (
+  localization: UI_I_Localization
+): UI_I_FormChangePassword => {
+  return {
+    password: {
+      value: '',
+      validations: [],
+    },
+    newPassword: {
+      value: '',
+      validations: [
+        {
+          value: 'password',
+          errorText: localization.changePasswordError,
+        },
+      ],
+    },
+    confirmPassword: {
+      value: '',
+      validations: [
+        {
+          value: 'password',
+          errorText: localization.changePasswordError,
+        },
+      ],
+    },
+  }
+}

package/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces.ts

@@ -0,0 +1,12 @@
+import type { UI_I_Validation } from '~/lib/models/plugins/validation/interfaces'
+
+export interface UI_I_FormChangePassword {
+  password: UI_I_Validation
+  newPassword: UI_I_Validation
+  confirmPassword: UI_I_Validation
+}
+
+export interface UI_I_ChangePasswordBodyRequest {
+  current_password: string
+  new_password: string
+}

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

@@ -0,0 +1,43 @@
+<template>
+  <form id="inventor-form">
+    <div class="description">
+      {{ localization.inventoryDesc }}
+    </div>
+
+    <div class="clr-checkbox-wrapper">
+      <input
+        id="show-vms-in-hosts-and-clusters"
+        v-model="vmInHostsClusters"
+        data-id="user-preferences-inventory-show-vms-checkbox"
+        type="checkbox"
+        name="showVmsInHostsAndClusters"
+        @change="onHandlerChange"
+      />
+
+      <label for="show-vms-in-hosts-and-clusters" tabindex="-1">{{
+        localization.virtualMachinesLabel
+      }}</label>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  vmCluster: boolean
+}>()
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const vmInHostsClusters = ref<boolean>(props.vmCluster)
+
+const onHandlerChange = (): void => {
+  $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', {
+    vm_in_hosts_clusters: vmInHostsClusters.value,
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,119 @@
+<template>
+  <atoms-modal
+    show
+    test-id="user-preferences-modal"
+    width="580px"
+    height="345px"
+    :title="localization.preferences"
+    @hide="onHide"
+  >
+    <template #modalBody>
+      <atoms-nav-bar
+        v-model="selectedTab"
+        test-id="user-preferences-nav-bar"
+        :items="tabsItems"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-time-format
+        v-if="selectedTab === 'time-tab'"
+        :time-format="props.timeFormat"
+        @update="emits('update-time-format', $event)"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-change-language
+        v-if="selectedTab === 'language-tab'"
+        :selected-type="props.selectedLanguageType"
+        :selected-language="props.selectedLanguage"
+        :project="props.project"
+        @update-language-type="emits('update-language-type', $event)"
+        @update="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"
+        :vm-cluster="props.user.ui_options.vm_in_hosts_clusters"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-default-console
+        v-if="selectedTab === 'console-tab' && isSphere"
+        :remote-console="props.user.ui_options.remote_console"
+        :project="props.project"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-view
+        v-if="selectedTab === 'view-tab'"
+        :project="props.project"
+        :is-new-view="props.newView"
+        @update="emits('update-is-new-view', $event)"
+      />
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="user-preferences-cancel-button"
+        data-id="user-preferences-cancel-button"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.cancel }}
+      </button>
+      <button
+        id="user-preferences-apply-button"
+        data-id="user-preferences-apply-button"
+        class="btn btn-primary"
+        @click="emits('submit')"
+      >
+        {{ localization.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_I_User } 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'
+import { preferencesTabs } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs'
+
+const props = defineProps<{
+  project: UI_T_Project
+  timeFormat: UI_T_TimeValue
+  selectedLanguage: UI_T_LangValue
+  selectedLanguageType: UI_T_LangValue
+  newView: boolean
+  user?: UI_I_User
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language-type', value: string): void
+  (event: 'update-language', value: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+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 onHide = (): void => {
+  emits('hide')
+
+  if (props.project === 'sphere') {
+    selectedTab.value = 'time-tab'
+    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', { clear: true })
+  }
+}
+</script>

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

@@ -0,0 +1,113 @@
+<template>
+  <form id="view-form" class="compact">
+    <div class="description">
+      {{ description }}
+    </div>
+
+    <div class="flex-align-center">
+      <label for="view">{{ localization.newView }}</label>
+      <input
+        id="view"
+        v-model="isNewViewLocal"
+        type="checkbox"
+        class="switch"
+        @change="onChange"
+      />
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isNewView: boolean
+}>()
+
+const isNewViewLocal = ref<boolean>(props.isNewView)
+
+const emits = defineEmits<{
+  (event: 'update', value: boolean): void
+}>()
+
+const config = useRuntimeConfig()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const description = computed<string>(() => {
+  return localization.value.viewDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+})
+
+const onChange = (): void => {
+  emits('update', isNewViewLocal.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin-bottom: 10px;
+}
+
+label {
+  margin-right: 6px;
+}
+
+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;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/ChangeLanguage.vue

@@ -0,0 +1,148 @@
+<template>
+  <form
+    id="change-language-form"
+    class="compact change-default-console ng-valid ng-dirty ng-touched"
+  >
+    <div class="description">
+      {{ description }}
+    </div>
+
+    <div v-for="(item, key) in radioOptions" :key="key" class="radio">
+      <input
+        :id="item.label"
+        v-model="languageMode"
+        :data-id="item.testId"
+        type="radio"
+        :value="item.value"
+        @change="onChange"
+      />
+      <label :for="item.label"> {{ item.label }} </label>
+
+      <span v-if="item.selectLang" class="select select-lang">
+        <select
+          id="language-select"
+          v-model="selectedLanguageLocal"
+          :disabled="languageMode !== item.value"
+          data-id="language-select"
+          class="ng-touched ng-dirty ng-valid"
+          @change="onSelectLang"
+        >
+          <option
+            v-for="(item2, key2) in langOptions"
+            :key="key2"
+            :value="item2.value"
+          >
+            {{ item2.text }}
+          </option>
+        </select>
+      </span>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
+import type { UI_T_SelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_LanguageItem,
+  UI_I_RadioItemLang,
+} from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces'
+import { UI_E_DetectSelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/enums'
+import { langConfig } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/lang'
+import { radioOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/radioOptions'
+import { defineBrowserLangFunc } from '~/components/common/layout/theHeader/lib/utils/localization'
+
+const props = defineProps<{
+  selectedType: UI_T_LangValue
+  selectedLanguage: UI_T_LangValue
+  project: UI_T_Project
+}>()
+
+const emits = defineEmits<{
+  (event: 'update', value: string): void
+  (event: 'update-language-type', value: UI_T_SelectedRadio): void
+  (event: 'update-is-browser', value: string): void
+}>()
+
+const config = useRuntimeConfig()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const description = computed<string>(() => {
+  return localization.value.languageDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+})
+
+const languageMode = ref<UI_T_SelectedRadio>(
+  UI_E_DetectSelectedRadio[props.selectedType]
+)
+const radioOptions = readonly<UI_I_RadioItemLang[]>(
+  radioOptionsFunc(localization.value)
+)
+
+const langOptions = ref<UI_I_LanguageItem[]>(langConfig)
+
+const selectedLanguageLocal = ref<string>(props.selectedLanguage)
+
+const setPreferenceLang = (language: string): void => {
+  let browserLang = language
+
+  language === 'BROWSER' && (browserLang = defineBrowserLangFunc())
+
+  if (props.project === 'sphere') {
+    const { $store }: any = useNuxtApp()
+
+    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', {
+      language: browserLang,
+    })
+  } else if (props.project === 'procurator') {
+    emits('update', browserLang)
+  }
+}
+
+const onSelectLang = (): void => {
+  selectedLanguageLocal.value && setPreferenceLang(selectedLanguageLocal.value)
+}
+
+const onChange = (): void => {
+  const lang =
+    languageMode.value === 'LANG'
+      ? selectedLanguageLocal.value
+      : languageMode.value
+
+  lang && setPreferenceLang(lang)
+
+  props.project === 'sphere' &&
+    emits('update-language-type', languageMode.value)
+}
+
+const updateIsBrowser = (value: string): void => {
+  emits('update-is-browser', value)
+}
+
+watch(
+  languageMode,
+  (newValue) => {
+    newValue && updateIsBrowser(newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.radio {
+  margin-bottom: 5px;
+  &:nth-child(2) {
+    margin-top: 10px;
+  }
+}
+.select-lang {
+  margin-left: 3px;
+  height: 24px;
+  & > select {
+    height: 100%;
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/lang.ts

@@ -0,0 +1,10 @@
+import type { UI_I_LanguageItem } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces'
+
+export const langConfig: UI_I_LanguageItem[] = [
+  { text: 'Русский', value: 'ru_RU', lang: 'ru_RU' },
+  { text: 'English', value: 'en_US', lang: 'en_US' },
+  { text: 'Հայերեն', value: 'hy_AM', lang: 'hy_AM' },
+  { text: '简体中文', value: 'zh_CHS', lang: 'zh_CHS' },
+  { text: 'Қазақ', value: 'kk_KZ', lang: 'kk_KZ' },
+  { text: 'Беларускі', value: 'be_BY', lang: 'be_BY' },
+]