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>
|
||
)
|
||
} |