78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function RegisterPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (password !== confirmPassword) {
|
|
setMessage("Пароли не совпадают");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("http://localhost:8080/api/register", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setMessage("Регистрация прошла успешно!");
|
|
} else {
|
|
const errorText = await response.text();
|
|
setMessage(`Ошибка при регистрации: ${errorText}`);
|
|
}
|
|
} catch (error) {
|
|
console.error("Ошибка сети:", error);
|
|
setMessage("Ошибка сети");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<h1 className="text-2xl font-bold mb-6">Регистрация</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<div>
|
|
<label>Email:</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="border rounded w-full p-2 mb-4"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Пароль:</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="border rounded w-full p-2 mb-4"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Подтвердите пароль:</label>
|
|
<input
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
className="border rounded w-full p-2 mb-4"
|
|
/>
|
|
</div>
|
|
<button type="submit" className="bg-black text-white py-2 px-4 rounded">
|
|
Зарегистрироваться
|
|
</button>
|
|
{message && <p className="mt-4 text-red-500">{message}</p>}
|
|
</form>
|
|
</div>
|
|
);
|
|
} |