AWS SES preview

components/auth/ResetPassword.tsx

@@ -0,0 +1,98 @@
+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 { resetPassword } from '../../lib/auth-client';
+
+const logo = '/logo.png';
+
+interface Props {
+  onSuccess: () => void;
+}
+
+export function ResetPassword({ onSuccess }: Props) {
+  const token = new URLSearchParams(window.location.search).get('token') || '';
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+    if (password !== confirm) {
+      setError('Passwords do not match');
+      return;
+    }
+    setLoading(true);
+    const res = await resetPassword({ newPassword: password, token });
+    setLoading(false);
+    if (res.error) {
+      setError(res.error.message || 'Failed to reset password. The link may have expired.');
+    } else {
+      setDone(true);
+      setTimeout(onSuccess, 2000);
+    }
+  }
+
+  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>
+
+          {done ? (
+            <div className="text-center space-y-2">
+              <h2 className="font-semibold text-lg">Password reset!</h2>
+              <p className="text-sm text-muted-foreground">Redirecting you to sign in…</p>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-1">
+                <h2 className="font-semibold text-lg">Set new password</h2>
+                <p className="text-sm text-muted-foreground">Choose a new password for your account.</p>
+              </div>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-1">
+                  <Label htmlFor="password">New password</Label>
+                  <Input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    required
+                    autoComplete="new-password"
+                    placeholder="Min. 8 characters"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="confirm">Confirm password</Label>
+                  <Input
+                    id="confirm"
+                    type="password"
+                    value={confirm}
+                    onChange={e => setConfirm(e.target.value)}
+                    required
+                    autoComplete="new-password"
+                  />
+                </div>
+                {error && <p className="text-sm text-red-600">{error}</p>}
+                <Button type="submit" className="w-full" disabled={loading}>
+                  {loading ? 'Resetting…' : 'Reset password'}
+                </Button>
+              </form>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}