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

package/components/modals/id/IdRegistrationModal.vue

@@ -1,215 +1,260 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-import * as z from 'zod'
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const { $toast } = useNuxtApp()
-const route = useRoute()
-
-const localePath = useLocalePath()
-const { t, locale } = useI18n()
-const { commonAuth }: any = useAppConfig()
-const { landing } = useUrls()
-const authApiURL = commonAuth.authApiURL
-const redirectUrl = useCookie('redirect_url')
-const { loginModal, registrationModal, confirmAccountOtpModal, intermediateState } = useIdModals()
-
-export interface RegistrationForm {
-  email: string
-  password: string
-  password_confirmation: string
-}
-
-const form = reactive<RegistrationForm>({
-  email: '',
-  password: '',
-  password_confirmation: '',
-})
-
-const agreement = ref(false)
-const loading = ref(false)
-
-const registerSchema = z.object({
-  email: z.string().nonempty(t('error.required')).email(t('error.email')),
-  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')),
-}).refine(
-  data => data.password === data.password_confirmation,
-  {
-    message: t('modals.id.register.errors.sameAs'),
-    path: ['password_confirmation'],
-  },
-)
-
-const submitted = ref(false)
-
-const validation = computed(() => {
-  if (!submitted.value) return null
-  const result = registerSchema.safeParse(form)
-  return result.success ? null : result.error
-})
-
-function getError(path: string) {
-  return validation.value?.issues?.find(issue => issue.path[0] === path)?.message
-}
-
-async function onSubmit() {
-  if (!agreement.value) return
-
-  submitted.value = true
-
-  if (validation.value) return
-
-  try {
-    loading.value = true
-    const { success, message } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      body: form,
-    })
-    if (success) {
-      intermediateState.value.email = form.email
-      intermediateState.value.password = form.password
-
-      registrationModal.value = false
-      confirmAccountOtpModal.value = true
-    }
-  }
-  catch (error) {
-    $toast.error(error.data.message.email || error.data.message.password[0])
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-if (route.query.url) {
-  redirectUrl.value = route.query.url as string
-}
-
-// onMounted(() => {
-//   v$.value.$touch();
-// });
-
-function getUrl() {
-  return navigateTo(locale.value !== 'ru'
-    ? landing + localePath('/') + PAGES.userAgreement
-    : landing + PAGES.userAgreement, {
-    external: true,
-    open: {
-      target: '_blank',
-    },
-  })
-}
-
-function handleEnter(event: KeyboardEvent) {
-  if (event.key === 'Enter') {
-    onSubmit()
-  }
-}
-
-function onLogin() {
-  registrationModal.value = false
-  loginModal.value = true
-}
-
-watch(registrationModal, (value) => {
-  if (!value) {
-    form.email = ''
-    form.password = ''
-    form.password_confirmation = ''
-    agreement.value = false
-  }
-})
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
-</script>
-
-<template>
-  <form
-    class="flex flex-col items-stretch gap-5"
-    novalidate
-    @submit.prevent="onSubmit"
-  >
-    <h2 class="text-center text-h2">
-      {{ t('modals.id.register.title') }}
-    </h2>
-    <p class="text-center text-body-md">
-      {{ t('modals.id.register.subtitle') }}
-    </p>
-    <a-input-standard
-      v-model="form.email"
-      :label="t('modals.id.register.labels.email')"
-      :error="getError('email')"
-      type="email"
-    />
-
-    <a-input-password
-      v-model="form.password"
-      :label="t('modals.id.register.labels.password')"
-      :error="getError('password')"
-    />
-
-    <a-input-password
-      v-model="form.password_confirmation"
-      :label="t('modals.id.register.labels.password_confirmation')"
-      :error="getError('password_confirmation')"
-    />
-    <a-alert color="blue">
-      {{ t('modals.id.register.alert') }}
-      <template #icon>
-        <a-icon-info-circle />
-      </template>
-    </a-alert>
-    <a-checkbox
-      v-model="agreement"
-      side="right"
-      name="confirm-agreement"
-    >
-      <i18n-t keypath="modals.id.register.agreement.text">
-        <template #link>
-          <nuxt-link-locale
-            class="text-brand"
-            @click="getUrl"
-          >
-            {{ t('modals.id.register.agreement.link') }}
-          </nuxt-link-locale>
-        </template>
-      </i18n-t>
-    </a-checkbox>
-    <a-button
-      :disabled="!agreement"
-      :loading="loading"
-    >
-      {{ t('modals.id.register.continue') }}
-    </a-button>
-    <p class="text-center text-body-md">
-      {{ t('modals.id.register.haveAcc') }}
-    </p>
-    <a-button
-      type="button"
-      view="outline"
-      @click="onLogin"
-    >
-      {{ t('modals.id.register.enter') }}
-    </a-button>
-  </form>
-</template>
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AIconLock from '#adata-ui/icons/lock.vue'
+import AIconMail from '#adata-ui/icons/mail.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+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()
+const route = useRoute()
+
+const localePath = useLocalePath()
+const { t, locale } = useI18n()
+const { commonAuth }: any = useAppConfig()
+const { landing } = useUrls()
+const authApiURL = commonAuth.authApiURL
+const redirectUrl = useCookie('redirect_url')
+const { loginModal, registrationModal, confirmAccountOtpModal, intermediateState } = useIdModals()
+
+export interface RegistrationForm {
+  email: string
+  password: string
+  password_confirmation: string
+}
+
+const form = reactive<RegistrationForm>({
+  email: '',
+  password: '',
+  password_confirmation: '',
+})
+
+const agreement = ref(false)
+const loading = ref(false)
+
+const uid = useId()
+const emailFieldId = `register-email-${uid}`
+const passwordFieldId = `register-password-${uid}`
+const confirmationFieldId = `register-password-confirmation-${uid}`
+const agreementLabelId = `register-agreement-${uid}`
+
+/* Правила берутся из 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 registerSchema = z.object({
+  email: z.string().nonempty(t('error.required')).email(t('error.email')),
+  password: passwordField(),
+  password_confirmation: passwordField(),
+}).refine(
+  data => data.password === data.password_confirmation,
+  {
+    message: t('modals.id.register.errors.sameAs'),
+    path: ['password_confirmation'],
+  },
+)
+
+const submitted = ref(false)
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = registerSchema.safeParse(form)
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues?.find(issue => issue.path[0] === path)?.message
+}
+
+async function onSubmit() {
+  if (!agreement.value) return
+
+  submitted.value = true
+
+  if (validation.value) return
+
+  try {
+    loading.value = true
+    const { success } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: form,
+    })
+    if (success) {
+      intermediateState.value.email = form.email
+      intermediateState.value.password = form.password
+
+      registrationModal.value = false
+      confirmAccountOtpModal.value = true
+    }
+  }
+  catch (error) {
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+if (route.query.url) {
+  redirectUrl.value = route.query.url as string
+}
+
+function getUrl() {
+  return navigateTo(locale.value !== 'ru'
+    ? landing + localePath('/') + PAGES.userAgreement
+    : landing + PAGES.userAgreement, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
+}
+
+function onLogin() {
+  registrationModal.value = false
+  loginModal.value = true
+}
+
+watch(registrationModal, (value) => {
+  if (!value) {
+    form.email = ''
+    form.password = ''
+    form.password_confirmation = ''
+    agreement.value = false
+  }
+})
+</script>
+
+<template>
+  <!-- Enter отправляет форму нативно: документного keyup-слушателя здесь быть не должно,
+       иначе один Enter даёт два запроса -->
+  <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.register.title') }}
+      </h2>
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.register.subtitle') }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1.5">
+        <label :for="emailFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.register.labels.email') }}
+        </label>
+        <a-input-v2
+          v-model="form.email"
+          :input-id="emailFieldId"
+          type="email"
+          size="lg"
+          autocomplete="email"
+          :start-icon="AIconMail"
+          start-icon-class="size-4 text-icon-secondary"
+          :placeholder="t('modals.id.register.placeholders.email')"
+          :error="getError('email')"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label :for="passwordFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.register.labels.password') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password"
+          :input-id="passwordFieldId"
+          size="lg"
+          autocomplete="new-password"
+          :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
+          :placeholder="t('modals.id.register.placeholders.password')"
+          :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.register.labels.password_confirmation') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password_confirmation"
+          :input-id="confirmationFieldId"
+          size="lg"
+          autocomplete="new-password"
+          :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
+          :placeholder="t('modals.id.register.placeholders.password_confirmation')"
+          :error="getError('password_confirmation')"
+        />
+      </div>
+
+      <!-- Чекбокс и текст рядом, а не вложенно: корень ACheckboxV2 — <button>, а ссылка
+           внутри кнопки невалидна; подпись привязана через aria-labelledby -->
+      <div class="flex items-start gap-2">
+        <a-checkbox-v2
+          v-model="agreement"
+          name="confirm-agreement"
+          :aria-labelledby="agreementLabelId"
+        />
+        <p :id="agreementLabelId" class="text-body-md text-primary">
+          <i18n-t keypath="modals.id.register.agreement.text">
+            <template #link>
+              <nuxt-link-locale
+                class="text-link underline transition-colors hover:text-link-hover"
+                @click="getUrl"
+              >
+                {{ t('modals.id.register.agreement.link') }}
+              </nuxt-link-locale>
+            </template>
+          </i18n-t>
+        </p>
+      </div>
+
+      <a-button-v2
+        type="submit"
+        size="lg"
+        block
+        :disabled="!agreement"
+        :loading="loading"
+      >
+        {{ t('modals.id.register.continue') }}
+      </a-button-v2>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <span class="h-px w-full bg-(--border-color-default)" />
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.register.haveAcc') }}
+      </p>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        @click="onLogin"
+      >
+        {{ t('modals.id.register.enter') }}
+      </a-button-v2>
+    </div>
+  </form>
+</template>