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]>
This commit is contained in:
Claude Sonnet 5
@@ -15,6 +15,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
const logout = useLogout();
|
||||
|
||||
const requiresLogin = systemStatus ? !isLocalConvenience(systemStatus) : false;
|
||||
const mustChangePassword = user?.must_change_password ?? false;
|
||||
|
||||
useEffect(() => {
|
||||
if (requiresLogin && !isLoading && isError) {
|
||||
@@ -22,6 +23,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
}
|
||||
}, [requiresLogin, isLoading, isError, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mustChangePassword) {
|
||||
router.replace("/change-password");
|
||||
}
|
||||
}, [mustChangePassword, router]);
|
||||
|
||||
if (requiresLogin && (isLoading || isError)) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center text-sm text-slate-500">
|
||||
@@ -30,6 +37,17 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
);
|
||||
}
|
||||
|
||||
// Every API call except /auth/me, /auth/change-password, and /auth/logout
|
||||
// 403s server-side while this is set (app/auth/dependencies.py) - this is
|
||||
// just the matching frontend redirect, not the actual enforcement.
|
||||
if (mustChangePassword) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center text-sm text-slate-500">
|
||||
Redirecting…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<LocalModeBanner />
|
||||
|
||||
@@ -28,6 +28,7 @@ import {
|
||||
useCreateDbViewerSession,
|
||||
useCreateIpBan,
|
||||
useCurrentUser,
|
||||
useDeleteAccount,
|
||||
useDeleteIpBan,
|
||||
useIpBans,
|
||||
useRejectUnbanRequest,
|
||||
@@ -690,13 +691,14 @@ function DatabaseViewerBox() {
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Open a web-based Postgres client (Adminer) in a new tab to view and edit rows directly.
|
||||
Local developers and server admins only.
|
||||
PostgreSQL is pre-selected - just enter the database password to sign in. Local developers
|
||||
and server admins only.
|
||||
</p>
|
||||
|
||||
<div className="mt-4">
|
||||
{isLocal ? (
|
||||
<a
|
||||
href="http://localhost:8081"
|
||||
href="http://localhost:8081/?pgsql=postgres&username=ciagent"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="focus-ring inline-flex items-center gap-1.5 rounded-md bg-slate-800 px-3 py-1.5 text-xs font-semibold text-white transition-colors duration-200 hover:bg-slate-900"
|
||||
@@ -720,6 +722,64 @@ function DatabaseViewerBox() {
|
||||
);
|
||||
}
|
||||
|
||||
function DeleteAccountBox() {
|
||||
const { data: systemStatus } = useSystemStatus();
|
||||
const [password, setPassword] = useState("");
|
||||
const deleteAccount = useDeleteAccount();
|
||||
const isLocal = systemStatus ? isLocalConvenience(systemStatus) : false;
|
||||
|
||||
// The local-dev bypass account has no password_hash at all (it never
|
||||
// registers/logs in) - there's nothing to type to confirm deletion, and
|
||||
// deleting it would just get silently re-created on the next request.
|
||||
if (isLocal) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 p-6">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-red-700">
|
||||
<Trash2 className="h-4 w-4" aria-hidden /> Delete account
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-red-700/80">
|
||||
Permanently deletes your account and everything in it - companies, monitoring history,
|
||||
reports, and API keys. This can't be undone.
|
||||
</p>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
deleteAccount.mutate({ password });
|
||||
}}
|
||||
className="mt-4 flex flex-wrap items-end gap-2"
|
||||
>
|
||||
<div className="min-w-[220px] flex-1">
|
||||
<label htmlFor="delete-account-password" className="block text-sm font-medium text-red-700">
|
||||
Confirm your password
|
||||
</label>
|
||||
<input
|
||||
id="delete-account-password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="focus-ring mt-1 block w-full rounded-md border border-red-300 px-3 py-2 text-sm text-slate-900 shadow-sm transition-colors duration-150"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!password || deleteAccount.isPending}
|
||||
className="focus-ring inline-flex shrink-0 items-center gap-1.5 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{deleteAccount.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
|
||||
{deleteAccount.isPending ? "Deleting…" : "Delete account"}
|
||||
</button>
|
||||
</form>
|
||||
{deleteAccount.isError && (
|
||||
<p className="mt-2 text-sm text-red-700" role="alert">
|
||||
{authErrorMessage(deleteAccount.error)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { data: user } = useCurrentUser();
|
||||
const { data: systemStatus } = useSystemStatus();
|
||||
@@ -820,6 +880,8 @@ export default function SettingsPage() {
|
||||
<LoggingBox />
|
||||
</>
|
||||
)}
|
||||
|
||||
<DeleteAccountBox />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user