init

2025-10-03 15:43:22 +05:00
commit 531e2d2e7e
54 changed files with 2943 additions and 0 deletions
@@ -0,0 +1,43 @@
+import { useMe, useLogout } from "../hooks/useAuth";
+import { useNavigate } from "react-router";
+
+function HomePage() {
+  const { data: user } = useMe();
+  const logoutMutation = useLogout();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await logoutMutation.mutateAsync();
+    navigate("/login");
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <h1 className="text-3xl font-bold mb-6">Главная страница</h1>
+
+          <div className="space-y-4">
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <h2 className="text-xl font-semibold mb-2">
+                Добро пожаловать, {user?.fullName}!
+              </h2>
+              <p className="text-gray-600">Email: {user?.email}</p>
+              <p className="text-gray-600">Роль: {user?.role}</p>
+            </div>
+
+            <button
+              onClick={handleLogout}
+              disabled={logoutMutation.isPending}
+              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50"
+            >
+              {logoutMutation.isPending ? "Выход..." : "Выйти"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HomePage;
@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { useLogin } from "../hooks/useAuth";
+import { useNavigate, Link } from "react-router";
+
+function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+  const loginMutation = useLogin();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      await loginMutation.mutateAsync({ email, password });
+      // Перенаправляем на главную после успешного логина
+      navigate("/");
+    } catch (error) {
+      console.error("Login failed:", error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-md">
+        <div>
+          <h2 className="text-3xl font-bold text-center text-gray-900">
+            Вход в аккаунт
+          </h2>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="your@email.com"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Пароль
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          {loginMutation.isError && (
+            <div className="text-red-600 text-sm text-center">
+              Неверный email или пароль
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loginMutation.isPending}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loginMutation.isPending ? "Вход..." : "Войти"}
+          </button>
+
+          <div className="text-center text-sm text-gray-600">
+            Нет аккаунта?{" "}
+            <Link to="/register" className="text-blue-600 hover:text-blue-700 font-medium">
+              Зарегистрироваться
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;
@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { useRegister } from "../hooks/useAuth";
+import { useNavigate } from "react-router";
+
+function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [fullName, setFullName] = useState("");
+  const navigate = useNavigate();
+
+  const registerMutation = useRegister();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      await registerMutation.mutateAsync({ email, password, fullName });
+      // Перенаправляем на страницу логина после успешной регистрации
+      navigate("/login");
+    } catch (error) {
+      console.error("Registration failed:", error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-md">
+        <div>
+          <h2 className="text-3xl font-bold text-center text-gray-900">
+            Регистрация
+          </h2>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="fullName"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Полное имя
+              </label>
+              <input
+                id="fullName"
+                type="text"
+                required
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="Иван Иванов"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="your@email.com"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Пароль
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          {registerMutation.isError && (
+            <div className="text-red-600 text-sm text-center">
+              Пользователь с таким email уже существует
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={registerMutation.isPending}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {registerMutation.isPending
+              ? "Регистрация..."
+              : "Зарегистрироваться"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default RegisterPage;
@@ -0,0 +1,9 @@
+import { useParams } from "react-router";
+
+function SessionPage() {
+  const { id } = useParams();
+
+  return <div>SessionPage {id}</div>;
+}
+
+export default SessionPage;