Split Sign-In With Brand Panel

1"use client"
2 
3import { useState } from "react"
4import { toast } from "sonner"
5import { z } from "zod"
6 
7import { Button } from "@/components/ui/button"
8import { Checkbox } from "@/components/ui/checkbox"
9import {
10  Field,
11  FieldDescription,
12  FieldError,
13  FieldGroup,
14  FieldLabel,
15} from "@/components/ui/field"
16import { Input } from "@/components/ui/input"
17import { Toaster } from "@/components/ui/sonner"
18import { IconPlaceholder } from "@/components/icons/icon-placeholder"
19 
20const BRAND = "Acme"
21const TAGLINE = "Collaborative work, simplified."
22const FEATURES = [
23  "Real-time project dashboards",
24  "Role-based access control",
25  "Audit logs & compliance reports",
26]
27 
28const signInSchema = z.object({
29  email: z
30    .string()
31    .min(1, "Email is required")
32    .email("Enter a valid email address"),
33  password: z.string().min(8, "Password must be at least 8 characters"),
34})
35 
36export default function AuthBlock() {
37  const [errors, setErrors] = useState<Record<string, string>>({})
38 
39  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
40    event.preventDefault()
41    const data = Object.fromEntries(new FormData(event.currentTarget))
42    const result = signInSchema.safeParse(data)
43    if (!result.success) {
44      const next: Record<string, string> = {}
45      for (const issue of result.error.issues) {
46        const key = issue.path[0]
47        if (typeof key === "string" && !next[key]) {
48          next[key] = issue.message
49        }
50      }
51      setErrors(next)
52      return
53    }
54    setErrors({})
55    toast.promise(new Promise((resolve) => setTimeout(resolve, 1400)), {
56      loading: "Signing you in…",
57      success: "Welcome back to Acme!",
58      error: "Sign-in failed. Please try again.",
59    })
60  }
61 
62  function clearError(name: string) {
63    setErrors((prev) => {
64      if (!prev[name]) return prev
65      const next = { ...prev }
66      delete next[name]
67      return next
68    })
69  }
70 
71  return (
72    <section className="flex w-full items-center justify-center bg-background text-foreground">
73      <Toaster />
74      <div className="flex w-full max-w-4xl flex-col overflow-hidden rounded-xl md:flex-row">
75        <div className="dark flex flex-col justify-between gap-10 bg-background px-10 py-12 text-foreground md:w-1/2">
76          <div>
77            <span className="text-xl font-bold tracking-tight">{BRAND}</span>
78          </div>
79          <div className="flex flex-col gap-6">
80// … truncated