фикс регистрации
This commit is contained in:
Professional
parent
66e20ddf22
commit
89ac33f844
@ -47,6 +47,22 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="birthdate">
|
||||
<i class="bi-calendar"></i>
|
||||
Дата рождения
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="birthdate"
|
||||
v-model="birthdate"
|
||||
required
|
||||
:disabled="loading"
|
||||
:max="maxDate"
|
||||
class="date-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">
|
||||
<i class="bi-shield-lock"></i>
|
||||
@ -110,16 +126,24 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { useAuth } from '@/auth';
|
||||
|
||||
const name = ref('');
|
||||
const email = ref('');
|
||||
const birthdate = ref('');
|
||||
const password = ref('');
|
||||
const confirmPassword = ref('');
|
||||
const errorMessage = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
// Вычисляем максимальную дату (минимальный возраст 18 лет)
|
||||
const maxDate = computed(() => {
|
||||
const date = new Date();
|
||||
date.setFullYear(date.getFullYear() - 18);
|
||||
return date.toISOString().split('T')[0];
|
||||
});
|
||||
|
||||
const { register } = useAuth();
|
||||
|
||||
// Функция для блокировки прокрутки страницы
|
||||
@ -151,7 +175,7 @@ const handleRegister = async () => {
|
||||
loading.value = true;
|
||||
|
||||
// Простая валидация на клиенте
|
||||
if (!name.value || !email.value || !password.value || !confirmPassword.value) {
|
||||
if (!name.value || !email.value || !birthdate.value || !password.value || !confirmPassword.value) {
|
||||
errorMessage.value = 'Пожалуйста, заполните все обязательные поля.';
|
||||
loading.value = false;
|
||||
return;
|
||||
@ -167,10 +191,27 @@ const handleRegister = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Проверяем возраст (минимум 18 лет)
|
||||
const birthDate = new Date(birthdate.value);
|
||||
const today = new Date();
|
||||
let age = today.getFullYear() - birthDate.getFullYear();
|
||||
const monthDiff = today.getMonth() - birthDate.getMonth();
|
||||
|
||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
|
||||
age--;
|
||||
}
|
||||
|
||||
if (age < 18) {
|
||||
errorMessage.value = 'Вам должно быть не менее 18 лет для регистрации.';
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = {
|
||||
name: name.value,
|
||||
email: email.value,
|
||||
birthdate: birthdate.value,
|
||||
password: password.value
|
||||
};
|
||||
await register(userData);
|
||||
@ -270,6 +311,8 @@ const handleRegister = async () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white; /* Явно задаем белый цвет текста */
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
@ -327,6 +370,15 @@ const handleRegister = async () => {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Стили для поля даты */
|
||||
.date-input {
|
||||
color-scheme: dark; /* Темная тема для календаря */
|
||||
}
|
||||
|
||||
.date-input::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1); /* Инвертируем цвет иконки календаря для темной темы */
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
@ -492,7 +544,8 @@ const handleRegister = async () => {
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.register-card {
|
||||
padding: 2.5rem 1.5rem;
|
||||
padding: 2rem 1.5rem;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
@ -524,14 +577,15 @@ const handleRegister = async () => {
|
||||
@media (max-width: 576px) {
|
||||
.brand-logo {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
width: 94%;
|
||||
padding: 1.5rem 1.2rem;
|
||||
margin: 0;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
@ -540,20 +594,21 @@ const handleRegister = async () => {
|
||||
|
||||
.register-header p {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.brand-logo {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-top: 1.8rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 1.3rem 1.1rem;
|
||||
width: 95%;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
@ -570,6 +625,7 @@ const handleRegister = async () => {
|
||||
|
||||
.form-group input {
|
||||
padding: 0.7rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
@ -581,11 +637,12 @@ const handleRegister = async () => {
|
||||
@media (max-height: 700px) {
|
||||
.brand-logo {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: 0.7rem;
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
@ -594,28 +651,33 @@ const handleRegister = async () => {
|
||||
}
|
||||
|
||||
.register-header p {
|
||||
margin-bottom: 0.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 0.7rem;
|
||||
margin-top: 0.7rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
margin-top: 0.8rem;
|
||||
margin-top: 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -623,12 +685,12 @@ const handleRegister = async () => {
|
||||
.brand-logo {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 1rem 1rem;
|
||||
max-height: calc(100vh - 80px);
|
||||
padding: 1rem;
|
||||
max-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
@ -638,7 +700,7 @@ const handleRegister = async () => {
|
||||
|
||||
.register-header p {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@ -671,11 +733,12 @@ const handleRegister = async () => {
|
||||
.brand-logo {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 0.8rem;
|
||||
max-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
@ -685,11 +748,11 @@ const handleRegister = async () => {
|
||||
|
||||
.register-header p {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
@ -704,10 +767,68 @@ const handleRegister = async () => {
|
||||
.action-button {
|
||||
padding: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.wave-container {
|
||||
height: 80px; /* Уменьшаем высоту волн */
|
||||
}
|
||||
|
||||
.wave {
|
||||
height: 80px;
|
||||
background-size: 1200px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 480px) {
|
||||
.brand-logo {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 0.6rem;
|
||||
max-height: calc(100vh - 30px);
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.register-header p {
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 0.35rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
font-size: 0.7rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.wave-container {
|
||||
@ -721,5 +842,10 @@ const handleRegister = async () => {
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.date-input::-webkit-calendar-picker-indicator {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user