95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { Suspense, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { toast } from "sonner";
|
|
import { api, AdminError } from "@/lib/api";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { AuthShell, Field } from "@/app/login/page";
|
|
|
|
export default function ResetPasswordPage() {
|
|
return (
|
|
<Suspense fallback={<AuthShell title="Reset your password">…</AuthShell>}>
|
|
<ResetInner />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function ResetInner() {
|
|
const router = useRouter();
|
|
const token = useSearchParams().get("token") ?? "";
|
|
const [password, setPassword] = useState("");
|
|
const [confirm, setConfirm] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function onSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
if (password.length < 8) {
|
|
setError("Password must be at least 8 characters.");
|
|
return;
|
|
}
|
|
if (password !== confirm) {
|
|
setError("Passwords don't match.");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
try {
|
|
await api.resetPassword(token, password);
|
|
toast.success("Password updated — please sign in.");
|
|
router.replace("/login");
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof AdminError ? err.message : "Could not reset password.",
|
|
);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
if (!token) {
|
|
return (
|
|
<AuthShell title="Reset your password">
|
|
<div className="space-y-4 text-sm text-muted-foreground">
|
|
<p>This reset link is missing its token. Request a new one.</p>
|
|
<Link href="/forgot-password" className="text-primary hover:underline">
|
|
Request a reset link
|
|
</Link>
|
|
</div>
|
|
</AuthShell>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AuthShell title="Choose a new password">
|
|
<form onSubmit={onSubmit} className="space-y-4">
|
|
<Field label="New password">
|
|
<Input
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Confirm password">
|
|
<Input
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
value={confirm}
|
|
onChange={(e) => setConfirm(e.target.value)}
|
|
/>
|
|
</Field>
|
|
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
|
<Button type="submit" disabled={busy} className="w-full">
|
|
{busy ? "Saving…" : "Update password"}
|
|
</Button>
|
|
</form>
|
|
</AuthShell>
|
|
);
|
|
}
|