фикс регистрации

src/views/RegisterView.vue

@@ -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-top: 2rem;
-    margin-bottom: 1.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-bottom: 0.8rem;
-    margin-top: 2rem;
+    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;
+    padding: 1rem;
-    max-height: calc(100vh - 80px);
+    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>