@aiquants/auth-react-router 0.4.1 → 0.5.0

package/src/admin/server.ts

@@ -0,0 +1,345 @@
+import type { AuthAllowlistEntry, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router"
+import { type PartialUserAdminLabels, resolveUserAdminLabels, type UserAdminLabels } from "./labels"
+
+/**
+ * Server store interface for managing users, groups, memberships, and allowlists.
+ * ユーザー・グループ・所属・アロワリストを管理するサーバー層ストアのインターフェース。
+ */
+export type UserAdminStore = {
+    listUsers: () => Promise<AuthUser[]>
+    createUser: (data: { displayName: string; email: string }) => Promise<AuthUser>
+    updateUser: (id: number, data: { displayName: string; email: string }) => Promise<AuthUser>
+    toggleUserActive: (id: number, isActive: boolean) => Promise<AuthUser>
+
+    listGroups: () => Promise<AuthGroup[]>
+    createGroup: (data: { groupKey: string; name: string; description?: string }) => Promise<AuthGroup>
+    updateGroup: (id: number, data: { name: string; description?: string }) => Promise<AuthGroup>
+    deleteGroup: (id: number) => Promise<void>
+
+    listGroupMembers: () => Promise<AuthGroupMember[]>
+    addGroupMember: (groupId: number, userId: number) => Promise<AuthGroupMember>
+    removeGroupMember: (groupId: number, userId: number) => Promise<void>
+
+    listAllowlist: () => Promise<AuthAllowlistEntry[]>
+    addAllowlistEntry: (data: { pattern: string; type: "email" | "domain"; description?: string }) => Promise<AuthAllowlistEntry>
+    removeAllowlistEntry: (id: number) => Promise<void>
+}
+
+/**
+ * Creates an in-memory UserAdminStore initialized with optional seed data.
+ * シードデータで初期化されるメモリ上の UserAdminStore を作成する。
+ */
+export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; groups?: AuthGroup[]; groupMembers?: AuthGroupMember[]; allowlist?: AuthAllowlistEntry[] }): UserAdminStore {
+    const users: AuthUser[] = initial?.users ?? [
+        { id: 1, email: "admin@example.com", displayName: "システム管理者", isActive: true },
+        { id: 2, email: "user1@example.com", displayName: "開発 太郎", isActive: true },
+        { id: 3, email: "user2@example.com", displayName: "営業 花子", isActive: true },
+    ]
+    let groups: AuthGroup[] = initial?.groups ?? [
+        { id: 1, groupKey: "dev-team", name: "開発チーム", description: "システム開発担当グループ", isActive: true },
+        { id: 2, groupKey: "sales-dept", name: "営業部", description: "営業ソリューション担当", isActive: true },
+    ]
+    let groupMembers: AuthGroupMember[] = initial?.groupMembers ?? [
+        { id: 1, groupId: 1, userId: 2 },
+        { id: 2, groupId: 2, userId: 3 },
+    ]
+    let allowlist: AuthAllowlistEntry[] = initial?.allowlist ?? [
+        { id: 1, pattern: "admin@example.com", type: "email", description: "初期管理者" },
+        { id: 2, pattern: "@example.com", type: "domain", description: "社内ドメイン" },
+    ]
+
+    return {
+        async listUsers() {
+            return [...users]
+        },
+        async createUser(data) {
+            const newUser: AuthUser = {
+                id: Math.max(...users.map((u) => u.id), 0) + 1,
+                email: data.email,
+                displayName: data.displayName,
+                isActive: true,
+            }
+            users.push(newUser)
+            return newUser
+        },
+        async updateUser(id, data) {
+            const idx = users.findIndex((u) => u.id === id)
+            if (idx === -1) throw new Error(`User not found: ${id}`)
+            users[idx] = { ...users[idx], displayName: data.displayName, email: data.email }
+            return users[idx]
+        },
+        async toggleUserActive(id, isActive) {
+            const idx = users.findIndex((u) => u.id === id)
+            if (idx === -1) throw new Error(`User not found: ${id}`)
+            users[idx] = { ...users[idx], isActive }
+            return users[idx]
+        },
+
+        async listGroups() {
+            return [...groups]
+        },
+        async createGroup(data) {
+            const newGroup: AuthGroup = {
+                id: Math.max(...groups.map((g) => g.id), 0) + 1,
+                groupKey: data.groupKey,
+                name: data.name,
+                description: data.description,
+                isActive: true,
+            }
+            groups.push(newGroup)
+            return newGroup
+        },
+        async updateGroup(id, data) {
+            const idx = groups.findIndex((g) => g.id === id)
+            if (idx === -1) throw new Error(`Group not found: ${id}`)
+            groups[idx] = { ...groups[idx], name: data.name, description: data.description }
+            return groups[idx]
+        },
+        async deleteGroup(id) {
+            groups = groups.filter((g) => g.id !== id)
+            groupMembers = groupMembers.filter((m) => m.groupId !== id)
+        },
+
+        async listGroupMembers() {
+            return [...groupMembers]
+        },
+        async addGroupMember(groupId, userId) {
+            const existing = groupMembers.find((m) => m.groupId === groupId && m.userId === userId)
+            if (existing) return existing
+            const newMember: AuthGroupMember = {
+                id: Math.max(...groupMembers.map((m) => m.id), 0) + 1,
+                groupId,
+                userId,
+            }
+            groupMembers.push(newMember)
+            return newMember
+        },
+        async removeGroupMember(groupId, userId) {
+            groupMembers = groupMembers.filter((m) => !(m.groupId === groupId && m.userId === userId))
+        },
+
+        async listAllowlist() {
+            return [...allowlist]
+        },
+        async addAllowlistEntry(data) {
+            const newEntry: AuthAllowlistEntry = {
+                id: Math.max(...allowlist.map((a) => a.id), 0) + 1,
+                pattern: data.pattern,
+                type: data.type,
+                description: data.description,
+            }
+            allowlist.push(newEntry)
+            return newEntry
+        },
+        async removeAllowlistEntry(id) {
+            allowlist = allowlist.filter((a) => a.id !== id)
+        },
+    }
+}
+
+/**
+ * The CRUD verb an operation performs. Deliberately a plain string union so this package stays
+ * independent of any particular authorization library.
+ * 操作が行う CRUD 種別。特定の認可ライブラリに依存しないよう素の文字列 union で表現する。
+ */
+export type UserAdminAccess = "read" | "create" | "update" | "delete"
+
+/**
+ * Access guard the user-admin surface is mounted behind. Deny by throwing
+ * (a `Response`/`redirect` or an `Error`); returning normally means "allow".
+ *
+ * ユーザー管理面をマウントする際の必須アクセスガード。拒否は throw で表現する
+ * (`Response` / `redirect` / `Error`)。正常 return は「許可」を意味する。
+ *
+ * 操作ごとの CRUD 種別を受け取るため、呼び出し側は「削除だけ別権限」といった細分化ができる。
+ * `intent` は監査ログ用の補助情報(認可判断は `action` で行うこと)。
+ */
+export type UserAdminGuards = {
+    /**
+     * 許可は「正常 return」、拒否は「throw」で表す。返り値は判定に使わない (`void` 契約)。
+     * 述語のつもりで `false` を返す実装を書くと素通りするため、返り値型で明示的に禁じる。
+     */
+    requireAccess: (request: Request, context: { action: UserAdminAccess; intent: string }) => Promise<void> | void
+}
+
+/**
+ * Maps each action intent to the CRUD verb it actually performs.
+ * 各 intent が実際に行う操作の CRUD 種別への対応表。
+ *
+ * 割当の付与・解除は行の追加・削除であるため、認可管理 UI (`/authz`) の
+ * `assignUserRole` = create / `removeUserRole` = delete と同じ粒度に揃える。
+ */
+const INTENT_ACCESS = new Map<string, UserAdminAccess>([
+    ["createUser", "create"],
+    ["updateUser", "update"],
+    ["toggleUserActive", "update"],
+    ["createGroup", "create"],
+    ["updateGroup", "update"],
+    ["deleteGroup", "delete"],
+    ["addGroupMember", "create"],
+    ["removeGroupMember", "delete"],
+    ["addAllowlistEntry", "create"],
+    ["removeAllowlistEntry", "delete"],
+])
+
+export type UserAdminAppConfig = {
+    store: UserAdminStore
+    /** セクション単位の部分上書き。既定は英語 (`defaultUserAdminLabels`)。 */
+    labels?: PartialUserAdminLabels
+    /**
+     * Required — omitting a guard would expose the whole user directory and its write actions.
+     * 必須。省略を許すとユーザー名簿と全更新操作が無防備に露出するため、型で強制する。
+     */
+    guards: UserAdminGuards
+}
+
+/**
+ * Reads a required positive integer id from submitted form data.
+ * 送信フォームから必須の正整数 ID を読み取る処理。
+ *
+ * @throws when the field is missing, non-numeric, or not a positive integer.
+ *         欠落・非数値・正整数でない場合は throw。
+ */
+function requireId(formData: FormData, field: string): number {
+    const raw = formData.get(field)
+    const n = Number(raw)
+    // NaN / 小数 / 0 以下は不正な ID として弾く (Number(null) === 0 の取り違えも防ぐ)
+    if (raw === null || String(raw).trim() === "" || !Number.isInteger(n) || n <= 0) {
+        throw new Error(`Invalid or missing "${field}"`)
+    }
+    return n
+}
+
+/**
+ * Reads a required non-empty trimmed string from submitted form data.
+ * 送信フォームから必須の非空文字列 (トリム済み) を読み取る処理。
+ *
+ * @throws when the field is missing or blank. 欠落・空白のみの場合は throw。
+ */
+function requireText(formData: FormData, field: string): string {
+    const value = String(formData.get(field) ?? "").trim()
+    if (value === "") throw new Error(`Invalid or missing "${field}"`)
+    return value
+}
+
+/** Reads an optional trimmed string; blank becomes `undefined`. 任意文字列の読み取り (空は undefined)。 */
+function optionalText(formData: FormData, field: string): string | undefined {
+    const value = String(formData.get(field) ?? "").trim()
+    return value === "" ? undefined : value
+}
+
+/**
+ * Creates React Router loader & action handler for user administration.
+ * ユーザー管理用 React Router の loader および action ハンドラーを作成する。
+ *
+ * `config.guards` は必須。loader / action の双方が、処理を始める前にガードを通過させる。
+ */
+export function createUserAdminApp(config: UserAdminAppConfig) {
+    const labels = resolveUserAdminLabels(config.labels)
+
+    async function loader({ request }: LoaderFunctionArgs) {
+        // 読取ガード: 拒否は throw されるためここで処理が打ち切られる
+        await config.guards.requireAccess(request, { action: "read", intent: "loader" })
+        const url = new URL(request.url)
+        const pathSegments = url.pathname.split("/").filter(Boolean)
+        const segment = pathSegments[pathSegments.length - 1] ?? "users"
+
+        const [users, groups, groupMembers, allowlist] = await Promise.all([config.store.listUsers(), config.store.listGroups(), config.store.listGroupMembers(), config.store.listAllowlist()])
+
+        return {
+            segment: ["groups", "group_members", "allowlist"].includes(segment) ? segment : "users",
+            users,
+            groups,
+            groupMembers,
+            allowlist,
+            labels,
+        }
+    }
+
+    async function action({ request }: ActionFunctionArgs) {
+        // intent の判定に FormData が要るため、ここでだけ本文を先に読む。
+        // 未知 intent は「何も実行しない」ため、ガード前に読んでも権限判断には影響しない。
+        const formData = await request.formData()
+        const intent = String(formData.get("intent") ?? "")
+
+        // 未知 intent はストアへ到達しない (ガードも走らせず 400 相当を返す)。
+        // Map 参照のためプロトタイプ継承キー ("constructor" 等) を拾わない。
+        const access = INTENT_ACCESS.get(intent)
+        if (!access) return { ok: false, error: `Unknown intent: ${intent}` }
+
+        // 操作ごとの CRUD 種別でガードする (削除は delete 権限が要る)
+        await config.guards.requireAccess(request, { action: access, intent })
+
+        try {
+            return await dispatch(intent, formData)
+        } catch (error) {
+            // ガード拒否 (Response/redirect) はそのまま伝播させる。ストア由来の業務エラーだけ
+            // {ok:false,error} に写して UI へ届ける (ロックアウト理由・重複パターン等)。
+            if (error instanceof Response) throw error
+            return { ok: false, error: error instanceof Error ? error.message : String(error) }
+        }
+    }
+
+    /** intent ごとの実処理。認可・入力検証を通過した後にのみ呼ばれる。 */
+    async function dispatch(intent: string, formData: FormData) {
+        if (intent === "createUser") {
+            await config.store.createUser({ displayName: requireText(formData, "displayName"), email: requireText(formData, "email") })
+            return { ok: true }
+        }
+
+        if (intent === "updateUser") {
+            await config.store.updateUser(requireId(formData, "userId"), { displayName: requireText(formData, "displayName"), email: requireText(formData, "email") })
+            return { ok: true }
+        }
+
+        if (intent === "toggleUserActive") {
+            // 破壊側 (無効化) を既定にしない。明示的な "true"/"false" 以外は不正入力として弾く。
+            const rawActive = String(formData.get("isActive") ?? "")
+            if (rawActive !== "true" && rawActive !== "false") throw new Error('Invalid or missing "isActive"')
+            await config.store.toggleUserActive(requireId(formData, "userId"), rawActive === "true")
+            return { ok: true }
+        }
+
+        if (intent === "createGroup") {
+            await config.store.createGroup({ groupKey: requireText(formData, "groupKey"), name: requireText(formData, "name"), description: optionalText(formData, "description") })
+            return { ok: true }
+        }
+
+        if (intent === "updateGroup") {
+            await config.store.updateGroup(requireId(formData, "groupId"), { name: requireText(formData, "name"), description: optionalText(formData, "description") })
+            return { ok: true }
+        }
+
+        if (intent === "deleteGroup") {
+            await config.store.deleteGroup(requireId(formData, "groupId"))
+            return { ok: true }
+        }
+
+        if (intent === "addGroupMember") {
+            await config.store.addGroupMember(requireId(formData, "groupId"), requireId(formData, "userId"))
+            return { ok: true }
+        }
+
+        if (intent === "removeGroupMember") {
+            await config.store.removeGroupMember(requireId(formData, "groupId"), requireId(formData, "userId"))
+            return { ok: true }
+        }
+
+        if (intent === "addAllowlistEntry") {
+            const type: "email" | "domain" = formData.get("type") === "domain" ? "domain" : "email"
+            await config.store.addAllowlistEntry({ pattern: requireText(formData, "pattern"), type, description: optionalText(formData, "description") })
+            return { ok: true }
+        }
+
+        if (intent === "removeAllowlistEntry") {
+            await config.store.removeAllowlistEntry(requireId(formData, "entryId"))
+            return { ok: true }
+        }
+
+        // INTENT_ACCESS を通過した intent は上のいずれかで処理済み (到達しない安全網)
+        return { ok: false, error: `Unknown intent: ${intent}` }
+    }
+
+    return { loader, action }
+}

package/src/admin/ui.tsx

@@ -0,0 +1,71 @@
+import type React from "react"
+import { Link, useLoaderData } from "react-router"
+import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
+
+export type UserAdminShellProps = {
+    children?: React.ReactNode
+    renderHeader?: (props: { title: string; annotation: React.ReactNode }) => React.ReactNode
+}
+
+/**
+ * Shell layout for user administration pages with header annotation delegation.
+ * ヘッダー注釈委譲を備えたユーザー管理ページのシェルレイアウト。
+ */
+export function UserAdminShell({ children, renderHeader }: UserAdminShellProps) {
+    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels } | undefined
+    const segment = data?.segment ?? "users"
+    const labels = data?.labels ?? defaultUserAdminLabels
+
+    const tabs = [
+        { key: "users", label: labels.tabs.users, href: "/users" },
+        { key: "groups", label: labels.tabs.groups, href: "/users/groups" },
+        { key: "group_members", label: labels.tabs.groupMembers, href: "/users/group_members" },
+        { key: "allowlist", label: labels.tabs.allowlist, href: "/users/allowlist" },
+    ]
+
+    const annotation = (
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }} data-testid="user-admin-header-annotation">
+            <span style={{ fontSize: "0.75rem", backgroundColor: "#e0f2fe", color: "#0369a1", padding: "2px 8px", borderRadius: "12px", fontWeight: 600 }}>{labels.heading}</span>
+        </div>
+    )
+
+    return (
+        <div data-testid="user-admin-shell" style={{ width: "100%", minHeight: "100vh", backgroundColor: "#f8fafc", padding: "1.5rem", boxSizing: "border-box" }}>
+            {renderHeader ? (
+                renderHeader({ title: labels.title, annotation })
+            ) : (
+                <div style={{ marginBottom: "1.5rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    <h1 style={{ margin: 0, fontSize: "1.5rem", fontWeight: 700, color: "#0f172a" }}>{labels.title}</h1>
+                    {annotation}
+                </div>
+            )}
+
+            <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1.2rem", borderBottom: "2px solid #e2e8f0", paddingBottom: "0.5rem" }}>
+                {tabs.map((tab) => {
+                    const isActive = segment === tab.key
+                    return (
+                        <Link
+                            key={tab.key}
+                            to={tab.href}
+                            data-testid={`user-admin-tab-${tab.key}`}
+                            style={{
+                                padding: "0.5rem 1rem",
+                                borderRadius: "6px 6px 0 0",
+                                fontSize: "0.88rem",
+                                fontWeight: isActive ? 700 : 500,
+                                color: isActive ? "#0284c7" : "#64748b",
+                                backgroundColor: isActive ? "#ffffff" : "transparent",
+                                textDecoration: "none",
+                                borderBottom: isActive ? "3px solid #0284c7" : "3px solid transparent",
+                                transition: "all 0.15s ease",
+                            }}>
+                            {tab.label}
+                        </Link>
+                    )
+                })}
+            </div>
+
+            <main>{children}</main>
+        </div>
+    )
+}