Full-Height Split Sign-In

1"use client"
2 
3import { useState } from "react"
4import { RiGithubFill, RiGoogleFill } from "@remixicon/react"
5import { toast } from "sonner"
6import { z } from "zod"
7 
8import { Button } from "@/components/ui/button"
9import {
10  Card,
11  CardContent,
12  CardDescription,
13  CardFooter,
14  CardHeader,
15  CardTitle,
16} from "@/components/ui/card"
17import { Checkbox } from "@/components/ui/checkbox"
18import {
19  Field,
20  FieldError,
21  FieldGroup,
22  FieldLabel,
23} from "@/components/ui/field"
24import { Input } from "@/components/ui/input"
25import { Separator } from "@/components/ui/separator"
26import { Toaster } from "@/components/ui/sonner"
27import { IconPlaceholder } from "@/components/icons/icon-placeholder"
28 
29const signInSchema = z.object({
30  email: z
31    .string()
32    .min(1, "Email is required")
33    .email("Enter a valid email address"),
34  password: z.string().min(1, "Password is required"),
35})
36 
37export default function AuthBlock() {
38  const [remember, setRemember] = useState(true)
39  const [errors, setErrors] = useState<Record<string, string>>({})
40 
41  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
42    event.preventDefault()
43    const data = Object.fromEntries(new FormData(event.currentTarget))
44    const result = signInSchema.safeParse(data)
45    if (!result.success) {
46      const next: Record<string, string> = {}
47      for (const issue of result.error.issues) {
48        const key = issue.path[0]
49        if (typeof key === "string" && !next[key]) {
50          next[key] = issue.message
51        }
52      }
53      setErrors(next)
54      return
55    }
56    setErrors({})
57    toast.promise(new Promise((resolve) => setTimeout(resolve, 1400)), {
58      loading: "Signing you in…",
59      success: "Welcome back to Acme!",
60      error: "Sign-in failed. Please try again.",
61    })
62  }
63 
64  function clearError(name: string) {
65    setErrors((prev) => {
66      if (!prev[name]) return prev
67      const next = { ...prev }
68      delete next[name]
69      return next
70    })
71  }
72 
73  function handleSocial(provider: string) {
74    toast.info(`Continuing with ${provider}`, {
75      description: "Redirecting you to authenticate…",
76    })
77  }
78 
79  return (
80    <>
81      <Toaster />
82      <section className="grid min-h-svh w-full grid-cols-1 bg-background text-foreground md:grid-cols-2">
83        <div className="flex items-center justify-center px-6 py-12 sm:px-10">
84          <Card className="w-full max-w-sm border-0 bg-transparent shadow-none ring-0">
85            <CardHeader className="px-0">
86// … truncated