AWS SES preview

components/auth/ForgotPassword.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { forgetPassword } from '../../lib/auth-client';
+import { ArrowLeft } from 'lucide-react';
+
+const logo = '/logo.png';
+
+interface Props {
+  onBack: () => void;
+}
+
+export function ForgotPassword({ onBack }: Props) {
+  const [email, setEmail] = useState('');
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    const res = await forgetPassword({
+      email,
+      redirectTo: `${window.location.origin}/reset-password`,
+    });
+    setLoading(false);
+    if (res.error) {
+      setError(res.error.message || 'Something went wrong');
+    } else {
+      setSent(true);
+    }
+  }
+
+  return (
+    <div className="flex h-screen items-center justify-center bg-secondary">
+      <Card className="w-full max-w-sm">
+        <CardContent className="p-8 space-y-6">
+          <div className="flex justify-center">
+            <img src={logo} alt="LabWise" className="h-12" />
+          </div>
+
+          {sent ? (
+            <div className="space-y-4 text-center">
+              <h2 className="font-semibold text-lg">Check your email</h2>
+              <p className="text-sm text-muted-foreground">
+                If an account exists for <span className="font-medium text-foreground">{email}</span>,
+                we've sent a password reset link.
+              </p>
+              <Button variant="outline" className="w-full" onClick={onBack}>
+                Back to sign in
+              </Button>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-1">
+                <h2 className="font-semibold text-lg">Forgot password?</h2>
+                <p className="text-sm text-muted-foreground">
+                  Enter your email and we'll send you a reset link.
+                </p>
+              </div>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-1">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    required
+                    autoComplete="email"
+                  />
+                </div>
+                {error && <p className="text-sm text-red-600">{error}</p>}
+                <Button type="submit" className="w-full" disabled={loading}>
+                  {loading ? 'Sending…' : 'Send reset link'}
+                </Button>
+              </form>
+              <button
+                onClick={onBack}
+                className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ArrowLeft className="h-3 w-3" /> Back to sign in
+              </button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}