sakshamandClaude Sonnet 5
4ee38b6241
Logs a distinct db_viewer_accessed event (not just the earlier session_created "requested" event) when an admin's browser actually completes the hand-off into Adminer. Adds a password-confirmed account-deletion box to Settings, relying on the existing ON DELETE CASCADE foreign keys to clean up everything the account owns. Adds an admin-only "require password change" flag that get_current_user enforces server-side (403 on everything except /auth/me, /auth/change-password, /auth/logout) - meant for handing a demo account to someone with a known sample password. Co-Authored-By: Claude Sonnet 5 <[email protected]>
101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useRouter } from "next/navigation";
|
|
import { useForm } from "react-hook-form";
|
|
import { KeyRound, Loader2 } from "lucide-react";
|
|
import { z } from "zod";
|
|
import { PasswordField } from "@/components/ui/password-field";
|
|
import { PasswordStrengthMeter } from "@/components/ui/password-strength-meter";
|
|
import { authErrorMessage, useChangePassword } from "@/hooks/use-auth";
|
|
|
|
const changePasswordSchema = z.object({
|
|
currentPassword: z.string().min(1, "Enter your current password"),
|
|
newPassword: z
|
|
.string()
|
|
.min(10, "Must be at least 10 characters")
|
|
.refine((v) => /[a-zA-Z]/.test(v) && /\d/.test(v), {
|
|
message: "Must contain at least one letter and one digit",
|
|
}),
|
|
});
|
|
|
|
type ChangePasswordForm = z.infer<typeof changePasswordSchema>;
|
|
|
|
export default function ChangePasswordPage() {
|
|
const router = useRouter();
|
|
const changePassword = useChangePassword();
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm<ChangePasswordForm>({ resolver: zodResolver(changePasswordSchema) });
|
|
|
|
const onSubmit = handleSubmit(async (values) => {
|
|
try {
|
|
await changePassword.mutateAsync({
|
|
current_password: values.currentPassword,
|
|
new_password: values.newPassword,
|
|
});
|
|
router.replace("/dashboard");
|
|
} catch {
|
|
// Surfaced via changePassword.isError below.
|
|
}
|
|
});
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
|
|
<div className="w-full max-w-sm animate-fade-in overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
|
|
<div className="h-1.5 bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700" />
|
|
<div className="p-8">
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-600">
|
|
<KeyRound className="h-4.5 w-4.5" aria-hidden />
|
|
</span>
|
|
<div>
|
|
<h1 className="text-xl font-semibold text-slate-900">Change your password</h1>
|
|
<p className="text-sm text-slate-600">
|
|
An admin requires a new password before you can continue.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
|
|
<PasswordField
|
|
label="Current password"
|
|
autoComplete="current-password"
|
|
{...register("currentPassword")}
|
|
error={errors.currentPassword?.message}
|
|
/>
|
|
<div>
|
|
<PasswordField
|
|
label="New password"
|
|
autoComplete="new-password"
|
|
hint="At least 10 characters, with a letter and a digit."
|
|
{...register("newPassword")}
|
|
error={errors.newPassword?.message}
|
|
/>
|
|
<PasswordStrengthMeter password={watch("newPassword") ?? ""} />
|
|
</div>
|
|
|
|
{changePassword.isError && (
|
|
<p className="animate-fade-in text-sm text-red-600" role="alert">
|
|
{authErrorMessage(changePassword.error)}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={changePassword.isPending}
|
|
className="focus-ring inline-flex w-full items-center justify-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{changePassword.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
|
|
{changePassword.isPending ? "Updating…" : "Update password"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|