bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.auth.password }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="enable-password"
+            v-model="isEnabledPassword"
+            data-id="enable-password-input"
+            :disabled="props.disabled"
+            type="checkbox"
+            @change="setPasswordDisable"
+          />
+          <label for="enable-password" class="label-text-normal mr-1">{{
+            localization.common.enable
+          }}</label>
+
+          <atoms-tooltip-error :has-error="!!passwordErrorText">
+            <template #elem>
+              <input
+                id="password-input"
+                v-model="form.password.value"
+                data-id="password-input"
+                type="text"
+                :class="[{ 'has-error': !!passwordErrorText }]"
+                :disabled="!isEnabledPassword || props.disabled"
+                @input="changePassword"
+              />
+            </template>
+            <template #content>
+              {{ passwordErrorText }}
+            </template>
+          </atoms-tooltip-error>
+
+          <button
+            id="generate-password-button"
+            data-id="generate-password-button"
+            class="generate-password-btn btn btn-primary"
+            :disabled="!isEnabledPassword || props.disabled"
+            :title="localization.common.generatePassword"
+            @click="onGeneratePassword"
+          >
+            <atoms-the-icon name="lock" width="16px" height="16px" />
+          </button>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DefaultForm } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import { generatePassword } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/lib/utils'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  password: string
+  disabled: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:password', value: string): void
+  (event: 'valid', value: boolean): void
+}>()
+
+const { $validation } = useNuxtApp()
+const validation = $validation.call({})
+const defaultForm: UI_I_DefaultForm = {
+  password: {
+    value: props.password,
+    validations: [
+      { value: 'password', errorText: localization.value.common.changePasswordError },
+    ],
+  },
+}
+const form = ref<UI_I_DefaultForm>(useDeepCopy(defaultForm))
+const setForm = (): void => {
+  form.value = useDeepCopy(defaultForm)
+  validation.setForm(form)
+}
+setForm()
+
+const showValidationErrors = (): void => {
+  const valid = validation.touch()
+  passwordErrorText.value = !valid.isValid ? valid.errors.password[0] : ''
+  emits('valid', valid.isValid)
+}
+const removeValidationErrors = (): void => {
+  passwordErrorText.value = ''
+  emits('valid', true)
+}
+
+const setPasswordDisable = (): void => {
+  if (isEnabledPassword.value) {
+    return
+  }
+
+  removeValidationErrors()
+  setForm()
+  emits('update:password', '')
+}
+
+const passwordErrorText = ref<string>('')
+
+const changePassword = (event: UI_I_HTMLSelectElement): void => {
+  showValidationErrors()
+
+  emits('update:password', event.target.value)
+}
+
+const isEnabledPassword = ref<boolean>(false)
+
+const onGeneratePassword = (): void => {
+  const password = generatePassword()
+
+  form.value.password.value = password
+  emits('update:password', password)
+}
+</script>
+
+<style scoped>
+#enable-password {
+  margin: 4px 4px 0 0;
+}
+.has-error {
+  border: 1px solid #db2100;
+}
+.generate-password-btn {
+  min-width: unset;
+  margin: 0;
+  padding: 3px;
+  height: unset;
+  display: flex;
+}
+</style>

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/password/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+import type { UI_I_Validation } from '~/lib/models/plugins/validation/interfaces'
+
+export interface UI_I_DefaultForm {
+  password: UI_I_Validation
+}

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/password/lib/utils.ts

@@ -0,0 +1,12 @@
+export const generatePassword = (passwordLength = 12): string => {
+  const chars =
+    '0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+
+  let password = ''
+  for (let i = 0; i <= passwordLength; i++) {
+    const randomNumber = Math.floor(Math.random() * chars.length)
+    password += chars.substring(randomNumber, randomNumber + 1)
+  }
+
+  return password
+}

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/sharePolicy/SharePolicy.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.sharePolicy }}
+      </template>
+      <template #stackBlockContent>
+        <div class="select">
+          <select
+            id="share-policy-select"
+            v-model="sharePolicyLocal"
+            data-id="share-policy-select"
+          >
+            <option
+              v-for="(item, key) in sharePolicyOptions"
+              :key="key"
+              :value="item.value"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { sharePolicyOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/sharePolicy/lib/config/config'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  sharePolicy: string
+}>()
+const emits = defineEmits<{
+  (event: 'update:share-policy', value: string): void
+}>()
+
+const sharePolicyOptions = ref<UI_I_OptionItem[]>(
+  sharePolicyOptionsFunc(localization.value)
+)
+
+const sharePolicyLocal = computed<string>({
+  get() {
+    return props.sharePolicy
+  },
+  set(newValue) {
+    emits('update:share-policy', newValue)
+  },
+})
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/sharePolicy/lib/config/config.ts

@@ -0,0 +1,11 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const sharePolicyOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.common.allowExclusive, value: 'allow-exclusive' },
+    { text: localization.common.forceShared, value: 'force-shared' },
+  ]
+}

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/streamingMode/StreamingMode.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.streamingMode }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          selector="#vm-wizard-streaming-mode-field"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                id="vm-wizard-streaming-mode-field"
+                v-model="streamingModeLocal"
+                data-id="vm-wizard-streaming-mode-select"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in streamingModeOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>
+            {{ apiError }}
+          </template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { streamingModeOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/streamingMode/lib/config/config'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  streamingMode: string
+  errorValidationFields: UI_I_ErrorValidationField[]
+  disabled: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:streaming-mode', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const streamingModeOptions = ref<UI_I_OptionItem[]>(
+  streamingModeOptionsFunc(localization.value)
+)
+
+const streamingModeLocal = computed<string>({
+  get() {
+    return props.streamingMode
+  },
+  set(newValue) {
+    emits('update:streaming-mode', newValue)
+  },
+})
+
+const typeError = 'options.remote_console.spice.streaming_mode'
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/streamingMode/lib/config/config.ts

@@ -0,0 +1,12 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const streamingModeOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.common.all, value: 'all' },
+    { text: localization.common.off, value: 'off' },
+    { text: localization.common.filter, value: 'filter' },
+  ]
+}

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/type/Type.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.remoteConsoleType }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          selector="#vm-wizard-remote-console-type-field"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                id="vm-wizard-remote-console-type-field"
+                v-model="remoteConsoleTypeLocal"
+                data-id="vm-wizard-remote-console-type-select"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in remoteConsoleTypeOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>
+            {{ apiError }}
+          </template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { remoteConsoleTypeOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/type/lib/config/config'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  remoteConsoleType: string
+  errorValidationFields: UI_I_ErrorValidationField[]
+  disabled: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:remote-console-type', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const remoteConsoleTypeOptions = ref<UI_I_OptionItem[]>(
+  remoteConsoleTypeOptionsConfig
+)
+
+const remoteConsoleTypeLocal = computed<string>({
+  get() {
+    return props.remoteConsoleType
+  },
+  set(newValue) {
+    emits('update:remote-console-type', newValue)
+  },
+})
+
+const typeError = 'options.remote_console.type'
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/type/lib/config/config.ts

@@ -0,0 +1,7 @@
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const remoteConsoleTypeOptionsConfig: UI_I_OptionItem[] = [
+  { text: 'SPICE', value: 'spice' },
+  { text: 'VNC', value: 'vnc' },
+  { text: 'RDP', value: 'rdp' },
+]

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirection.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.usbRedirection }}
+      </template>
+      <template #stackBlockContent>
+        <div class="select">
+          <select
+            id="usb-redirection-select"
+            v-model="usbRedirectionLocal"
+            data-id="usb-redirection-select"
+            disabled
+          >
+            <option
+              v-for="(item, key) in usbRedirectionOptions"
+              :key="key"
+              :value="item.value"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { usbRedirectionOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/lib/config/config'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  usbRedirection: number
+}>()
+const emits = defineEmits<{
+  (event: 'update:usb-redirection', value: number): void
+}>()
+
+const usbRedirectionOptions = ref<UI_I_OptionItem[]>(
+  usbRedirectionOptionsConfig
+)
+
+const usbRedirectionLocal = computed<number>({
+  get() {
+    return props.usbRedirection
+  },
+  set(newValue) {
+    emits('update:usb-redirection', newValue)
+  },
+})
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/lib/config/config.ts

@@ -0,0 +1,14 @@
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const usbRedirectionOptionsConfig: UI_I_OptionItem[] = [
+  { text: '0', value: 0 },
+  { text: '1', value: 1 },
+  { text: '2', value: 2 },
+  { text: '3', value: 3 },
+  { text: '4', value: 4 },
+  { text: '5', value: 5 },
+  { text: '6', value: 6 },
+  { text: '7', value: 7 },
+  { text: '8', value: 8 },
+  { text: '9', value: 9 },
+]

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/zlibCompression/ZlibCompression.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.zlibCompression }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          selector="#vm-wizard-zlib-compression-field"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                id="vm-wizard-zlib-compression-field"
+                v-model="zlibCompressionLocal"
+                data-id="vm-wizard-zlib-compression-select"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in zlibCompressionOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>
+            {{ apiError }}
+          </template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { zlibCompressionOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/zlibCompression/lib/config/config'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  zlibCompression: string
+  errorValidationFields: UI_I_ErrorValidationField[]
+  disabled: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:zlib-compression', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const zlibCompressionOptions = ref<UI_I_OptionItem[]>(
+  zlibCompressionOptionsFunc(localization.value)
+)
+
+const zlibCompressionLocal = computed<string>({
+  get() {
+    return props.zlibCompression
+  },
+  set(newValue) {
+    emits('update:zlib-compression', newValue)
+  },
+})
+
+const typeError = 'options.remote_console.spice.zlib_glz_compression'
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/_customizeHardware/vmoptions/remoteConsoleOptions/zlibCompression/lib/config/config.ts

@@ -0,0 +1,12 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const zlibCompressionOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.common.auto, value: 'auto' },
+    { text: localization.common.always, value: 'always' },
+    { text: localization.common.never, value: 'never' },
+  ]
+}

package/components/common/vm/actions/common/_customizeHardware/vmoptions/tools/Tools.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="hardware-tools">
+    <atoms-stack-block :has-children="true" test-id="tools-stack-block">
+      <template #stackBlockKey>
+        <div
+          id="vm-wizard-toggle-block-tools"
+          data-id="vm-wizard-toggle-block-tools"
+          class="flex-align-center"
+        >
+          <span>{{ localization.common.tools }}</span>
+        </div>
+      </template>
+      <template #stackChildren>
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.common.toolsEnable }}
+          </template>
+          <template #stackBlockContent>
+            <input
+              id="tools-2"
+              v-model="tools"
+              data-id="tools-2-checkbox"
+              type="checkbox"
+            />
+            <label for="tools-2" class="label-text-normal">{{
+              localization.common.enable
+            }}</label>
+          </template>
+        </atoms-stack-block>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_SendDataTools } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    tools: boolean
+  }>(),
+  {
+    tools: true,
+  }
+)
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataTools): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tools = ref<boolean>(props.tools)
+
+watch(
+  tools,
+  () => {
+    emits('send-data', {
+      enabled: tools.value,
+      synchronized_time: tools.value,
+    })
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+#tools-1,
+#tools-2 {
+  margin: 0 4px 4px 0;
+}
+</style>