adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/modals/id/IdOtpInput.vue

@@ -1,156 +1,156 @@
-<script lang="ts" setup>
-const emit = defineEmits<{
-  (e: 'onCompleted', value: string): void
-}>()
-
-const length = 6 // Длина OTP
-const showError = defineModel('error')
-const otp = defineModel()
-const otpRefs = ref([])
-const { t } = useI18n()
-
-function checkCompletion() {
-  if (otp.value.every(val => val !== '')) {
-    emit('onCompleted', otp.value.join(''))
-  }
-}
-
-function onInput(event, index) {
-  const value = event.target.value
-  showError.value = false
-
-  // Разрешить только цифры
-  if (/\D/.test(value)) {
-    otp.value[index] = ''
-    return
-  }
-
-  otp.value[index] = value
-  checkCompletion()
-
-  // Перемещаем фокус на следующий элемент, если введен символ
-  if (value && index < length - 1) {
-    // setTimeout(() => otpRefs.value[index + 1]?.focus(), 0)
-    otpRefs.value[index + 1]?.focus()
-  }
-}
-
-function onBackspace(index, event) {
-  showError.value = false
-  if (otp.value[index] || index > 0) {
-    if (otp.value[index] !== '') {
-      otp.value[index] = ''
-      return
-    }
-    otp.value[index] = ''
-    if (index > 0) {
-      otp.value[index - 1] = ''
-      setTimeout(() => {
-        const prevInput = otpRefs.value[index - 1]
-        prevInput?.focus()
-        prevInput?.setSelectionRange(0, 1)
-      }, 0)
-    }
-    event.preventDefault()
-  }
-}
-
-function onPaste(event) {
-  showError.value = false
-  const pastedData = event.clipboardData.getData('text').slice(0, length)
-
-  if (/\D/.test(pastedData)) {
-    event.preventDefault()
-    return
-  }
-
-  // Заполняем ячейки значениями из буфера обмена
-  pastedData.split('').forEach((char, index) => {
-    if (index < length) {
-      otp.value[index] = char
-    }
-  })
-  checkCompletion()
-
-  // Ставим фокус на следующий незаполненный элемент
-  const firstEmptyIndex = otp.value.findIndex(val => val === '')
-  if (firstEmptyIndex !== -1) {
-    otpRefs.value[firstEmptyIndex]?.focus()
-  }
-  else {
-    otpRefs.value[length - 1]?.focus()
-  }
-
-  event.preventDefault()
-}
-
-// Фокус на первый пустой инпут при фокусе если все пустые
-function autoTarget() {
-  for (let i = 0; i < length; i++) {
-    if (otp.value[i].length) {
-      return
-    }
-  }
-  otpRefs.value[0]?.focus()
-}
-
-// макс сайз = 1 и если в ячейке есть цифра, она перезаписывается
-function inputValid(index: number, event: InputEvent) {
-  if (otp.value[index]) {
-    event.target.value = ''
-  }
-}
-
-function moveFocus(index: number, to: string) {
-  if (to === 'left') {
-    if (index > 0) {
-      otpRefs.value[index - 1]?.focus()
-    }
-  }
-  else if (to === 'right') {
-    if (index < length - 1) {
-      otpRefs.value[index + 1]?.focus()
-    }
-  }
-}
-</script>
-
-<template>
-  <div>
-    <div class="mb-1 flex gap-2">
-      <input
-        v-for="(digit, index) in otp"
-        :key="index"
-        :ref="el => otpRefs[index] = el"
-        v-model="otp[index]"
-        type="text"
-        inputmode="numeric"
-        maxlength="1"
-        class="size-10 rounded bg-muted text-center text-lg caret-transparent focus:outline-hidden"
-        :class="{
-          'border border-danger bg-danger/10': showError,
-          'focus:border focus:border-focus': !showError,
-        }"
-        @input="onInput($event, index)"
-        @keydown.backspace="onBackspace(index, $event)"
-        @keydown.enter.prevent
-        @paste="onPaste"
-        @keydown.left="moveFocus(index, 'left')"
-        @keydown.right="moveFocus(index, 'right')"
-        @focus="autoTarget"
-        @beforeinput="inputValid(index, $event)"
-      >
-    </div>
-    <a-alert
-      v-show="showError"
-      color="red"
-      size="sm"
-      icon-type="triangle"
-    >
-      {{ t('error.otp') }}
-    </a-alert>
-  </div>
-</template>
-
-<style scoped>
-</style>
+<script lang="ts" setup>
+const emit = defineEmits<{
+  (e: 'onCompleted', value: string): void
+}>()
+
+const length = 6 // Длина OTP
+const showError = defineModel<boolean>('error', { default: false })
+const otp = defineModel<string[]>({ required: true })
+const otpRefs = ref<(HTMLInputElement | null)[]>([])
+const { t } = useI18n()
+
+function checkCompletion() {
+  if (otp.value.every(val => val !== '')) {
+    emit('onCompleted', otp.value.join(''))
+  }
+}
+
+function onInput(event: Event, index: number) {
+  const value = (event.target as HTMLInputElement).value
+  showError.value = false
+
+  // Разрешить только цифры
+  if (/\D/.test(value)) {
+    otp.value[index] = ''
+    return
+  }
+
+  otp.value[index] = value
+  checkCompletion()
+
+  // Перемещаем фокус на следующий элемент, если введен символ
+  if (value && index < length - 1) {
+    // setTimeout(() => otpRefs.value[index + 1]?.focus(), 0)
+    otpRefs.value[index + 1]?.focus()
+  }
+}
+
+function onBackspace(index: number, event: KeyboardEvent) {
+  showError.value = false
+  if (otp.value[index] || index > 0) {
+    if (otp.value[index] !== '') {
+      otp.value[index] = ''
+      return
+    }
+    otp.value[index] = ''
+    if (index > 0) {
+      otp.value[index - 1] = ''
+      setTimeout(() => {
+        const prevInput = otpRefs.value[index - 1]
+        prevInput?.focus()
+        prevInput?.setSelectionRange(0, 1)
+      }, 0)
+    }
+    event.preventDefault()
+  }
+}
+
+function onPaste(event: ClipboardEvent) {
+  showError.value = false
+  const pastedData = (event.clipboardData?.getData('text') ?? '').slice(0, length)
+
+  if (/\D/.test(pastedData)) {
+    event.preventDefault()
+    return
+  }
+
+  // Заполняем ячейки значениями из буфера обмена
+  pastedData.split('').forEach((char, index) => {
+    if (index < length) {
+      otp.value[index] = char
+    }
+  })
+  checkCompletion()
+
+  // Ставим фокус на следующий незаполненный элемент
+  const firstEmptyIndex = otp.value.findIndex(val => val === '')
+  if (firstEmptyIndex !== -1) {
+    otpRefs.value[firstEmptyIndex]?.focus()
+  }
+  else {
+    otpRefs.value[length - 1]?.focus()
+  }
+
+  event.preventDefault()
+}
+
+// Фокус на первый пустой инпут при фокусе если все пустые
+function autoTarget() {
+  for (let i = 0; i < length; i++) {
+    if (otp.value[i].length) {
+      return
+    }
+  }
+  otpRefs.value[0]?.focus()
+}
+
+// макс сайз = 1 и если в ячейке есть цифра, она перезаписывается
+function inputValid(index: number, event: Event) {
+  if (otp.value[index]) {
+    (event.target as HTMLInputElement).value = ''
+  }
+}
+
+function moveFocus(index: number, to: string) {
+  if (to === 'left') {
+    if (index > 0) {
+      otpRefs.value[index - 1]?.focus()
+    }
+  }
+  else if (to === 'right') {
+    if (index < length - 1) {
+      otpRefs.value[index + 1]?.focus()
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex gap-2">
+      <input
+        v-for="(digit, index) in otp"
+        :key="index"
+        :ref="el => otpRefs[index] = el as HTMLInputElement"
+        v-model="otp[index]"
+        type="text"
+        inputmode="numeric"
+        maxlength="1"
+        class="size-10 rounded-10 border border-transparent bg-muted text-center text-lg text-primary caret-transparent focus:outline-hidden"
+        :class="{
+          'border-danger bg-danger-subtle': showError,
+          'focus:border-focus': !showError,
+        }"
+        @input="onInput($event, index)"
+        @keydown.backspace="onBackspace(index, $event)"
+        @keydown.enter.prevent
+        @paste="onPaste"
+        @keydown.left="moveFocus(index, 'left')"
+        @keydown.right="moveFocus(index, 'right')"
+        @focus="autoTarget"
+        @beforeinput="inputValid(index, $event)"
+      >
+    </div>
+    <a-alert
+      v-show="showError"
+      color="red"
+      size="sm"
+      icon-type="triangle"
+    >
+      {{ t('error.otp') }}
+    </a-alert>
+  </div>
+</template>
+
+<style scoped>
+</style>

package/components/modals/id/IdPasswordSuccessfulModal.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-const { passwordSuccessfulModal } = useIdModals()
-const { t } = useI18n()
-</script>
-
-<template>
-  <div class="flex flex-col gap-4 text-center">
-    <h2 class="text-h2">
-      {{ t('modals.id.passwordSuccessful.title') }}
-    </h2>
-    <span class="mx-auto size-[100px] rounded-full bg-muted">
-      <a-ill-ok />
-    </span>
-    <p class="text-body-md">
-      {{ t('modals.id.passwordSuccessful.content') }}
-    </p>
-    <a-button @click="passwordSuccessfulModal = false">
-      {{ t('actions.close') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const { passwordSuccessfulModal } = useIdModals()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-6 text-center">
+    <h2 class="text-h2 text-primary">
+      {{ t('modals.id.passwordSuccessful.title') }}
+    </h2>
+    <div class="mx-auto flex size-24 items-center justify-center rounded-full bg-muted">
+      <a-ill-ok />
+    </div>
+    <p class="text-body-md text-secondary">
+      {{ t('modals.id.passwordSuccessful.content') }}
+    </p>
+    <a-button-v2
+      size="lg"
+      block
+      @click="passwordSuccessfulModal = false"
+    >
+      {{ t('actions.close') }}
+    </a-button-v2>
+  </div>
+</template>

package/components/modals/id/IdRecoveryModal.vue

@@ -1,117 +1,133 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import * as z from 'zod'
-
-const { $toast } = useNuxtApp()
-const { commonAuth } = useAppConfig()
-const { t, locale } = useI18n()
-
-const { loginModal, recoveryModal, resetPasswordOtpModal, intermediateState } = useIdModals()
-const authApiURL = commonAuth.authApiURL
-const emailField = ref('')
-const loading = ref(false)
-const submitted = ref(false)
-
-const emailSchema = z.object({
-  emailField: z.string().nonempty(t('error.required')).email(t('error.email')),
-})
-
-const validation = computed(() => {
-  if (!submitted.value) return null
-  const result = emailSchema.safeParse({ emailField: emailField.value })
-  return result.success ? null : result.error
-})
-
-function getError(path: string) {
-  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
-}
-
-async function onSubmit() {
-  try {
-    submitted.value = true
-    if (validation.value) return
-    loading.value = true
-
-    await $fetch(`${removeTrailingSlash(authApiURL)}/password/email-otp`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      body: {
-        email: emailField.value,
-      },
-    })
-    intermediateState.value.email = emailField.value
-
-    recoveryModal.value = false
-    resetPasswordOtpModal.value = true
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onSubmit()
-  }
-}
-
-function onCancel() {
-  recoveryModal.value = false
-  loginModal.value = true
-}
-
-watch(recoveryModal, (value) => {
-  if (!value) {
-    emailField.value = ''
-  }
-})
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
-</script>
-
-<template>
-  <form
-    class="flex flex-col items-stretch gap-5 rounded-md text-center"
-    novalidate
-    @submit.prevent="onSubmit"
-  >
-    <h2 class="text-center text-h2">
-      {{ t('modals.id.recovery.title') }}
-    </h2>
-    <p class="text-center text-body-md">
-      {{ t('modals.id.recovery.content') }}
-    </p>
-    <a-input-standard
-      v-model="emailField"
-      :label="t('modals.id.recovery.placeholder')"
-      :error="getError('emailField')"
-    />
-    <a-button :loading="loading">
-      {{ t('actions.recover') }}
-    </a-button>
-    <p class="text-center text-body-md">
-      {{ t('reuse.or') }}
-    </p>
-    <a-button
-      type="button"
-      view="outline"
-      @click="onCancel"
-    >
-      {{ t('actions.cancel') }}
-    </a-button>
-  </form>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import AIconMail from '#adata-ui/icons/mail.vue'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+
+const { loginModal, recoveryModal, resetPasswordOtpModal, intermediateState } = useIdModals()
+const authApiURL = commonAuth.authApiURL
+const emailField = ref('')
+const loading = ref(false)
+const submitted = ref(false)
+
+const emailFieldId = `recovery-email-${useId()}`
+
+const emailSchema = z.object({
+  emailField: z.string().nonempty(t('error.required')).email(t('error.email')),
+})
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = emailSchema.safeParse({ emailField: emailField.value })
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
+}
+
+async function onSubmit() {
+  try {
+    submitted.value = true
+    if (validation.value) return
+    loading.value = true
+
+    await $fetch(`${removeTrailingSlash(authApiURL)}/password/email-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        email: emailField.value,
+      },
+    })
+    intermediateState.value.email = emailField.value
+
+    recoveryModal.value = false
+    resetPasswordOtpModal.value = true
+  }
+  catch (error) {
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function onCancel() {
+  recoveryModal.value = false
+  loginModal.value = true
+}
+
+watch(recoveryModal, (value) => {
+  if (!value) {
+    emailField.value = ''
+  }
+})
+</script>
+
+<template>
+  <form
+    class="flex flex-col gap-6 p-6"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <div class="flex flex-col gap-1">
+      <h2 class="text-center text-h2 text-primary">
+        {{ t('modals.id.recovery.title') }}
+      </h2>
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.recovery.content') }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label :for="emailFieldId" class="text-body-md-strong text-primary">
+        {{ t('modals.id.recovery.label') }}
+      </label>
+      <a-input-v2
+        v-model="emailField"
+        :input-id="emailFieldId"
+        type="email"
+        size="lg"
+        autocomplete="email"
+        :start-icon="AIconMail"
+        start-icon-class="size-4 text-icon-secondary"
+        :placeholder="t('modals.id.recovery.placeholder')"
+        :error="getError('emailField')"
+      />
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <a-button-v2
+        type="submit"
+        size="lg"
+        block
+        :loading="loading"
+      >
+        {{ t('actions.recover') }}
+      </a-button-v2>
+      <div class="flex items-center gap-3">
+        <span class="h-px flex-1 bg-(--border-color-default)" />
+        <span class="shrink-0 text-body-sm text-secondary">
+          {{ t('reuse.or') }}
+        </span>
+        <span class="h-px flex-1 bg-(--border-color-default)" />
+      </div>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        @click="onCancel"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+    </div>
+  </form>
+</template>