bfg-common 1.5.226 → 1.5.227

package/assets/localization/local_be.json

@@ -3141,5 +3141,13 @@
     "roleManagement": "Кіраванне ролямі",
     "selectRoleToViewItsDetails": "Выберыце ролю для прагляду яе дэталяў.",
     "roleUsage": "Выкарыстанне ролі"
+  },
+  "backup": {
+    "selectName": "Абярыце назву",
+    "specifyBackupStorageType": "Укажыце тып рэзервовага сховішча.",
+    "specifyBackupStorageName": "Укажыце назву рэзервовага сховішча.",
+    "specifyBackupStorageNameAndConfiguration": "Укажыце назву і канфігурацыю рэзервовага сховішча.",
+    "selectHostsThatRequireAccessBackupStorage": "Абярыце хосты, якім патрэбны доступ да рэзервовага сховішча.",
+    "selectDestinationStorageForBackupStorage": "Абярыце мэтавае сховішча для рэзервовага капіявання."
   }
 }

package/assets/localization/local_en.json

@@ -3145,5 +3145,13 @@
     "roleManagement": "Role Management",
     "selectRoleToViewItsDetails": "Select a role to view its details.",
     "roleUsage": "Role Usage"
+  },
+  "backup": {
+    "selectName": "Select a Name",
+    "specifyBackupStorageType": "Specify backup storage type.",
+    "specifyBackupStorageName": "Specify the backup storage name.",
+    "specifyBackupStorageNameAndConfiguration": "Specify the backup storage name and configuration.",
+    "selectHostsThatRequireAccessBackupStorage": "Select the hosts that require access to the backup storage.",
+    "selectDestinationStorageForBackupStorage": "Select the destination storage for the backup storage."
   }
 }

package/assets/localization/local_hy.json

@@ -3145,5 +3145,13 @@
     "roleManagement": "Դերի կառավարում",
     "selectRoleToViewItsDetails": "Ընտրեք դեր, դրա մանրամասները դիտելու համար:",
     "roleUsage": "Դերի օգտագործումը"
+  },
+  "backup": {
+    "selectName": "Ընտրեք անվանումը",
+    "specifyBackupStorageType": "Նշեք պահուստային պահպանման տիպը։",
+    "specifyBackupStorageName": "Նշեք պահուստային պահպանման անունը։",
+    "specifyBackupStorageNameAndConfiguration": "Նշեք պահուստային պահպանման անունը և կազմաձևերը։",
+    "selectHostsThatRequireAccessBackupStorage": "Ընտրեք հոսթեր, որոնք պետք է հասանելիություն ունենան պահուստային պահպանմանը։",
+    "selectDestinationStorageForBackupStorage": "Ընտրեք նպատակային պահեստը պահուստային պատճենների համար։"
   }
 }

package/assets/localization/local_kk.json

@@ -3144,5 +3144,13 @@
     "roleManagement": "Рөлдерді басқару",
     "selectRoleToViewItsDetails": "Оның мәліметтерін көру үшін рөлді таңдаңыз.",
     "roleUsage": "Рөлді пайдалану"
+  },
+  "backup": {
+    "selectName": "Атауын таңдаңыз",
+    "specifyBackupStorageType": "Резервтік сақтау түрін көрсетіңіз.",
+    "specifyBackupStorageName": "Резервтік сақтау атауын көрсетіңіз.",
+    "specifyBackupStorageNameAndConfiguration": "Резервтік сақтау атауы мен баптауларын көрсетіңіз.",
+    "selectHostsThatRequireAccessBackupStorage": "Резервтік сақтауға қолжетімділік қажет хосттарды таңдаңыз.",
+    "selectDestinationStorageForBackupStorage": "Резервтік сақтау үшін мақсатты сақтау орнын таңдаңыз."
   }
 }

package/assets/localization/local_ru.json

@@ -3144,5 +3144,13 @@
     "roleManagement": "Управление ролями",
     "selectRoleToViewItsDetails": "Выберите роль, чтобы просмотреть сведения о ней.",
     "roleUsage": "Использование ролей"
+  },
+  "backup": {
+    "selectName": "Выберите имя",
+    "specifyBackupStorageType": "Укажите тип хранилища для резервного копирования.",
+    "specifyBackupStorageName": "Укажите имя хранилища для резервного копирования.",
+    "specifyBackupStorageNameAndConfiguration": "Укажите имя и конфигурацию хранилища для резервного копирования.",
+    "selectHostsThatRequireAccessBackupStorage": "Выберите хосты, которым нужен доступ к хранилищу резервных копий.",
+    "selectDestinationStorageForBackupStorage": "Выберите целевое хранилище для резервного копирования."
   }
 }

package/assets/localization/local_zh.json

@@ -3142,5 +3142,13 @@
     "roleManagement": "角色管理",
     "selectRoleToViewItsDetails": "选择角色以查看其细节。",
     "roleUsage": "角色使用"
+  },
+  "backup": {
+    "selectName": "选择名称",
+    "specifyBackupStorageType": "指定备份存储类型。",
+    "specifyBackupStorageName": "指定备份存储名称。",
+    "specifyBackupStorageNameAndConfiguration": "指定备份存储名称和配置。",
+    "selectHostsThatRequireAccessBackupStorage": "选择需要访问备份存储的主机。",
+    "selectDestinationStorageForBackupStorage": "为备份存储选择目标存储。"
   }
 }

package/components/common/backup/storage/actions/add/Add.vue

@@ -34,7 +34,6 @@
 </template>
 
 <script setup lang="ts">
-import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storage/actions/add/lib/models/interfaces'
 import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
@@ -45,6 +44,8 @@ import type {
   UI_I_WizardStep,
 } from '~/components/atoms/wizard/lib/models/interfaces'
 import type { UI_T_DatastoreTypeCode } from '~/components/common/backup/storage/actions/add/lib/models/types'
+// TODO use from uikit
+import Wizard from "~/components/atoms/wizard/lib/utils/utils";
 import {
   stepsFunc,
   stepsSchemeInitial,
@@ -75,7 +76,7 @@ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const title = ref(localization.value.common.newDatastore)
+const title = ref(localization.value.common.newBackupStorage)
 
 const wizard: Wizard = new Wizard(
   stepsFunc(localization.value),

package/components/common/backup/storage/actions/add/Old.vue

@@ -23,6 +23,7 @@
           v-model="formModelLocal"
           :project="props.project"
           :messages-fields="selectedStep.fields"
+          :alert-messages="props.alertMessages[dynamicSteps.name]"
         />
 
         <common-backup-storage-actions-add-steps-name-and-configure
@@ -30,17 +31,27 @@
           v-model="formModelLocal"
           :project="props.project"
           :messages-fields="selectedStep.fields"
+          :alert-messages="props.alertMessages[dynamicSteps.nameAndConfigure]"
         />
 
-        <common-vm-actions-common-select-storage
-          v-if="selectedStep.id === dynamicSteps.storage"
-          :datastore="props.datastore"
-          :get-datastore-table-func="props.getDatastoreTableFunc"
-          hide-compatibility
-          hide-alert
-          class="storage-datatable h-full"
-          @change-storage="onChangeStorage"
-        />
+        <div v-if="selectedStep.id === dynamicSteps.storage">
+          <!--          TODO-->
+          <atoms-alert
+            v-show="props.alertMessages[dynamicSteps.storage]?.length"
+            test-id="configure-error-alert"
+            status="alert-danger"
+            :items="props.alertMessages[dynamicSteps.storage]"
+          />
+          <common-vm-actions-common-select-storage
+            :datastore="props.datastore"
+            :get-datastore-table-func="props.getDatastoreTableFunc"
+            hide-compatibility
+            hide-alert
+            class="storage-datatable h-full"
+            :alert-messages="props.alertMessages[dynamicSteps.storage]"
+            @change-storage="onChangeStorage"
+          />
+        </div>
 
         <common-backup-storage-actions-add-steps-host-accessibility
           v-if="selectedStep.id === dynamicSteps.hostAccessibility"
@@ -100,5 +111,4 @@ const onHideModal = (): void => emits('hide')
 const onCreateDatastore = (): void => emits('submit')
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

package/components/common/backup/storage/actions/add/lib/config/steps.ts

@@ -20,7 +20,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.type,
     title: localization.common.type,
-    subTitle: localization.common.specifyDatastoreType,
+    subTitle: localization.common.specifyBackupStorageType,
     status: UI_E_WIZARD_STATUS.SELECTED,
     fields: {},
     isValid: true,
@@ -28,8 +28,8 @@ export const stepsFunc = (
   },
   {
     id: dynamicSteps.name,
-    title: localization.common.name,
-    subTitle: localization.common.nameAndDeviceSelectionDesc,
+    title: localization.backup.selectName,
+    subTitle: localization.common.specifyBackupStorageName,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {
       name: {
@@ -43,7 +43,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.nameAndConfigure,
     title: localization.common.nameAndConfiguration,
-    subTitle: localization.common.nameAndConfigurationDesc,
+    subTitle: localization.backup.specifyBackupStorageNameAndConfiguration,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {
       name: {
@@ -73,7 +73,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.storage,
     title: localization.common.selectStorage,
-    subTitle: localization.common.selectStorageDesc,
+    subTitle: localization.backup.selectDestinationStorageForBackupStorage,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {
       storage: {
@@ -87,7 +87,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.hostAccessibility,
     title: localization.common.hostsAccessibility,
-    subTitle: localization.common.hostsAccessibilityDesc,
+    subTitle: localization.backup.selectHostsThatRequireAccessBackupStorage,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {
       hostsAccessibility: {

package/components/common/backup/storage/actions/add/steps/common/tooltipInfo/TooltipInfo.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tooltip-info">
+    <ui-icon
+      :id="`${props.id}-info-trigger`"
+      name="info"
+      width="16"
+      height="16"
+      :class="['tooltip-info__icon pointer', { active: isShowInfo }]"
+      @click.stop="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      top
+      left
+      width="272px"
+      :elem-id="`${props.id}-info-trigger`"
+    >
+      <div class="common-widget-info">
+        <div class="flex justify-between">
+          <div class="flex">
+            <ui-icon name="info-2" width="16px" height="16px" />
+            <span class="title"> {{ localization.common.information }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click.stop="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ props.description }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// TODO move to global
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  id: string
+  description: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.tooltip-info {
+  @include flex($align: center);
+  &__icon {
+    color: var(--form-icon-color);
+    &:hover {
+      color: var(--close-icon);
+    }
+    &.active {
+      color: var(--btn-primary-fill-bg-color);
+    }
+  }
+
+  .common-widget-info {
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+      white-space: pre-line;
+    }
+
+    svg {
+      color: var(--alert-icon);
+      min-width: 16px;
+    }
+  }
+}
+</style>

package/components/common/backup/storage/actions/add/steps/nameAndConfigure/NameAndConfigure.vue

@@ -1,41 +1,41 @@
-<template>
-  <common-backup-storage-actions-add-steps-name-and-configure-new
-    v-if="isNewView"
-    v-model="formModel"
-    v-model:alert-info="isShowAlertInfo"
-    :messages-fields="props.messagesFields"
-  />
-
-  <common-backup-storage-actions-add-steps-name-and-configure-old
-    v-else
-    v-model="formModel"
-    v-model:alert-info="isShowAlertInfo"
-    :alert-messages="props.alertMessages"
-    :messages-fields="props.messagesFields"
-    @hide-alert="(e) => emits('hide-alert', e)"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
-import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storage/actions/add/lib/models/interfaces'
-
-const formModel = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const props = defineProps<{
-  project: UI_T_Project
-  alertMessages: string[]
-  messagesFields: UI_I_WizardStep['fields']
-}>()
-const emits = defineEmits<{
-  (event: 'hide-alert', value: number): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const isShowAlertInfo = ref<boolean>(props.project === 'procurator')
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <common-backup-storage-actions-add-steps-name-and-configure-new
+    v-if="isNewView"
+    v-model="formModel"
+    v-model:alert-info="isShowAlertInfo"
+    :messages-fields="props.messagesFields"
+  />
+
+  <common-backup-storage-actions-add-steps-name-and-configure-old
+    v-else
+    v-model="formModel"
+    v-model:alert-info="isShowAlertInfo"
+    :alert-messages="props.alertMessages"
+    :messages-fields="props.messagesFields"
+    @hide-alert="(e) => emits('hide-alert', e)"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
+import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storage/actions/add/lib/models/interfaces'
+
+const formModel = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const props = defineProps<{
+  project: UI_T_Project
+  alertMessages: string[]
+  messagesFields: UI_I_WizardStep['fields']
+}>()
+const emits = defineEmits<{
+  (event: 'hide-alert', value: number): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const isShowAlertInfo = ref<boolean>(true)
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/backup/storage/actions/add/steps/nameAndConfigure/NameAndConfigureNew.vue

@@ -1,286 +1,294 @@
-<template>
-  <div class="basics-step">
-    <div class="basics-step-row">
-      <div class="basics-step-row-title">
-        <span class="basics-step-row-title-text">
-          {{ localization.common.name }}
-        </span>
-      </div>
-      <div class="basics-step-row-content">
-        <ui-input
-          id="configuration-name-input"
-          v-model="formModelLocal.name"
-          test-id="configuration-name-input"
-          is-focused
-          :placeholder="localization.common.name"
-          :error="nameErrorText"
-          @blur="initValidation(true, ['name'])"
-          @input="initValidation(false, ['name'])"
-        />
-      </div>
-    </div>
-
-    <div class="basics-step-line"></div>
-
-    <div class="basics-step-row">
-      <div class="basics-step-row-title">
-        <span class="basics-step-row-title-text">
-          {{ localization.common.folder }}
-        </span>
-        <common-backup-storage-actions-add-steps-common-tooltip-info
-          :id="'option.testId'"
-          :description="'Specify the folder path - for example, /vols/vol0/datastore-001'"
-        />
-      </div>
-      <div class="basics-step-row-content">
-        <ui-input
-          id="configuration-folder-input"
-          v-model="formModelLocal.folder"
-          test-id="configuration-folder-input"
-          placeholder="E.g: /vols/vol0/datastore-001"
-          :error="folderErrorText"
-          @blur="initValidation(true, ['folder'])"
-          @input="initValidation(false, ['folder'])"
-        />
-      </div>
-    </div>
-
-    <div class="basics-step-line"></div>
-
-    <div class="basics-step-row">
-      <div class="basics-step-row-title">
-        <span class="basics-step-row-title-text">
-          {{ localization.common.server }}
-        </span>
-        <common-backup-storage-actions-add-steps-common-tooltip-info
-          :id="'option.testIdserver'"
-          :description="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
-        />
-      </div>
-      <div class="basics-step-row-content">
-        <ui-input
-          id="configuration-server-input"
-          v-model="formModelLocal.server"
-          test-id="configuration-server-input"
-          placeholder="E.g: nas, nas.it.com or 192.168.0.1"
-          :error="serverErrorText"
-          @blur="initValidation(true, ['server'])"
-          @input="initValidation(false, ['server'])"
-        />
-      </div>
-    </div>
-
-    <div class="basics-step-line"></div>
-
-    <div class="basics-step-row">
-      <div class="basics-step-row-title">
-        <span class="basics-step-row-title-text">
-          {{ localization.auth.username }}
-        </span>
-      </div>
-      <div class="basics-step-row-content">
-        <ui-input
-          id="configuration-username-input"
-          v-model="formModelLocal.user"
-          test-id="configuration-username-input"
-          :placeholder="localization.auth.username"
-          :error="usernameErrorText"
-          @blur="initValidation(true, ['user'])"
-          @input="initValidation(false, ['user'])"
-        />
-      </div>
-    </div>
-
-    <div class="basics-step-line"></div>
-
-    <div class="basics-step-row">
-      <div class="basics-step-row-title">
-        <span class="basics-step-row-title-text">
-          {{ localization.auth.password }}
-        </span>
-      </div>
-      <div class="basics-step-row-content">
-        <ui-input
-          id="configuration-password-input"
-          v-model="formModelLocal.password"
-          type="password"
-          test-id="configuration-password-input"
-          :placeholder="localization.auth.password"
-          :error="passwordErrorText"
-          @blur="initValidation(true, ['password'])"
-          @input="initValidation(false, ['password'])"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
-import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storage/actions/add/lib/models/interfaces'
-import type {
-  UI_I_InitialValidationFields
-} from "~/components/common/backup/storage/actions/add/steps/nameAndConfigure/lib/models/interfaces";
-import type {
-  UI_T_InitialValidationFields
-} from "~/components/common/backup/storage/actions/add/steps/nameAndConfigure/lib/models/types";
-
-const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-// const isShowAlertInfo = defineModel<boolean>('alertInfo', { required: true })
-
-const props = defineProps<{
-  messagesFields: UI_I_WizardStep['fields']
-}>()
-const emits = defineEmits<{
-  (event: 'remove-errors'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const initValidationFields = ref<UI_I_InitialValidationFields>({
-  name: false,
-  folder: false,
-  server: false,
-  user: false,
-  password: false,
-})
-const initValidation = (onlyBlur = false, types: UI_T_InitialValidationFields[]): void => {
-  onlyBlur && types.forEach((type) => (initValidationFields.value[type] = true))
-}
-
-/* Validation error text for Name input field */
-const nameErrorText = computed<string>(() => {
-  if (props.messagesFields?.name?.field && !formModelLocal.value.name) {
-    return props.messagesFields.name.field
-  }
-
-  if (!initValidationFields.value.name) return ''
-  return !formModelLocal.value.name
-    ? localization.value.common.fieldRequired
-    : ''
-})
-
-/* Validation error text for Folder input field */
-const folderErrorText = computed<string>(() => {
-  if (props.messagesFields.folder?.field && !formModelLocal.value.folder) {
-    return props.messagesFields.folder.field
-  }
-
-  if (!initValidationFields.value.folder) return ''
-  return !formModelLocal.value.folder
-    ? localization.value.common.fieldRequired
-    : ''
-})
-
-/* Validation error text for Server input field */
-const serverErrorText = computed<string>(() => {
-  if (props.messagesFields.server?.field && !formModelLocal.value.server) {
-    return props.messagesFields.server.field
-  }
-
-  if (!initValidationFields.value.server) return ''
-  return !formModelLocal.value.server
-    ? localization.value.common.fieldRequired
-    : ''
-})
-
-/* Validation error text for Username input field */
-const usernameErrorText = computed<string>(() => {
-  if (props.messagesFields.user?.field && !formModelLocal.value.user) {
-    return props.messagesFields.user.field
-  }
-
-  if (!initValidationFields.value.user) return ''
-  return !formModelLocal.value.user
-    ? localization.value.common.fieldRequired
-    : ''
-})
-
-/* Validation error text for Password input field */
-const passwordErrorText = computed<string>(() => {
-  if (props.messagesFields.password?.field && !formModelLocal.value.password) {
-    return props.messagesFields.password.field
-  }
-
-  if (!initValidationFields.value.password) return ''
-  return !formModelLocal.value.password
-    ? localization.value.common.fieldRequired
-    : ''
-})
-</script>
-
-<style scoped lang="scss">
-.basics-step {
-  padding: 16px 0 16px;
-
-  &-row {
-    min-height: 36px;
-    width: 100%;
-    display: flex;
-    column-gap: 16px;
-    align-items: center;
-
-    &-title {
-      padding-top: 8px;
-      max-width: 240px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      column-gap: 8px;
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      letter-spacing: 0;
-      vertical-align: middle;
-      align-self: flex-start;
-      color: var(--wizard-content-title);
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-
-      &-text {
-        display: block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-
-    &-content {
-      max-width: 480px;
-      width: 100%;
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      letter-spacing: 0;
-      vertical-align: middle;
-      color: var(--wizard-content-value);
-
-      &-text {
-        display: flex;
-        column-gap: 8px;
-        align-items: center;
-
-        &-icon {
-          width: 20px;
-          min-width: 20px;
-          height: 20px;
-          min-height: 20px;
-        }
-      }
-
-      &-switch-container {
-        width: fit-content;
-      }
-    }
-  }
-
-  &-line {
-    height: 0;
-    width: 100%;
-    border-bottom: 1px solid var(--wizard-content-line);
-    margin: 16px 0;
-  }
-}
-</style>
+<template>
+  <div class="basics-step">
+    <ui-alert
+      v-show="isShowAlertInfo"
+      test-id="configure-information-alert"
+      :messages="[localization.common.nameAndConfigurationAlertInfo]"
+      type="info"
+      class="mb-4"
+      @remove="isShowAlertInfo = false"
+    />
+
+    <div class="basics-step-row">
+      <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.common.name }}
+        </span>
+      </div>
+      <div class="basics-step-row-content">
+        <ui-input
+          id="configuration-name-input"
+          v-model="formModelLocal.name"
+          test-id="configuration-name-input"
+          is-focused
+          :placeholder="localization.common.name"
+          :error="nameErrorText"
+          @blur="initValidation(true, ['name'])"
+          @input="initValidation(false, ['name'])"
+        />
+      </div>
+    </div>
+
+    <div class="basics-step-line"></div>
+
+    <div class="basics-step-row">
+      <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.common.folder }}
+        </span>
+        <common-backup-storage-actions-add-steps-common-tooltip-info
+          :id="'option.testId'"
+          :description="'Specify the folder path - for example, /vols/vol0/datastore-001'"
+        />
+      </div>
+      <div class="basics-step-row-content">
+        <ui-input
+          id="configuration-folder-input"
+          v-model="formModelLocal.folder"
+          test-id="configuration-folder-input"
+          placeholder="E.g: /vols/vol0/datastore-001"
+          :error="folderErrorText"
+          @blur="initValidation(true, ['folder'])"
+          @input="initValidation(false, ['folder'])"
+        />
+      </div>
+    </div>
+
+    <div class="basics-step-line"></div>
+
+    <div class="basics-step-row">
+      <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.common.server }}
+        </span>
+        <common-backup-storage-actions-add-steps-common-tooltip-info
+          :id="'option.testIdserver'"
+          :description="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
+        />
+      </div>
+      <div class="basics-step-row-content">
+        <ui-input
+          id="configuration-server-input"
+          v-model="formModelLocal.server"
+          test-id="configuration-server-input"
+          placeholder="E.g: nas, nas.it.com or 192.168.0.1"
+          :error="serverErrorText"
+          @blur="initValidation(true, ['server'])"
+          @input="initValidation(false, ['server'])"
+        />
+      </div>
+    </div>
+
+    <div class="basics-step-line"></div>
+
+    <div class="basics-step-row">
+      <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.auth.username }}
+        </span>
+      </div>
+      <div class="basics-step-row-content">
+        <ui-input
+          id="configuration-username-input"
+          v-model="formModelLocal.user"
+          test-id="configuration-username-input"
+          :placeholder="localization.auth.username"
+          :error="usernameErrorText"
+          @blur="initValidation(true, ['user'])"
+          @input="initValidation(false, ['user'])"
+        />
+      </div>
+    </div>
+
+    <div class="basics-step-line"></div>
+
+    <div class="basics-step-row">
+      <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.auth.password }}
+        </span>
+      </div>
+      <div class="basics-step-row-content">
+        <ui-input
+          id="configuration-password-input"
+          v-model="formModelLocal.password"
+          type="password"
+          test-id="configuration-password-input"
+          :placeholder="localization.auth.password"
+          :error="passwordErrorText"
+          @blur="initValidation(true, ['password'])"
+          @input="initValidation(false, ['password'])"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
+import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storage/actions/add/lib/models/interfaces'
+import type { UI_I_InitialValidationFields } from '~/components/common/backup/storage/actions/add/steps/nameAndConfigure/lib/models/interfaces'
+import type { UI_T_InitialValidationFields } from '~/components/common/backup/storage/actions/add/steps/nameAndConfigure/lib/models/types'
+
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const isShowAlertInfo = defineModel<boolean>('alertInfo', { required: true })
+
+const props = defineProps<{
+  messagesFields: UI_I_WizardStep['fields']
+}>()
+const emits = defineEmits<{
+  (event: 'remove-errors'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const initValidationFields = ref<UI_I_InitialValidationFields>({
+  name: false,
+  folder: false,
+  server: false,
+  user: false,
+  password: false,
+})
+const initValidation = (
+  onlyBlur = false,
+  types: UI_T_InitialValidationFields[]
+): void => {
+  onlyBlur && types.forEach((type) => (initValidationFields.value[type] = true))
+}
+
+/* Validation error text for Name input field */
+const nameErrorText = computed<string>(() => {
+  if (props.messagesFields?.name?.field && !formModelLocal.value.name) {
+    return props.messagesFields.name.field
+  }
+
+  if (!initValidationFields.value.name) return ''
+  return !formModelLocal.value.name
+    ? localization.value.common.fieldRequired
+    : ''
+})
+
+/* Validation error text for Folder input field */
+const folderErrorText = computed<string>(() => {
+  if (props.messagesFields.folder?.field && !formModelLocal.value.folder) {
+    return props.messagesFields.folder.field
+  }
+
+  if (!initValidationFields.value.folder) return ''
+  return !formModelLocal.value.folder
+    ? localization.value.common.fieldRequired
+    : ''
+})
+
+/* Validation error text for Server input field */
+const serverErrorText = computed<string>(() => {
+  if (props.messagesFields.server?.field && !formModelLocal.value.server) {
+    return props.messagesFields.server.field
+  }
+
+  if (!initValidationFields.value.server) return ''
+  return !formModelLocal.value.server
+    ? localization.value.common.fieldRequired
+    : ''
+})
+
+/* Validation error text for Username input field */
+const usernameErrorText = computed<string>(() => {
+  if (props.messagesFields.user?.field && !formModelLocal.value.user) {
+    return props.messagesFields.user.field
+  }
+
+  if (!initValidationFields.value.user) return ''
+  return !formModelLocal.value.user
+    ? localization.value.common.fieldRequired
+    : ''
+})
+
+/* Validation error text for Password input field */
+const passwordErrorText = computed<string>(() => {
+  if (props.messagesFields.password?.field && !formModelLocal.value.password) {
+    return props.messagesFields.password.field
+  }
+
+  if (!initValidationFields.value.password) return ''
+  return !formModelLocal.value.password
+    ? localization.value.common.fieldRequired
+    : ''
+})
+</script>
+
+<style scoped lang="scss">
+.basics-step {
+  padding: 16px 0 16px;
+
+  &-row {
+    min-height: 36px;
+    width: 100%;
+    display: flex;
+    column-gap: 16px;
+    align-items: center;
+
+    &-title {
+      padding-top: 8px;
+      max-width: 240px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+      align-self: flex-start;
+      color: var(--wizard-content-title);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &-text {
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+
+    &-content {
+      max-width: 480px;
+      width: 100%;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+      color: var(--wizard-content-value);
+
+      &-text {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        &-icon {
+          width: 20px;
+          min-width: 20px;
+          height: 20px;
+          min-height: 20px;
+        }
+      }
+
+      &-switch-container {
+        width: fit-content;
+      }
+    }
+  }
+
+  &-line {
+    height: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--wizard-content-line);
+    margin: 16px 0;
+  }
+}
+</style>

package/lib/models/interfaces.ts

@@ -48,6 +48,7 @@ export interface UI_I_Localization {
   adapter: UI_I_ArbitraryObject<string>
   bottomPanel: UI_I_ArbitraryObject<string>
   role: UI_I_ArbitraryObject<string>
+  backup: UI_I_ArbitraryObject<string>
 }
 export interface UI_I_SendTaskParams {
   method: string

package/package.json

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