feat: complete user management workflow

This commit is contained in:
2026-07-02 01:18:52 -07:00
parent e3e7b0d8e0
commit 99bcfb1038
12 changed files with 663 additions and 46 deletions

View File

@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import type { ApiResult } from "@/modules/core/server/api";
import type { Organization } from "@/modules/core/types";
type AuthMode = "login" | "register" | "setup";
@@ -30,6 +31,7 @@ function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
const [message, setMessage] = useState("");
const [isPending, setIsPending] = useState(false);
const [hasAccounts, setHasAccounts] = useState<boolean | null>(null);
const [organizations, setOrganizations] = useState<Organization[]>([]);
const copy = modeCopy[mode];
const isSetup = mode === "setup";
@@ -39,17 +41,23 @@ function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
let isMounted = true;
async function loadState(): Promise<void> {
const [bootstrapResponse, sessionResponse] = await Promise.all([
const [bootstrapResponse, sessionResponse, organizationsResponse] = await Promise.all([
fetch("/api/auth/bootstrap"),
fetch("/api/auth/session"),
fetch("/api/organizations"),
]);
const bootstrap = (await bootstrapResponse.json()) as ApiResult<{ setupRequired: boolean }>;
const session = (await sessionResponse.json()) as ApiResult<{ account: unknown | null }>;
const organizationsResult = (await organizationsResponse.json()) as ApiResult<{ organizations: Organization[] }>;
if (!isMounted || !bootstrap.success || !session.success) {
return;
}
if (organizationsResult.success) {
setOrganizations(organizationsResult.organizations);
}
const initialized = !bootstrap.setupRequired;
setHasAccounts(initialized);
@@ -97,6 +105,7 @@ function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
const email = String(formData.get("email") ?? "");
const password = String(formData.get("password") ?? "");
const organization = String(formData.get("organization") ?? "");
const organizationId = String(formData.get("organizationId") ?? "");
const endpoint = isLogin ? "/api/auth/login" : isSetup ? "/api/auth/setup" : "/api/auth/register";
const response = await fetch(endpoint, {
@@ -107,9 +116,10 @@ function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
email,
password,
organization,
organizationId,
}),
});
const result = (await response.json()) as ApiResult<{ account: unknown }>;
const result = (await response.json()) as ApiResult<{ account: unknown; pendingApproval?: boolean }>;
setIsPending(false);
if (!result.success) {
@@ -117,6 +127,11 @@ function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
return;
}
if (result.pendingApproval) {
setMessage(result.reason);
return;
}
router.refresh();
router.replace(isLogin ? redirectTo : "/app/dashboard");
}
@@ -180,6 +195,23 @@ function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
</label>
) : null}
{mode === "register" && organizations.length > 0 ? (
<label className="block space-y-2">
<span className="text-sm font-medium"></span>
<select
className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
name="organizationId"
>
<option value=""></option>
{organizations.map((organization) => (
<option key={organization.id} value={organization.id}>
{organization.name}
</option>
))}
</select>
</label>
) : null}
{!isLogin ? (
<label className="block space-y-2">
<span className="text-sm font-medium"></span>

View File

@@ -251,7 +251,7 @@ export async function createRegistration(input: {
email: string;
password: string;
organizationId?: string;
}): Promise<{ account: PublicAccount; session: Session }> {
}): Promise<{ account: PublicAccount; session?: Session }> {
const database = getDatabase();
const password = hashPassword(input.password);
const expiresAt = new Date(Date.now() + SESSION_MAX_AGE_SECONDS * 1000);
@@ -278,18 +278,16 @@ export async function createRegistration(input: {
throw new Error("账号创建失败");
}
const sessionRows = await transaction
.insert(sessions)
.values({
accountId: account.id,
activeOrganizationId: input.organizationId,
expiresAt,
})
.returning();
const sessionRows = input.organizationId
? []
: await transaction
.insert(sessions)
.values({
accountId: account.id,
expiresAt,
})
.returning();
const session = sessionRows[0];
if (!session) {
throw new Error("会话创建失败");
}
if (input.organizationId) {
await transaction.insert(joinRequests).values({
@@ -308,7 +306,7 @@ export async function createRegistration(input: {
}
const publicAccount = toPublicAccount(created.account);
const session = toSession(created.session);
const session = created.session ? toSession(created.session) : undefined;
await recordAuditLog({
actor: publicAccount,
organizationId: input.organizationId,
@@ -334,7 +332,7 @@ export async function loginWithPassword(input: {
.limit(1);
const account = accountRows[0];
if (!account || account.status === "disabled" || !verifyPassword(input.password, account)) {
if (!account || account.status !== "active" || !verifyPassword(input.password, account)) {
throw new Error("邮箱或密码错误");
}

View File

@@ -7,6 +7,7 @@ import {
admissions,
beds,
elders,
joinRequests,
memberships,
organizations,
roles,
@@ -14,7 +15,18 @@ import {
sessions,
systemIncidents,
} from "@/modules/core/server/schema";
import type { Account, Admission, AppData, FacilityBed, Membership, Organization, Room, Session, SystemIncident } from "@/modules/core/types";
import type {
Account,
Admission,
AppData,
FacilityBed,
JoinRequest,
Membership,
Organization,
Room,
Session,
SystemIncident,
} from "@/modules/core/types";
import type { Elder } from "@/modules/elders/types";
function iso(value: Date): string {
@@ -27,6 +39,7 @@ export async function readData(): Promise<AppData> {
organizationRows,
accountRows,
membershipRows,
joinRequestRows,
sessionRows,
elderRows,
roomRows,
@@ -38,6 +51,17 @@ export async function readData(): Promise<AppData> {
database.select().from(organizations).orderBy(desc(organizations.createdAt)),
database.select().from(accounts).orderBy(desc(accounts.createdAt)),
database.select({ membership: memberships, role: roles }).from(memberships).innerJoin(roles, eq(roles.id, memberships.roleId)),
database
.select({
request: joinRequests,
accountName: accounts.name,
accountEmail: accounts.email,
organizationName: organizations.name,
})
.from(joinRequests)
.innerJoin(accounts, eq(accounts.id, joinRequests.accountId))
.innerJoin(organizations, eq(organizations.id, joinRequests.organizationId))
.orderBy(desc(joinRequests.createdAt)),
database.select().from(sessions).orderBy(desc(sessions.createdAt)),
database.select().from(elders).orderBy(desc(elders.createdAt)),
database.select().from(rooms).orderBy(desc(rooms.createdAt)),
@@ -120,6 +144,20 @@ export async function readData(): Promise<AppData> {
};
});
const joinRequestsData: JoinRequest[] = joinRequestRows.map((row) => ({
id: row.request.id,
accountId: row.request.accountId,
accountName: row.accountName,
accountEmail: row.accountEmail,
organizationId: row.request.organizationId,
organizationName: row.organizationName,
status: row.request.status,
reason: row.request.reason,
reviewedByAccountId: row.request.reviewedByAccountId ?? undefined,
reviewedAt: row.request.reviewedAt ? iso(row.request.reviewedAt) : undefined,
createdAt: iso(row.request.createdAt),
}));
const sessionsData: Session[] = sessionRows.map((row) => ({
id: row.id,
accountId: row.accountId,
@@ -204,6 +242,7 @@ export async function readData(): Promise<AppData> {
organizations: organizationsData,
accounts: accountsData,
memberships: membershipsData,
joinRequests: joinRequestsData,
sessions: sessionsData,
elders: eldersData,
rooms: roomsData,

View File

@@ -86,6 +86,22 @@ export type Membership = {
updatedAt: string;
};
export type JoinRequestStatus = "pending" | "approved" | "rejected";
export type JoinRequest = {
id: string;
accountId: string;
accountName: string;
accountEmail: string;
organizationId: string;
organizationName: string;
status: JoinRequestStatus;
reason: string;
reviewedByAccountId?: string;
reviewedAt?: string;
createdAt: string;
};
export type Account = {
id: string;
platformRoleId?: string;
@@ -189,6 +205,7 @@ export type AppData = {
organizations: Organization[];
accounts: Account[];
memberships: Membership[];
joinRequests: JoinRequest[];
sessions: Session[];
elders: Elder[];
rooms: Room[];

View File

@@ -2,8 +2,17 @@ import { Activity, Building2, Server, ShieldCheck, Users } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { AuditLog, Membership, Organization, PublicAccount, RoleDefinition, SystemIncident } from "@/modules/core/types";
import type {
AuditLog,
JoinRequest,
Membership,
Organization,
PublicAccount,
RoleDefinition,
SystemIncident,
} from "@/modules/core/types";
import { ROLE_LABELS } from "@/modules/core/types";
import { UserManagementClient } from "@/modules/settings/components/UserManagementClient";
import type { RoleId } from "@/modules/core/types";
type SettingsOverviewProps = {
@@ -12,6 +21,7 @@ type SettingsOverviewProps = {
auditLogs: AuditLog[];
organizations: Organization[];
memberships: Membership[];
joinRequests: JoinRequest[];
incidents: SystemIncident[];
};
@@ -29,6 +39,7 @@ export function SettingsOverview({
auditLogs,
organizations,
memberships,
joinRequests,
incidents,
}: SettingsOverviewProps): React.ReactElement {
const activeAccountCount = accounts.filter((account) => account.status === "active").length;
@@ -171,6 +182,8 @@ export function SettingsOverview({
</Card>
</section>
<UserManagementClient organizations={organizations} roles={roles} joinRequests={joinRequests} />
<section className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
<Card>
<CardHeader>

View File

@@ -0,0 +1,224 @@
"use client";
import { FormEvent, useMemo, useState } from "react";
import { Check, Plus, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import type { ApiResult } from "@/modules/core/server/api";
import type { JoinRequest, Organization, RoleDefinition } from "@/modules/core/types";
type UserManagementClientProps = {
organizations: Organization[];
roles: RoleDefinition[];
joinRequests: JoinRequest[];
};
function getOrganizationRoles(roles: RoleDefinition[], organizationId: string): RoleDefinition[] {
return roles.filter((role) => role.scope === "organization" && role.organizationId === organizationId && role.isEnabled);
}
function getDefaultOrganizationId(organizations: Organization[]): string {
return organizations[0]?.id ?? "";
}
export function UserManagementClient({
organizations,
roles,
joinRequests,
}: UserManagementClientProps): React.ReactElement {
const router = useRouter();
const [selectedOrganizationId, setSelectedOrganizationId] = useState(() => getDefaultOrganizationId(organizations));
const [message, setMessage] = useState("");
const [isPending, setIsPending] = useState(false);
const organizationRoles = useMemo(
() => getOrganizationRoles(roles, selectedOrganizationId),
[roles, selectedOrganizationId],
);
const pendingJoinRequests = joinRequests.filter((request) => request.status === "pending");
async function handleCreateAccount(event: FormEvent<HTMLFormElement>): Promise<void> {
event.preventDefault();
setMessage("");
setIsPending(true);
const formData = new FormData(event.currentTarget);
const response = await fetch("/api/settings/accounts", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
organizationId: String(formData.get("organizationId") ?? ""),
roleId: String(formData.get("roleId") ?? ""),
name: String(formData.get("name") ?? ""),
email: String(formData.get("email") ?? ""),
password: String(formData.get("password") ?? ""),
}),
});
const result = (await response.json()) as ApiResult<{ account: unknown }>;
setIsPending(false);
if (!result.success) {
setMessage(result.reason);
return;
}
setMessage(result.reason);
event.currentTarget.reset();
router.refresh();
}
async function reviewJoinRequest(requestId: string, decision: "approved" | "rejected", roleId: string): Promise<void> {
setMessage("");
setIsPending(true);
const response = await fetch(`/api/settings/join-requests/${requestId}`, {
method: "PATCH",
headers: { "content-type": "application/json" },
body: JSON.stringify({ decision, roleId }),
});
const result = (await response.json()) as ApiResult<{ joinRequest: unknown }>;
setIsPending(false);
if (!result.success) {
setMessage(result.reason);
return;
}
setMessage(result.reason);
router.refresh();
}
return (
<section className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
<Card>
<CardHeader>
<CardTitle></CardTitle>
<CardDescription></CardDescription>
</CardHeader>
<CardContent>
<form className="grid gap-3" onSubmit={handleCreateAccount}>
<label className="grid gap-2 text-sm">
<span className="font-medium"></span>
<select
className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
name="organizationId"
onChange={(event) => setSelectedOrganizationId(event.target.value)}
value={selectedOrganizationId}
>
{organizations.map((organization) => (
<option key={organization.id} value={organization.id}>
{organization.name}
</option>
))}
</select>
</label>
<label className="grid gap-2 text-sm">
<span className="font-medium"></span>
<select
className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
name="roleId"
required
>
{organizationRoles.map((role) => (
<option key={role.id} value={role.id}>
{role.label}
</option>
))}
</select>
</label>
<label className="grid gap-2 text-sm">
<span className="font-medium"></span>
<Input name="name" required />
</label>
<label className="grid gap-2 text-sm">
<span className="font-medium"></span>
<Input name="email" required type="email" />
</label>
<label className="grid gap-2 text-sm">
<span className="font-medium"></span>
<Input minLength={6} name="password" required type="password" />
</label>
<Button disabled={isPending || organizationRoles.length === 0} type="submit">
<Plus className="size-4" aria-hidden="true" />
</Button>
</form>
{message ? (
<p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
{message}
</p>
) : null}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle></CardTitle>
<CardDescription></CardDescription>
</CardHeader>
<CardContent className="space-y-3">
{pendingJoinRequests.map((request) => {
const requestRoles = getOrganizationRoles(roles, request.organizationId);
const defaultRoleId = requestRoles.find((role) => role.key === "caregiver")?.id ?? requestRoles[0]?.id ?? "";
return (
<div key={request.id} className="rounded-md border p-3">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div>
<p className="font-medium">{request.accountName}</p>
<p className="text-xs text-muted-foreground">{request.accountEmail}</p>
<p className="mt-2 text-sm text-muted-foreground">{request.organizationName}</p>
</div>
<Badge variant="warning"></Badge>
</div>
<div className="mt-3 grid gap-2 sm:grid-cols-[1fr_auto_auto]">
<select
className="h-10 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
defaultValue={defaultRoleId}
id={`role-${request.id}`}
>
{requestRoles.map((role) => (
<option key={role.id} value={role.id}>
{role.label}
</option>
))}
</select>
<Button
disabled={isPending || !defaultRoleId}
onClick={() => {
const element = document.getElementById(`role-${request.id}`);
const roleId = element instanceof HTMLSelectElement ? element.value : defaultRoleId;
void reviewJoinRequest(request.id, "approved", roleId);
}}
size="sm"
type="button"
>
<Check className="size-4" aria-hidden="true" />
</Button>
<Button
disabled={isPending}
onClick={() => void reviewJoinRequest(request.id, "rejected", "")}
size="sm"
type="button"
variant="outline"
>
<X className="size-4" aria-hidden="true" />
</Button>
</div>
</div>
);
})}
{pendingJoinRequests.length === 0 ? <p className="text-sm text-muted-foreground"></p> : null}
</CardContent>
</Card>
</section>
);
}