Reflex/src/views/RegisterView.vue

<template>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header text-center">
            <h2>Создать аккаунт</h2>
          </div>
          <div class="card-body">
            <form @submit.prevent="handleRegister">
              <div class="mb-3">
                <label for="name" class="form-label">Имя:</label>
                <input type="text" class="form-control" id="name" v-model="name" required :disabled="loading" />
              </div>

              <div class="mb-3">
                <label for="email" class="form-label">Email:</label>
                <input type="email" class="form-control" id="email" v-model="email" required :disabled="loading" />
              </div>

              <div class="mb-3">
                <label for="password" class="form-label">Пароль:</label>
                <input type="password" class="form-control" id="password" v-model="password" required :disabled="loading" />
              </div>

              <div class="mb-3">
                <label for="confirmPassword" class="form-label">Подтвердите пароль:</label>
                <input type="password" class="form-control" id="confirmPassword" v-model="confirmPassword" required :disabled="loading" />
              </div>
              
              <!-- Опциональные поля, можно добавить позже или оставить -->
              <!-- 
              <div class="mb-3">
                <label for="dateOfBirth" class="form-label">Дата рождения:</label>
                <input type="date" class="form-control" id="dateOfBirth" v-model="dateOfBirth" :disabled="loading" />
              </div>

              <div class="mb-3">
                <label for="gender" class="form-label">Пол:</label>
                <select class="form-select" id="gender" v-model="gender" :disabled="loading">
                  <option value="">Не выбрано</option>
                  <option value="male">Мужской</option>
                  <option value="female">Женский</option>
                  <option value="other">Другой</option>
                </select>
              </div>
              -->

              <div v-if="errorMessage" class="alert alert-danger" role="alert">
                {{ errorMessage }}
              </div>

              <button type="submit" class="btn btn-success w-100" :disabled="loading">
                <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                {{ loading ? 'Регистрация...' : 'Зарегистрироваться' }}
              </button>
            </form>
          </div>
          <div class="card-footer text-center">
            <p class="mb-0">
              Уже есть аккаунт? <router-link to="/login">Войти</router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuth } from '@/auth'; // Импортируем наш auth composable

const name = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
// const dateOfBirth = ref(''); // Если будешь использовать эти поля
// const gender = ref('');      // Если будешь использовать эти поля
const errorMessage = ref('');
const loading = ref(false);

const { register } = useAuth(); // Получаем функцию register

const handleRegister = async () => {
  errorMessage.value = '';
  loading.value = true;

  // Простая валидация на клиенте
  if (!name.value || !email.value || !password.value || !confirmPassword.value) {
    errorMessage.value = 'Пожалуйста, заполните все обязательные поля.';
    loading.value = false;
    return;
  }
  if (password.value !== confirmPassword.value) {
    errorMessage.value = 'Пароли не совпадают.';
    loading.value = false;
    return;
  }
  if (password.value.length < 6) { // Можно синхронизировать с валидацией бэкенда
    errorMessage.value = 'Пароль должен быть не менее 6 символов.';
    loading.value = false;
    return;
  }

  try {
    // Собираем данные для регистрации
    const userData = {
      name: name.value,
      email: email.value,
      password: password.value,
      // dateOfBirth: dateOfBirth.value || undefined, // Отправляем, если заполнено
      // gender: gender.value || undefined,          // Отправляем, если заполнено
    };
    await register(userData);
    // Перенаправление теперь происходит внутри функции register в auth.js
    // Очищать поля здесь не нужно.
  } catch (error) {
    errorMessage.value = error.message || 'Произошла неизвестная ошибка при регистрации.';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* Стили Bootstrap уже должны применяться глобально */
</style>