auth-5

1"use client"
2 
3import { useState } from "react"
4import {
5  RiAppleFill,
6  RiArrowRightLine,
7  RiGithubFill,
8  RiGoogleFill,
9  RiShieldKeyholeLine,
10} from "@remixicon/react"
11import { toast } from "sonner"
12import { z } from "zod"
13 
14import { Button } from "@/components/ui/button"
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardFooter,
20  CardHeader,
21  CardTitle,
22} from "@/components/ui/card"
23import {
24  Field,
25  FieldDescription,
26  FieldError,
27  FieldLabel,
28} from "@/components/ui/field"
29import { Input } from "@/components/ui/input"
30import { Separator } from "@/components/ui/separator"
31import { Toaster } from "@/components/ui/sonner"
32import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
33 
34const BRAND = "Acme"
35 
36const SOCIALS = [
37  { id: "google", label: "Google", icon: RiGoogleFill },
38  { id: "github", label: "GitHub", icon: RiGithubFill },
39  { id: "apple", label: "Apple", icon: RiAppleFill },
40]
41 
42const signInSchema = z.object({
43  email: z
44    .string()
45    .min(1, "Email is required")
46    .email("Enter a valid email address"),
47  password: z.string().min(1, "Password is required"),
48})
49 
50const signUpSchema = z
51  .object({
52    name: z.string().min(1, "Full name is required"),
53    email: z
54      .string()
55      .min(1, "Email is required")
56      .email("Enter a valid email address"),
57    password: z
58      .string()
59      .min(8, "Password must be at least 8 characters")
60      .regex(/[0-9]/, "Include at least one number"),
61    confirm: z.string().min(1, "Please confirm your password"),
62  })
63  .refine((data) => data.password === data.confirm, {
64    message: "Passwords do not match",
65    path: ["confirm"],
66  })
67 
68export default function AuthBlock() {
69  const [tab, setTab] = useState("signin")
70  const [errors, setErrors] = useState<Record<string, string>>({})
71  const isSignUp = tab === "signup"
72 
73  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
74    event.preventDefault()
75    const data = Object.fromEntries(new FormData(event.currentTarget))
76    const result = (isSignUp ? signUpSchema : signInSchema).safeParse(data)
77    if (!result.success) {
78      const next: Record<string, string> = {}
79      for (const issue of result.error.issues) {
80        const key = issue.path[0]
81        if (typeof key === "string" && !next[key]) {
82          next[key] = issue.message
83        }
84      }
85      setErrors(next)
86      return
87    }
88    setErrors({})
89    toast.promise(new Promise((resolve) => setTimeout(resolve, 1400)), {
90// … truncated