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