157 lines
5.6 KiB
TypeScript
157 lines
5.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
|
|
export default function AccountPage() {
|
|
const [loginEmail, setLoginEmail] = useState("")
|
|
const [loginPassword, setLoginPassword] = useState("")
|
|
const [registerEmail, setRegisterEmail] = useState("")
|
|
const [registerPassword, setRegisterPassword] = useState("")
|
|
const [registerConfirmPassword, setRegisterConfirmPassword] = useState("")
|
|
const [message, setMessage] = useState("")
|
|
const { isLoggedIn, login, logout } = useAuth()
|
|
const router = useRouter()
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
try {
|
|
const response = await fetch("http://localhost:8081/api/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ email: loginEmail, password: loginPassword }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
login() // Обновляем контекст аутентификации
|
|
setMessage(data.message)
|
|
router.push("/") // Перенаправляем на основную страницу
|
|
} else {
|
|
setMessage(data.message || "Ошибка при входе")
|
|
}
|
|
} catch (error) {
|
|
console.error("Ошибка сети:", error);
|
|
setMessage("Ошибка сети")
|
|
}
|
|
}
|
|
|
|
const handleRegister = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (registerPassword !== registerConfirmPassword) {
|
|
setMessage("Пароли не совпадают")
|
|
return;
|
|
}
|
|
try {
|
|
const response = await fetch("http://localhost:8081/api/register", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ email: registerEmail, password: registerPassword }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
login() // Обновляем контекст аутентификации после регистрации
|
|
setMessage(data.message)
|
|
router.push("/") // Перенаправляем на основную страницу
|
|
} else {
|
|
setMessage(data.message || "Ошибка при регистрации")
|
|
}
|
|
} catch (error) {
|
|
console.error("Ошибка сети:", error);
|
|
setMessage("Ошибка сети")
|
|
}
|
|
}
|
|
|
|
if (isLoggedIn) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<h1 className="text-2xl font-bold mb-6">Личный кабинет</h1>
|
|
<p className="mb-4">Вы вошли в систему.</p>
|
|
<Button onClick={logout}>Выйти</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<h1 className="text-2xl font-bold mb-6">Личный кабинет</h1>
|
|
{message && <p className="text-red-500 mb-4">{message}</p>}
|
|
<Tabs defaultValue="login" className="max-w-md mx-auto">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="login">Вход</TabsTrigger>
|
|
<TabsTrigger value="register">Регистрация</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="login">
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="login-email">Email</Label>
|
|
<Input
|
|
id="login-email"
|
|
type="email"
|
|
value={loginEmail}
|
|
onChange={(e) => setLoginEmail(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="login-password">Пароль</Label>
|
|
<Input
|
|
id="login-password"
|
|
type="password"
|
|
value={loginPassword}
|
|
onChange={(e) => setLoginPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full">Войти</Button>
|
|
</form>
|
|
</TabsContent>
|
|
<TabsContent value="register">
|
|
<form onSubmit={handleRegister} className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="register-email">Email</Label>
|
|
<Input
|
|
id="register-email"
|
|
type="email"
|
|
value={registerEmail}
|
|
onChange={(e) => setRegisterEmail(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="register-password">Пароль</Label>
|
|
<Input
|
|
id="register-password"
|
|
type="password"
|
|
value={registerPassword}
|
|
onChange={(e) => setRegisterPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="register-confirm-password">Подтвердите пароль</Label>
|
|
<Input
|
|
id="register-confirm-password"
|
|
type="password"
|
|
value={registerConfirmPassword}
|
|
onChange={(e) => setRegisterConfirmPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full">Зарегистрироваться</Button>
|
|
</form>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
} |