feat(admin): issue, reset and deactivate manager accounts
This commit is contained in:
parent
5cd74762fe
commit
7ec075567b
2 changed files with 284 additions and 0 deletions
50
src/app/admin/users/page.tsx
Normal file
50
src/app/admin/users/page.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { AppShell } from "@/components/shell/app-shell";
|
||||
import { TopBar } from "@/components/shell/top-bar";
|
||||
import { AdminTable, AdminCell } from "@/components/admin/admin-table";
|
||||
import { NewUserForm, UserRowActions } from "@/components/admin/user-form";
|
||||
import { Pill } from "@/components/ui/pill";
|
||||
import { loadClientOptions, loadUsers } from "@/lib/data/admin";
|
||||
|
||||
export default async function AdminUsersPage() {
|
||||
const [users, clients] = await Promise.all([loadUsers(), loadClientOptions()]);
|
||||
const clientsById = new Map(clients.map((c) => [c.id, c]));
|
||||
|
||||
return (
|
||||
<AppShell role="owner" currentPath="/admin/users">
|
||||
<TopBar title="Accounts" subtitle="Who can sign in, and what they see" />
|
||||
|
||||
<div className="flex-1 space-y-4 overflow-y-auto p-6">
|
||||
<NewUserForm clients={clients} />
|
||||
|
||||
<AdminTable headers={["Name", "Email", "Client", "Role", ""]}>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<AdminCell className="font-medium text-text-primary">
|
||||
{user.name || "—"}
|
||||
{user.active === false && (
|
||||
<span className="ml-2 text-xs font-normal text-text-muted">
|
||||
deactivated
|
||||
</span>
|
||||
)}
|
||||
</AdminCell>
|
||||
<AdminCell>{user.email}</AdminCell>
|
||||
<AdminCell>
|
||||
{clientsById.get(user.client)?.name ?? (
|
||||
<span className="text-text-muted">—</span>
|
||||
)}
|
||||
</AdminCell>
|
||||
<AdminCell>
|
||||
<Pill tone={user.role === "owner" ? "accent" : "brand"}>
|
||||
{user.role === "owner" ? "Owner" : "Client manager"}
|
||||
</Pill>
|
||||
</AdminCell>
|
||||
<AdminCell align="right">
|
||||
<UserRowActions user={user} />
|
||||
</AdminCell>
|
||||
</tr>
|
||||
))}
|
||||
</AdminTable>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
234
src/components/admin/user-form.tsx
Normal file
234
src/components/admin/user-form.tsx
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Plus, Copy } from "lucide-react";
|
||||
|
||||
import {
|
||||
createClientManager,
|
||||
resetUserPassword,
|
||||
setUserActive,
|
||||
} from "@/app/actions/users";
|
||||
import type { ClientRecord, UserRecord } from "@/lib/pb/types";
|
||||
|
||||
/**
|
||||
* Shows a generated password exactly once.
|
||||
*
|
||||
* It is not stored in readable form and cannot be retrieved again. If the
|
||||
* owner navigates away before copying it, the answer is to issue a new one —
|
||||
* so this panel is deliberately loud and does not auto-dismiss.
|
||||
*/
|
||||
function OneTimePassword({
|
||||
email,
|
||||
password,
|
||||
onDone,
|
||||
}: {
|
||||
email: string;
|
||||
password: string;
|
||||
onDone: () => void;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-2 rounded-[var(--radius-tile)] border border-accent bg-accent-soft p-4">
|
||||
<p className="text-sm font-medium text-text-primary">
|
||||
One-time password for {email}
|
||||
</p>
|
||||
<p className="text-xs text-text-secondary">
|
||||
This is shown once and cannot be recovered. Send it to them now, and
|
||||
have them change it after signing in.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="tabular rounded-lg bg-panel px-3 py-2 text-base tracking-wider text-text-primary">
|
||||
{password}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(password);
|
||||
setCopied(true);
|
||||
}}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-border-subtle bg-panel px-2.5 py-2 text-xs text-text-secondary hover:bg-surface-raised"
|
||||
>
|
||||
<Copy size={13} strokeWidth={2} />
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDone}
|
||||
className="ml-auto text-xs text-text-muted hover:text-text-secondary"
|
||||
>
|
||||
I have saved it
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NewUserForm({ clients }: { clients: ClientRecord[] }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [clientId, setClientId] = useState(clients[0]?.id ?? "");
|
||||
const [issued, setIssued] = useState<{ email: string; password: string } | null>(null);
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (issued) {
|
||||
return (
|
||||
<OneTimePassword
|
||||
email={issued.email}
|
||||
password={issued.password}
|
||||
onDone={() => setIssued(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (clients.length === 0) {
|
||||
return <p className="text-xs text-text-muted">Create a client first.</p>;
|
||||
}
|
||||
|
||||
function submit(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const result = await createClientManager({ name, email, clientId });
|
||||
setName("");
|
||||
setEmail("");
|
||||
setOpen(false);
|
||||
setIssued(result);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Could not create that account");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-sm font-medium text-brand-fg transition-colors hover:bg-brand-hover"
|
||||
>
|
||||
<Plus size={14} strokeWidth={2} />
|
||||
New manager
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const field =
|
||||
"w-full rounded-lg border border-border-subtle bg-panel px-3 py-2 text-sm text-text-primary outline-none focus:border-brand";
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className="w-full space-y-3 rounded-[var(--radius-tile)] border border-border-subtle bg-surface p-4"
|
||||
>
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">Name</span>
|
||||
<input
|
||||
autoFocus
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
className={field}
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">Email</span>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
className={field}
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">Client</span>
|
||||
<select
|
||||
value={clientId}
|
||||
onChange={(event) => setClientId(event.target.value)}
|
||||
className={field}
|
||||
>
|
||||
{clients.map((client) => (
|
||||
<option key={client.id} value={client.id}>
|
||||
{client.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-accent">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending || !name.trim() || !email.trim()}
|
||||
className="rounded-lg bg-brand px-3 py-2 text-sm font-medium text-brand-fg disabled:opacity-50"
|
||||
>
|
||||
{pending ? "Creating…" : "Create account"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="px-2 py-2 text-sm text-text-muted hover:text-text-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function UserRowActions({ user }: { user: UserRecord }) {
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [issued, setIssued] = useState<string | null>(null);
|
||||
|
||||
if (user.role === "owner") {
|
||||
return <span className="text-xs text-text-muted">—</span>;
|
||||
}
|
||||
|
||||
if (issued) {
|
||||
return (
|
||||
<span className="tabular rounded bg-accent-soft px-2 py-1 text-xs text-accent">
|
||||
{issued}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="flex items-center justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending}
|
||||
onClick={() =>
|
||||
startTransition(async () => {
|
||||
const { password } = await resetUserPassword({ userId: user.id });
|
||||
setIssued(password);
|
||||
})
|
||||
}
|
||||
className="text-xs text-text-muted underline-offset-2 hover:text-text-secondary hover:underline disabled:opacity-50"
|
||||
>
|
||||
Reset password
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending}
|
||||
onClick={() =>
|
||||
startTransition(async () => {
|
||||
await setUserActive({ userId: user.id, active: !user.active });
|
||||
})
|
||||
}
|
||||
className="text-xs text-text-muted underline-offset-2 hover:text-text-secondary hover:underline disabled:opacity-50"
|
||||
>
|
||||
{user.active ? "Deactivate" : "Reactivate"}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue