login verification form

Author: PeterMonkey

apps/gifting-concierge/src/app/(auth)/login/login-form.tsx

@@ -2,62 +2,137 @@
 
 import Link from "next/link";
 
-import { Button } from "@theliaison/ui/button";
+//import { Button } from "@theliaison/ui/button";
+import { useState } from "react";
 import {
 	Card,
 	CardContent,
 	CardDescription,
 	CardHeader,
 	CardTitle,
 } from "@theliaison/ui/card";
-import { Input } from "@theliaison/ui/input";
+import { Button, Input } from "@nextui-org/react";
 import { Label } from "@theliaison/ui/label";
+import { createClient } from "~/supabase/client";
+import { redirect } from "next/navigation";
+
 export function LoginForm() {
+
+	const [login, setLogin ] = useState<boolean>(false)
+	const [email, setEmail ] = useState<string>('')
+
+	const signInWithEmailAction = async (formData: FormData) => {
+		const email = formData.get("email") as string;
+		const supabase = createClient();
+
+		const { error } = await supabase.auth.signInWithOtp({
+			email,
+		});
+
+		if (error) {
+			console.log(error);
+		}
+
+		//redirect(`/login/verify?email=${email}`);
+		setEmail(email)
+		setLogin(true)
+	};
+
 	return (
+		<>
+		{
+			login ? <VerifyOTP email={email}/> : 
+			<Card className="mx-auto max-w-sm backdrop-blur-2xl bg-white/20 border-transparent shadow-sm">
+				<CardHeader>
+					<CardTitle className="text-2xl text-black">Login</CardTitle>
+					<CardDescription className="text-black">
+						Enter your email below to login to your account
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form action={signInWithEmailAction}>
+					<div className="grid gap-4">
+						<div className="grid gap-2">
+							<Label className="text-black" htmlFor="email">Email</Label>
+							<Input
+								id="email"
+								type="email"
+								name="email"
+								placeholder="m@example.com"
+								className="border-black text-black placeholder:text-black/90"
+								required
+							/>
+						</div>
+						<Button type="submit" className="w-full bg-black">
+							Login
+						</Button>
+					</div>
+					</form>
+				</CardContent>
+			</Card>
+
+		}
+		</>
+	);
+}
+
+function VerifyOTP({email}:{email: string}) {
+
+	const [verify, setVerify ] = useState<boolean>(false)
+
+	const verifyOTPAction = async (formData: FormData) => {
+		
+		const otp = formData.get("otp") as string;
+		const supabase = createClient();
+
+		const { error, data } = await supabase.auth.verifyOtp({
+			email,
+			token: otp,
+			type: "email",
+		});
+		console.log('hola')
+
+		console.log({ error, data });
+		if (!error) setVerify(true)
+	};
+	return(
+		<>
+		{
+			verify ? <h1>Verify Email</h1> :
 		<Card className="mx-auto max-w-sm backdrop-blur-2xl bg-white/20 border-transparent shadow-sm">
 			<CardHeader>
-				<CardTitle className="text-2xl text-black">Login</CardTitle>
+				<CardTitle className="text-2xl text-black">Verify Email</CardTitle>
 				<CardDescription className="text-black">
-					Enter your email below to login to your account
+				Please enter the OTP sent to your email address
 				</CardDescription>
 			</CardHeader>
 			<CardContent>
+				<form action={verifyOTPAction}>
 				<div className="grid gap-4">
 					<div className="grid gap-2">
-						<Label htmlFor="email">Email</Label>
 						<Input
 							id="email"
-							type="email"
-							placeholder="m@example.com"
+							type="text"
+							name="otp"
+							placeholder="Enter your OTP"
 							className="border-black text-black placeholder:text-black/90"
 							required
 						/>
 					</div>
-					<div className="grid gap-2">
-						<div className="flex items-center">
+					{/* <div className="flex items-center">
 							<Label htmlFor="password">Password</Label>
-							<Link href="#" className="ml-auto inline-block text-sm underline">
+							<Link href="#" className="ml-auto inline-block text-sm text-black underline">
 								Forgot your password?
 							</Link>
-						</div>
-						<Input
-							id="password"
-							type="password"
-							required
-							className="border-black text-black"
-						/>
-					</div>
+						</div> */}
 					<Button type="submit" className="w-full bg-black">
-						Login
+						Verify
 					</Button>
 				</div>
-				<div className="mt-4 text-center text-sm">
-					Don&apos;t have an account?{" "}
-					<Link href="/register" className="underline">
-						Register
-					</Link>
-				</div>
+				</form>
 			</CardContent>
 		</Card>
-	);
+		}
+		</>
+	)
 }

apps/gifting-concierge/src/app/confirm/[giftId]/confirm-gift.tsx

@@ -9,6 +9,9 @@ import { Step, Stepper, useStepper } from "@theliaison/ui/stepper";
 import { ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useConfirmDialogStore } from "~/store/confirm-dialog";
+import { createClient } from '@supabase/supabase-js'; 
+import { LoginForm } from "~/app/(auth)/login/login-form";
+
 
 const steps: { label: string; description: string }[] = [
 	{
@@ -110,13 +113,14 @@ function StepperConfirmGift({ children }: { children: React.ReactNode }) {
 						<Step key={stepProps.label}>
 							<div
 								className={cn(
-									"min-h-40 h-auto flex items-center justify-center my-2 border bg-foreground text-primary rounded-md p-4",
+									"min-h-40 h-auto flex items-center justify-center my-2 border bg-white text-primary rounded-md p-4",
 									{
 										"bg-transparent": index === 2,
 									},
 								)}
 							>
 								{index === 0 ? <FirstStepConfirmGift /> : null}
+								{index === 1 ? <LoginForm/> : null}
 								{index === 2 ? children : null}
 							</div>
 						</Step>
@@ -218,3 +222,15 @@ function FirstStepConfirmGift() {
 		</div>
 	);
 }
+
+function LoginButton() {
+	// const origin = window.location.origin
+	// return (
+	// 	<div className="flex flex-col gap-2">
+	// 		<p>You need to log in</p>
+	// 		<Button onClick={() => window.open(`${origin}/login`, '_blank')}>
+	// 			Login
+	// 		</Button>
+	// 	</div>
+	// )
+}