Auth Signup Form

1"use client";
2 
3import { IconBrandGithub } from "@tabler/icons-react";
4import { Eye, EyeOff, Loader2, Lock, Mail, User } from "lucide-react";
5import { useCallback, useState } from "react";
6import { cn } from "@/lib/utils";
7import { Button } from "@/registry/new-york/ui/button";
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from "@/registry/new-york/ui/card";
15import { Checkbox } from "@/registry/new-york/ui/checkbox";
16import {
17  Field,
18  FieldContent,
19  FieldDescription,
20  FieldError,
21  FieldLabel,
22} from "@/registry/new-york/ui/field";
23import {
24  InputGroup,
25  InputGroupAddon,
26  InputGroupButton,
27  InputGroupInput,
28} from "@/registry/new-york/ui/input-group";
29import { Separator } from "@/registry/new-york/ui/separator";
30 
31export interface SocialProvider {
32  id: string;
33  name: string;
34  icon: React.ComponentType<{ className?: string }>;
35}
36 
37export interface AuthSignupFormProps {
38  onSubmit?: (data: {
39    name: string;
40    email: string;
41    password: string;
42    confirmPassword: string;
43    acceptTerms: boolean;
44  }) => void;
45  onSocialLogin?: (provider: string) => void;
46  socialProviders?: SocialProvider[];
47  showSocialLogin?: boolean;
48  className?: string;
49  isLoading?: boolean;
50  errors?: {
51    name?: string;
52    email?: string;
53    password?: string;
54    confirmPassword?: string;
55    terms?: string;
56    general?: string;
57  };
58  termsUrl?: string;
59  privacyUrl?: string;
60}
61 
62const GoogleIcon = ({ className }: { className?: string }) => (
63  <svg
64    className={className}
65    viewBox="0 0 24 24"
66    xmlns="http://www.w3.org/2000/svg"
67  >
68    <path
69      d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1-1.265.06a6 6 0 1 0 2.103 6.836l.001-.004h-3.66a1 1 0 0 1-.992-.883L13 13v-2a1 1 0 0 1 1-1h6.945a1 1 0 0 1 .994.89q.06.55.061 1.11c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
70      fill="currentColor"
71    />
72  </svg>
73);
74 
75const DEFAULT_SOCIAL_PROVIDERS: SocialProvider[] = [
76  { id: "google", name: "Google", icon: GoogleIcon },
77  { id: "github", name: "GitHub", icon: IconBrandGithub },
78];
79 
80function validateName(value: string): string | undefined {
81  if (!value.trim()) {
82    return "Name is required";
83  }
84  if (value.trim().length < 2) {
85    return "Name must be at least 2 characters";
86  }
87  return;
88}
89 
90function validateEmail(value: string): string | undefined {
91  if (!value.trim()) {
92    return "Email is required";
93  }
94  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
95// … truncated