backend #45
@@ -32,3 +32,10 @@ MINIO_USE_SSL=false
|
||||
MAX_SPECIAL_FIELDS_PERCENTAGE=67
|
||||
MAX_GENERATION_TIME_SECONDS=20
|
||||
GENERATION_ERROR_TOLERANCE=15
|
||||
|
||||
# EMAIL SERVICE CONFIGURATION
|
||||
EMAIL_HOST=smtp.gmail.com
|
||||
EMAIL_PORT=587
|
||||
EMAIL_USER=your_email@domain.com
|
||||
EMAIL_PASS=your_email_password
|
||||
EMAIL_FROM=noreply@serpentrace.com
|
||||
@@ -1,12 +1,11 @@
|
||||
import axios from 'axios';
|
||||
|
||||
import axios from "axios"
|
||||
|
||||
export const API_CONFIG = {
|
||||
baseURL: import.meta.env.VITE_API_URL+'/api',
|
||||
wsURL: 'http://localhost:3000',
|
||||
baseURL: import.meta.env.VITE_API_URL + "/api",
|
||||
wsURL: "http://localhost:3000",
|
||||
timeout: 10000,
|
||||
retryAttempts: 3
|
||||
};
|
||||
retryAttempts: 3,
|
||||
}
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL: API_CONFIG.baseURL,
|
||||
@@ -20,19 +19,39 @@ export const apiClient = axios.create({
|
||||
//login
|
||||
export const login = async (username, password) => {
|
||||
try {
|
||||
const response = await apiClient.post('/users/login', { username, password });
|
||||
return response.data;
|
||||
const response = await apiClient.post("/users/login", { username, password })
|
||||
return response.data
|
||||
} catch (error) {
|
||||
throw error;
|
||||
throw error
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//register
|
||||
export const register = async (username, email, password, fname, lname, phone) => {
|
||||
try {
|
||||
const response = await apiClient.post('/users/create', { username, email, password, fname, lname, phone });
|
||||
return response.data;
|
||||
const response = await apiClient.post("/users/create", { username, email, password, fname, lname, phone })
|
||||
return { ...response.data, status: response.status }
|
||||
} catch (error) {
|
||||
throw error;
|
||||
throw error
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//verify email
|
||||
export const verifyEmail = async (token) => {
|
||||
try {
|
||||
const response = await apiClient.get(`/users/verify-email/${token}`)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// Get current user's game statistics
|
||||
export const getUserStats = async () => {
|
||||
try {
|
||||
const response = await apiClient.get("/users/me/stats")
|
||||
return response.data
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import Logo from "../../assets/pictures/Logo"
|
||||
|
||||
|
||||
const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
|
||||
|
||||
const Footer = () => {
|
||||
@@ -35,54 +34,59 @@ const Footer = () => {
|
||||
return (
|
||||
<footer
|
||||
ref={footerRef}
|
||||
className={`relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8 transition-all duration-700 ease-out ${
|
||||
isVisible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-10"
|
||||
}`}
|
||||
className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
|
||||
style={{ transformOrigin: "bottom center" }}
|
||||
>
|
||||
<style>
|
||||
{`
|
||||
.footer-animate {
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
|
||||
{/* Logó */}
|
||||
<div className="flex flex-col items-center footer-animate">
|
||||
<a
|
||||
href="/"
|
||||
className="transition-transform duration-500 hover:scale-105 hover:brightness-125"
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<a href="/" className="hover:scale-105 hover:brightness-125">
|
||||
<Logo size={100} />
|
||||
</a>
|
||||
<span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
|
||||
</div>
|
||||
|
||||
{/* Oldalak */}
|
||||
<div className="flex flex-col gap-1 footer-animate">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||
Oldalak
|
||||
</span>
|
||||
<a href="/" className="hover:underline hover:text-green-400 transition">Főoldal</a>
|
||||
<a href="/about" className="hover:underline hover:text-green-400 transition">
|
||||
<a href="/" className="hover:underline hover:text-green-400">
|
||||
Főoldal
|
||||
</a>
|
||||
<a href="/about" className="hover:underline hover:text-green-400">
|
||||
Rólunk
|
||||
</a>
|
||||
<a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
|
||||
<a href="/contact" className="hover:underline hover:text-green-400">
|
||||
Kapcsolat
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Közösség */}
|
||||
<div className="flex flex-col gap-1 footer-animate">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||
Közösség
|
||||
</span>
|
||||
<a href="https://discord.gg/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">Discord</a>
|
||||
<a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">GitHub</a>
|
||||
<a
|
||||
href="https://discord.gg/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline hover:text-green-400"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline hover:text-green-400"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Elérhetőség */}
|
||||
<div className="flex flex-col gap-1 footer-animate">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||
Elérhetőség
|
||||
</span>
|
||||
@@ -91,7 +95,7 @@ const Footer = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-8 text-sm opacity-70 footer-animate">
|
||||
<div className="text-center mt-8 text-sm opacity-70">
|
||||
© {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
|
||||
</div>
|
||||
|
||||
@@ -99,7 +103,7 @@ const Footer = () => {
|
||||
{isVisible && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
|
||||
className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110"
|
||||
aria-label="Ugrás az oldal tetejére"
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
|
||||
@@ -55,7 +55,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 1 }}
|
||||
>
|
||||
<ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
|
||||
<ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
|
||||
<ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -1,25 +1,27 @@
|
||||
// src/pages/Auth/AuthLogin.jsx
|
||||
// Kártya amelyiken a bejelentkezés és regisztráció van
|
||||
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation";
|
||||
import LoginForm from "./LoginForm";
|
||||
import RegisterForm from "./RegisterForm";
|
||||
import Logo from "../../assets/pictures/Logo";
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation"
|
||||
import LoginForm from "./LoginForm"
|
||||
import RegisterForm from "./RegisterForm"
|
||||
import Logo from "../../assets/pictures/Logo"
|
||||
|
||||
export default function AuthCard({ isRegistering, setIsRegistering }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ height: "auto" }}
|
||||
animate={{ height: isRegistering ? "600px" : "385px" }}
|
||||
animate={{ height: isRegistering ? "750px" : "385px" }}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
|
||||
>
|
||||
{/* Bal oldali kép és szöveg */}
|
||||
<div
|
||||
className={`transition-all duration-500 ${isRegistering ? 'w-0 p-0' : 'w-2/5 p-8'} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
|
||||
className={`transition-all duration-500 ${
|
||||
isRegistering ? "w-0 p-0" : "w-2/5 p-8"
|
||||
} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
|
||||
>
|
||||
<Logo size={100}/>
|
||||
<Logo size={100} />
|
||||
<div className="h-6" />
|
||||
<Animation sizePercentage={30} />
|
||||
<p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
|
||||
@@ -29,18 +31,14 @@ export default function AuthCard({ isRegistering, setIsRegistering }) {
|
||||
|
||||
{/* Jobb oldali űrlap */}
|
||||
<div className="w-full p-10 relative">
|
||||
<AnimatePresence mode="wait">
|
||||
{isRegistering ? <RegisterForm /> : <LoginForm />}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence mode="wait">{isRegistering ? <RegisterForm /> : <LoginForm />}</AnimatePresence>
|
||||
<span
|
||||
className="text-secondary cursor-pointer hover:underline mt-4 block text-center"
|
||||
onClick={() => setIsRegistering(!isRegistering)}
|
||||
>
|
||||
{isRegistering
|
||||
? "Már van fiókod? Jelentkezz be itt!"
|
||||
: "Nincs még fiókod? Regisztrálj itt!"}
|
||||
{isRegistering ? "Már van fiókod? Jelentkezz be itt!" : "Nincs még fiókod? Regisztrálj itt!"}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,58 +1,94 @@
|
||||
// src/pages/Auth/EmailVerification.jsx
|
||||
// Rublikák a kód beírásához, email ellenőrzéshez
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import Background from "../../assets/backgrounds/Background";
|
||||
import { motion } from "framer-motion";
|
||||
import Button from "../../components/Buttons/Button";
|
||||
|
||||
import { useState, useRef, useEffect } from "react"
|
||||
import Background from "../../assets/backgrounds/Background"
|
||||
import { motion } from "framer-motion"
|
||||
import Button from "../../components/Buttons/Button"
|
||||
import { useLocation } from "react-router-dom"
|
||||
|
||||
export default function EmailVerification() {
|
||||
const [code, setCode] = useState(Array(6).fill(""));
|
||||
const inputRefs = useRef([]);
|
||||
const [code, setCode] = useState(Array(6).fill(""))
|
||||
const inputRefs = useRef([])
|
||||
const location = useLocation()
|
||||
const [showSuccess, setShowSuccess] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (location.state && location.state.success) {
|
||||
setShowSuccess(true)
|
||||
setTimeout(() => setShowSuccess(false), 1500)
|
||||
}
|
||||
}, [location.state])
|
||||
|
||||
const handleChange = (e, index) => {
|
||||
const { value } = e.target;
|
||||
const { value } = e.target
|
||||
if (/^\d*$/.test(value) && value.length <= 1) {
|
||||
const newCode = [...code];
|
||||
newCode[index] = value;
|
||||
setCode(newCode);
|
||||
const newCode = [...code]
|
||||
newCode[index] = value
|
||||
setCode(newCode)
|
||||
if (value && index < 5) {
|
||||
inputRefs.current[index + 1].focus();
|
||||
inputRefs.current[index + 1].focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e, index) => {
|
||||
if (e.key === "Backspace" && !code[index] && index > 0) {
|
||||
inputRefs.current[index - 1].focus();
|
||||
inputRefs.current[index - 1].focus()
|
||||
} else if (e.key === "ArrowLeft" && index > 0) {
|
||||
inputRefs.current[index - 1].focus();
|
||||
inputRefs.current[index - 1].focus()
|
||||
} else if (e.key === "ArrowRight" && index < 5) {
|
||||
inputRefs.current[index + 1].focus();
|
||||
inputRefs.current[index + 1].focus()
|
||||
} else if (/^\d$/.test(e.key) && code[index]) {
|
||||
e.preventDefault();
|
||||
const newCode = [...code];
|
||||
newCode[index] = e.key;
|
||||
setCode(newCode);
|
||||
e.preventDefault()
|
||||
const newCode = [...code]
|
||||
newCode[index] = e.key
|
||||
setCode(newCode)
|
||||
|
||||
if (index < 5) {
|
||||
setTimeout(() => {
|
||||
inputRefs.current[index + 1].focus();
|
||||
}, 0);
|
||||
inputRefs.current[index + 1].focus()
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log("Kód:", code.join(""));
|
||||
// Backend API
|
||||
};
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setError("")
|
||||
const token = code.join("")
|
||||
if (token.length !== 6) {
|
||||
setError("A kód 6 számjegyből áll.")
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await fetch(`/verify-email/${token}`)
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setShowSuccess(true)
|
||||
setTimeout(() => setShowSuccess(false), 2000)
|
||||
} else {
|
||||
setError(data.message || "Sikertelen ellenőrzés.")
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Hiba történt az ellenőrzés során.")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
|
||||
<Background />
|
||||
{showSuccess && (
|
||||
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
|
||||
Sikeres email ellenőrzés!
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="fixed top-20 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>
|
||||
)}
|
||||
<motion.div
|
||||
initial={{ height: "auto" }}
|
||||
animate={{ height: "300px" }}
|
||||
@@ -73,7 +109,9 @@ export default function EmailVerification() {
|
||||
onChange={(e) => handleChange(e, index)}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
ref={(el) => (inputRefs.current[index] = el)}
|
||||
className={`w-12 h-12 px-2 py-3 border rounded-lg focus:ring-4 focus:ring-indigo-400 text-gray-700 placeholder-gray-400 bg-gray-50 text-center text-2xl tracking-widest ${!digit ? 'placeholder-opacity-100' : 'placeholder-opacity-0'}`}
|
||||
className={`w-12 h-12 px-2 py-3 border rounded-lg focus:ring-4 focus:ring-indigo-400 text-gray-700 placeholder-gray-400 bg-gray-50 text-center text-2xl tracking-widest ${
|
||||
!digit ? "placeholder-opacity-100" : "placeholder-opacity-0"
|
||||
}`}
|
||||
// nem tudom, hogy hogyan jobb
|
||||
// placeholder="_"
|
||||
maxLength="1"
|
||||
@@ -85,5 +123,5 @@ export default function EmailVerification() {
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -1,42 +1,52 @@
|
||||
// src/pages/Auth/LoginForm.jsx
|
||||
// Bejelentkezési űrlap
|
||||
|
||||
import InputBox from "../../components/Inputs/InputBox";
|
||||
import Button from "../../components/Buttons/Button";
|
||||
import { motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import { login } from "../../api/userApi";
|
||||
import InputBox from "../../components/Inputs/InputBox"
|
||||
import Button from "../../components/Buttons/Button"
|
||||
import { motion } from "framer-motion"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import { login } from "../../api/userApi"
|
||||
|
||||
export default function LoginForm() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
const location = useLocation()
|
||||
const [showSuccess, setShowSuccess] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (location.state && location.state.success) {
|
||||
setShowSuccess(true)
|
||||
setTimeout(() => setShowSuccess(false), 4000)
|
||||
}
|
||||
}, [location.state])
|
||||
|
||||
function validateEmail(email) {
|
||||
return /\S+@\S+\.\S+/.test(email);
|
||||
return /\S+@\S+\.\S+/.test(email)
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
e.preventDefault()
|
||||
setError("")
|
||||
if (!email || !password) {
|
||||
setError("Minden mező kitöltése kötelező.");
|
||||
return;
|
||||
setError("Minden mező kitöltése kötelező.")
|
||||
return
|
||||
}
|
||||
if (!validateEmail(email)) {
|
||||
setError("Hibás email formátum.");
|
||||
return;
|
||||
setError("Hibás email formátum.")
|
||||
return
|
||||
}
|
||||
// Backend API
|
||||
login(email, password)
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
console.log("Bejelentkezés:", { email, password });
|
||||
console.log(data)
|
||||
console.log("Bejelentkezés:", { email, password })
|
||||
})
|
||||
.catch((error) => {
|
||||
setError("Hibás bejelentkezési adatok.");
|
||||
});
|
||||
};
|
||||
setError("Hibás bejelentkezési adatok.")
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -47,24 +57,27 @@ export default function LoginForm() {
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
|
||||
{error && (
|
||||
<div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
|
||||
{showSuccess && (
|
||||
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
|
||||
Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni.
|
||||
</div>
|
||||
)}
|
||||
{error && <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<InputBox
|
||||
type="email"
|
||||
placeholder="Email cím"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="password"
|
||||
placeholder="Jelszó"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<Button text="Bejelentkezés" type="submit" />
|
||||
</form>
|
||||
</motion.div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,51 +1,79 @@
|
||||
// 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 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 [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);
|
||||
return /\S+@\S+\.\S+/.test(email)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
e.preventDefault()
|
||||
setError("")
|
||||
setShowErrorPopup(false)
|
||||
|
||||
if (!lastname || !firstname || !username || !email || !password || !confirmPassword || !phone) {
|
||||
setError("Minden mező kitöltése kötelező.");
|
||||
return;
|
||||
setError("Minden mező kitöltése kötelező.")
|
||||
return
|
||||
}
|
||||
if (!validateEmail(email)) {
|
||||
setError("Hibás email formátum.");
|
||||
return;
|
||||
setError("Hibás email formátum.")
|
||||
return
|
||||
}
|
||||
if (password.length < 6) {
|
||||
setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.");
|
||||
return;
|
||||
setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.")
|
||||
return
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
setError("A jelszavak nem egyeznek.");
|
||||
return;
|
||||
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 });
|
||||
};
|
||||
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 } })
|
||||
console.log(response)
|
||||
console.log("Regisztráció:", { username, email, password, firstname, lastname, phone })
|
||||
} else {
|
||||
let msg = "Sikertelen regisztráció."
|
||||
if (response && response.error) {
|
||||
msg = response.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
|
||||
@@ -56,54 +84,56 @@ export default function RegisterForm() {
|
||||
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>
|
||||
{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)}
|
||||
onChange={(e) => setLastname(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="text"
|
||||
placeholder="Keresztnév"
|
||||
value={firstname}
|
||||
onChange={e => setFirstname(e.target.value)}
|
||||
onChange={(e) => setFirstname(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="text"
|
||||
placeholder="Felhasználónév"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="email"
|
||||
placeholder="Email cím"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="phone"
|
||||
placeholder="Telefonszám"
|
||||
value={phone}
|
||||
onChange={e => setPhone(e.target.value)}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="password"
|
||||
placeholder="Jelszó"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<InputBox
|
||||
type="password"
|
||||
placeholder="Jelszó megerősítése"
|
||||
value={confirmPassword}
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
/>
|
||||
<Button text="Regisztráció" type="submit" />
|
||||
</form>
|
||||
</motion.div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
// src/pages/Landing/Landingpage.jsx
|
||||
// Főoldal - Landing Page
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import Navbar from "../../components/Navbar/Navbar"
|
||||
import Footer from "../../components/Footer/Footer.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import LandingPage from "../../components/Landingpage/LandingPage.jsx"
|
||||
|
||||
export default function LandingPageMain() {
|
||||
// Navigációs callbackok
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleNavigateToPlay = () => {
|
||||
// Itt lehet navigálni a játék oldalra
|
||||
alert("Navigáció a játék oldalra")
|
||||
}
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const handleNavigateToAuth = () => {
|
||||
// Itt lehet navigálni a bejelentkezés oldalra
|
||||
alert("Navigáció a bejelentkezés oldalra")
|
||||
}
|
||||
navigate("/register");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
|
||||
@@ -32,5 +32,5 @@ export default function LandingPageMain() {
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useState } from "react"
|
||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import Footer from "../../components/Footer/Footer.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import { getUserStats } from "../../api/userApi.js"
|
||||
|
||||
export default function Reports() {
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user