93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
import { useState, type FormEvent } from 'react'; // Używamy type FormEvent
|
|
import { Cat, ArrowLeft, Loader2, AlertCircle } from 'lucide-react';
|
|
import { useAuth } from '../hooks/useAuth';
|
|
|
|
interface LoginViewProps {
|
|
onBack: () => void;
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
export const LoginView = ({ onBack, onSuccess }: LoginViewProps) => {
|
|
const [isSignUp, setIsSignUp] = useState(false);
|
|
const [name, setName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
|
|
const { signIn, signUp, loading, error, isAuthenticated } = useAuth();
|
|
|
|
const handleSubmit = async (e: FormEvent) => { // Zmieniono na FormEvent
|
|
e.preventDefault();
|
|
const result = isSignUp
|
|
? await signUp(name, password)
|
|
: await signIn(name, password);
|
|
|
|
if (result) {
|
|
onSuccess();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[80vh] px-4">
|
|
<div className="bg-white p-10 rounded-[3rem] shadow-2xl border-4 border-pink-100 w-full max-w-md relative">
|
|
<div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-pink-400 p-4 rounded-full shadow-lg text-white">
|
|
<Cat size={40} />
|
|
</div>
|
|
|
|
<h2 className="text-3xl font-black text-pink-500 text-center mb-8 mt-4">
|
|
{isSignUp ? 'Create Kitty Account' : 'Kitty Login'}
|
|
</h2>
|
|
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 border-2 border-red-100 rounded-2xl text-red-500 text-sm font-bold flex items-center gap-2">
|
|
<AlertCircle size={18} /> {error}
|
|
</div>
|
|
)}
|
|
|
|
{isAuthenticated && (
|
|
<div className="mb-6 p-4 bg-green-50 border-2 border-green-100 rounded-2xl text-green-600 text-sm font-bold text-center">
|
|
Success! Meow! 🐾
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Username or Email"
|
|
className="w-full p-4 bg-pink-50 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-300 transition-all"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
required
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Secret Password"
|
|
className="w-full p-4 bg-pink-50 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-300 transition-all"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-pink-500 hover:bg-pink-600 disabled:bg-pink-300 text-white py-4 rounded-2xl font-bold shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2"
|
|
>
|
|
{loading ? <Loader2 className="animate-spin" /> : (isSignUp ? 'Register Now' : 'Meow In!')}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center">
|
|
<button
|
|
onClick={() => setIsSignUp(!isSignUp)}
|
|
className="text-pink-400 text-sm font-bold hover:underline"
|
|
>
|
|
{isSignUp ? 'Already have an account? Log in' : 'New here? Create an account'}
|
|
</button>
|
|
</div>
|
|
|
|
<button onClick={onBack} className="w-full mt-4 text-pink-200 text-xs font-bold flex items-center justify-center gap-2">
|
|
<ArrowLeft size={14} /> Back to home
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |