{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "simple-signup", "type": "registry:block", "title": "Simple Signup", "description": "A simple sign-up form with email and password inputs", "dependencies": [ "lucide-react" ], "registryDependencies": [ "form", "button", "input" ], "files": [ { "path": "registry/default/blocks/signin-signup/simple-signup.tsx", "content": "'use client'\r\n\r\nimport { z } from 'zod'\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport {\r\n Form,\r\n FormControl,\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 },\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 Create an account\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 \r\n Email Address\r\n \r\n
\r\n \r\n \r\n
\r\n \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((prev) => ({\r\n ...prev,\r\n password:\r\n !prev.password,\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 \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((prev) => ({\r\n ...prev,\r\n confirmPassword:\r\n !prev.confirmPassword,\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 \r\n \r\n )}\r\n />\r\n\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 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}\r\n", "type": "registry:block", "target": "components/auth/signup.tsx" } ] }