Add password base login form

package-lock.json

@@ -26,6 +26,7 @@
         "b2d-ventures": "file:",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "dotenv": "^16.4.5",
         "embla-carousel-react": "^8.2.0",
         "lucide-react": "^0.428.0",
         "next": "14.2.5",
@@ -2653,6 +2654,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "b2d-ventures": "file:",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
     "embla-carousel-react": "^8.2.0",
     "lucide-react": "^0.428.0",
     "next": "14.2.5",

src/app/auth/page.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
 import { LoginButton } from "@/components/auth/loginButton";
+import { LoginForm } from "@/components/auth/loginForm";
 
 export default function Login() {
   return (
@@ -18,6 +19,8 @@ export default function Login() {
         </CardHeader>
         <CardContent className="flex flex-col gap-y-2 mx-28">
           <p className="self-center font-semibold text-slate-800 dark:text-slate-200">Continue With</p>
+          <LoginForm />
+          <hr></hr>
           <LoginButton />
         </CardContent>
         <CardFooter className="text-xs justify-center">

src/components/auth/loginForm.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+
+export function LoginForm() {
+  const router = useRouter();
+  const supabase = createSupabaseClient();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    router.push("/");
+  };
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+      <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
+      <Button onClick={handleLogin}>Login</Button>
+    </div>
+  );
+}

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }