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

package/components/modals/id/IdModals.vue

@@ -1,125 +1,171 @@
-<script setup lang="ts">
-import IdAutoLogoutModal from '#adata-ui/components/modals/id/IdAutoLogoutModal.vue'
-import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
-import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
-import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'
-import IdNewPasswordModal from '#adata-ui/components/modals/id/IdNewPasswordModal.vue'
-import IdPasswordSuccessfulModal from '#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'
-import IdRecoveryModal from '#adata-ui/components/modals/id/IdRecoveryModal.vue'
-import IdRegistrationModal from '#adata-ui/components/modals/id/IdRegistrationModal.vue'
-import IdResetPasswordOtpModal from '#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'
-import IdTwoFactorModal from '#adata-ui/components/modals/id/IdTwoFactorModal.vue'
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
-
-const emit = defineEmits<{
-  (e: 'closed', value: boolean): void
-}>()
-
-const {
-  loginModal,
-  registrationModal,
-  confirmAccountOtpModal,
-  recoveryModal,
-  resetPasswordOtpModal,
-  newPasswordModal,
-  passwordSuccessfulModal,
-  confirmSuccessfulModal,
-  twoFactorModal,
-  autoLogoutModal
-} = useIdModals()
-
-const { locale } = useI18n()
-const { commonAuth } = useAppConfig()
-const authApiURL = commonAuth.authApiURL
-
-const accessToken = useCookie('accessToken')
-const isAuthenticated = computed(() => !!accessToken.value)
-
-// one-shot флаг: обмен по auth-сессии перезагружает страницу максимум один раз,
-// иначе нечитаемая кука accessToken зацикливает reload
-const AUTH_RELOAD_FLAG = 'auth-exchange-reloaded'
-
-onMounted(async () => {
-  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
-    method: 'GET',
-    credentials: 'include',
-    headers: {
-      lang: locale.value,
-    },
-  })
-  const { data: cookiesData } = await response.json()
-  if (cookiesData?.access_token && !accessToken.value) {
-    const { access_token, expire_in } = cookiesData
-    useCookie('autoLogout').value = true
-
-    const persisted = await writeAccessTokenCookie(access_token, expire_in)
-
-    if (persisted && !sessionStorage.getItem(AUTH_RELOAD_FLAG)) {
-      sessionStorage.setItem(AUTH_RELOAD_FLAG, '1')
-      window.location.reload()
-    }
-    else {
-      sessionStorage.removeItem(AUTH_RELOAD_FLAG)
-      console.warn(
-        persisted
-          ? '[auth] accessToken cookie is erased between page loads (SSR resetTokens?), reload skipped to avoid a loop'
-          : '[auth] accessToken cookie was not persisted (domain/secure/maxAge rejected by browser), reload skipped',
-      )
-    }
-  }
-  else {
-    sessionStorage.removeItem(AUTH_RELOAD_FLAG)
-  }
-})
-
-watch(isAuthenticated, (val) => {
-  const autoLogout = useCookie('autoLogout')
-
-  if (!val && autoLogout.value) {
-    autoLogoutModal.value = true
-    autoLogout.value = null
-  }
-})
-
-const autoLoginClose = () => {
-  emit('closed', true)
-  autoLogoutModal.value = false
-}
-</script>
-
-<template>
-  <a-modal v-model="loginModal" data-test-id="login-form-modal">
-    <id-login-modal v-if="loginModal" />
-  </a-modal>
-  <a-modal v-model="twoFactorModal">
-    <id-two-factor-modal v-if="twoFactorModal" />
-  </a-modal>
-
-  <a-modal v-model="registrationModal">
-    <id-registration-modal v-if="registrationModal" />
-  </a-modal>
-  <a-modal v-model="confirmAccountOtpModal" prevent-close>
-    <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
-  </a-modal>
-  <a-modal v-model="confirmSuccessfulModal" prevent-close>
-    <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
-  </a-modal>
-
-  <a-modal v-model="recoveryModal">
-    <id-recovery-modal v-if="recoveryModal" />
-  </a-modal>
-  <a-modal v-model="resetPasswordOtpModal" prevent-close>
-    <id-reset-password-otp-modal v-if="resetPasswordOtpModal" />
-  </a-modal>
-  <a-modal v-model="newPasswordModal" prevent-close>
-    <id-new-password-modal v-if="newPasswordModal" />
-  </a-modal>
-  <a-modal v-model="passwordSuccessfulModal" prevent-close>
-    <id-password-successful-modal v-if="passwordSuccessfulModal" />
-  </a-modal>
-
-  <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
-</template>
-
-<style scoped></style>
+<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 грузит
+// чанк в момент открытия окна: поведение то же, стартовый бандл меньше.
+const IdAutoLogoutModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdAutoLogoutModal.vue'))
+const IdConfirmAccountOtpModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'))
+const IdConfirmSuccessfulModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'))
+const IdLoginModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdLoginModal.vue'))
+const IdNewPasswordModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdNewPasswordModal.vue'))
+const IdPasswordSuccessfulModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'))
+const IdRecoveryModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdRecoveryModal.vue'))
+const IdRegistrationModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdRegistrationModal.vue'))
+const IdResetPasswordOtpModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'))
+const IdTwoFactorModal = defineAsyncComponent(() => import('#adata-ui/components/modals/id/IdTwoFactorModal.vue'))
+
+const {
+  loginModal,
+  registrationModal,
+  confirmAccountOtpModal,
+  recoveryModal,
+  resetPasswordOtpModal,
+  newPasswordModal,
+  passwordSuccessfulModal,
+  confirmSuccessfulModal,
+  twoFactorModal,
+  autoLogoutModal,
+} = useIdModals()
+
+const { locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const authApiURL = commonAuth.authApiURL
+
+const accessToken = useCookie('accessToken')
+const isAuthenticated = computed(() => !!accessToken.value)
+
+// one-shot флаг: обмен по auth-сессии перезагружает страницу максимум один раз,
+// иначе нечитаемая кука accessToken зацикливает reload
+const AUTH_RELOAD_FLAG = 'auth-exchange-reloaded'
+
+onMounted(async () => {
+  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      lang: locale.value,
+    },
+  })
+  const { data: cookiesData } = await response.json()
+  if (cookiesData?.access_token && !accessToken.value) {
+    const { access_token, expire_in } = cookiesData
+    useCookie('autoLogout').value = true
+
+    const persisted = await writeAccessTokenCookie(access_token, expire_in)
+
+    if (persisted && !sessionStorage.getItem(AUTH_RELOAD_FLAG)) {
+      sessionStorage.setItem(AUTH_RELOAD_FLAG, '1')
+      window.location.reload()
+    }
+    else {
+      sessionStorage.removeItem(AUTH_RELOAD_FLAG)
+      console.warn(
+        persisted
+          ? '[auth] accessToken cookie is erased between page loads (SSR resetTokens?), reload skipped to avoid a loop'
+          : '[auth] accessToken cookie was not persisted (domain/secure/maxAge rejected by browser), reload skipped',
+      )
+    }
+  }
+  else {
+    sessionStorage.removeItem(AUTH_RELOAD_FLAG)
+  }
+})
+
+watch(isAuthenticated, (val) => {
+  const autoLogout = useCookie('autoLogout')
+
+  if (!val && autoLogout.value) {
+    autoLogoutModal.value = true
+    autoLogout.value = null
+  }
+})
+
+function autoLoginClose() {
+  emit('closed', true)
+  autoLogoutModal.value = false
+}
+</script>
+
+<template>
+  <lazy-a-modal-v2
+    v-model="loginModal"
+    width="424px"
+    hide-header
+    data-test-id="login-form-modal"
+  >
+    <id-login-modal v-if="loginModal" />
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="twoFactorModal"
+    width="424px"
+    hide-header
+  >
+    <id-two-factor-modal v-if="twoFactorModal" />
+  </lazy-a-modal-v2>
+
+  <lazy-a-modal-v2
+    v-model="registrationModal"
+    width="424px"
+    hide-header
+  >
+    <id-registration-modal v-if="registrationModal" />
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="confirmAccountOtpModal"
+    width="424px"
+    hide-header
+    persistent
+  >
+    <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="confirmSuccessfulModal"
+    width="424px"
+    hide-header
+    persistent
+  >
+    <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
+  </lazy-a-modal-v2>
+
+  <lazy-a-modal-v2
+    v-model="recoveryModal"
+    width="424px"
+    hide-header
+  >
+    <id-recovery-modal v-if="recoveryModal" />
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="resetPasswordOtpModal"
+    width="424px"
+    hide-header
+    persistent
+  >
+    <id-reset-password-otp-modal v-if="resetPasswordOtpModal" />
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="newPasswordModal"
+    width="424px"
+    hide-header
+    persistent
+  >
+    <id-new-password-modal v-if="newPasswordModal" />
+  </lazy-a-modal-v2>
+  <lazy-a-modal-v2
+    v-model="passwordSuccessfulModal"
+    width="424px"
+    hide-header
+    persistent
+  >
+    <id-password-successful-modal v-if="passwordSuccessfulModal" />
+  </lazy-a-modal-v2>
+
+  <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
+</template>
+
+<style scoped></style>

package/components/modals/id/IdNewPasswordModal.vue

@@ -1,129 +1,172 @@
-<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 authApiURL = commonAuth.authApiURL
-const { newPasswordModal, passwordSuccessfulModal, intermediateState } = useIdModals()
-
-const form = reactive({
-  password: '',
-  password_confirmation: '',
-})
-const loading = ref(false)
-
-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')),
-}).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 = resetSchema.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() {
-  try {
-    submitted.value = true
-    if (validation.value) return
-    loading.value = true
-
-    const response = await $fetch(`${removeTrailingSlash(authApiURL)}/password/reset-otp`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      body: {
-        token: intermediateState.value.token,
-        email: intermediateState.value.email,
-        ...form,
-      },
-    })
-    if (response?.success) {
-      newPasswordModal.value = false
-      passwordSuccessfulModal.value = true
-      $toast.success(response.message)
-    }
-  }
-  catch (error) {
-    $toast.error(error?.data.message.password as string)
-  }
-  finally {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <form
-    class="flex flex-col items-stretch gap-5"
-    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>
-  </form>
-</template>
+<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()
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+
+const authApiURL = commonAuth.authApiURL
+const { newPasswordModal, passwordSuccessfulModal, intermediateState } = useIdModals()
+
+const form = reactive({
+  password: '',
+  password_confirmation: '',
+})
+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: 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 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)
+  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
+
+    const response = await $fetch(`${removeTrailingSlash(authApiURL)}/password/reset-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        token: intermediateState.value.token,
+        email: intermediateState.value.email,
+        ...form,
+      },
+    })
+    if (response?.success) {
+      newPasswordModal.value = false
+      passwordSuccessfulModal.value = true
+      $toast.success(response.message)
+    }
+  }
+  catch (error) {
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    loading.value = false
+  }
+}
+</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.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"
+          start-icon-class="size-4 text-icon-secondary"
+          :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"
+          start-icon-class="size-4 text-icon-secondary"
+          :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>