itube-specs 0.0.1075 → 0.0.1076

package/SITE_UPDATES.md

@@ -11,6 +11,25 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1076 — 2026-11-09
+
+- **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hdsex-remaster), срочно:** без нового токена сборка
+  падает на `Undefined variable`. Добавить `$input-error` — цвет текста ошибки под полем (тёмная — `$color-red-500`,
+  светлая — `$color-red-600`).
+- **Всем, у кого есть компонентные тесты форм (`test/components/{auth,profile,playlist,report}`):** ошибки
+  валидации и ошибки бэка по конкретному полю теперь выводятся текстом под полем (`UiInput` с `error`-строкой,
+  композабл `useFormErrors`), а не снекбаром; снекбар — только для общих ошибок формы. Тесты, ждущие
+  `showError('error_email' | 'error_username' | 'error_password' | 'playlist_name_exists')` и снекбар на пустой
+  сабмит жалобы, упадут. Взять файлы из gay-cool-new (коммит «Field errors under inputs instead of snackbar»):
+  `auth/login`, `auth/register`, `auth/recovery`, `playlist/add`, `report/main`, `profile/password`,
+  `profile/setup` — там же новые кейсы (пусто → «обязательное поле», ошибка бэка по полю, сброс при вводе).
+- **Сайтам со своим кодом на `useUser().changePassword / changeEmail / recoveryPassword` (hd-sex-new — при
+  переезде на свежий слой):** они больше не показывают снекбар ошибки сами, а пробрасывают ошибку. Вызывать с
+  `await` в `try/catch` и отдавать её в `useFormErrors().applyApiError(err, '<ключ снекбара>')`, иначе ошибка
+  уйдёт в консоль как необработанная и пользователь ничего не увидит.
+- **Всем — к сведению:** новый общий ключ `field_error.required` («This field is required») пока только в `en-US`;
+  перевод — через CSV-мост слоя.
+
 ## 0.0.1075 — 2026-11-06
 
 - **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hdsex-remaster), срочно:** без нового токена сборка

package/assets/scss/themes/dark/_theme.scss

@@ -105,6 +105,7 @@ $input-s-border: transparent;
 $input-s-border--focus: $color-zinc-600;
 $input-text--disabled: $color-zinc-400;
 $input-border--error: $color-red-500;
+$input-error: $color-red-500;
 $input-autofill-text: $color-white;
 $input-button-text: $color-zinc-500;
 $input-button-text--hover: $color-white;

package/assets/scss/themes/light/_theme.scss

@@ -116,6 +116,7 @@ $input-s-border: transparent;
 $input-s-border--focus: $color-indigo-soft;
 $input-text--disabled: $color-gray-400;
 $input-border--error: $color-red-500;
+$input-error: $color-red-600;
 $input-autofill-text: $color-gray-900;
 $input-button-text: $color-gray-500;
 $input-button-text--hover: $color-gray-500;

package/components/auth/login.vue

@@ -10,10 +10,10 @@
       :label="t('auth.username')"
       :placeholder="t('auth.username')"
       hide-label
-      :error="error.username"
+      :error="errors.username"
       name="login-name"
       enterkeyhint="next"
-      @update:error="(val: boolean) => (error.username = val)"
+      @update:error="clearError('username')"
       @enter="passwordRef?.focus()"
     />
     <UiInput
@@ -22,10 +22,11 @@
       :label="t('auth.password')"
       :placeholder="t('auth.password')"
       hide-label
-      :error="error.password_hash"
+      :error="errors.password_hash"
+      name="login-password"
       type="password"
       enterkeyhint="go"
-      @update:error="(val: boolean) => (error.password_hash = val)"
+      @update:error="clearError('password_hash')"
       @enter="login"
     />
 
@@ -74,10 +75,7 @@ const form = ref({
   password_hash: '',
 });
 
-const error = ref({
-  username: false,
-  password_hash: false,
-});
+const { errors, clearError, resetErrors, validate, applyApiError } = useFormErrors(['username', 'password_hash'] as const);
 
 const emit = defineEmits<{
   (eventName: 'forgot'): void;
@@ -94,33 +92,26 @@ function onCreateClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
+const { show, resetSnackbar } = useSnackbar();
 
 async function login() {
   resetSnackbar();
-  error.value.username = false;
-  error.value.password_hash = false;
-
-  if (!validateUsername(form.value.username)) {
-    error.value.username = true;
-    showError('error_username');
-  }
-  if (!validatePassword(form.value.password_hash)) {
-    error.value.password_hash = true;
-    showError('error_password');
-  }
-
-  if (!error.value.username && !error.value.password_hash) {
-    try {
-      loading.value = true;
-      await useUser(AuthorizationApiService).login(form.value);
-      useAuthPopup().closeAuthPopup();
-      show('Welcome back!');
-    } catch (error) {
-      setErrorState(error);
-    } finally {
-      loading.value = false;
-    }
+  resetErrors();
+
+  const isUsernameValid = validate('username', form.value.username, validateUsername, 'snackbar.error_username');
+  const isPasswordValid = validate('password_hash', form.value.password_hash, validatePassword, 'snackbar.error_password');
+
+  if (!isUsernameValid || !isPasswordValid) return;
+
+  try {
+    loading.value = true;
+    await useUser(AuthorizationApiService).login(form.value);
+    useAuthPopup().closeAuthPopup();
+    show('Welcome back!');
+  } catch (error) {
+    applyApiError(error);
+  } finally {
+    loading.value = false;
   }
 }
 </script>

package/components/auth/recovery.vue

@@ -15,12 +15,12 @@
       :label="$t('email')"
       :placeholder="$t('email')"
       hide-label
-      :error="error.email"
+      :error="errors.email"
       type="email"
       inputmode="email"
       enterkeyhint="send"
       autocomplete="email"
-      @update:error="(val: boolean) => error.email = val"
+      @update:error="clearError('email')"
       @enter="submit"
     />
 
@@ -56,9 +56,7 @@ const form = ref({
   token: '',
 } as IPasswordForm);
 
-const error = ref({
-  email: false,
-});
+const { errors, clearError, resetErrors, validate, applyApiError } = useFormErrors(['email'] as const);
 
 const emit = defineEmits<{
   (eventName: 'login'): void
@@ -70,7 +68,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
+const { show, resetSnackbar } = useSnackbar();
 
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
@@ -83,13 +81,9 @@ onMounted(async () => {
 
 async function submit() {
   resetSnackbar();
-  error.value.email = false;
+  resetErrors();
 
-  if (!validateEmail(form.value.email)) {
-    error.value.email = true;
-    showError('error_email');
-    return;
-  }
+  if (!validate('email', form.value.email, validateEmail, 'snackbar.error_email')) return;
 
   try {
     loading.value = true;
@@ -98,7 +92,7 @@ async function submit() {
     useAuthPopup().closeAuthPopup();
     show('Check your email');
   } catch (error) {
-    setErrorState(error);
+    applyApiError(error);
   } finally {
     loading.value = false;
   }

package/components/auth/register.vue

@@ -15,12 +15,12 @@
         :placeholder="t('email')"
         :label="t('email')"
         hide-label
-        :error="error.email"
+        :error="errors.email"
         type="email"
         inputmode="email"
         enterkeyhint="next"
         autocomplete="email"
-        @update:error="(val: boolean) => error.email = val"
+        @update:error="clearError('email')"
         @enter="usernameRef?.focus()"
       />
       <UiInput
@@ -29,10 +29,10 @@
         :label="t('auth.username')"
         :placeholder="t('auth.username')"
         hide-label
-        :error="error.username"
+        :error="errors.username"
         name="login-name"
         enterkeyhint="next"
-        @update:error="(val: boolean) => error.username = val"
+        @update:error="clearError('username')"
         @enter="passwordRef?.focus()"
       />
       <UiInput
@@ -41,11 +41,11 @@
         :label="t('auth.password')"
         :placeholder="t('auth.password')"
         hide-label
-        :error="error.password_hash"
+        :error="errors.password_hash"
         type="password"
         enterkeyhint="send"
         autocomplete="new-password"
-        @update:error="(val: boolean) => error.password_hash = val"
+        @update:error="clearError('password_hash')"
         @enter="submit"
       />
 
@@ -113,11 +113,7 @@ const form = ref({
   token: '',
 } as IRegistrateForm);
 
-const error = ref({
-  username: false,
-  email: false,
-  password_hash: false,
-});
+const { errors, clearError, resetErrors, validate, applyApiError } = useFormErrors(['email', 'username', 'password_hash'] as const);
 
 const emit = defineEmits<{
   (eventName: 'login'): void
@@ -129,7 +125,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
+const { show, resetSnackbar } = useSnackbar();
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
   try {
@@ -142,23 +138,18 @@ onMounted(async () => {
 function validateForm(): boolean {
   const { username, email, password_hash } = form.value;
 
-  const errors = {
-    username: !validateUsername(username),
-    email: !validateEmail(email),
-    password_hash: !validatePassword(password_hash),
-  };
-
-  if (!validateEmail(email)) showError('error_email');
-  if (!validatePassword(password_hash)) showError('error_password');
-  if (!validateUsername(username)) showError('error_username');
-
-  error.value = errors;
+  const results = [
+    validate('email', email, validateEmail, 'snackbar.error_email'),
+    validate('username', username, validateUsername, 'snackbar.error_username'),
+    validate('password_hash', password_hash, validatePassword, 'snackbar.error_password'),
+  ];
 
-  return !Object.values(errors).some(Boolean);
+  return results.every(Boolean);
 }
 
 async function submit() {
   resetSnackbar();
+  resetErrors();
   if (!validateForm()) return;
 
   try {
@@ -173,7 +164,7 @@ async function submit() {
     useAuthPopup().closeAuthPopup();
     show('Registration success');
   } catch (err) {
-    setErrorState(err);
+    applyApiError(err);
     console.error('Ошибка reCAPTCHA или регистрации:', err);
   } finally {
     loading.value = false;

package/components/playlist/add.vue

@@ -85,9 +85,9 @@
           v-else
           v-model="newPlaylistName"
           v-model:type="playlistType"
-          :error="nameError"
+          :error="errors.name"
           :placeholder="$t('playlist_name')"
-          @update:error="nameError = $event"
+          @update:error="clearError('name')"
           @close="clearNewPlaylist"
           @submit="onSaveClick"
         />
@@ -199,9 +199,10 @@ async function closePopup() {
 
 const newPlaylistName = ref('');
 const playlistType = ref<PlaylistType>(PlaylistType.Public);
-const nameError = ref(false);
+const { errors, clearError, resetErrors, validate, setError } = useFormErrors(['name'] as const);
 
 function clearNewPlaylist() {
+  resetErrors();
   newPlaylistName.value = '';
   playlistType.value = PlaylistType.Public;
   step.value = 'add';
@@ -223,7 +224,7 @@ const postVideoForm = computed(() => ({
   duration: videoCard.value?.duration ?? 0,
 }));
 
-const { setErrorState, show, showError } = useSnackbar();
+const { setErrorState, show } = useSnackbar();
 const { generateLink } = useGenerateLink();
 const { t } = useI18n();
 
@@ -259,15 +260,15 @@ async function onSaveClick() {
 
   if (step.value === 'new') {
     const name = newPlaylistName.value.trim();
-    if (!name) return;
+    resetErrors();
+    if (!validate('name', name)) return;
 
     const nameExists = props.userPlaylists?.items?.some(
       (item: IPlaylistCard) => item.name.toLowerCase() === name.toLowerCase()
     );
 
     if (nameExists) {
-      nameError.value = true;
-      showError('playlist_name_exists');
+      setError('name', 'snackbar.playlist_name_exists');
       return;
     }
 

package/components/playlist/input.vue

@@ -32,10 +32,10 @@ import type { PlaylistType } from '../../runtime';
 const props = withDefaults(defineProps<{
   modelValue: string
   type: PlaylistType
-  error?: boolean
+  error?: string | boolean
   placeholder?: string
 }>(), {
-  error: false,
+  error: undefined,
   placeholder: '',
 });
 
@@ -69,6 +69,9 @@ const currentType = computed({
 
 .playlist-input .ui-input {
   --input-bg: #{$playlist-input-bg};
+
+  grid-row: 1 / span 2;
+  grid-template-rows: subgrid;
 }
 
 .playlist-input .ui-input__input {

package/components/profile/password.vue

@@ -6,11 +6,11 @@
         v-model="form.currentPassword"
         :label="t('profile.old_password')"
         :placeholder="t('profile.old_password')"
-        :error="error.currentPassword"
+        :error="errors.currentPassword"
         type="password"
         hide-label
         autocomplete="new-password"
-        @update:error="val => error.currentPassword = val"
+        @update:error="clearError('currentPassword')"
       />
     </div>
     <div class="profile-password__new">
@@ -18,11 +18,11 @@
         v-model="form.newPassword"
         :label="t('profile.new_password')"
         :placeholder="t('profile.new_password')"
-        :error="error.newPassword"
+        :error="errors.newPassword"
         type="password"
         hide-label
         autocomplete="new-password"
-        @update:error="val => error.newPassword = val"
+        @update:error="clearError('newPassword')"
       />
     </div>
     <UiBtn
@@ -48,38 +48,29 @@ const form = ref<IChangePasswordForm>({
 
 const { t } = useI18n();
 
-const error = ref({
-  currentPassword: false,
-  newPassword: false,
-});
+const { errors, clearError, resetErrors, validate, applyApiError } = useFormErrors(['currentPassword', 'newPassword'] as const);
 
 const loading = ref(false);
 
-function update() {
-  error.value.currentPassword = false;
-  error.value.newPassword = false;
+async function update() {
+  resetErrors();
 
-  if (!validatePassword(form.value.currentPassword)) {
-    error.value.currentPassword = true;
-  }
+  const results = [
+    validate('currentPassword', form.value.currentPassword, validatePassword, 'snackbar.error_password'),
+    validate('newPassword', form.value.newPassword, validatePassword, 'snackbar.error_password'),
+  ];
 
-  if (!validatePassword(form.value.newPassword)) {
-    error.value.newPassword = true;
-  }
-
-  if (error.value.currentPassword || error.value.newPassword) {
-    return;
-  }
+  if (!results.every(Boolean)) return;
 
   try {
     loading.value = true;
-    useUser(AuthorizationApiService).changePassword(form.value);
-  } catch(err) {
-    console.log(err, 'error password changed');
-  } finally {
-    loading.value = false;
+    await useUser(AuthorizationApiService).changePassword(form.value);
     form.value.currentPassword = '';
     form.value.newPassword = '';
+  } catch (err) {
+    applyApiError(err, 'error_while_changing_password');
+  } finally {
+    loading.value = false;
   }
 }
 </script>

package/components/profile/setup.vue

@@ -56,11 +56,11 @@
         v-model="form.email"
         :label="t('profile.email')"
         :placeholder="t('enter_email')"
-        :error="error.email"
+        :error="errors.email"
         type="email"
         label-icon="mail"
         class="profile-setup__email-edit"
-        @update:error="val => error.email = val"
+        @update:error="clearError('email')"
       />
       <UiSelect
         v-model="formCountry"
@@ -179,9 +179,7 @@ const memberSince = computed(() => {
   return new Intl.DateTimeFormat(locale.value, { month: 'long', year: 'numeric' }).format(date);
 });
 
-const error = ref({
-  email: false,
-});
+const { errors, clearError, resetErrors, validate, applyApiError } = useFormErrors(['email'] as const);
 
 function setDate(string: string) {
   form.value.birthday = toUnix(string);
@@ -264,12 +262,9 @@ const updateProfile = async () => {
   form.value.country = findCountry() || null;
   form.value.gender = findGender() || null;
 
-  error.value.email = false;
+  resetErrors();
 
-  if (!validateEmail(form.value.email)) {
-    error.value.email = true;
-    return;
-  }
+  if (!validate('email', form.value.email, validateEmail, 'snackbar.error_email')) return;
 
   try {
     loading.value = true;
@@ -284,7 +279,12 @@ const updateProfile = async () => {
       const value = {
         email: form.value.email
       };
-      await changeEmail(value);
+      try {
+        await changeEmail(value);
+      } catch (err) {
+        applyApiError(err, 'error_while_changing_email');
+        return;
+      }
     }
 
     await updateProfileUser(form.value);

package/components/report/main.vue

@@ -100,16 +100,16 @@
                 :enterkeyhint="subItem.type === 'textarea' ? undefined : (isLastTextInput(subItem.value) ? 'send' : 'next')"
                 :placeholder="subItem.placeholder ? t(`report_form.${subItem.placeholder}`) : undefined"
                 :required="subItem.required"
-                :error="error[subItem.value]"
-                @update:error="(val: boolean) => error[subItem.value] = val"
+                :error="errors[subItem.value]"
+                @update:error="clearError(subItem.value)"
                 @enter="onFieldEnter(subItem.value)"
               />
               <UiCheckbox
                 v-if="subItem.type === 'checkbox'"
                 v-model="form.data[subItem.value] as boolean"
                 :required="subItem.required"
-                :error="error[subItem.value]"
-                @update:error="(val: boolean) => error[subItem.value] = val"
+                :error="!!errors[subItem.value]"
+                @update:error="clearError(subItem.value)"
               >{{ t(`report_form.${subItem.text}`) }}
               </UiCheckbox>
               <UiRadio
@@ -155,7 +155,6 @@ const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
 
 const reasonValue = ref('');
 const errorRadio = ref(false);
-const error = ref<Record<string, boolean>>({});
 
 const { t } = useI18n();
 
@@ -222,6 +221,8 @@ const loading = ref(false);
 
 const activeCategory = computed(() => reportFormsScheme.find((subItem) => subItem.subject === activeStep.value));
 const requiredFields = computed(() => activeCategory.value?.items?.filter(item => item.required).map(item => item.value));
+const fieldNames = computed(() => activeCategory.value?.items?.map(item => item.value).filter(Boolean) ?? []);
+const { errors, clearError, resetErrors, validate } = useFormErrors(fieldNames);
 const hasReasonHeading = computed(() => activeCategory.value?.items?.some(item => item.type === 'heading'));
 
 // Навигация по Enter: однострочные поля (text/email/tel) — фокус на следующее, последнее — сабмит; textarea не участвует
@@ -257,7 +258,7 @@ function resetForm() {
     }
   });
   reasonValue.value = '';
-  Object.keys(error.value).forEach(key => error.value[ key ] = false);
+  resetErrors();
   errorRadio.value = false;
 }
 
@@ -277,7 +278,7 @@ onMounted(async () => {
 async function submit() {
   resetSnackbar();
   errorRadio.value = false;
-  Object.keys(error.value).forEach(key => error.value[ key ] = false);
+  resetErrors();
 
   let valid = true;
 
@@ -286,26 +287,23 @@ async function submit() {
     if (errorRadio.value) valid = false;
   }
 
-  if (requiredFields.value && requiredFields.value.length > 0) {
-    requiredFields.value.forEach(item => {
-      const val = form.value.data[ item ];
-
-      if (item === 'from' && !validateEmail(val as string)) {
-        error.value[ item ] = true;
-        showError('error_email');
-      } else if (item === 'phone' && !validatePhone(val as string)) {
-        error.value[ item ] = !validatePhone(val as string);
-        showError('error_phone');
-      } else if (['confirmTrue', 'confirmOwner'].includes(item)) {
-        error.value[ item ] = !val;
-      } else {
-        error.value[ item ] = val === undefined || val === null || String(val).trim() === '';
-        if (error.value[ item ]) showError('error_text');
-      }
-
-      if (error.value[ item ]) valid = false;
-    });
-  }
+  requiredFields.value?.forEach((item) => {
+    const val = form.value.data[ item ];
+
+    let isValid: boolean;
+
+    if (item === 'from') {
+      isValid = validate(item, val, validateEmail, 'snackbar.error_email');
+    } else if (item === 'phone') {
+      isValid = validate(item, val, validatePhone, 'snackbar.error_phone');
+    } else if (typeof val === 'boolean' || ['confirmTrue', 'confirmOwner'].includes(item)) {
+      isValid = validate(item, val ? 'checked' : '');
+    } else {
+      isValid = validate(item, val);
+    }
+
+    if (!isValid) valid = false;
+  });
 
   if (!valid) return;
 

package/components/ui/input.vue

@@ -45,6 +45,8 @@
         :name="name"
         :enterkeyhint="enterkeyhint"
         :tabindex="disabled ? '-1' : '0'"
+        :aria-invalid="error ? 'true' : undefined"
+        :aria-describedby="errorText ? errorId : undefined"
         class="ui-input__input"
         rows="3"
         spellcheck="false"
@@ -67,6 +69,8 @@
         :autofocus="autofocus"
         :tabindex="disabled ? '-1' : '0'"
         :placeholder="placeholder"
+        :aria-invalid="error ? 'true' : undefined"
+        :aria-describedby="errorText ? errorId : undefined"
         class="ui-input__input"
         autocapitalize="off"
         spellcheck="false"
@@ -88,16 +92,25 @@
         />
       </button>
     </div>
-    <!--    <p-->
-    <!--        v-if="error"-->
-    <!--        class="ui-input__error"-->
-    <!--    >-->
-    <!--      <UiIcon-->
-    <!--          name="danger"-->
-    <!--          size="16"-->
-    <!--      />-->
-    <!--      {{ error }}-->
-    <!--    </p>-->
+    <div
+      v-if="hasErrorText"
+      :aria-hidden="errorText ? undefined : 'true'"
+      class="ui-input__error"
+    >
+      <p
+        :id="errorId"
+        class="ui-input__error-text"
+        aria-live="polite"
+      >
+        <UiIcon
+          v-if="shownError"
+          name="exclamation-circle"
+          size="16"
+          class="ui-input__error-icon"
+        />
+        {{ shownError }}
+      </p>
+    </div>
   </div>
 </template>
 
@@ -109,7 +122,7 @@ const props = withDefaults(defineProps<{
   type?: InputTypes
   inputmode?: 'text' | 'numeric' | 'email'
   enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
-  error?: boolean
+  error?: string | boolean
   success?: string | boolean
   size?: 'm' | 's'
   autofocus?: boolean
@@ -140,6 +153,18 @@ const emit = defineEmits<{
 
 const showText = ref(false);
 
+const errorId = useId();
+
+const hasErrorText = computed(() => typeof props.error === 'string');
+
+const errorText = computed(() => hasErrorText.value ? props.error as string : '');
+
+const shownError = ref(errorText.value);
+
+watch(errorText, (text) => {
+  if (text) shownError.value = text;
+});
+
 const inputRef = ref<HTMLInputElement | HTMLTextAreaElement>();
 
 defineExpose({ focus: () => inputRef.value?.focus() });
@@ -278,6 +303,34 @@ const normalizedValue = computed(() => {
   border-color: var(--input-border--error, #{$input-border--error});
 }
 
+.ui-input__error {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: var(--transition) grid-template-rows, var(--transition) opacity;
+}
+
+.ui-input.ui-input--error .ui-input__error {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.ui-input__error-text {
+  @include font-xs;
+
+  display: flex;
+  column-gap: 4px;
+  align-items: flex-start;
+  min-height: 0;
+  overflow: hidden;
+  padding-top: 6px;
+  color: var(--input-error, #{$input-error});
+}
+
+.ui-input__error-icon {
+  flex-shrink: 0;
+}
+
 .ui-input__button {
   position: absolute;
   top: 50%;

package/composables/use-form-errors.ts

@@ -0,0 +1,82 @@
+import { convertString, parseApiFieldErrors } from '../runtime';
+
+/**
+ * Ошибки полей формы: валидация, пустое обязательное поле, ошибка бэка по конкретному полю — выводятся у поля
+ * (`<UiInput :error="errors.<field>">`). Снекбар остаётся только для ошибок формы целиком.
+ * Сообщение — i18n-ключ (`field_error.required`, `snackbar.error_email`) или текст бэка: его ищем в `snackbar.*`
+ * по snake_case, как снекбар, а не найдя — показываем как есть.
+ */
+export const useFormErrors = <TField extends string>(fields: MaybeRefOrGetter<readonly TField[]>) => {
+  const { t, te } = useI18n();
+  const { setErrorState, showError } = useSnackbar();
+
+  const raw = ref({}) as Ref<Partial<Record<TField, string>>>;
+
+  function translate(message: string) {
+    if (!message) return '';
+    if (te(message)) return t(message);
+
+    const snackKey = `snackbar.${convertString().toSnakeCase(message)}`;
+    return te(snackKey) ? t(snackKey) : message;
+  }
+
+  const errors = computed(() =>
+    Object.fromEntries(toValue(fields).map(field => [field, translate(raw.value[field] ?? '')])) as Record<TField, string>
+  );
+
+  const hasErrors = computed(() => toValue(fields).some(field => raw.value[field]));
+
+  function setError(field: TField, message: string) {
+    raw.value[field] = message;
+  }
+
+  function clearError(field: TField) {
+    raw.value[field] = '';
+  }
+
+  function resetErrors() {
+    raw.value = {};
+  }
+
+  /** Обязательное поле пустое → `field_error.required`, иначе `check` решает, валидно ли, и даёт `message`. */
+  function validate(field: TField, value: unknown, check?: (value: string) => boolean, message?: string) {
+    const text = String(value ?? '').trim();
+
+    if (!text) {
+      setError(field, 'field_error.required');
+    } else if (check && message && !check(text)) {
+      setError(field, message);
+    } else {
+      clearError(field);
+    }
+
+    return !raw.value[field];
+  }
+
+  /**
+   * Ошибки бэка по известным полям — к полям; если ни одно не подошло — ошибка формы в снекбар:
+   * `fallback`, если передан, иначе текст бэка.
+   */
+  function applyApiError(error: unknown, fallback?: string) {
+    const fieldErrors = parseApiFieldErrors(error);
+    const known = toValue(fields).filter(field => fieldErrors[field]);
+
+    if (!known.length) {
+      if (fallback) showError(fallback);
+      else setErrorState(error);
+      return;
+    }
+
+    known.forEach(field => setError(field, fieldErrors[field] as string));
+  }
+
+  return {
+    errors,
+    hasErrors,
+    setError,
+    clearError,
+    resetErrors,
+    validate,
+    applyApiError,
+  };
+};

package/composables/use-user.ts

@@ -24,7 +24,7 @@ function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K
  * @param apiService - сервис для API-запросов
  */
 export const useUser = (apiService) => {
-  const { show, showError } = useSnackbar();
+  const { show } = useSnackbar();
   const { cookie: authCookie, setToken, clearToken } = useAuthCookie();
   const register = async (form: IRegistrateForm) => {
     const response = await apiService.register(form);
@@ -76,8 +76,8 @@ export const useUser = (apiService) => {
       await apiService.changePassword(form);
       show('Password changed');
     } catch (err) {
-      showError('Error while changing password');
       console.log(err, 'error change password');
+      throw err;
     }
   };
 
@@ -86,8 +86,8 @@ export const useUser = (apiService) => {
       await apiService.changeEmail(form);
       show('email_changed');
     } catch (err) {
-      showError('Error while changing email');
       console.log(err, 'error change email');
+      throw err;
     }
   };
 
@@ -98,8 +98,8 @@ export const useUser = (apiService) => {
       show('Password recovered');
       await useRouter().push(generateLink('/profile'));
     } catch (err) {
-      showError('Error while recovery password');
-      console.log(err, 'error change password');
+      console.log(err, 'error recovery password');
+      throw err;
     }
   };
 

package/i18n/locales/en-US.json

@@ -1,4 +1,7 @@
 {
+  "field_error": {
+    "required": "This field is required"
+  },
   "scenes": "Scenes",
   "register_to_upload": "Please sign up or log in to upload your videos",
   "age_gate": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.1075",
+  "version": "0.0.1076",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/user/recovery-password.vue

@@ -4,10 +4,10 @@
     <UiInput
       v-model="form.newPassword"
       :label="t('profile.new_password')"
-      :error="error.newPassword"
+      :error="errors.newPassword"
       type="password"
       autocomplete="new-password"
-      @update:error="val => error.newPassword = val"
+      @update:error="clearError('newPassword')"
     />
     <UiBtn
       :disabled="form.newPassword.length < 4"
@@ -32,24 +32,18 @@ const form = ref<IRecoveryPasswordForm>({
   token: String(route.query['token']),
 });
 
-const error = ref({
-  newPassword: false,
-});
+const { errors, clearError, resetErrors, validate, applyApiError } = useFormErrors(['newPassword'] as const);
 
-function update() {
-  error.value.newPassword = false;
+async function update() {
+  resetErrors();
 
-  if (!validatePassword(form.value.newPassword)) {
-    error.value.newPassword = true;
-    return;
-  }
+  if (!validate('newPassword', form.value.newPassword, validatePassword, 'snackbar.error_password')) return;
 
   try {
-    useUser(AuthorizationApiService).recoveryPassword(form.value);
-  } catch (err) {
-    console.log(err, 'error password recovery');
-  } finally {
+    await useUser(AuthorizationApiService).recoveryPassword(form.value);
     form.value.newPassword = '';
+  } catch (err) {
+    applyApiError(err, 'error_while_recovery_password');
   }
 }
 

package/runtime/index.ts

@@ -58,6 +58,7 @@ export * from './utils/converters/convert-query-categories';
 export * from './utils/converters/convert-string-array-to-chips';
 export * from './utils/server/api-helper';
 export * from './utils/server/parse-api-error';
+export * from './utils/server/parse-api-field-errors';
 export * from './utils/server/get-url-with-proxied-params';
 export * from './utils/server/server-api-helper';
 export * from './utils/converters/convert-date-to-timestamp';

package/runtime/utils/server/__tests__/parse-api-field-errors.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { parseApiFieldErrors } from '../parse-api-field-errors';
+
+describe('parseApiFieldErrors', () => {
+  it('объект полей с массивами — первое сообщение', () => {
+    const error = { response: { _data: { error: { username: ['Taken', 'Too short'], email: ['Invalid'] } } } };
+    expect(parseApiFieldErrors(error)).toEqual({ username: 'Taken', email: 'Invalid' });
+  });
+
+  it('объект полей со строками', () => {
+    const error = { response: { _data: { error: { password_hash: 'Too short' } } } };
+    expect(parseApiFieldErrors(error)).toEqual({ password_hash: 'Too short' });
+  });
+
+  it('вложенный data.error и JSON-строка', () => {
+    const error = { response: { _data: '{"data":{"error":{"email":["Invalid"]}}}' } };
+    expect(parseApiFieldErrors(error)).toEqual({ email: 'Invalid' });
+  });
+
+  it('пустые значения пропускаются', () => {
+    const error = { response: { _data: { error: { email: [], name: '' } } } };
+    expect(parseApiFieldErrors(error)).toEqual({});
+  });
+
+  it('строка — ошибка формы, не поля', () => {
+    expect(parseApiFieldErrors({ response: { _data: { error: 'Invalid credentials' } } })).toEqual({});
+  });
+
+  it('массив — ошибка формы, не поля', () => {
+    expect(parseApiFieldErrors({ response: { _data: { error: ['Bad request'] } } })).toEqual({});
+  });
+
+  it('битый JSON и пустые входы', () => {
+    expect(parseApiFieldErrors({ response: { _data: '{oops' } })).toEqual({});
+    expect(parseApiFieldErrors(null)).toEqual({});
+    expect(parseApiFieldErrors({})).toEqual({});
+  });
+});

package/runtime/utils/server/parse-api-field-errors.ts

@@ -0,0 +1,21 @@
+/**
+ * Достаёт из ошибки API ошибки конкретных полей: `{ error: { field: ['msg'] } }` или `{ error: { field: 'msg' } }`.
+ * Строка или массив в `error` — ошибка формы целиком, полей нет → пустой объект.
+ */
+export function parseApiFieldErrors(error: any): Record<string, string> {
+  try {
+    const raw = error?.response?._data;
+    const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
+    const source = parsed?.data?.error || parsed?.error;
+
+    if (!source || typeof source !== 'object' || Array.isArray(source)) return {};
+
+    return Object.entries(source).reduce<Record<string, string>>((acc, [field, value]) => {
+      const message = Array.isArray(value) ? value[0] : value;
+      if (typeof message === 'string' && message) acc[field] = message;
+      return acc;
+    }, {});
+  } catch {
+    return {};
+  }
+}