feat: add login page

src/app/login/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Lock, Mail } from "lucide-react";
+import { useState } from "react";
+import { createClient } from '@/utils/supabase/client'
+
+export default function Login() {
+    const supabase = createClient();
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState<string|null>(null);
+
+    const handleLogin = async () => {
+        setError(null);
+        const { error } = await supabase.auth.signInWithPassword({ email, password });
+        if (error) setError(error.message);
+    };
+
+    const handleGoogleSignIn = async () => {
+        const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' });
+        if (error) setError(error.message);
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6">
+            {/* Card */}
+            <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8 }}
+                className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
+            >
+                <h2 className="text-3xl font-bold text-center mb-6">Login</h2>
+
+                {error && <p className="text-red-500 text-center mb-4">{error}</p>}
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-gray-400 mb-1">Email</label>
+                        <div className="relative">
+                            <Mail className="absolute left-3 top-2 text-gray-500" size={20} />
+                            <Input
+                                type="email"
+                                placeholder="Enter your email"
+                                className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-gray-400 mb-1">Password</label>
+                        <div className="relative">
+                            <Lock className="absolute left-3 top-2 text-gray-500" size={20} />
+                            <Input
+                                type="password"
+                                placeholder="Enter your password"
+                                className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                            />
+                        </div>
+                    </div>
+
+                    <Button
+                        className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
+                        onClick={handleLogin}
+                    >
+                        Login
+                    </Button>
+                    <div className="my-6 flex items-center">
+                    <div className="flex-1 border-t border-gray-600"></div>
+                    <p className="px-4 text-gray-400">or</p>
+                    <div className="flex-1 border-t border-gray-600"></div>
+                    </div>
+                    <Button
+                        className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
+                        onClick={handleGoogleSignIn}
+                    >
+                        Sign in with Google
+                    </Button>
+                </div>
+
+                <p className="text-center text-gray-400 mt-4">
+                    Don't have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
+                </p>
+            </motion.div>
+        </div>
+    );
+}

src/app/page.tsx

@@ -10,7 +10,7 @@ export default function Home() {
       <nav className="w-full py-4 px-8 flex justify-between items-center bg-gray-800 shadow-md">
         <h1 className="text-2xl font-bold">Todoist</h1>
         <div className="space-x-4">
-          <button className="px-4 py-2 rounded-lg border-2 font-semibold">Login</button>
+          <button className="px-4 py-2 rounded-lg border-2 font-semibold"><a href="/login">Login</a></button>
           <button className="px-4 py-2 rounded-lg bg-white text-gray-900 font-semibold">Register</button>
         </div>
       </nav>

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/utils/supabase/client.ts

@@ -0,0 +1,7 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+export const createClient = () =>
+  createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  );

src/utils/supabase/middleware.ts

@@ -0,0 +1,35 @@
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { type NextRequest, NextResponse } from "next/server";
+
+export const createClient = (request: NextRequest) => {
+  // Create an unmodified response
+  let supabaseResponse = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  });
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
+          supabaseResponse = NextResponse.next({
+            request,
+          })
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options)
+          )
+        },
+      },
+    },
+  );
+
+  return supabaseResponse
+};
+

src/utils/supabase/server.ts

@@ -0,0 +1,28 @@
+'use server'
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { cookies } from "next/headers";
+
+export async function createClient() {
+	const cookieStore = await cookies()
+
+	return createServerClient(
+		process.env.NEXT_PUBLIC_SUPABASE_URL!,
+		process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+		{
+			cookies: {
+				getAll() {
+					return cookieStore.getAll()
+				},
+				setAll(cookiesToSet) {
+					try {
+						cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
+					} catch {
+						// The `setAll` method was called from a Server Component.
+						// This can be ignored if you have middleware refreshing
+						// user sessions.
+					}
+				},
+			},
+		},
+	);
+};