116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
import { type FormEvent, useMemo, useState } from "react";
|
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
|
import { confirmForgotPassword } from "../api/auth";
|
|
|
|
function useQueryParams() {
|
|
const location = useLocation();
|
|
return useMemo(() => new URLSearchParams(location.search), [location.search]);
|
|
}
|
|
|
|
const GENERIC_RESET_ERROR = "Invalid or expired reset link.";
|
|
|
|
export default function ResetPasswordPage() {
|
|
const navigate = useNavigate();
|
|
const params = useQueryParams();
|
|
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const uid = params.get("uid") || "";
|
|
const token = params.get("token") || "";
|
|
|
|
const passwordError =
|
|
!newPassword
|
|
? "New password is required."
|
|
: newPassword.length < 12
|
|
? "Password must be at least 12 characters."
|
|
: "";
|
|
const confirmError =
|
|
!confirmPassword
|
|
? "Please confirm your password."
|
|
: confirmPassword !== newPassword
|
|
? "Passwords do not match."
|
|
: "";
|
|
|
|
async function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
if (!uid || !token) {
|
|
setError(GENERIC_RESET_ERROR);
|
|
return;
|
|
}
|
|
if (passwordError || confirmError) {
|
|
setError(passwordError || confirmError);
|
|
return;
|
|
}
|
|
|
|
setPending(true);
|
|
try {
|
|
await confirmForgotPassword({
|
|
uid,
|
|
token,
|
|
newPassword,
|
|
});
|
|
setSuccess("Password reset successful. You can sign in now.");
|
|
setTimeout(() => navigate("/login", { replace: true }), 1000);
|
|
} catch (err: any) {
|
|
if (err?.code === "INVALID_OR_EXPIRED_RESET_LINK" || err?.status === 400) {
|
|
setError(GENERIC_RESET_ERROR);
|
|
} else {
|
|
setError(err?.message || "Unable to reset password.");
|
|
}
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-center py-16 px-4">
|
|
<div className="card w-full max-w-md">
|
|
<h1 className="section-title mb-2">Reset Password</h1>
|
|
<p className="muted mb-6">Set a new password for your account.</p>
|
|
|
|
{!uid || !token ? <div className="alert alert-error mb-4">{GENERIC_RESET_ERROR}</div> : null}
|
|
{error ? <div className="alert alert-error mb-4">{error}</div> : null}
|
|
{success ? <div className="alert mb-4">{success}</div> : null}
|
|
|
|
<form className="stack gap-4" onSubmit={handleSubmit}>
|
|
<label className="stack gap-1">
|
|
<span className="text-sm font-medium">New password</span>
|
|
<input
|
|
className="input"
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
autoComplete="new-password"
|
|
required
|
|
/>
|
|
</label>
|
|
<label className="stack gap-1">
|
|
<span className="text-sm font-medium">Confirm password</span>
|
|
<input
|
|
className="input"
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
autoComplete="new-password"
|
|
required
|
|
/>
|
|
</label>
|
|
<button className="btn primary" type="submit" disabled={pending || !uid || !token}>
|
|
{pending ? "Resetting..." : "Reset password"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="muted text-sm mt-6 text-center">
|
|
<Link className="link" to="/forgot-password">Request a new reset link</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|