htamas1210/MotionWebStudio
1
0
Fork 0
mirror of https://github.com/Motion-Games/MotionWebStudio.git synced 2026-04-21 17:10:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixed email messages

Browse Source
This commit is contained in:
htom
2025-12-22 17:59:43 +01:00
parent c7f669fc11
commit 846379eccc
5 changed files with 228 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
pages/auth/Login.tsx
View File

@@ -3,7 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
import { Button } from '../../components/Button';
import { useAuth } from '../../context/AuthContext';
import { LogIn, AlertCircle, ArrowLeft, RefreshCw, Mail, ShieldCheck } from 'lucide-react';
import { LogIn, AlertCircle, ArrowLeft, RefreshCw, Mail } from 'lucide-react';
export const Login: React.FC = () => {
const navigate = useNavigate();
@@ -46,20 +46,22 @@ export const Login: React.FC = () => {
if (error) {
console.error('Login error:', error);
// Specifikus hibaüzenetek kezelése
if (error.message.includes('Invalid login credentials')) {
setError('Helytelen e-mail cím vagy jelszó. Kérjük, győződjön meg róla, hogy megerősítette az e-mail címét!');
setError('Helytelen e-mail cím vagy jelszó. Ha most regisztráltál, ellenőrizd a postafiókodat és kattints a megerősítő linkre!');
setNeedsConfirmation(true);
} else if (error.message.includes('Email not confirmed')) {
setError('Az e-mail cím még nincs megerősítve.');
setError('Az e-mail címed még nincs megerősítve. Kérjük, kattints a regisztrációkor kapott linkre!');
setNeedsConfirmation(true);
} else {
setError('Hiba történt a bejelentkezés során: ' + error.message);
setError('Hiba történt: ' + error.message);
}
} else {
navigate('/dashboard');
}
} catch (err: any) {
setError('Váratlan hiba történt.');
setError('Váratlan hiba történt a bejelentkezés során.');
} finally {
setLoading(false);
}
@@ -86,9 +88,10 @@ export const Login: React.FC = () => {
setError('Hiba az újraküldéskor: ' + error.message);
} else {
setResendSuccess(true);
setNeedsConfirmation(false);
}
} catch (err: any) {
setError('Hiba történt.');
setError('Hiba történt az e-mail újraküldésekor.');
} finally {
setResendLoading(false);
}
@@ -99,22 +102,22 @@ export const Login: React.FC = () => {
<div className="w-full max-w-md">
<div className="text-center mb-8">
<h2 className="text-3xl font-extrabold text-gray-900">Bejelentkezés</h2>
<p className="mt-2 text-sm text-gray-600 font-medium">Jelentkezzen be fiókjába a folytatáshoz.</p>
<p className="mt-2 text-sm text-gray-600 font-medium">Lépjen be fiókjába a kezeléshez.</p>
</div>
<div className="bg-white py-8 px-4 shadow-xl rounded-[24px] sm:px-10 border border-gray-100">
<div className="bg-white py-8 px-4 shadow-xl rounded-[32px] sm:px-10 border border-gray-100">
<form className="space-y-6" onSubmit={handleLogin}>
{error && (
<div className="rounded-lg bg-red-50 p-4 border border-red-100 flex flex-col items-start">
<div className="rounded-2xl bg-red-50 p-4 border border-red-100 flex flex-col animate-fade-in">
<div className="flex items-start">
<div className="flex-shrink-0"><AlertCircle className="h-5 w-5 text-red-400" /></div>
<div className="ml-3"><h3 className="text-sm font-medium text-red-800">{error}</h3></div>
<div className="ml-3"><p className="text-xs font-bold text-red-800 uppercase tracking-tight">{error}</p></div>
</div>
{needsConfirmation && (
<div className="mt-4 w-full p-4 bg-white/80 rounded-xl border border-red-200">
<button type="button" onClick={handleResendConfirmation} disabled={resendLoading} className="text-xs font-bold text-primary hover:text-primary-dark underline flex items-center">
{resendLoading ? <RefreshCw className="w-3 h-3 animate-spin mr-1" /> : <Mail className="w-3 h-3 mr-1" />}
Megerősítő e-mail újraküldése
<div className="mt-3 pt-3 border-t border-red-100 w-full">
<button type="button" onClick={handleResendConfirmation} disabled={resendLoading} className="text-xs font-black text-primary hover:underline flex items-center gap-2 uppercase tracking-widest">
{resendLoading ? <RefreshCw className="w-3 h-3 animate-spin" /> : <Mail className="w-3 h-3" />}
Megerősítő levél újraküldése
</button>
</div>
)}
@@ -122,47 +125,43 @@ export const Login: React.FC = () => {
)}
{resendSuccess && (
<div className="rounded-lg bg-green-50 p-4 border border-green-100 flex items-start animate-fade-in">
<div className="rounded-2xl bg-green-50 p-4 border border-green-100 flex items-start animate-fade-in shadow-sm">
<div className="flex-shrink-0"><Mail className="h-5 w-5 text-green-400" /></div>
<div className="ml-3"><p className="text-sm font-medium text-green-800">A megerősítő e-mailt újraküldtük!</p></div>
<div className="ml-3"><p className="text-xs font-bold text-green-800 uppercase tracking-tight">A megerősítő linket újra elküldtük!</p></div>
</div>
)}
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">E-mail cím</label>
<div className="mt-1">
<input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm bg-white text-gray-900" />
<div className="space-y-4">
<div>
<label htmlFor="email" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">E-mail cím</label>
<input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="pelda@email.hu" />
</div>
<div>
<div className="flex justify-between items-center mb-1">
<label htmlFor="password" className="block text-xs font-black text-gray-400 uppercase tracking-widest">Jelszó</label>
<Link to="/auth/forgot-password" size="sm" className="text-[10px] font-black text-primary hover:underline uppercase tracking-widest">Elfelejtette?</Link>
</div>
<input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="••••••••" />
</div>
</div>
<div>
<div className="flex justify-between items-center mb-1">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">Jelszó</label>
<Link to="/auth/forgot-password" size="sm" className="text-xs font-bold text-primary hover:underline">Elfelejtette?</Link>
</div>
<div className="mt-1">
<input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm bg-white text-gray-900" />
</div>
</div>
<div>
<Button type="submit" fullWidth disabled={loading} className="flex justify-center items-center">
<Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
{loading ? <RefreshCw className="w-5 h-5 animate-spin" /> : <>Bejelentkezés <LogIn className="ml-2 w-4 h-4" /></>}
</Button>
</div>
</form>
<div className="mt-6">
<div className="relative"><div className="absolute inset-0 flex items-center"><div className="w-full border-t border-gray-300" /></div><div className="relative flex justify-center text-sm"><span className="px-2 bg-white text-gray-500">Nincs még fiókod?</span></div></div>
<div className="mt-6 text-center">
<Link to="/auth/register" className="font-medium text-primary hover:text-secondary transition-colors underline-offset-4 hover:underline">Regisztrálj ingyenesen</Link>
</div>
<div className="mt-8 pt-6 border-t border-gray-100 text-center">
<p className="text-sm text-gray-500 font-medium mb-2">Nincs még fiókod?</p>
<Link to="/auth/register" className="text-sm font-bold text-primary hover:text-secondary transition-colors underline-offset-4 hover:underline">Regisztrálj ingyenesen</Link>
</div>
</div>
<div className="mt-8 text-center">
<Link to="/" className="text-sm text-gray-500 hover:text-gray-900 flex items-center justify-center group">
<ArrowLeft className="w-4 h-4 mr-1 group-hover:-translate-x-1 transition-transform" /> Vissza a főoldalra
<Link to="/" className="text-sm font-bold text-gray-400 hover:text-gray-900 flex items-center justify-center group transition-colors">
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza a főoldalra
</Link>
</div>
</div>