Начат фронтенд

ospabhost/frontend/src/pages/register.tsx

@@ -1,86 +1,75 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
 
 const RegisterPage = () => {
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [message, setMessage] = useState('');
   const navigate = useNavigate();
 
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
-    setMessage('');
-    
     try {
-      const response = await fetch('http://localhost:5000/api/auth/register', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ username, email, password }),
+      const response = await axios.post('http://localhost:5000/api/auth/register', {
+        username: username,
+        email: email,
+        password: password
       });
-
-      const data = await response.json();
-
-      if (response.ok) {
-        setMessage(data.message);
-        localStorage.setItem('token', data.token);
-        navigate('/dashboard'); // Перенаправляем на дашборд после успешной регистрации
-      } else {
-        setMessage(data.message || 'Ошибка регистрации.');
-      }
+      console.log('Успешная регистрация:', response.data);
+      navigate('/login'); // Перенаправляем пользователя на страницу входа
     } catch (error) {
-      console.error('Ошибка:', error);
-      setMessage('Не удалось подключиться к серверу.');
+      let errMsg = 'Ошибка регистрации. Пожалуйста, попробуйте снова.';
+      if (axios.isAxiosError(error)) {
+        errMsg = error.response?.data?.message || errMsg;
+        console.error('Ошибка регистрации:', error.response?.data || error.message);
+      } else {
+        console.error('Ошибка регистрации:', error);
+      }
+      alert(errMsg);
     }
   };
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <h1 className="text-3xl font-bold mb-4">Регистрация</h1>
-      <form onSubmit={handleRegister} className="bg-white p-8 rounded-lg shadow-md w-96">
-        <div className="mb-4">
-          <label className="block text-gray-700">Имя пользователя</label>
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <div className="bg-white p-8 md:p-10 rounded-3xl shadow-2xl w-full max-w-md text-center">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">Регистрация</h1>
+        <form onSubmit={handleRegister}>
           <input
             type="text"
-            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
-            required
+            placeholder="Имя пользователя"
+            className="w-full px-5 py-3 mb-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-ospab-primary"
           />
-        </div>
-        <div className="mb-4">
-          <label className="block text-gray-700">Email</label>
           <input
             type="email"
-            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            required
+            placeholder="Электронная почта"
+            className="w-full px-5 py-3 mb-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-ospab-primary"
           />
-        </div>
-        <div className="mb-6">
-          <label className="block text-gray-700">Пароль</label>
           <input
             type="password"
-            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            required
+            placeholder="Пароль"
+            className="w-full px-5 py-3 mb-6 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-ospab-primary"
           />
-        </div>
-        <button
-          type="submit"
-          className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors"
-        >
-          Зарегистрироваться
-        </button>
-      </form>
-      {message && <p className="mt-4 text-center text-red-500">{message}</p>}
-      <p className="mt-4">
-        Уже есть аккаунт? <a href="/login" className="text-blue-500 hover:underline">Войти</a>
-      </p>
+          <button
+            type="submit"
+            className="w-full px-5 py-3 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
+          >
+            Зарегистрироваться
+          </button>
+        </form>
+        <p className="mt-6 text-gray-600">
+          Уже есть аккаунт?{' '}
+          <Link to="/login" className="text-ospab-primary font-bold hover:underline">
+            Войти
+          </Link>
+        </p>
+      </div>
     </div>
   );
 };