128 lines
5.3 KiB
Vue
128 lines
5.3 KiB
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> |