-
-
-
- To get started, edit the page.tsx file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
-
+
);
}
+
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..400ec6a
--- /dev/null
+++ b/src/components/auth/LoginForm.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+export default function LoginForm() {
+ const router = useRouter();
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState
(null);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError(null);
+ setIsLoading(true);
+
+ try {
+ const response = await fetch('/api/auth/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ email, password }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ setError(data.error || 'Login failed');
+ setIsLoading(false);
+ return;
+ }
+
+ // Login successful, redirect to dashboard
+ router.push('/dashboard');
+ router.refresh();
+ } catch {
+ setError('An error occurred. Please try again.');
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+ );
+}
+
diff --git a/src/components/auth/LoginPageUI.tsx b/src/components/auth/LoginPageUI.tsx
new file mode 100644
index 0000000..184e806
--- /dev/null
+++ b/src/components/auth/LoginPageUI.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import Link from 'next/link';
+import LoginForm from '@/components/auth/LoginForm';
+
+export function LoginPageUI() {
+ return (
+
+ {/* Left side - Branding */}
+
+
+
+ Swale
+
+
+ Football intelligence for every competition, every player, every matchday.
+
+
+
+
+
+
+ What you get
+
+
+
+
+ Live scores & match timelines
+
+
+
+ Player form & advanced stats
+
+
+
+ World Cup hub & history back to 1930
+
+
+
+ AI-powered insights & previews
+
+
+
+
+
+ Open source • Built with Next.js, Supabase & OpenAI
+
+
+
+
+ {/* Right side - Login Form */}
+
+
+
+
Welcome back
+
Sign in to your Swale account
+
+
+
+
+
+
+ Don't have an account?{' '}
+
+
+
+
+