110 lines
3.3 KiB
React
110 lines
3.3 KiB
React
// src/pages/Auth/RegisterForm.jsx
|
|
// Regisztrációs űrlap
|
|
|
|
import InputBox from "../../components/Inputs/InputBox";
|
|
import Button from "../../components/Buttons/Button";
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
import { register } from "../../api/userApi";
|
|
|
|
export default function RegisterForm() {
|
|
const [lastname, setLastname] = useState("");
|
|
const [firstname, setFirstname] = useState("");
|
|
const [username, setUsername] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [phone, setPhone] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
function validateEmail(email) {
|
|
return /\S+@\S+\.\S+/.test(email);
|
|
}
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setError("");
|
|
|
|
if (!lastname || !firstname || !username || !email || !password || !confirmPassword || !phone) {
|
|
setError("Minden mező kitöltése kötelező.");
|
|
return;
|
|
}
|
|
if (!validateEmail(email)) {
|
|
setError("Hibás email formátum.");
|
|
return;
|
|
}
|
|
if (password.length < 6) {
|
|
setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.");
|
|
return;
|
|
}
|
|
if (password !== confirmPassword) {
|
|
setError("A jelszavak nem egyeznek.");
|
|
return;
|
|
}
|
|
// Backend API
|
|
const response = await register(username, email, password, firstname, lastname, phone);
|
|
console.log(response);
|
|
console.log("Regisztráció:", { username, email, password, firstname, lastname, phone });
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
key="register"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.25 }}
|
|
>
|
|
<h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Regisztráció</h2>
|
|
{error && (
|
|
<div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
|
|
)}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<InputBox
|
|
type="text"
|
|
placeholder="Vezetéknév"
|
|
value={lastname}
|
|
onChange={e => setLastname(e.target.value)}
|
|
/>
|
|
<InputBox
|
|
type="text"
|
|
placeholder="Keresztnév"
|
|
value={firstname}
|
|
onChange={e => setFirstname(e.target.value)}
|
|
/>
|
|
<InputBox
|
|
type="text"
|
|
placeholder="Felhasználónév"
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
/>
|
|
<InputBox
|
|
type="email"
|
|
placeholder="Email cím"
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
/>
|
|
<InputBox
|
|
type="phone"
|
|
placeholder="Telefonszám"
|
|
value={phone}
|
|
onChange={e => setPhone(e.target.value)}
|
|
/>
|
|
<InputBox
|
|
type="password"
|
|
placeholder="Jelszó"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
/>
|
|
<InputBox
|
|
type="password"
|
|
placeholder="Jelszó megerősítése"
|
|
value={confirmPassword}
|
|
onChange={e => setConfirmPassword(e.target.value)}
|
|
/>
|
|
<Button text="Regisztráció" type="submit" />
|
|
</form>
|
|
</motion.div>
|
|
);
|
|
}
|