Add DB viewer access logging, account deletion, and forced password change

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]>
2026-08-05 23:41:21 -04:00
parent 3d6fe56991
commit 4ee38b6241
23 changed files with 1056 additions and 7 deletions
@@ -0,0 +1,100 @@
+"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>
+  );
+}