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

package/components/forms/input/AInputV2.vue

@@ -397,7 +397,9 @@ function rowDisplay(item: T): unknown {
         :class="iconOffsetClass"
       />
 
-      <slot name="endButton" />
+      <!-- iconOffsetClass отдаётся наружу: обёртки (AInputPasswordV2) должны
+           центрировать свою кнопку так же, как встроенные иконки поля -->
+      <slot name="endButton" :icon-offset-class="iconOffsetClass" />
     </div>
 
     <teleport to="body">
@@ -470,6 +472,24 @@ function rowDisplay(item: T): unknown {
   cursor: not-allowed;
 }
 
+/* Chrome красит autofill-фоном сам <input>, а видимое поле в v2 — это обёртка
+   .input-v2__field, поэтому родная подсветка ложилась узкой полосой внутри поля
+   (в v1 фон нёс сам input, и подсветка совпадала с полем). Родной фон иначе не
+   убрать — прячем его бесконечной задержкой перехода, а подсвечиваем всю обёртку. */
+.input-v2__input:-webkit-autofill,
+.input-v2__input:-webkit-autofill:hover,
+.input-v2__input:-webkit-autofill:focus,
+.input-v2__input:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--text-color-primary);
+  caret-color: var(--text-color-primary);
+  transition: background-color 600000s 0s;
+}
+
+.input-v2__field:has(.input-v2__input:-webkit-autofill),
+.input-v2__field:has(.input-v2__input:autofill) {
+  background-color: var(--background-color-brand-subtle);
+}
+
 .input-v2__label {
   font-size: 14px;
   line-height: 1.3;

package/components/forms/input/password/AInputPasswordV2.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import type { Component } from 'vue'
+
+interface Props {
+  label?: string
+  placeholder?: string
+  error?: string | string[]
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  loading?: boolean
+  startIcon?: Component
+  startIconClass?: string
+  autocomplete?: string
+  inputId?: string
+  iconEyeTestId?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  variant: 'default',
+  required: false,
+  disabled: false,
+  readonly: false,
+  loading: false,
+  autocomplete: 'current-password',
+})
+
+const modelValue = defineModel<string | number>({ default: '' })
+
+const isOpened = ref(false)
+</script>
+
+<template>
+  <a-input-v2
+    v-model="modelValue"
+    :type="isOpened ? 'text' : 'password'"
+    :label="label"
+    :placeholder="placeholder"
+    :error="error"
+    :size="size"
+    :variant="variant"
+    :required="required"
+    :disabled="disabled"
+    :readonly="readonly"
+    :loading="loading"
+    :start-icon="startIcon"
+    :start-icon-class="startIconClass"
+    :autocomplete="autocomplete"
+    :input-id="inputId"
+  >
+    <template #endButton="{ iconOffsetClass }">
+      <button
+        type="button"
+        tabindex="-1"
+        class="flex shrink-0 items-center justify-center rounded-full p-0.5 text-icon-secondary transition-colors hover:bg-badge disabled:pointer-events-none"
+        :class="iconOffsetClass"
+        :disabled="disabled"
+        :data-test-id="iconEyeTestId"
+        :aria-label="isOpened ? $t('actions.hidePassword') : $t('actions.showPassword')"
+        :aria-pressed="isOpened"
+        @mousedown.prevent
+        @click="isOpened = !isOpened"
+      >
+        <a-icon-eye-closed v-if="!isOpened" class="size-4" />
+        <a-icon-eye-opened v-else class="size-4" />
+      </button>
+    </template>
+  </a-input-v2>
+</template>

package/components/forms/password/APasswordRequirements.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { PASSWORD_MIN_LENGTH, PASSWORD_RULES } from '#adata-ui/utils/passwordRules'
+
+const props = withDefaults(defineProps<{
+  password?: string
+  requireSpecial?: boolean
+}>(), {
+  password: '',
+  requireSpecial: true,
+})
+
+const { t } = useI18n()
+
+const rules = computed(() =>
+  PASSWORD_RULES
+    .filter(rule => props.requireSpecial || rule.key !== 'special')
+    .map(rule => ({
+      key: rule.key,
+      ok: rule.test(props.password),
+      label: t(`forms.password_requirements.${rule.key}`, { length: PASSWORD_MIN_LENGTH }),
+    })),
+)
+</script>
+
+<template>
+  <ul class="flex flex-col gap-2 rounded-lg bg-muted px-4 py-3">
+    <li
+      v-for="rule in rules"
+      :key="rule.key"
+      class="flex items-center gap-2"
+    >
+      <a-icon-check
+        v-if="rule.ok"
+        class="size-4 shrink-0 text-icon-success"
+        aria-hidden="true"
+      />
+      <span
+        v-else
+        class="flex size-4 shrink-0 items-center justify-center rounded-full bg-badge"
+        aria-hidden="true"
+      >
+        <span class="size-1.5 rounded-full bg-(--color-icon-secondary)" />
+      </span>
+      <span
+        class="text-body-md transition-colors"
+        :class="rule.ok ? 'text-primary' : 'text-secondary'"
+      >{{ rule.label }}</span>
+    </li>
+  </ul>
+</template>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -2,6 +2,7 @@
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
@@ -104,10 +105,13 @@ async function onResend() {
     })
     resetOtp()
     runTimer()
-    isResendLoading.value = false
   }
   catch (error) {
-    $toast.error(error.data)
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    // без finally сбой resend оставлял кнопку заблокированной навсегда
+    isResendLoading.value = false
   }
 }
 
@@ -121,25 +125,14 @@ function runTimer() {
   }, 1000)
 }
 
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
-  }
-}
-
 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.confirmAccount.title') }}
     </h2>
 
@@ -147,21 +140,23 @@ 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"
+        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"
       >
-        {{ t('actions.resend') }}
+        <a-icon-loader-circle v-if="isResendLoading" class="size-4 animate-spin" />
+        <span>{{ t('actions.resend') }}</span>
       </button>
     </div>
 
@@ -171,12 +166,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>

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -3,39 +3,42 @@ import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { t } = useI18n()
 const { confirmSuccessfulModal } = useIdModals()
-const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/
 const { pk } = useUrls()
 
 function onClose() {
   confirmSuccessfulModal.value = false
 
-  const path = window.location.pathname;
+  const path = window.location.pathname
 
   if (regex.test(path)) {
-    navigateTo(`${pk}/${path.split("/")[4]}`, { external: true })
-  } else {
+    navigateTo(`${pk}/${path.split('/')[4]}`, { external: true })
+  }
+  else {
     window.location.reload()
   }
 }
 </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.confirmSuccessful.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.confirmSuccessful.content') }}
     </p>
-    <a-button view="outline" @click="onClose">
+    <a-button-v2
+      size="lg"
+      block
+      view="outline"
+      color="gray"
+      @click="onClose"
+    >
       {{ t('actions.close') }}
-    </a-button>
+    </a-button-v2>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/components/modals/id/IdLoginModal.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AIconArrowUpRight from '#adata-ui/icons/arrow/arrow-up-right.vue'
+import AIconGoogle from '#adata-ui/icons/google.vue'
+import AIconLock from '#adata-ui/icons/lock.vue'
+import AIconMail from '#adata-ui/icons/mail.vue'
+import AIconMailru from '#adata-ui/icons/mailru.vue'
+import AIconYandex from '#adata-ui/icons/yandex.vue'
 import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
 import * as z from 'zod'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
@@ -25,11 +31,28 @@ const authApiURL = commonAuth.authApiURL
 const submitted = ref(false)
 const accessToken = ref(null)
 
+const uid = useId()
+const emailFieldId = `login-email-${uid}`
+const passwordFieldId = `login-password-${uid}`
+
+const socials = [
+  { id: 'google', label: 'Google', icon: AIconGoogle },
+  { id: 'yandex', label: 'Yandex', icon: AIconYandex },
+  { id: 'mailru', label: 'Mail.ru', icon: AIconMailru },
+]
+
 export interface ILoginForm {
   username: string
   password: string
 }
 
+const loading = ref(false)
+const form: ILoginForm = reactive({
+  username: useCookie('username', { domain: COOKIE_DOMAIN }).value || '',
+  password: useCookie('password', { domain: COOKIE_DOMAIN }).value || '',
+})
+const rememberMe = ref(false)
+
 const loginSchema = z.object({
   username: z.string().nonempty(t('error.required')).email(t('error.email')),
   password: z.string().nonempty(t('error.required')),
@@ -61,13 +84,6 @@ function clearAuthCookie() {
   useCookie('password', options).value = null
 }
 
-const loading = ref(false)
-const form: ILoginForm = reactive({
-  username: useCookie('username', { domain: COOKIE_DOMAIN }).value || '',
-  password: useCookie('password', { domain: COOKIE_DOMAIN }).value || '',
-})
-const rememberMe = ref(false)
-
 async function submit() {
   submitted.value = true
   if (!validation.value) {
@@ -146,7 +162,8 @@ async function submit() {
           const companyId = match[1]
 
           navigateTo(`${pk}/company/${companyId}`, { external: true })
-        }else if (redirectUrl) {
+        }
+        else if (redirectUrl) {
           navigateTo(redirectUrl as string, { external: true })
         }
         else {
@@ -173,7 +190,7 @@ async function submit() {
 }
 
 function authWithSocial(social: string) {
-  const url = new URL(`https://auth.${mode}.kz/api/login/social`)
+  const url = new URL(`${removeTrailingSlash(authApiURL)}/login/social`)
 
   url.searchParams.set('source', social)
   url.searchParams.set('redirect_url', window.location.origin)
@@ -201,63 +218,74 @@ onMounted(() => {
   rememberMe.value = !!useCookie('username', options).value && !!useCookie('password', options).value
 })
 
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    submit()
-  }
-}
-
 function onForgotPassword() {
   loginModal.value = false
   recoveryModal.value = true
 }
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
 </script>
 
 <template>
-  <div class="flex flex-col gap-5">
-    <h1 class="text-h2 text-center" data-test-id="login-form-title">
-      {{ t('modals.id.login.title') }}
-    </h1>
-    <p class="text-body-md text-center" data-test-id="login-form-subtitle">
-      {{ t('modals.id.login.subtitle') }}
-    </p>
+  <!-- Enter отправляет форму нативно: документного keyup-слушателя здесь быть не должно,
+       иначе один Enter даёт два запроса -->
+  <form
+    class="flex flex-col gap-6 p-6"
+    novalidate
+    @submit.prevent="submit"
+  >
+    <div class="flex flex-col gap-1">
+      <h1 class="text-center text-h2 text-primary" data-test-id="login-form-title">
+        {{ t('modals.id.login.title') }}
+      </h1>
+      <p class="text-center text-body-md text-secondary" data-test-id="login-form-subtitle">
+        {{ t('modals.id.login.subtitle') }}
+      </p>
+    </div>
+
     <div class="flex flex-col gap-4">
-      <a-input-standard
-        v-model="form.username"
-        type="email"
-        :data-test-id="'login-form-email-input'"
-        :label="t('modals.id.login.labels.email')"
-        :error="getError('username')"
-      />
-      <a-input-password
-        v-model="form.password"
-        :data-test-id="'login-form-password-input'"
-        :label="t('modals.id.login.labels.password')"
-        :error="getError('password')"
-      />
-      <div class="flex items-center justify-between">
-        <div class="text-body-md flex gap-2" data-test-id="login-form-remember-me-checkbox">
-          <a-checkbox
-            v-model="rememberMe"
-            name="remember_me"
-          />
-          <label
-            for="remember_me"
-            class="cursor-pointer"
-          >{{
-            t('modals.id.login.remember_me')
-          }}</label>
-        </div>
+      <div class="flex flex-col gap-1.5">
+        <label :for="emailFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.login.labels.email') }}
+        </label>
+        <a-input-v2
+          v-model="form.username"
+          :input-id="emailFieldId"
+          type="email"
+          size="lg"
+          autocomplete="email"
+          :start-icon="AIconMail"
+          :placeholder="t('modals.id.login.placeholders.email')"
+          :error="getError('username')"
+          data-test-id="login-form-email-input"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label :for="passwordFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.login.labels.password') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password"
+          :input-id="passwordFieldId"
+          size="lg"
+          :start-icon="AIconLock"
+          :placeholder="t('modals.id.login.placeholders.password')"
+          :error="getError('password')"
+          data-test-id="login-form-password-input"
+          icon-eye-test-id="login-form-password-eye"
+        />
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <a-checkbox-v2
+          v-model="rememberMe"
+          side="right"
+          name="remember_me"
+          :label="t('modals.id.login.remember_me')"
+          data-test-id="login-form-remember-me-checkbox"
+        />
         <button
-          class="text-body-md text-link"
+          type="button"
+          class="text-body-md text-link transition-colors hover:text-link-hover"
           data-test-id="login-form-forgot-password-button"
           @click="onForgotPassword"
         >
@@ -265,72 +293,75 @@ onBeforeUnmount(() => {
         </button>
       </div>
     </div>
-    <div class="flex items-center gap-4">
-      <div class="h-px w-full bg-(--border-color-default)" />
-      <div class="flex shrink-0 gap-4">
-        <span
-          class="cursor-pointer"
-          data-test-id="login-form-google-button"
-          @click="authWithSocial('google')"
-        >
-          <a-icon-google />
-        </span>
-        <span
-          class="cursor-pointer"
-          data-test-id="login-form-yandex-button"
-          @click="authWithSocial('yandex')"
-        >
-          <a-icon-yandex />
-        </span>
-        <span
-          class="cursor-pointer"
-          data-test-id="login-form-mailru-button"
-          @click="authWithSocial('mailru')"
-        >
-          <a-icon-mailru />
-        </span>
-      </div>
-      <div class="h-px w-full bg-(--border-color-default)" />
-    </div>
-    <a-button
-      :loading="loading"
+
+    <a-button-v2
       type="submit"
+      size="lg"
+      block
+      :loading="loading"
       data-test-id="login-form-login-button"
-      @click="submit"
     >
       {{ t('actions.login') }}
-    </a-button>
-    <p class="text-body-md text-center">
-      {{ t('modals.id.login.first_time') }}
-    </p>
-
-    <a-button
-      type="button"
-      view="outline"
-      class="w-full"
-      data-test-id="login-form-register-button"
-      @click="onRegister"
-    >
-      {{ t('actions.register') }}
-    </a-button>
-
-    <a-button
-      type="button"
-      view="transparent"
-      class="w-full"
-      data-test-id="login-form-tariffs-button"
-      @click="toTariffs"
-    >
-      {{ t('actions.toTariffs') }}
-    </a-button>
+    </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('modals.id.login.social_divider') }}
+      </span>
+      <span class="h-px flex-1 bg-(--border-color-default)" />
+    </div>
 
-    <a-alert
-      class="max-w-screen-sm !text-body-sm"
-      size="xs"
-    >
-      {{ t('info.userAgreement') }}
-    </a-alert>
-  </div>
+    <div class="grid grid-cols-3 gap-2">
+      <a-button-v2
+        v-for="social in socials"
+        :key="social.id"
+        view="outline"
+        color="gray"
+        block
+        :icon="social.icon"
+        :data-test-id="`login-form-${social.id}-button`"
+        @click="authWithSocial(social.id)"
+      >
+        {{ social.label }}
+      </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.login.first_time') }}
+      </p>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        data-test-id="login-form-register-button"
+        @click="onRegister"
+      >
+        {{ t('actions.register') }}
+      </a-button-v2>
+      <a-button-v2
+        view="ghost"
+        color="blue"
+        block
+        icon-right
+        :icon="AIconArrowUpRight"
+        data-test-id="login-form-tariffs-button"
+        @click="toTariffs"
+      >
+        {{ t('actions.toTariffs') }}
+      </a-button-v2>
+    </div>
+
+    <div class="flex items-start gap-3 rounded-lg border-l-4 border-brand bg-brand-subtle px-4 py-3">
+      <a-icon-shield-check class="mt-0.5 size-5 shrink-0 text-icon-brand" />
+      <p class="text-body-sm text-primary">
+        {{ t('info.userAgreement') }}
+      </p>
+    </div>
+  </form>
 </template>
 
 <style scoped></style>