tp/main_dc/yalarba/yalarba-nuxt/app/pages/auth/register.vue

<template>
  <div class="register">
    <h2 class="register__title">Регистрация</h2>
    <p class="small-text register__subtitle">Создайте аккаунт</p>

    <form @submit.prevent="handleRegister" class="register__form">
      <div class="form-group">
        <label class="form-label">Имя</label>
        <input
          v-model="name"
          type="text"
          class="form-input"
          :class="{ 'form-input--error': errors.name }"
          placeholder="Ваше имя"
          required
        />
        <span v-if="errors.name" class="form-error">{{ errors.name }}</span>
      </div>

      <div class="form-group">
        <label class="form-label">Email</label>
        <input
          v-model="email"
          type="email"
          class="form-input"
          :class="{ 'form-input--error': errors.email }"
          placeholder="example@mail.com"
          required
        />
        <span v-if="errors.email" class="form-error">{{ errors.email }}</span>
      </div>

      <div class="form-group">
        <label class="form-label">Телефон</label>
        <input
          v-model="phone"
          type="tel"
          class="form-input"
          placeholder="+7 (XXX) XXX-XX-XX"
        />
      </div>

      <div class="form-group">
        <label class="form-label">Пароль</label>
        <input
          v-model="password"
          type="password"
          class="form-input"
          :class="{ 'form-input--error': errors.password }"
          placeholder="Минимум 6 символов"
          required
        />
        <span v-if="errors.password" class="form-error">{{ errors.password }}</span>
      </div>

      <div class="form-group">
        <label class="form-label">Подтвердите пароль</label>
        <input
          v-model="passwordConfirm"
          type="password"
          class="form-input"
          :class="{ 'form-input--error': errors.passwordConfirm }"
          placeholder="Повторите пароль"
          required
        />
        <span v-if="errors.passwordConfirm" class="form-error">{{ errors.passwordConfirm }}</span>
      </div>

      <button
        type="submit"
        class="btn btn--primary btn--lg btn--full"
        :disabled="loading"
      >
        {{ loading ? 'Регистрация...' : 'Зарегистрироваться' }}
      </button>

      <p v-if="apiError" class="register__error">{{ apiError }}</p>
    </form>

    <p class="register__login">
      Уже есть аккаунт?
      <NuxtLink to="/auth/login">Войти</NuxtLink>
    </p>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'auth',
  title: 'Регистрация',
  middleware: 'guest',
})

const name = ref('')
const email = ref('')
const phone = ref('')
const password = ref('')
const passwordConfirm = ref('')
const errors = reactive({
  name: '',
  email: '',
  password: '',
  passwordConfirm: '',
})
const apiError = ref('')
const loading = ref(false)

const { register } = useAuth()

async function handleRegister() {
  errors.name = ''
  errors.email = ''
  errors.password = ''
  errors.passwordConfirm = ''
  apiError.value = ''

  if (!name.value) { errors.name = 'Введите имя'; return }
  if (!email.value) { errors.email = 'Введите email'; return }
  if (!password.value || password.value.length < 6) {
    errors.password = 'Пароль минимум 6 символов'
    return
  }
  if (password.value !== passwordConfirm.value) {
    errors.passwordConfirm = 'Пароли не совпадают'
    return
  }

  loading.value = true
  try {
    await register({
      name: name.value,
      email: email.value,
      password: password.value,
      password_confirm: passwordConfirm.value,
      phone: phone.value || undefined,
    })
    navigateTo('/')
  } catch (e: any) {
    apiError.value = e.message || 'Ошибка регистрации'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register__title {
  text-align: center;
  margin-bottom: 8px;
}

.register__subtitle {
  text-align: center;
  margin-bottom: 24px;
}

.register__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.register__error {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-red);
  text-align: center;
  padding: 8px;
  background: var(--color-bg-error);
  border-radius: var(--radius-sm);
}

.register__login {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-text-gray);
}

.register__login a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.register__login a:hover {
  text-decoration: underline;
}
</style>