- Add customer password change page at /account/change-password - Add admin password change page at /admin/change-password - Create AdminUser database table for storing admin credentials - Admin login now checks database first, falls back to env vars - Update admin auth to support bcrypt password hashing - Add change password links to customer account and admin nav - Fix customer login logs back link (was pointing to non-existent /admin) - Add success/error message handling for password changes Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import Link from 'next/link';
|
|
import { redirect } from 'next/navigation';
|
|
import { isAdminAuthenticated } from '@/lib/adminAuth';
|
|
import { changeAdminPassword } from './actions';
|
|
|
|
const ERROR_MESSAGES: Record<string, string> = {
|
|
missing_fields: 'Please fill in all fields.',
|
|
password_too_short: 'Password must be at least 8 characters.',
|
|
passwords_dont_match: 'Passwords do not match.',
|
|
invalid_current: 'Current password is incorrect.',
|
|
};
|
|
|
|
export default async function ChangeAdminPasswordPage({ searchParams }: { searchParams: { error?: string } }) {
|
|
const isAuthenticated = await isAdminAuthenticated();
|
|
if (!isAuthenticated) redirect('/admin/login');
|
|
|
|
const error = searchParams.error ? ERROR_MESSAGES[searchParams.error] : null;
|
|
|
|
return (
|
|
<div className="mx-auto max-w-2xl px-6 py-12">
|
|
<Link href="/admin/orders" className="tag-label text-muted hover:text-clay">
|
|
← Back to orders
|
|
</Link>
|
|
|
|
<h1 className="mt-6 font-display text-3xl">Change admin password</h1>
|
|
<p className="mt-2 text-muted">Update your admin account password</p>
|
|
|
|
{error && (
|
|
<p className="mt-6 border border-splash-pink/40 bg-splash-pink/10 px-4 py-3 text-sm text-splash-pink">
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<form action={changeAdminPassword} className="mt-8 max-w-md space-y-6">
|
|
<div>
|
|
<label htmlFor="current" className="tag-label mb-2 block">
|
|
Current password
|
|
</label>
|
|
<input
|
|
id="current"
|
|
name="currentPassword"
|
|
type="password"
|
|
required
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="new" className="tag-label mb-2 block">
|
|
New password
|
|
</label>
|
|
<input
|
|
id="new"
|
|
name="newPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
/>
|
|
<p className="mt-1 text-xs text-muted">At least 8 characters</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="confirm" className="tag-label mb-2 block">
|
|
Confirm new password
|
|
</label>
|
|
<input
|
|
id="confirm"
|
|
name="confirmPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="bg-clay px-6 py-2 text-sm font-medium text-paper hover:bg-clay-dark">
|
|
Update password
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|