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

package/components/modals/id/IdRegistrationModal.vue

@@ -1,8 +1,12 @@
 <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'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { $toast } = useNuxtApp()
 const route = useRoute()
@@ -30,18 +34,28 @@ const form = reactive<RegistrationForm>({
 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: 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,
   {
@@ -71,7 +85,7 @@ async function onSubmit() {
 
   try {
     loading.value = true
-    const { success, message } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
+    const { success } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
       method: 'POST',
       credentials: 'include',
       headers: {
@@ -88,7 +102,7 @@ async function onSubmit() {
     }
   }
   catch (error) {
-    $toast.error(error.data.message.email || error.data.message.password[0])
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
   finally {
     loading.value = false
@@ -99,10 +113,6 @@ 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
@@ -114,12 +124,6 @@ function getUrl() {
   })
 }
 
-function handleEnter(event: KeyboardEvent) {
-  if (event.key === 'Enter') {
-    onSubmit()
-  }
-}
-
 function onLogin() {
   registrationModal.value = false
   loginModal.value = true
@@ -133,83 +137,121 @@ watch(registrationModal, (value) => {
     agreement.value = false
   }
 })
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
 </script>
 
 <template>
+  <!-- Enter отправляет форму нативно: документного keyup-слушателя здесь быть не должно,
+       иначе один Enter даёт два запроса -->
   <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.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>
+    <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"
+          :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"
+          :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"
+          :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>

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
@@ -73,16 +74,13 @@ async function onResend() {
     })
     resetOtp()
     runTimer()
-    isResendLoading.value = false
   }
   catch (error) {
-    $toast.error(error.data.message)
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
-}
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
+  finally {
+    // без finally сбой resend оставлял кнопку заблокированной навсегда
+    isResendLoading.value = false
   }
 }
 
@@ -98,17 +96,12 @@ function runTimer() {
 
 onMounted(() => {
   runTimer()
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
 })
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4 text-center">
-    <h2 class="text-h2">
+  <div class="flex flex-col items-center gap-4 p-6 text-center">
+    <h2 class="text-h2 text-primary">
       {{ t('modals.id.resetPasswordOtp.title') }}
     </h2>
 
@@ -116,24 +109,22 @@ onBeforeUnmount(() => {
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
 
-    <div class="text-body-md">
+    <div class="text-body-md text-secondary">
       <p class="mb-1">
         {{ t('modals.id.resetPasswordOtp.content') }}
       </p>
 
-      <div v-if="timer > 0" class="text-h2">
+      <div v-if="timer > 0" class="text-h2 text-primary">
         {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
       </div>
       <button
         v-else
-        class="text-brand flex items-center gap-2 mx-auto"
-        @click="onResend"
+        type="button"
+        class="mx-auto flex items-center gap-2 text-body-md text-link transition-colors hover:text-link-hover"
         :disabled="isResendLoading"
+        @click="onResend"
       >
-        <a-icon-loader-circle
-          v-if="isResendLoading"
-          class="animate-spin"
-        ></a-icon-loader-circle>
+        <a-icon-loader-circle v-if="isResendLoading" class="size-4 animate-spin" />
         <span>{{ t('actions.resend') }}</span>
       </button>
     </div>
@@ -144,16 +135,14 @@ onBeforeUnmount(() => {
       @on-completed="onConfirm"
     />
 
-    <a-button
-      block
+    <a-button-v2
       view="outline"
+      color="gray"
+      size="lg"
+      block
       @click="onClose"
     >
       {{ t('actions.close') }}
-    </a-button>
+    </a-button-v2>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/components/modals/id/IdTwoFactorModal.vue

@@ -12,7 +12,7 @@ const { pk } = useUrls()
 const { twoFactorModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
-const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/
 
 const otp = ref(['', '', '', '', '', ''])
 const otpFormatted = computed(() => {
@@ -62,11 +62,12 @@ async function onConfirm() {
     $toast.success(t('login.successfully'))
     twoFactorModal.value = false
 
-    const path = window.location.pathname;
+    const path = window.location.pathname
 
     if (regex.test(path)) {
-      navigateTo(`${pk}/company/${path.split("/")[4]}`, { external: true })
-    } else {
+      navigateTo(`${pk}/company/${path.split('/')[4]}`, { external: true })
+    }
+    else {
       window.location.reload()
     }
   }
@@ -78,27 +79,13 @@ function onClose() {
   showError.value = false
   twoFactorModal.value = false
 }
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4">
-    <p class="text-h2 text-center">
+  <div class="flex flex-col items-center gap-4 p-6">
+    <h2 class="text-center text-h2 text-primary">
       {{ t('modals.id.twoFactor.title') }}
-    </p>
+    </h2>
     <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
@@ -107,20 +94,18 @@ onBeforeUnmount(() => {
       v-model:error="showError"
       @on-completed="onConfirm"
     />
-    <p class="text-body-md text-center">
+    <p class="text-center text-body-md text-secondary">
       {{ t('modals.id.twoFactor.code') }}
     </p>
 
-    <a-button
-      class="w-full"
+    <a-button-v2
       view="outline"
+      color="gray"
+      size="lg"
+      block
       @click="onClose"
     >
       {{ t('actions.close') }}
-    </a-button>
+    </a-button-v2>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/icons/google.vue

@@ -1,41 +1,19 @@
-
-
 <script lang="ts" setup>
 </script>
 
 <template>
+  <!-- осознанно константные: фирменные цвета логотипа Google -->
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
   >
-    <rect
-      x="0.5"
-      y="0.5"
-      width="31"
-      height="31"
-      rx="5.5"
-      stroke="#9DA3AC"
-    />
-    <path
-      d="M26.501 16.2332C26.501 15.3699 26.4296 14.7399 26.2748 14.0865H16.2153V17.9832H22.12C22.001 18.9515 21.3582 20.4099 19.9296 21.3898L19.9096 21.5203L23.0902 23.935L23.3106 23.9565C25.3343 22.1249 26.501 19.4298 26.501 16.2332Z"
-      fill="#4285F4"
-    />
-    <path
-      d="M16.2147 26.5C19.1075 26.5 21.5361 25.5666 23.3099 23.9566L19.929 21.3898C19.0242 22.0082 17.8099 22.4399 16.2147 22.4399C13.3814 22.4399 10.9767 20.6082 10.1195 18.0765L9.99382 18.087L6.68656 20.5954L6.64331 20.7132C8.40519 24.1432 12.0242 26.5 16.2147 26.5Z"
-      fill="#34A853"
-    />
-    <path
-      d="M10.12 18.0766C9.89379 17.4233 9.76289 16.7232 9.76289 15.9999C9.76289 15.2765 9.89379 14.5766 10.1081 13.9232L10.1021 13.7841L6.75337 11.2355L6.64381 11.2865C5.91765 12.7099 5.50098 14.3083 5.50098 15.9999C5.50098 17.6916 5.91765 19.2899 6.64381 20.7132L10.12 18.0766Z"
-      fill="#FBBC05"
-    />
-    <path
-      d="M16.2148 9.55997C18.2267 9.55997 19.5838 10.4116 20.3576 11.1233L23.3814 8.23C21.5243 6.53834 19.1076 5.5 16.2148 5.5C12.0243 5.5 8.4052 7.85665 6.64331 11.2866L10.1076 13.9233C10.9767 11.3917 13.3815 9.55997 16.2148 9.55997Z"
-      fill="#EB4335"
-    />
+    <path fill="#4285F4" d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.46a5.52 5.52 0 0 1-2.4 3.62v3.01h3.88c2.27-2.09 3.58-5.17 3.58-8.82Z" />
+    <path fill="#34A853" d="M12 24c3.24 0 5.96-1.08 7.94-2.91l-3.88-3.01c-1.08.72-2.45 1.15-4.06 1.15-3.12 0-5.77-2.11-6.71-4.95H1.28v3.1A12 12 0 0 0 12 24Z" />
+    <path fill="#FBBC05" d="M5.29 14.28a7.2 7.2 0 0 1 0-4.56v-3.1H1.28a12 12 0 0 0 0 10.76l4.01-3.1Z" />
+    <path fill="#EA4335" d="M12 4.77c1.76 0 3.35.61 4.6 1.8l3.44-3.44C17.95 1.19 15.24 0 12 0A12 12 0 0 0 1.28 6.62l4.01 3.1C6.23 6.88 8.88 4.77 12 4.77Z" />
   </svg>
 </template>
-
-<style scoped></style>

package/icons/mailru.vue

@@ -1,34 +1,19 @@
 <template>
+  <!-- осознанно константные: фирменные цвета логотипа Mail.ru (белая «@» — декор на синем) -->
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
   >
-    <rect
-      x="0.5"
-      y="0.5"
-      width="31"
-      height="31"
-      rx="5.5"
-      stroke="#9DA3AC"
+    <circle
+      cx="12"
+      cy="12"
+      r="12"
+      fill="#0077FF"
     />
-    <g clip-path="url(#clip0_680_206687)">
-      <path
-        d="M19.1585 15.5C19.1585 17.2417 17.7417 18.6585 16 18.6585C14.2583 18.6585 12.8415 17.2417 12.8415 15.5C12.8415 13.7583 14.2583 12.3415 16 12.3415C17.7417 12.3415 19.1585 13.7583 19.1585 15.5ZM16 5C10.2106 5 5.5 9.71056 5.5 15.5C5.5 21.2894 10.2106 26 16 26C18.121 26 20.1665 25.3687 21.9148 24.1737L21.945 24.1527L20.5301 22.5081L20.5065 22.5238C19.1605 23.3894 17.6019 23.8475 16 23.8475C11.3971 23.8475 7.6525 20.1029 7.6525 15.5C7.6525 10.8971 11.3971 7.1525 16 7.1525C20.6029 7.1525 24.3475 10.8971 24.3475 15.5C24.3475 16.0965 24.2812 16.7003 24.1506 17.2942C23.8868 18.3777 23.1282 18.7097 22.5586 18.6657C21.9857 18.6192 21.3156 18.211 21.311 17.2122V16.4509V15.5C21.311 12.5712 18.9288 10.189 16 10.189C13.0712 10.189 10.689 12.5712 10.689 15.5C10.689 18.4288 13.0712 20.811 16 20.811C17.4227 20.811 18.7569 20.2545 19.7629 19.2432C20.3477 20.1535 21.3012 20.7244 22.386 20.811C22.4792 20.8189 22.5743 20.8228 22.6688 20.8228C23.432 20.8228 24.1893 20.5676 24.7997 20.1036C25.429 19.6258 25.8989 18.9348 26.1588 18.1047C26.2001 17.9708 26.2762 17.6637 26.2769 17.6617L26.2788 17.6505C26.4317 16.9844 26.5 16.3203 26.5 15.5C26.5 9.71056 21.7894 5 16 5Z"
-        fill="#FF9E00"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_680_206687">
-        <rect
-          width="21"
-          height="21"
-          fill="white"
-          transform="translate(5.5 5)"
-        />
-      </clipPath>
-    </defs>
+    <path fill="#fff" d="M12 5.4a6.6 6.6 0 1 0 3.63 12.11.9.9 0 1 0-.99-1.5A4.8 4.8 0 1 1 16.8 12v.63a1.05 1.05 0 0 1-2.1 0V12a2.7 2.7 0 1 0-.83 1.95 2.85 2.85 0 0 0 4.73-2.13V12A6.6 6.6 0 0 0 12 5.4Zm0 5.7a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z" />
   </svg>
 </template>

package/icons/yandex.vue

@@ -1,29 +1,19 @@
 <template>
+  <!-- осознанно константные: фирменные цвета логотипа Яндекса (белая «Я» — декор на красном) -->
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
   >
-    <rect
-      class="stroke-icon-secondary"
-      x="0.5"
-      y="0.5"
-      width="31"
-      height="31"
-      rx="5.5"
-    />
-    <!-- осознанно константный: фирменные цвета логотипа Яндекса -->
     <circle
-      cx="16"
-      cy="16"
-      r="10.5"
+      cx="12"
+      cy="12"
+      r="12"
       fill="#FC3F1D"
     />
-    <path
-      d="M19.75 22.75H17.3928V11.076H16.3409C14.4125 11.076 13.3995 12.0469 13.3995 13.4845C13.3995 15.1158 14.1008 15.8736 15.5421 16.845L16.7304 17.6415L13.3019 22.75H10.75L13.8279 18.1853C12.0553 16.9224 11.0618 15.6988 11.0618 13.6206C11.0618 11.0174 12.8736 9.25 16.3215 9.25H19.75V22.75Z"
-      fill="white"
-    />
+    <path fill="#fff" d="M13.14 19.2h2.2V4.8h-3.2c-3.22 0-5.5 1.97-5.5 4.87 0 2.32 1.1 3.68 3.07 5.08L6.29 19.2h2.39l3.8-5.68-1.11-.74c-1.6-1.08-2.38-1.92-2.38-3.74 0-1.6 1.13-2.68 2.79-2.68h1.36V19.2Z" />
   </svg>
 </template>