Auth Login Form

1"use client";
2 
3import { IconBrandGithub } from "@tabler/icons-react";
4import { Eye, EyeOff, Loader2, Lock, Mail } 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  FieldError,
20  FieldLabel,
21} from "@/registry/new-york/ui/field";
22import {
23  InputGroup,
24  InputGroupAddon,
25  InputGroupButton,
26  InputGroupInput,
27} from "@/registry/new-york/ui/input-group";
28import { Separator } from "@/registry/new-york/ui/separator";
29 
30export interface SocialProvider {
31  id: string;
32  name: string;
33  icon: React.ComponentType<{ className?: string }>;
34}
35 
36export interface AuthLoginFormProps {
37  onSubmit?: (data: {
38    email: string;
39    password: string;
40    rememberMe: boolean;
41  }) => void;
42  onSocialLogin?: (provider: string) => void;
43  socialProviders?: SocialProvider[];
44  showRememberMe?: boolean;
45  showSocialLogin?: boolean;
46  className?: string;
47  defaultEmail?: string;
48  isLoading?: boolean;
49  errors?: {
50    email?: string;
51    password?: string;
52    general?: string;
53  };
54}
55 
56const GoogleIcon = ({ className }: { className?: string }) => (
57  <svg
58    className={className}
59    viewBox="0 0 24 24"
60    xmlns="http://www.w3.org/2000/svg"
61  >
62    <path
63      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"
64      fill="currentColor"
65    />
66  </svg>
67);
68 
69const DEFAULT_SOCIAL_PROVIDERS: SocialProvider[] = [
70  { id: "google", name: "Google", icon: GoogleIcon },
71  { id: "github", name: "GitHub", icon: IconBrandGithub },
72];
73 
74function validateEmail(value: string): string | undefined {
75  if (!value.trim()) {
76    return "Email is required";
77  }
78  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
79  if (!emailRegex.test(value)) {
80    return "Please enter a valid email address";
81  }
82  return;
83}
84 
85function validatePassword(value: string): string | undefined {
86  if (!value) {
87    return "Password is required";
88  }
89  if (value.length < 6) {
90    return "Password must be at least 6 characters";
91  }
92  return;
93}
94 
95interface ErrorAlertProps {
96  message: string;
97}
98 
99// … truncated