138 lines
4.3 KiB
React
138 lines
4.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"
|
|
import { useNavigate } from "react-router-dom"
|
|
|
|
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("")
|
|
const [showErrorPopup, setShowErrorPopup] = useState(false)
|
|
const navigate = useNavigate()
|
|
|
|
function validateEmail(email) {
|
|
return /\S+@\S+\.\S+/.test(email)
|
|
}
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setError("")
|
|
setShowErrorPopup(false)
|
|
|
|
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
|
|
try {
|
|
const response = await register(username, email, password, firstname, lastname, phone)
|
|
// Check for 201 Created status
|
|
if (response && response.status === 201) {
|
|
navigate("/login", { state: { success: true } })
|
|
} else {
|
|
let msg = "Sikertelen regisztráció."
|
|
if (response && response.data && response.data.error) {
|
|
msg = response.data.error
|
|
}
|
|
setError(msg)
|
|
setShowErrorPopup(true)
|
|
setTimeout(() => setShowErrorPopup(false), 2000)
|
|
}
|
|
} catch (err) {
|
|
let msg = "Ismeretlen hiba történt."
|
|
if (err.response && err.response.data && err.response.data.error) {
|
|
msg = err.response.data.error
|
|
} else if (err.message) {
|
|
msg = err.message
|
|
}
|
|
setError(msg)
|
|
setShowErrorPopup(true)
|
|
setTimeout(() => setShowErrorPopup(false), 2000)
|
|
}
|
|
}
|
|
|
|
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>
|
|
{showErrorPopup && error && (
|
|
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
|
|
{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>
|
|
)
|
|
}
|