{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "center-signup-card", "type": "registry:block", "title": "Center Signup Card", "description": "A centered sign-up card with email and password inputs", "dependencies": [ "lucide-react" ], "registryDependencies": [ "form", "button", "input", "card" ], "files": [ { "path": "registry/default/blocks/signin-signup/center-signup-card.tsx", "content": "'use client'\r\n\r\nimport {\r\n Card,\r\n CardContent,\r\n CardFooter,\r\n CardHeader,\r\n} from '@/registry/default/ui/card'\r\nimport { z } from 'zod'\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport {\r\n Form,\r\n FormControl,\r\n FormDescription,\r\n FormField,\r\n FormItem,\r\n FormLabel,\r\n FormMessage,\r\n} from '@/registry/default/ui/form'\r\nimport { Input } from '@/registry/default/ui/input'\r\nimport { useForm } from 'react-hook-form'\r\nimport { zodResolver } from '@hookform/resolvers/zod'\r\nimport { EyeIcon, EyeOffIcon, LockIcon, MailIcon } from 'lucide-react'\r\nimport React from 'react'\r\n\r\nconst formSchema = z\r\n .object({\r\n email: z\r\n .string()\r\n .email({\r\n message: 'Invalid email address',\r\n })\r\n .min(1, {\r\n message: 'Email is required',\r\n }),\r\n password: z\r\n .string()\r\n .min(8, {\r\n message: 'Password must be at least 8 characters long',\r\n })\r\n .refine((val) => /[A-Z]/.test(val), {\r\n message: 'Password must contain at least one uppercase letter',\r\n })\r\n .refine((val) => /[a-z]/.test(val), {\r\n message: 'Password must contain at least one lowercase letter',\r\n })\r\n .refine((val) => /\\d/.test(val), {\r\n message: 'Password must contain at least one number',\r\n }),\r\n confirmPassword: z.string().min(8, {\r\n message: 'Password must be at least 8 characters long',\r\n }),\r\n })\r\n .refine((data) => data.password === data.confirmPassword, {\r\n message: \"Passwords don't match\",\r\n path: ['confirmPassword'],\r\n })\r\n\r\nexport default function Signup() {\r\n const [showPassword, setShowPassword] = React.useState({\r\n password: false,\r\n confirmPassword: false,\r\n })\r\n\r\n const form = useForm>({\r\n resolver: zodResolver(formSchema),\r\n defaultValues: {\r\n email: '',\r\n password: '',\r\n confirmPassword: '',\r\n },\r\n })\r\n\r\n const onSubmit = async (data: z.infer) => {\r\n console.log('Form submitted:', data)\r\n // Handle form submission logic here\r\n }\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n

\r\n Create an account\r\n

\r\n

\r\n Enter details below to create an account\r\n

\r\n \r\n \r\n
\r\n \r\n (\r\n \r\n Email Address\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Enter your email address to login\r\n \r\n \r\n \r\n )}\r\n />\r\n\r\n (\r\n \r\n
\r\n Password\r\n \r\n Forgot password?\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n\r\n \r\n setShowPassword(\r\n (prev) => ({\r\n ...prev,\r\n password:\r\n !prev.password,\r\n })\r\n )\r\n }\r\n >\r\n {showPassword.password ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n Enter your password to login\r\n \r\n \r\n \r\n )}\r\n />\r\n\r\n (\r\n \r\n Confirm Password\r\n\r\n \r\n
\r\n \r\n \r\n\r\n \r\n setShowPassword(\r\n (prev) => ({\r\n ...prev,\r\n confirmPassword:\r\n !prev.confirmPassword,\r\n })\r\n )\r\n }\r\n >\r\n {showPassword.confirmPassword ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n Enter your password again to confirm\r\n \r\n \r\n \r\n )}\r\n />\r\n\r\n \r\n Continue with Email\r\n \r\n \r\n \r\n\r\n
\r\n \r\n Or\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Continue with Google\r\n \r\n \r\n \r\n \r\n \r\n Continue with Github\r\n \r\n
\r\n
\r\n \r\n

\r\n Already have an account?{' '}\r\n \r\n Sign-in\r\n \r\n

\r\n \r\n \r\n\r\n

\r\n By clicking continue, you agree to our{' '}\r\n \r\n Terms of Service\r\n {' '}\r\n and{' '}\r\n \r\n Privacy Policy\r\n \r\n .\r\n

\r\n
\r\n )\r\n}\r\n", "type": "registry:block", "target": "components/auth/signup.tsx" } ] }