90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useActionState } from "react";
|
|
import { useFormStatus } from "react-dom";
|
|
import Link from "next/link";
|
|
import { changePassword } from "@/app/actions/auth";
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
return (
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="bg-accent text-accent-on px-6 py-3 rounded-xl font-bold text-sm border-b-4 border-accent-active hover:bg-accent-hover active:translate-y-1 active:border-b-0 transition-all disabled:opacity-50 cursor-pointer shadow-[0_4px_0_0_var(--accent-active)]"
|
|
>
|
|
{pending ? "Changing..." : "Change password"}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default function ChangePasswordPage() {
|
|
const [state, formAction] = useActionState(changePassword, undefined);
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-bg">
|
|
<nav className="sticky top-0 z-50 backdrop-blur-md bg-white/80 border-b-2 border-border">
|
|
<div className="max-w-[1080px] mx-auto px-6 h-16 flex items-center">
|
|
<Link href="/" className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-xl bg-accent flex items-center justify-center shadow-card">
|
|
<span className="text-accent-on font-bold text-sm">OL</span>
|
|
</div>
|
|
<span className="font-display text-lg font-bold text-fg">Order Loop</span>
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="flex-1 max-w-md mx-auto px-6 py-8 w-full">
|
|
<h1 className="font-display text-2xl font-bold text-fg mb-6">Change Password</h1>
|
|
|
|
<div className="bg-white border-2 border-border rounded-2xl p-6 shadow-card">
|
|
<form action={formAction} className="space-y-4">
|
|
{state?.message && (
|
|
<div className={`p-3 rounded-xl text-sm font-medium ${state.success ? "bg-green-50 text-green-800 border border-green-200" : "bg-red-50 text-red-800 border border-red-200"}`}>
|
|
{state.message}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="currentPassword" className="text-sm font-medium text-muted">Current Password</label>
|
|
<input
|
|
id="currentPassword"
|
|
name="currentPassword"
|
|
type="password"
|
|
required
|
|
className="border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="newPassword" className="text-sm font-medium text-muted">New Password</label>
|
|
<input
|
|
id="newPassword"
|
|
name="newPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
className="border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="confirmPassword" className="text-sm font-medium text-muted">Confirm New Password</label>
|
|
<input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
className="border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<SubmitButton />
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|