auth-1

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"
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(1, "Password is required"),
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 px-6 py-12 text-foreground">
73      <Toaster />
74      <Card className="w-full max-w-sm">
75        <CardHeader className="items-center text-center">
76          <svg
77            viewBox="0 0 24 24"
78            fill="currentColor"
79            aria-hidden="true"
80            className="mx-auto size-7 shrink-0 text-primary"
81          >
82            <rect x="3" y="3" width="8" height="8" transform="rotate(-6 7 7)" />
83            <rect
84              x="3"
85              y="13"
86              width="8"
87              height="8"
88// … truncated