feat: sign in sign up with all views

2025-12-30 18:32:13 +01:00
parent a30a6168ba
commit bca5fc03a8
31 changed files with 5568 additions and 0 deletions
--- a/kittyurl-frontend/src/components/LoginView.tsx
+++ b/kittyurl-frontend/src/components/LoginView.tsx
@@ -0,0 +1,93 @@
+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>
+    );
+};