adata-ui 2.1.41-beta.0 → 2.1.41

package/components/modals/id/IdModals.vue

@@ -1,125 +1,127 @@
-<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 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>
+
+  <a-modal v-model="autoLogoutModal" prevent-close>
+    <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/id/IdNewPasswordModal.vue

@@ -1,129 +1,129 @@
-<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 * 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-2xl font-bold">
+      {{ t('modals.id.newPassword.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ 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-sm">
+      {{ t('reuse.or') }}
+    </p>
+
+    <a-button
+      type="button"
+      view="outline"
+      @click="newPasswordModal = false"
+    >
+      {{ t('actions.cancel') }}
+    </a-button>
+  </form>
+</template>