109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { useFormStatus } from "react-dom";
|
|
import { useSearchParams } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { resetPassword } from "@/app/actions/auth";
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
return (
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="w-full bg-accent text-accent-on font-bold py-3 rounded-xl border-b-4 border-accent-active hover:bg-accent-hover active:translate-y-0.5 active:border-b-0 transition-all disabled:opacity-50 cursor-pointer"
|
|
>
|
|
{pending ? "Resetting..." : "Reset password"}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default function ResetPasswordForm() {
|
|
const searchParams = useSearchParams();
|
|
const token = searchParams.get("token") ?? "";
|
|
const [state, formAction] = useActionState(resetPassword, undefined);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-bg px-4">
|
|
<div className="w-full max-w-md">
|
|
<div className="text-center mb-8">
|
|
<div className="w-14 h-14 rounded-2xl bg-accent flex items-center justify-center mx-auto mb-4 shadow-[0_4px_0_0_var(--accent-active)]">
|
|
<span className="text-accent-on font-bold text-xl">OL</span>
|
|
</div>
|
|
<h1 className="font-display text-2xl font-bold text-fg">Order Loop</h1>
|
|
</div>
|
|
|
|
<div className="bg-surface border-2 border-border rounded-2xl p-6 shadow-card">
|
|
<h2 className="font-display text-xl font-bold text-fg mb-2">
|
|
Reset your password
|
|
</h2>
|
|
<p className="text-sm text-muted mb-6">
|
|
Enter your new password below.
|
|
</p>
|
|
|
|
{state?.message && (
|
|
<div
|
|
className={`mb-4 p-3 rounded-xl text-sm font-medium ${
|
|
state.success
|
|
? "bg-green-50 border border-green-200 text-green-700"
|
|
: "bg-danger/10 border border-danger/20 text-danger"
|
|
}`}
|
|
>
|
|
{state.message}
|
|
</div>
|
|
)}
|
|
|
|
{state?.success ? (
|
|
<Link
|
|
href="/login"
|
|
className="block w-full text-center bg-accent text-accent-on font-bold py-3 rounded-xl"
|
|
>
|
|
Go to login
|
|
</Link>
|
|
) : (
|
|
<form action={formAction} className="space-y-4">
|
|
<input type="hidden" name="token" value={token} />
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="block text-sm font-medium text-fg mb-1"
|
|
>
|
|
New password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
className="w-full border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-bg text-fg focus:outline-none focus:border-accent"
|
|
placeholder="At least 8 characters"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="confirmPassword"
|
|
className="block text-sm font-medium text-fg mb-1"
|
|
>
|
|
Confirm password
|
|
</label>
|
|
<input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
className="w-full border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-bg text-fg focus:outline-none focus:border-accent"
|
|
placeholder="Repeat password"
|
|
/>
|
|
</div>
|
|
<SubmitButton />
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|