init

pages/auth/ForgotPassword.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { Mail, ArrowLeft, AlertCircle, CheckCircle, RefreshCw, Send } from 'lucide-react';
+
+export const ForgotPassword: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        setSuccess(true);
+        return;
+      }
+
+      const redirectUrl = `${window.location.origin}/#/auth/reset-password`;
+
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: redirectUrl,
+      });
+
+      if (error) {
+        setError(error.message);
+      } else {
+        setSuccess(true);
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">Jelszó visszaállítása</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">Küldünk egy linket a jelszava megváltoztatásához.</p>
+        </div>
+
+        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
+          {success ? (
+            <div className="text-center animate-fade-in">
+              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                <CheckCircle className="w-8 h-8 text-green-600" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 mb-2">E-mail elküldve!</h3>
+              <p className="text-gray-600 mb-8 text-sm leading-relaxed">
+                Ellenőrizze a(z) <strong>{email}</strong> postaládáját a visszaállításhoz szükséges linkért.
+              </p>
+              <Link to="/auth/login" className="block">
+                <Button fullWidth>Vissza a bejelentkezéshez</Button>
+              </Link>
+            </div>
+          ) : (
+            <form className="space-y-6" onSubmit={handleSubmit}>
+              {error && (
+                <div className="rounded-xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in">
+                  <AlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
+                  <p className="ml-3 text-sm font-medium text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="email" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">E-mail cím</label>
+                <div className="relative">
+                   <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-300" />
+                   <input
+                    id="email"
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="appearance-none block w-full pl-10 pr-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>
+                <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
+                  {loading ? (
+                    <RefreshCw className="w-5 h-5 animate-spin" />
+                  ) : (
+                    <>Link küldése <Send className="ml-2 w-4 h-4" /></>
+                  )}
+                </Button>
+              </div>
+
+              <div className="text-center pt-2">
+                <Link to="/auth/login" className="text-sm font-bold text-gray-400 hover:text-primary transition-colors flex items-center justify-center group">
+                  <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza a bejelentkezéshez
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

pages/auth/Login.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+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';
+
+export const Login: React.FC = () => {
+  const navigate = useNavigate();
+  const { refreshDemoUser } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [needsConfirmation, setNeedsConfirmation] = useState(false);
+  const [resendLoading, setResendLoading] = useState(false);
+  const [resendSuccess, setResendSuccess] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setNeedsConfirmation(false);
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const demoUser = {
+          user: {
+            id: 'demo-user-123',
+            email: email,
+            user_metadata: { date_of_birth: '1990-01-01' }
+          },
+          access_token: 'demo-token',
+        };
+        localStorage.setItem('demo_user_session', JSON.stringify(demoUser));
+        refreshDemoUser();
+        navigate('/dashboard');
+        return;
+      }
+
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (error) {
+        console.error('Login error:', error);
+        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!');
+          setNeedsConfirmation(true);
+        } else if (error.message.includes('Email not confirmed')) {
+          setError('Az e-mail cím még nincs megerősítve.');
+          setNeedsConfirmation(true);
+        } else {
+          setError('Hiba történt a bejelentkezés során: ' + error.message);
+        }
+      } else {
+        navigate('/dashboard');
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResendConfirmation = async () => {
+    if (!email) {
+      setError('Kérjük, először adja meg az e-mail címét!');
+      return;
+    }
+    setResendLoading(true);
+    setResendSuccess(false);
+    setError(null);
+
+    try {
+      const redirectUrl = `${window.location.origin}/#/auth/login`;
+      const { error } = await supabase.auth.resend({
+        type: 'signup',
+        email: email,
+        options: { emailRedirectTo: redirectUrl }
+      });
+
+      if (error) {
+        setError('Hiba az újraküldéskor: ' + error.message);
+      } else {
+        setResendSuccess(true);
+      }
+    } catch (err: any) {
+      setError('Hiba történt.');
+    } finally {
+      setResendLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <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>
+        </div>
+
+        <div className="bg-white py-8 px-4 shadow-xl rounded-[24px] 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="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>
+                {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
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {resendSuccess && (
+              <div className="rounded-lg bg-green-50 p-4 border border-green-100 flex items-start animate-fade-in">
+                <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>
+            )}
+
+            <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>
+            </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">
+                {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>
+        </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>
+        </div>
+      </div>
+    </div>
+  );
+}

pages/auth/Register.tsx

@@ -0,0 +1,249 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { useAuth } from '../../context/AuthContext';
+import { UserPlus, AlertCircle, ArrowLeft, CheckCircle, Mail, Info, Send, ShieldCheck } from 'lucide-react';
+
+export const Register: React.FC = () => {
+  const navigate = useNavigate();
+  const { refreshDemoUser } = useAuth();
+  const [lastName, setLastName] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [dateOfBirth, setDateOfBirth] = useState('');
+  const [privacyAccepted, setPrivacyAccepted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    // Alapvető validációk
+    if (!lastName || !firstName) {
+      setError('A név megadása kötelező.');
+      setLoading(false);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('A jelszavak nem egyeznek.');
+      setLoading(false);
+      return;
+    }
+
+    if (password.length < 6) {
+      setError('A jelszónak legalább 6 karakter hosszúnak kell lennie.');
+      setLoading(false);
+      return;
+    }
+
+    if (!dateOfBirth) {
+      setError('A születési dátum megadása kötelező.');
+      setLoading(false);
+      return;
+    }
+
+    if (!privacyAccepted) {
+      setError('A regisztrációhoz el kell fogadnia az Adatkezelési tájékoztatót.');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (!isSupabaseConfigured) {
+        // Demo mód szimuláció
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const demoUser = {
+          user: {
+            id: 'demo-user-123',
+            email: email,
+            user_metadata: {
+              first_name: firstName,
+              last_name: lastName,
+              date_of_birth: dateOfBirth
+            }
+          },
+          access_token: 'demo-token',
+        };
+        localStorage.setItem('demo_user_session', JSON.stringify(demoUser));
+        refreshDemoUser();
+        navigate('/dashboard');
+        return;
+      }
+
+      // HashRouter esetén a redirect URL-nek pontosnak kell lennie.
+      // A window.location.origin a base URL (pl. http://localhost:5173)
+      const redirectUrl = `${window.location.origin}/#/auth/login`;
+
+      console.log('Attempting signup with redirect:', redirectUrl);
+
+      const { data, error: signUpError } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          emailRedirectTo: redirectUrl,
+          data: {
+            first_name: firstName,
+            last_name: lastName,
+            date_of_birth: dateOfBirth,
+          }
+        }
+      });
+
+      if (signUpError) {
+        console.error('Detailed registration error:', signUpError);
+        
+        // Specifikus hibaüzenetek kezelése
+        if (signUpError.message.includes('Error sending confirmation email')) {
+          setError('A rendszer nem tudta kiküldeni a megerősítő e-mailt a Resend szerverén keresztül. Kérjük, ellenőrizze, hogy a Supabase Dashboard-on a "Custom SMTP" beállításoknál a Sender Email megegyezik-e a Resend-ben hitelesített domainnel!');
+        } else if (signUpError.message.includes('User already registered') || signUpError.status === 422) {
+          setError('Ezzel az e-mail címmel már regisztráltak. Kérjük, próbáljon meg bejelentkezni.');
+        } else if (signUpError.status === 429) {
+          setError('Túl sok regisztrációs kísérlet. Kérjük, várjon néhány percet!');
+        } else {
+          setError(`Hiba történt a regisztráció során: ${signUpError.message}`);
+        }
+        setLoading(false);
+        return;
+      }
+
+      if (data.user) {
+        // Ha azonnal van session, akkor nincs e-mail megerősítés (ritka egyedi SMTP-nél)
+        if (data.session) {
+          navigate('/dashboard');
+        } else {
+          setSuccess(true);
+        }
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt a regisztráció során. Kérjük, próbálja meg később.');
+      console.error('Unexpected catch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-lg bg-white p-8 md:p-12 shadow-2xl rounded-[32px] border border-gray-100 text-center animate-fade-in-up">
+          <div className="w-20 h-20 bg-primary/10 rounded-3xl flex items-center justify-center mx-auto mb-8 text-primary shadow-inner">
+            <Mail className="w-10 h-10" />
+          </div>
+          <h2 className="text-3xl font-black text-gray-900 mb-4 tracking-tight">E-mail kiküldve!</h2>
+          <p className="text-gray-600 mb-8 leading-relaxed">
+            Küldtünk egy megerősítő linket a(z) <strong className="text-gray-900">{email}</strong> e-mail címre a <strong>Resend</strong> szolgáltatón keresztül. A belépéshez kérjük, kattintson a levélben található linkre.
+          </p>
+          
+          <div className="bg-blue-50/50 p-6 rounded-2xl text-left mb-8 border border-blue-100 flex gap-4">
+             <div className="mt-1"><Info className="w-5 h-5 text-blue-500" /></div>
+             <div>
+               <p className="text-sm font-bold text-blue-900 mb-1">Nem találja a levelet?</p>
+               <p className="text-xs text-blue-800 leading-relaxed">
+                 Nézze meg a <strong>Spam</strong> vagy a <strong>Promóciók</strong> mappát is. Ha 5 percen belül nem érkezik meg, próbálja meg újra a bejelentkezési oldalon az újraküldést.
+               </p>
+             </div>
+          </div>
+
+          <div className="space-y-4">
+            <Link to="/auth/login" className="block">
+              <Button fullWidth size="lg">Tovább a bejelentkezéshez</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-4xl font-black text-gray-900 tracking-tighter">Regisztráció</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">
+            Csatlakozzon a MotionWeb közösségéhez.
+          </p>
+        </div>
+
+        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
+          <form className="space-y-6" onSubmit={handleRegister}>
+            {error && (
+              <div className="rounded-2xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in shadow-sm">
+                <div className="flex-shrink-0">
+                  <AlertCircle className="h-5 w-5 text-red-400" aria-hidden="true" />
+                </div>
+                <div className="ml-3 text-xs font-bold text-red-800 uppercase tracking-wide leading-relaxed">
+                  {error}
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="lastName" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Vezetéknév</label>
+                <input id="lastName" type="text" required value={lastName} onChange={(e) => setLastName(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="Kovács" />
+              </div>
+              <div>
+                <label htmlFor="firstName" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Keresztnév</label>
+                <input id="firstName" type="text" required value={firstName} onChange={(e) => setFirstName(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="János" />
+              </div>
+            </div>
+
+            <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>
+              <label htmlFor="dateOfBirth" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Születési dátum</label>
+              <input id="dateOfBirth" type="date" required value={dateOfBirth} onChange={(e) => setDateOfBirth(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" />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="password" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Jelszó</label>
+                <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>
+                <label htmlFor="confirmPassword" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Megerősítés</label>
+                <input id="confirmPassword" type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(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 className="flex items-start bg-gray-50 p-4 rounded-2xl border border-gray-100">
+              <input id="privacy" type="checkbox" required checked={privacyAccepted} onChange={(e) => setPrivacyAccepted(e.target.checked)} className="h-5 w-5 text-primary focus:ring-primary border-gray-300 rounded-lg cursor-pointer mt-0.5" />
+              <div className="ml-3 text-sm">
+                <label htmlFor="privacy" className="font-semibold text-gray-700 leading-tight">
+                  Elfogadom az <Link to="/privacy" className="text-primary hover:underline">Adatkezelési tájékoztatót</Link>
+                </label>
+              </div>
+            </div>
+
+            <div className="pt-2">
+              <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
+                {loading ? 'Fiók létrehozása...' : <>Regisztráció <UserPlus className="ml-2 w-5 h-5" /></>}
+              </Button>
+            </div>
+          </form>
+
+          <div className="mt-8 text-center border-t border-gray-100 pt-6">
+            <span className="text-sm text-gray-500 font-medium">Már van fiókja? </span>
+            <Link to="/auth/login" className="text-sm font-bold text-primary hover:text-secondary transition-colors underline-offset-4 hover:underline">Jelentkezzen be</Link>
+          </div>
+        </div>
+
+        <div className="mt-8 text-center">
+          <Link to="/" className="text-sm font-bold text-gray-400 hover:text-gray-900 flex items-center justify-center transition-all group">
+             <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza a főoldalra
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/auth/ResetPassword.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
+import { Button } from '../../components/Button';
+import { Lock, AlertCircle, CheckCircle, RefreshCw, Save } from 'lucide-react';
+
+export const ResetPassword: React.FC = () => {
+  const navigate = useNavigate();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    // Supabase sets the session automatically when clicking the recovery link
+    const checkSession = async () => {
+      if (isSupabaseConfigured) {
+        const { data } = await supabase.auth.getSession();
+        if (!data.session) {
+           setError("A link lejárt vagy érvénytelen. Kérjük, igényeljen újat!");
+        }
+      }
+    };
+    checkSession();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    if (password.length < 6) {
+      setError('A jelszónak legalább 6 karakternek kell lennie.');
+      setLoading(false);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('A jelszavak nem egyeznek.');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (!isSupabaseConfigured) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        setSuccess(true);
+        return;
+      }
+
+      const { error } = await supabase.auth.updateUser({
+        password: password
+      });
+
+      if (error) {
+        setError(error.message);
+      } else {
+        setSuccess(true);
+      }
+    } catch (err: any) {
+      setError('Váratlan hiba történt.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">Új jelszó megadása</h2>
+          <p className="mt-2 text-sm text-gray-600 font-medium">Kérjük, adja meg az új biztonságos jelszavát.</p>
+        </div>
+
+        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
+          {success ? (
+            <div className="text-center animate-fade-in">
+              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                <CheckCircle className="w-8 h-8 text-green-600" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 mb-2">Jelszó sikeresen módosítva!</h3>
+              <p className="text-gray-600 mb-8 text-sm leading-relaxed">Most már bejelentkezhet az új jelszavával.</p>
+              <Button fullWidth onClick={() => navigate('/auth/login')}>Bejelentkezés</Button>
+            </div>
+          ) : (
+            <form className="space-y-6" onSubmit={handleSubmit}>
+              {error && (
+                <div className="rounded-xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in">
+                  <AlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
+                  <p className="ml-3 text-sm font-medium text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">Új jelszó</label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-300" />
+                    <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full pl-10 pr-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" />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">Megerősítés</label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-300" />
+                    <input type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="appearance-none block w-full pl-10 pr-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" />
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
+                  {loading ? (
+                    <RefreshCw className="w-5 h-5 animate-spin" />
+                  ) : (
+                    <>Jelszó mentése <Save className="ml-2 w-4 h-4" /></>
+                  )}
+                </Button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};