63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
import { Logo } from "@/components/shared/logo"
|
||
|
|
import { updatePassword } from "@/app/actions/auth"
|
||
|
|
|
||
|
|
export default async function UpdatePasswordPage({
|
||
|
|
searchParams,
|
||
|
|
}: {
|
||
|
|
searchParams: Promise<{ error?: string; token?: string }>
|
||
|
|
}) {
|
||
|
|
const params = await searchParams
|
||
|
|
const error = params.error
|
||
|
|
const token = params.token ?? ""
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full">
|
||
|
|
<div className="mb-8 flex flex-col items-center">
|
||
|
|
<Logo size="lg" />
|
||
|
|
<h1 className="mt-6 text-2xl font-bold text-white">Set new password</h1>
|
||
|
|
<p className="mt-2 text-sm text-white/60">Choose a strong password</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-xl border border-white/10 bg-[#111118] p-8">
|
||
|
|
{error && (
|
||
|
|
<div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
|
||
|
|
{decodeURIComponent(error)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<form action={updatePassword} className="space-y-4">
|
||
|
|
<input type="hidden" name="token" value={token} />
|
||
|
|
<div>
|
||
|
|
<label htmlFor="password" className="mb-1.5 block text-sm font-medium text-white/70">
|
||
|
|
New password
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="password"
|
||
|
|
name="password"
|
||
|
|
type="password"
|
||
|
|
required
|
||
|
|
minLength={8}
|
||
|
|
placeholder="Min 8 characters"
|
||
|
|
className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 active:scale-[0.98]"
|
||
|
|
>
|
||
|
|
Update password
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<p className="mt-6 text-center text-sm text-white/40">
|
||
|
|
<Link href="/login" className="text-indigo-400 hover:text-indigo-300">
|
||
|
|
Back to sign in
|
||
|
|
</Link>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|