initial commit

app/forgot-password/page.tsx

@@ -0,0 +1,163 @@
+'use client'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Header } from '@/components/header'
+import { Footer } from '@/components/footer'
+import { Mail, ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+
+const ForgotPasswordSchema = z.object({
+  email: z.string().email('Please enter a valid email address'),
+})
+
+type ForgotPasswordFormData = z.infer<typeof ForgotPasswordSchema>
+
+export default function ForgotPasswordPage() {
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    getValues,
+  } = useForm<ForgotPasswordFormData>({
+    resolver: zodResolver(ForgotPasswordSchema),
+  })
+
+  const onSubmit = async (data: ForgotPasswordFormData) => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const response = await fetch('/api/auth/forgot-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+
+      const result = await response.json()
+
+      if (result.success) {
+        setIsSubmitted(true)
+      } else {
+        setError(result.error?.message || 'Failed to send reset email')
+      }
+    } catch (err) {
+      setError('An error occurred. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <div className="container mx-auto px-4 pt-24 pb-8">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold mb-4">Reset Password</h1>
+          <p className="text-muted-foreground">
+            Enter your email address and we'll send you a link to reset your password
+          </p>
+        </div>
+
+        <Card className="w-full max-w-md mx-auto">
+          {isSubmitted ? (
+            <>
+              <CardHeader>
+                <CardTitle className="text-green-600">Check Your Email</CardTitle>
+                <CardDescription>
+                  We've sent a password reset link to {getValues('email')}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="text-center">
+                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Mail className="w-8 h-8 text-green-600" />
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Click the link in the email to reset your password. If you don't see the email,
+                    check your spam folder.
+                  </p>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Link href="/auth" className="w-full">
+                  <Button variant="outline" className="w-full">
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    Back to Sign In
+                  </Button>
+                </Link>
+              </CardFooter>
+            </>
+          ) : (
+            <>
+              <CardHeader>
+                <CardTitle>Forgot Password</CardTitle>
+                <CardDescription>
+                  Enter your email address to receive a password reset link
+                </CardDescription>
+              </CardHeader>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <CardContent className="space-y-4">
+                  {error && (
+                    <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+                      {error}
+                    </div>
+                  )}
+
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email Address</Label>
+                    <div className="relative">
+                      <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="email"
+                        type="email"
+                        placeholder="your@email.com"
+                        className="pl-10"
+                        {...register('email')}
+                        disabled={loading}
+                      />
+                    </div>
+                    {errors.email && (
+                      <p className="text-sm text-red-600">{errors.email.message}</p>
+                    )}
+                  </div>
+                </CardContent>
+                <CardFooter className="flex flex-col space-y-4 pt-6">
+                  <Button type="submit" className="w-full" disabled={loading}>
+                    {loading ? 'Sending...' : 'Send Reset Link'}
+                  </Button>
+                  
+                  <Link href="/auth" className="w-full">
+                    <Button variant="outline" className="w-full">
+                      <ArrowLeft className="w-4 h-4 mr-2" />
+                      Back to Sign In
+                    </Button>
+                  </Link>
+                </CardFooter>
+              </form>
+            </>
+          )}
+        </Card>
+      </div>
+      <Footer />
+    </div>
+  )
+}