adata-ui 2.1.41-beta.12 → 2.1.41-beta.13

package/components/modals/id/IdModals.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
+
+const emit = defineEmits<{
+  (e: 'closed', value: boolean): void
+}>()
 // Каждое из этих окон рендерится только под своим v-if, но статический import
 // всё равно тащил все десять (плюс zod, который они используют для валидации)
 // в стартовый чанк каждого приложения-потребителя. defineAsyncComponent грузит
@@ -16,10 +20,6 @@ const IdRegistrationModal = defineAsyncComponent(() => import('#adata-ui/compone
 const IdResetPasswordOtpModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'))
 const IdTwoFactorModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdTwoFactorModal.vue'))
 
-const emit = defineEmits<{
-  (e: 'closed', value: boolean): void
-}>()
-
 const {
   loginModal,
   registrationModal,
@@ -30,7 +30,7 @@ const {
   passwordSuccessfulModal,
   confirmSuccessfulModal,
   twoFactorModal,
-  autoLogoutModal
+  autoLogoutModal,
 } = useIdModals()
 
 const { locale } = useI18n()
@@ -86,42 +86,84 @@ watch(isAuthenticated, (val) => {
   }
 })
 
-const autoLoginClose = () => {
+function autoLoginClose() {
   emit('closed', true)
   autoLogoutModal.value = false
 }
 </script>
 
 <template>
-  <a-modal v-model="loginModal" data-test-id="login-form-modal">
+  <lazy-a-modal-v2
+    v-model="loginModal"
+    width="424px"
+    hide-header
+    data-test-id="login-form-modal"
+  >
     <id-login-modal v-if="loginModal" />
-  </a-modal>
-  <a-modal v-model="twoFactorModal">
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="twoFactorModal"
+    width="424px"
+    hide-header
+  >
     <id-two-factor-modal v-if="twoFactorModal" />
-  </a-modal>
+  </lazy-a-modal-v2>
 
-  <a-modal v-model="registrationModal">
+  <lazy-a-modal-v2
+    v-model="registrationModal"
+    width="424px"
+    hide-header
+  >
     <id-registration-modal v-if="registrationModal" />
-  </a-modal>
-  <a-modal v-model="confirmAccountOtpModal" prevent-close>
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="confirmAccountOtpModal"
+    width="424px"
+    hide-header
+    persistent
+  >
     <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
-  </a-modal>
-  <a-modal v-model="confirmSuccessfulModal" prevent-close>
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="confirmSuccessfulModal"
+    width="424px"
+    hide-header
+    persistent
+  >
     <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
-  </a-modal>
+  </lazy-a-modal-v2>
 
-  <a-modal v-model="recoveryModal">
+  <lazy-a-modal-v2
+    v-model="recoveryModal"
+    width="424px"
+    hide-header
+  >
     <id-recovery-modal v-if="recoveryModal" />
-  </a-modal>
-  <a-modal v-model="resetPasswordOtpModal" prevent-close>
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="resetPasswordOtpModal"
+    width="424px"
+    hide-header
+    persistent
+  >
     <id-reset-password-otp-modal v-if="resetPasswordOtpModal" />
-  </a-modal>
-  <a-modal v-model="newPasswordModal" prevent-close>
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="newPasswordModal"
+    width="424px"
+    hide-header
+    persistent
+  >
     <id-new-password-modal v-if="newPasswordModal" />
-  </a-modal>
-  <a-modal v-model="passwordSuccessfulModal" prevent-close>
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="passwordSuccessfulModal"
+    width="424px"
+    hide-header
+    persistent
+  >
     <id-password-successful-modal v-if="passwordSuccessfulModal" />
-  </a-modal>
+  </lazy-a-modal-v2>
 
   <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
 </template>

package/components/modals/id/IdNewPasswordModal.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import AIconLock from '#adata-ui/icons/lock.vue'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
+import { PASSWORD_MIN_LENGTH, PASSWORD_RULES } from '#adata-ui/utils/passwordRules'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
@@ -15,17 +18,21 @@ const form = reactive({
 })
 const loading = ref(false)
 
+/* Правила берутся из PASSWORD_RULES — того же источника, что и чеклист
+   <a-password-requirements>, поэтому валидация и подсказки не расходятся. */
+function passwordField() {
+  return PASSWORD_RULES.reduce(
+    (schema: z.ZodType<string>, rule) => schema.refine(
+      rule.test,
+      t(`modals.id.register.errors.${rule.key}`, { length: PASSWORD_MIN_LENGTH }),
+    ),
+    z.string().nonempty(t('error.required')) as z.ZodType<string>,
+  )
+}
+
 const resetSchema = z.object({
-  password: z
-    .string()
-    .nonempty(t('error.required'))
-    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
-  password_confirmation: z
-    .string()
-    .nonempty(t('error.required'))
-    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
+  password: passwordField(),
+  password_confirmation: passwordField(),
 }).refine(
   data => data.password === data.password_confirmation,
   {
@@ -36,6 +43,10 @@ const resetSchema = z.object({
 
 const submitted = ref(false)
 
+const uid = useId()
+const passwordFieldId = `new-password-${uid}`
+const confirmationFieldId = `new-password-confirmation-${uid}`
+
 const validation = computed(() => {
   if (!submitted.value) return null
   const result = resetSchema.safeParse(form)
@@ -71,7 +82,7 @@ async function onSubmit() {
     }
   }
   catch (error) {
-    $toast.error(error?.data.message.password as string)
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
   finally {
     loading.value = false
@@ -81,49 +92,79 @@ async function onSubmit() {
 
 <template>
   <form
-    class="flex flex-col items-stretch gap-5"
+    class="flex flex-col gap-6 p-6"
     novalidate
     @submit.prevent="onSubmit"
   >
-    <h2 class="text-center text-h2">
-      {{ t('modals.id.newPassword.title') }}
-    </h2>
-    <p class="text-center text-body-md">
-      {{ t('modals.id.newPassword.content') }}
-    </p>
-
-    <a-input-password
-      v-model="form.password"
-      :label="t('modals.id.newPassword.placeholder.1')"
-      :error="getError('password')"
-    />
-
-    <a-alert color="blue">
-      {{ t('modals.id.newPassword.alert') }}
-    </a-alert>
-
-    <a-input-password
-      v-model="form.password_confirmation"
-      :label="t('modals.id.newPassword.placeholder.2')"
-      :error="getError('password_confirmation')"
-    />
-
-    <a-button
-      :loading="loading"
-    >
-      {{ t('actions.set') }}
-    </a-button>
-
-    <p class="text-center text-body-md">
-      {{ t('reuse.or') }}
-    </p>
-
-    <a-button
-      type="button"
-      view="outline"
-      @click="newPasswordModal = false"
-    >
-      {{ t('actions.cancel') }}
-    </a-button>
+    <div class="flex flex-col gap-1">
+      <h2 class="text-center text-h2 text-primary">
+        {{ t('modals.id.newPassword.title') }}
+      </h2>
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.newPassword.content') }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1.5">
+        <label :for="passwordFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.newPassword.labels.password') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password"
+          :input-id="passwordFieldId"
+          size="lg"
+          autocomplete="new-password"
+          :start-icon="AIconLock"
+          :placeholder="t('modals.id.newPassword.placeholder.1')"
+          :error="getError('password')"
+        />
+      </div>
+
+      <a-password-requirements :password="form.password" />
+
+      <div class="flex flex-col gap-1.5">
+        <label :for="confirmationFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.newPassword.labels.password_confirmation') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password_confirmation"
+          :input-id="confirmationFieldId"
+          size="lg"
+          autocomplete="new-password"
+          :start-icon="AIconLock"
+          :placeholder="t('modals.id.newPassword.placeholder.2')"
+          :error="getError('password_confirmation')"
+        />
+      </div>
+
+      <a-button-v2
+        type="submit"
+        size="lg"
+        block
+        :loading="loading"
+      >
+        {{ t('actions.set') }}
+      </a-button-v2>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <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="newPasswordModal = false"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+    </div>
   </form>
 </template>

package/components/modals/id/IdOtpInput.vue

@@ -4,9 +4,9 @@ const emit = defineEmits<{
 }>()
 
 const length = 6 // Длина OTP
-const showError = defineModel('error')
-const otp = defineModel()
-const otpRefs = ref([])
+const showError = defineModel<boolean>('error', { default: false })
+const otp = defineModel<string[]>({ required: true })
+const otpRefs = ref<(HTMLInputElement | null)[]>([])
 const { t } = useI18n()
 
 function checkCompletion() {
@@ -15,8 +15,8 @@ function checkCompletion() {
   }
 }
 
-function onInput(event, index) {
-  const value = event.target.value
+function onInput(event: Event, index: number) {
+  const value = (event.target as HTMLInputElement).value
   showError.value = false
 
   // Разрешить только цифры
@@ -35,7 +35,7 @@ function onInput(event, index) {
   }
 }
 
-function onBackspace(index, event) {
+function onBackspace(index: number, event: KeyboardEvent) {
   showError.value = false
   if (otp.value[index] || index > 0) {
     if (otp.value[index] !== '') {
@@ -55,9 +55,9 @@ function onBackspace(index, event) {
   }
 }
 
-function onPaste(event) {
+function onPaste(event: ClipboardEvent) {
   showError.value = false
-  const pastedData = event.clipboardData.getData('text').slice(0, length)
+  const pastedData = (event.clipboardData?.getData('text') ?? '').slice(0, length)
 
   if (/\D/.test(pastedData)) {
     event.preventDefault()
@@ -95,9 +95,9 @@ function autoTarget() {
 }
 
 // макс сайз = 1 и если в ячейке есть цифра, она перезаписывается
-function inputValid(index: number, event: InputEvent) {
+function inputValid(index: number, event: Event) {
   if (otp.value[index]) {
-    event.target.value = ''
+    (event.target as HTMLInputElement).value = ''
   }
 }
 
@@ -121,15 +121,15 @@ function moveFocus(index: number, to: string) {
       <input
         v-for="(digit, index) in otp"
         :key="index"
-        :ref="el => otpRefs[index] = el"
+        :ref="el => otpRefs[index] = el as HTMLInputElement"
         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="size-10 rounded-10 border border-transparent bg-muted text-center text-lg text-primary caret-transparent focus:outline-hidden"
         :class="{
-          'border border-danger bg-danger/10': showError,
-          'focus:border focus:border-focus': !showError,
+          'border-danger bg-danger-subtle': showError,
+          'focus:border-focus': !showError,
         }"
         @input="onInput($event, index)"
         @keydown.backspace="onBackspace(index, $event)"

package/components/modals/id/IdPasswordSuccessfulModal.vue

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

package/components/modals/id/IdRecoveryModal.vue

@@ -1,5 +1,7 @@
 <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()
@@ -12,6 +14,8 @@ 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')),
 })
@@ -48,19 +52,13 @@ async function onSubmit() {
     resetPasswordOtpModal.value = true
   }
   catch (error) {
-    $toast.error(error.data.message)
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
   finally {
     loading.value = false
   }
 }
 
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onSubmit()
-  }
-}
-
 function onCancel() {
   recoveryModal.value = false
   loginModal.value = true
@@ -71,47 +69,64 @@ watch(recoveryModal, (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"
+    class="flex flex-col gap-6 p-6"
     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>
+    <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"
+        :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>
-
-<style scoped></style>