Всё переделано, разделено на backend и frontend

ospabhost/frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

ospabhost/frontend/src/App.tsx

@@ -1,35 +1,32 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import HomePage from './pages/index';
+import LoginPage from './pages/login';
+import RegisterPage from './pages/register';
+import DashboardPage from './pages/dashboard/index';
 
+const App = () => {
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
+    <Router>
+      <header className="bg-gray-800 text-white p-4">
+        <nav className="container mx-auto flex justify-between items-center">
+          <Link to="/" className="text-2xl font-bold">ospab.host</Link>
+          <div>
+            <Link to="/login" className="px-4 py-2 hover:bg-gray-700 rounded-md">Вход</Link>
+            <Link to="/register" className="px-4 py-2 ml-2 hover:bg-gray-700 rounded-md">Регистрация</Link>
+            <Link to="/dashboard" className="px-4 py-2 ml-2 hover:bg-gray-700 rounded-md">Дашборд</Link>
+          </div>
+        </nav>
+      </header>
+      <main className="p-4">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route path="/dashboard" element={<DashboardPage />} />
+        </Routes>
+      </main>
+    </Router>
+  );
+};
 
-export default App
+export default App;

ospabhost/frontend/src/pages/dashboard/index.tsx

@@ -0,0 +1,3 @@
+const DashboardPage = () => <div>Дашборд (заглушка)</div>;
+
+export default DashboardPage;

ospabhost/frontend/src/pages/index.tsx

@@ -0,0 +1,10 @@
+const HomePage = () => {
+  return (
+    <div className="text-center mt-20">
+      <h1 className="text-4xl font-bold">Добро пожаловать на ospab.host!</h1>
+      <p className="text-lg mt-4">Мы работаем над нашим сайтом.</p>
+    </div>
+  );
+};
+
+export default HomePage;

ospabhost/frontend/src/pages/login.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const LoginPage = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [message, setMessage] = useState('');
+  const navigate = useNavigate();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMessage('');
+
+    try {
+      const response = await fetch('http://localhost:5000/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setMessage(data.message);
+        localStorage.setItem('token', data.token);
+        navigate('/dashboard'); // Перенаправляем на дашборд после успешного входа
+      } else {
+        setMessage(data.message || 'Ошибка входа. Проверьте email и пароль.');
+      }
+    } catch (error) {
+      console.error('Ошибка:', error);
+      setMessage('Не удалось подключиться к серверу.');
+    }
+  };
+
+  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={handleLogin} className="bg-white p-8 rounded-lg shadow-md w-96">
+        <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
+          />
+        </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
+          />
+        </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="/register" className="text-blue-500 hover:underline">Зарегистрироваться</a>
+      </p>
+    </div>
+  );
+};
+
+export default LoginPage;

ospabhost/frontend/src/pages/register.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+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 data = await response.json();
+
+      if (response.ok) {
+        setMessage(data.message);
+        localStorage.setItem('token', data.token);
+        navigate('/dashboard'); // Перенаправляем на дашборд после успешной регистрации
+      } else {
+        setMessage(data.message || 'Ошибка регистрации.');
+      }
+    } catch (error) {
+      console.error('Ошибка:', error);
+      setMessage('Не удалось подключиться к серверу.');
+    }
+  };
+
+  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>
+          <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
+          />
+        </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
+          />
+        </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
+          />
+        </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>
+    </div>
+  );
+};
+
+export default RegisterPage;