"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { loginWithEmailAndPassword, signInWithGithub } from "../actions" import { toast } from "@/components/ui/use-toast" import { AuthTokenResponse } from "@supabase/supabase-js" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { AiOutlineLoading3Quarters } from "react-icons/ai" interface UserAuthFormProps extends React.HTMLAttributes {} export function UserAuthForm({ className, ...props }: UserAuthFormProps) { const LoginSchema = z.object({ email: z.string().email(), password: z.string().min(1, { message: "Password can not be empty" }), }); const [isGitHubLoading, setIsGitHubLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false) const [isPending, startTransition] = React.useTransition(); const form = useForm>({ resolver: zodResolver(LoginSchema), defaultValues: { email: "", password: "", }, }); async function onSubmit(data: z.infer) { setIsLoading(true) startTransition(async () => { const { error } = JSON.parse( await loginWithEmailAndPassword(data) ) as AuthTokenResponse; if (error) { toast({ title: "Login failed!", description: (

							{error.message}

), }); } else { toast({ title: "Successful login 🎉", }); } }); setTimeout(() => { setIsLoading(false) }, 3000) } return (

Or continue with

) }