diff options
Diffstat (limited to 'src/app/signup')
| -rw-r--r-- | src/app/signup/page.tsx | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx new file mode 100644 index 0000000..ab5b4d4 --- /dev/null +++ b/src/app/signup/page.tsx @@ -0,0 +1,208 @@ +"use client" + +import { useState } from "react" +import { useRouter } from "next/navigation" +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import { Eye, EyeOff, Loader2, CheckCircle } from "lucide-react" +import Link from "next/link" + +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { Alert, AlertDescription } from "@/components/ui/alert" + +import { registerSchema, type RegisterInput } from "@/lib/validation" + +export default function SignUpPage() { + const [showPassword, setShowPassword] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const [error, setError] = useState("") + const [success, setSuccess] = useState(false) + const router = useRouter() + + const form = useForm<RegisterInput>({ + resolver: zodResolver(registerSchema), + defaultValues: { + name: "", + email: "", + password: "", + }, + }) + + const onSubmit = async (data: RegisterInput) => { + setIsLoading(true) + setError("") + setSuccess(false) + + try { + const response = await fetch("/api/auth/register", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), + }) + + const result = await response.json() + + if (!response.ok) { + setError(result.error || "Registration failed") + return + } + + setSuccess(true) + form.reset() + + // Redirect to login page after successful registration + setTimeout(() => { + router.push("/login") + }, 2000) + + } catch (error) { + setError("An unexpected error occurred") + } finally { + setIsLoading(false) + } + } + + if (success) { + return ( + <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4"> + <Card className="w-full max-w-md"> + <CardContent className="flex flex-col items-center space-y-4 pt-6"> + <CheckCircle className="h-16 w-16 text-green-500" /> + <div className="text-center space-y-2"> + <h2 className="text-2xl font-bold">Account Created!</h2> + <p className="text-muted-foreground"> + Your account has been successfully created. You will be redirected to the sign in page. + </p> + </div> + <Button asChild className="w-full"> + <Link href="/login">Go to Sign In</Link> + </Button> + </CardContent> + </Card> + </div> + ) + } + + return ( + <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4"> + <Card className="w-full max-w-md"> + <CardHeader className="space-y-1"> + <CardTitle className="text-2xl text-center">Create Account</CardTitle> + <CardDescription className="text-center"> + Enter your information to create a new account + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {error && ( + <Alert variant="destructive"> + <AlertDescription>{error}</AlertDescription> + </Alert> + )} + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> + <FormField + control={form.control} + name="name" + render={({ field }) => ( + <FormItem> + <FormLabel>Full Name</FormLabel> + <FormControl> + <Input + placeholder="John Doe" + autoComplete="name" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={form.control} + name="email" + render={({ field }) => ( + <FormItem> + <FormLabel>Email</FormLabel> + <FormControl> + <Input + type="email" + placeholder="john@example.com" + autoComplete="email" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={form.control} + name="password" + render={({ field }) => ( + <FormItem> + <FormLabel>Password</FormLabel> + <FormControl> + <div className="relative"> + <Input + type={showPassword ? "text" : "password"} + placeholder="Create a strong password" + autoComplete="new-password" + {...field} + /> + <Button + type="button" + variant="ghost" + size="sm" + className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent" + onClick={() => setShowPassword(!showPassword)} + > + {showPassword ? ( + <EyeOff className="h-4 w-4" /> + ) : ( + <Eye className="h-4 w-4" /> + )} + </Button> + </div> + </FormControl> + <FormMessage /> + <p className="text-xs text-muted-foreground"> + Password must contain at least 8 characters with uppercase, lowercase, and a number. + </p> + </FormItem> + )} + /> + <Button type="submit" className="w-full" disabled={isLoading}> + {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + Create Account + </Button> + </form> + </Form> + + <div className="text-center text-sm"> + <span className="text-muted-foreground">Already have an account? </span> + <Link href="/login" className="text-primary hover:underline font-medium"> + Sign in + </Link> + </div> + + <div className="text-center text-xs text-muted-foreground"> + <p> + By creating an account, you agree to our{" "} + <Button variant="link" className="h-auto p-0 text-xs"> + Terms of Service + </Button>{" "} + and{" "} + <Button variant="link" className="h-auto p-0 text-xs"> + Privacy Policy + </Button> + </p> + </div> + </CardContent> + </Card> + </div> + ) +}
\ No newline at end of file |