diff options
| -rw-r--r-- | src/app/favicon.ico | bin | 0 -> 25931 bytes | |||
| -rw-r--r-- | src/app/globals.css | 122 | ||||
| -rw-r--r-- | src/app/layout.tsx | 34 | ||||
| -rw-r--r-- | src/app/login/page.tsx | 149 | ||||
| -rw-r--r-- | src/app/page.tsx | 53 | ||||
| -rw-r--r-- | src/app/settings/page.tsx | 491 | ||||
| -rw-r--r-- | src/app/signup/page.tsx | 208 |
7 files changed, 1057 insertions, 0 deletions
diff --git a/src/app/favicon.ico b/src/app/favicon.ico Binary files differnew file mode 100644 index 0000000..718d6fe --- /dev/null +++ b/src/app/favicon.ico diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..dc98be7 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,122 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..35e95b1 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,34 @@ +import type { Metadata } from "next"; +import "./globals.css"; +import AuthSessionProvider from "@/components/SessionProvider"; +import { Toaster } from "@/components/ui/toast"; +import { ThemeProvider } from "@/components/ThemeProvider"; + +export const metadata: Metadata = { + title: "Boilerplate", + description: "Boilerplate for Next.js", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <html lang="en" suppressHydrationWarning> + <body> + <ThemeProvider + attribute="class" + defaultTheme="system" + enableSystem + disableTransitionOnChange + > + <AuthSessionProvider> + {children} + <Toaster /> + </AuthSessionProvider> + </ThemeProvider> + </body> + </html> + ); +} diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 0000000..7d4ad9d --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,149 @@ +"use client" + +import { useState } from "react" +import { signIn } from "next-auth/react" +import { useRouter } from "next/navigation" +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import { Eye, EyeOff, Loader2 } 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 { loginSchema, type LoginInput } from "@/lib/validation" + +export default function SignInPage() { + const [showPassword, setShowPassword] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const [error, setError] = useState("") + const router = useRouter() + + const form = useForm<LoginInput>({ + resolver: zodResolver(loginSchema), + defaultValues: { + email: "", + password: "", + }, + }) + + const onSubmit = async (data: LoginInput) => { + setIsLoading(true) + setError("") + + try { + const result = await signIn("credentials", { + email: data.email, + password: data.password, + redirect: false, + }) + + if (result?.error) { + setError("Invalid email or password") + } else { + router.push("/") + router.refresh() + } + } catch (error) { + setError("An unexpected error occurred") + } finally { + setIsLoading(false) + } + } + + 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">Sign In</CardTitle> + <CardDescription className="text-center"> + Enter your email and password to access your 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="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="Enter your password" + autoComplete="current-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 /> + </FormItem> + )} + /> + <Button type="submit" className="w-full" disabled={isLoading}> + {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + Sign In + </Button> + </form> + </Form> + + <div className="text-center text-sm"> + <span className="text-muted-foreground">Don't have an account? </span> + <Link href="/signup" className="text-primary hover:underline font-medium"> + Sign up + </Link> + </div> + + <div className="text-center"> + <Button variant="link" className="text-sm text-muted-foreground"> + Forgot your password? + </Button> + </div> + </CardContent> + </Card> + </div> + ) +}
\ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..bc498c7 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,53 @@ +"use client" + +import Link from "next/link" +import { Button } from "@/components/ui/button" +import Navbar from "@/components/Navbar" +import Footer from "@/components/Footer" +import { LogIn, ArrowRight } from "lucide-react" + +export default function Home() { + return ( + <div className="min-h-screen flex flex-col"> + <Navbar /> + + <main className="flex-1 flex items-center justify-center"> + <div className="container mx-auto px-4 py-20 text-center"> + <div className="max-w-3xl mx-auto space-y-8"> + <div className="space-y-4"> + <h1 className="text-4xl md:text-6xl font-bold tracking-tight"> + Build Something + <span className="text-primary"> Amazing</span> + </h1> + <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"> + A modern Next.js application with beautiful UI components, + secure authentication, and everything you need to build your next project. + </p> + </div> + + <div className="flex flex-col sm:flex-row gap-4 justify-center items-center"> + <Button asChild size="lg" className="text-lg px-8 py-6"> + <Link href="/login"> + <LogIn className="mr-2 h-5 w-5" /> + Get Started + </Link> + </Button> + <Button variant="outline" size="lg" className="text-lg px-8 py-6"> + Learn More + <ArrowRight className="ml-2 h-5 w-5" /> + </Button> + </div> + + <div className="pt-8"> + <p className="text-sm text-muted-foreground"> + Built with Next.js, Tailwind CSS, Shadcn/UI, and MongoDB + </p> + </div> + </div> + </div> + </main> + + <Footer /> + </div> + ) +}
\ No newline at end of file diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx new file mode 100644 index 0000000..ce2d849 --- /dev/null +++ b/src/app/settings/page.tsx @@ -0,0 +1,491 @@ +"use client" + +import { useState, useEffect, useRef } from "react" +import { useSession } from "next-auth/react" +import { useRouter } from "next/navigation" +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import { z } from "zod" +import { Eye, EyeOff, Loader2, User, Mail, Lock, Save, Camera, Upload, Trash2 } from "lucide-react" +import { toast } from "sonner" + +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 { Separator } from "@/components/ui/separator" +import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" +import Navbar from "@/components/Navbar" +import { updateProfileSchema, updatePasswordSchema, type UpdateProfileInput, type UpdatePasswordInput } from "@/lib/validation" + +// Form schema for password change with confirmation +const passwordChangeSchema = updatePasswordSchema.extend({ + confirmPassword: z.string() +}).refine((data) => data.newPassword === data.confirmPassword, { + message: "Passwords don't match", + path: ["confirmPassword"], +}) + +type ProfileFormData = UpdateProfileInput +type PasswordFormData = z.infer<typeof passwordChangeSchema> + +export default function SettingsPage() { + const { data: session, status, update } = useSession() + const router = useRouter() + const fileInputRef = useRef<HTMLInputElement>(null) + const [showCurrentPassword, setShowCurrentPassword] = useState(false) + const [showNewPassword, setShowNewPassword] = useState(false) + const [showConfirmPassword, setShowConfirmPassword] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const [isImageLoading, setIsImageLoading] = useState(false) + const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null) + + const profileForm = useForm<ProfileFormData>({ + resolver: zodResolver(updateProfileSchema), + defaultValues: { + name: "", + email: "", + }, + }) + + const passwordForm = useForm<PasswordFormData>({ + resolver: zodResolver(passwordChangeSchema), + defaultValues: { + currentPassword: "", + newPassword: "", + confirmPassword: "", + }, + }) + + // Redirect if not authenticated + useEffect(() => { + if (status === "unauthenticated") { + router.push("/login") + } + }, [status, router]) + + // Set form values when session is loaded + useEffect(() => { + if (session?.user) { + profileForm.reset({ + name: session.user.name || "", + email: session.user.email || "", + }) + setProfileImageUrl(session.user.image || null) + } + }, [session, profileForm]) + + const onProfileSubmit = async (data: ProfileFormData) => { + setIsLoading(true) + + try { + const response = await fetch("/api/user/profile", { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), + }) + + const result = await response.json() + + if (!response.ok) { + toast.error(result.error || "Failed to update profile") + return + } + + // Update the session with new data + await update({ + name: data.name, + email: data.email, + }) + + toast.success("Profile updated successfully!") + + } catch (error) { + toast.error("An unexpected error occurred") + } finally { + setIsLoading(false) + } + } + + const onPasswordSubmit = async (data: PasswordFormData) => { + setIsLoading(true) + + try { + const response = await fetch("/api/user/password", { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + currentPassword: data.currentPassword, + newPassword: data.newPassword, + }), + }) + + const result = await response.json() + + if (!response.ok) { + toast.error(result.error || "Failed to update password") + return + } + + toast.success("Password updated successfully!") + passwordForm.reset() + + } catch (error) { + toast.error("An unexpected error occurred") + } finally { + setIsLoading(false) + } + } + + const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => { + const file = event.target.files?.[0] + if (!file) return + + setIsImageLoading(true) + + try { + const formData = new FormData() + formData.append('image', file) + + const response = await fetch('/api/user/profile-image', { + method: 'POST', + body: formData, + }) + + const result = await response.json() + + if (!response.ok) { + toast.error(result.error || 'Failed to upload image') + return + } + + setProfileImageUrl(result.profileImage.url) + toast.success('Profile image uploaded successfully!') + + // Update session with new image + await update({ + image: result.profileImage.url + }) + + } catch (error) { + toast.error('An unexpected error occurred') + } finally { + setIsImageLoading(false) + // Reset file input + if (fileInputRef.current) { + fileInputRef.current.value = '' + } + } + } + + const handleImageDelete = async () => { + setIsImageLoading(true) + + try { + const response = await fetch('/api/user/profile-image', { + method: 'DELETE', + }) + + const result = await response.json() + + if (!response.ok) { + toast.error(result.error || 'Failed to delete image') + return + } + + setProfileImageUrl(null) + toast.success('Profile image deleted successfully!') + + // Update session to remove image + await update({ + image: null + }) + + } catch (error) { + toast.error('An unexpected error occurred') + } finally { + setIsImageLoading(false) + } + } + + if (status === "loading") { + return ( + <div className="min-h-screen flex items-center justify-center"> + <div className="text-center"> + <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary"></div> + <p className="mt-4 text-muted-foreground">Loading...</p> + </div> + </div> + ) + } + + if (!session) { + return null + } + + return ( + <div className="min-h-screen bg-background"> + <Navbar /> + + <div className="container mx-auto px-4 py-8 max-w-2xl"> + <div className="space-y-6"> + <div> + <h1 className="text-3xl font-bold">Account Settings</h1> + <p className="text-muted-foreground"> + Manage your account information and security settings + </p> + </div> + + + + {/* Profile Information */} + <Card> + <CardHeader> + <CardTitle className="flex items-center"> + <User className="mr-2 h-5 w-5" /> + Profile Information + </CardTitle> + <CardDescription> + Update your personal information + </CardDescription> + </CardHeader> + <CardContent> + <Form {...profileForm}> + <form onSubmit={profileForm.handleSubmit(onProfileSubmit)} className="space-y-4"> + <FormField + control={profileForm.control} + name="name" + render={({ field }) => ( + <FormItem> + <FormLabel>Full Name</FormLabel> + <FormControl> + <Input + placeholder="John Doe" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={profileForm.control} + name="email" + render={({ field }) => ( + <FormItem> + <FormLabel>Email Address</FormLabel> + <FormControl> + <Input + type="email" + placeholder="john@example.com" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <Button type="submit" disabled={isLoading}> + {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + <Save className="mr-2 h-4 w-4" /> + Save Changes + </Button> + </form> + </Form> + </CardContent> + </Card> + + <Separator /> + + {/* Profile Image */} + <Card> + <CardHeader> + <CardTitle className="flex items-center"> + <Camera className="mr-2 h-5 w-5" /> + Profile Image + </CardTitle> + <CardDescription> + Upload or update your profile picture + </CardDescription> + </CardHeader> + <CardContent> + <div className="flex items-center space-x-6"> + <Avatar className="h-24 w-24"> + <AvatarImage src={profileImageUrl || undefined} alt="Profile" /> + <AvatarFallback className="text-lg"> + {session?.user?.name?.charAt(0)?.toUpperCase() || 'U'} + </AvatarFallback> + </Avatar> + + <div className="flex-1 space-y-3"> + <div className="flex items-center space-x-3"> + <Button + onClick={() => fileInputRef.current?.click()} + disabled={isImageLoading} + variant="outline" + > + {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + <Upload className="mr-2 h-4 w-4" /> + {profileImageUrl ? 'Change Image' : 'Upload Image'} + </Button> + + {profileImageUrl && ( + <Button + onClick={handleImageDelete} + disabled={isImageLoading} + variant="outline" + className="text-destructive hover:text-destructive" + > + {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + <Trash2 className="mr-2 h-4 w-4" /> + Remove + </Button> + )} + </div> + + <p className="text-xs text-muted-foreground"> + Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB. + Images will be resized to 400x400 pixels. + </p> + + <input + ref={fileInputRef} + type="file" + accept="image/jpeg,image/jpg,image/png,image/webp,image/gif" + onChange={handleImageUpload} + className="hidden" + /> + </div> + </div> + </CardContent> + </Card> + + <Separator /> + + {/* Password Change */} + <Card> + <CardHeader> + <CardTitle className="flex items-center"> + <Lock className="mr-2 h-5 w-5" /> + Change Password + </CardTitle> + <CardDescription> + Update your password to keep your account secure + </CardDescription> + </CardHeader> + <CardContent> + <Form {...passwordForm}> + <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4"> + <FormField + control={passwordForm.control} + name="currentPassword" + render={({ field }) => ( + <FormItem> + <FormLabel>Current Password</FormLabel> + <FormControl> + <div className="relative"> + <Input + type={showCurrentPassword ? "text" : "password"} + placeholder="Enter your current 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={() => setShowCurrentPassword(!showCurrentPassword)} + > + {showCurrentPassword ? ( + <EyeOff className="h-4 w-4" /> + ) : ( + <Eye className="h-4 w-4" /> + )} + </Button> + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={passwordForm.control} + name="newPassword" + render={({ field }) => ( + <FormItem> + <FormLabel>New Password</FormLabel> + <FormControl> + <div className="relative"> + <Input + type={showNewPassword ? "text" : "password"} + placeholder="Enter your 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={() => setShowNewPassword(!showNewPassword)} + > + {showNewPassword ? ( + <EyeOff className="h-4 w-4" /> + ) : ( + <Eye className="h-4 w-4" /> + )} + </Button> + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={passwordForm.control} + name="confirmPassword" + render={({ field }) => ( + <FormItem> + <FormLabel>Confirm New Password</FormLabel> + <FormControl> + <div className="relative"> + <Input + type={showConfirmPassword ? "text" : "password"} + placeholder="Confirm your 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={() => setShowConfirmPassword(!showConfirmPassword)} + > + {showConfirmPassword ? ( + <EyeOff className="h-4 w-4" /> + ) : ( + <Eye className="h-4 w-4" /> + )} + </Button> + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <div className="text-xs text-muted-foreground"> + Password must contain at least 8 characters with uppercase, lowercase, and a number. + </div> + <Button type="submit" disabled={isLoading}> + {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + <Save className="mr-2 h-4 w-4" /> + Update Password + </Button> + </form> + </Form> + </CardContent> + </Card> + </div> + </div> + </div> + ) +}
\ No newline at end of file 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 |