@fonderie/vue-admin-screens 0.3.0 → 0.5.0

package/README.md

@@ -14,10 +14,10 @@ Status: **experimental** (0.x).
 | Money | Catalog · Subscriber | what am I selling (configured vs stored) · what is this subscriber on, their wallet, ledger, a manual grant (`billingClient`) |
 | Settings | Config & secrets | the `@fonderie/config` admin screens, as a sub-page |
 | Messaging | Templates | the `@fonderie/courier` admin screens, as a sub-page |
-| Activity | Admin log · Access | who did what · who can be here |
+| Activity | Audit · Admin log · Access | what happened, every workspace (`auditClient`) · who did what through here · who can be here, and issue or revoke scoped tokens |
 
 ```ts
-import { AdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
+import { AdminClient, AuditAdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
 import { AdminShell } from '@fonderie/vue-admin-screens';
 
 const base = { baseUrl: 'https://api.example.com', adminToken, actor: 'louis' };
@@ -27,16 +27,24 @@ const configClient = new ConfigAdminClient({ ...base, prefix: '/_admin' });
 const courierClient = new CourierAdminClient({ ...base, prefix: '/_admin' });
 const authClient = new AuthAdminClient(base); // @fonderie/auth ≥ 7.8
 const billingClient = new BillingAdminClient(base); // @fonderie/billing ≥ 9.10
+const auditClient = new AuditAdminClient(base); // @fonderie/audit ≥ 5.2
 ```
 
 ```ts
-h(AdminShell, { client, configClient, courierClient, authClient, billingClient })
+h(AdminShell, { client, configClient, courierClient, authClient, billingClient, auditClient })
 ```
 
 Pass `page` and listen to `navigate` to own the URL (one route per page);
 omit `page` and the shell keeps it itself. Settings and Messaging appear only
 when their client is given.
 
+**Give the shell a `read` token, not the root one.** With `@fonderie/admin`
+≥ 0.6 the configured `adminToken` is the root — every scope, including the
+plaintext secret reveal, and the only credential that can mint or revoke.
+Issue a scoped one for the dashboard (`fonderie admin token issue dashboard
+--scopes read`, or the Access page itself) and hand the shell that. The
+Access page then shows issuing as unavailable, which is the point.
+
 Nothing here stores the token: the app constructs the clients and decides
 where the token lives. Every request through the shell lands in the admin
 log, including the ones the token refuses.

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   AdminLogScreen: () => AdminLogScreen,
   AdminShell: () => AdminShell,
   AttentionScreen: () => AttentionScreen,
+  AuditScreen: () => AuditScreen,
   CatalogScreen: () => CatalogScreen,
   ConfigScreen: () => ConfigScreen,
   DoctorScreen: () => DoctorScreen,
@@ -37,7 +38,7 @@ module.exports = __toCommonJS(index_exports);
 // src/screens/AdminShell.ts
 var import_vue_config_admin_screens = require("@fonderie/vue-config-admin-screens");
 var import_vue_courier_admin_screens = require("@fonderie/vue-courier-admin-screens");
-var import_vue12 = require("vue");
+var import_vue13 = require("vue");
 
 // src/styles.ts
 var styles = {
@@ -418,17 +419,28 @@ var RoutesScreen = (0, import_vue7.defineComponent)({
 // src/screens/TokensScreen.ts
 var import_vue_admin7 = require("@fonderie/vue-admin");
 var import_vue8 = require("vue");
+var ALL = ["read", "write", "secrets"];
 var TokensScreen = (0, import_vue8.defineComponent)({
   name: "FonderieTokensScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
-    const { report, isLoading, error } = (0, import_vue_admin7.useAdminTokens)(props.client);
-    return () => page("Access", { isLoading, error }, () => {
+    const { report, isLoading, error, issue, revoke } = (0, import_vue_admin7.useAdminTokens)(props.client);
+    const name = (0, import_vue8.ref)("");
+    const scopes = (0, import_vue8.ref)(["read"]);
+    const days = (0, import_vue8.ref)("");
+    const minted = (0, import_vue8.ref)(null);
+    const toggle = (s) => scopes.value = scopes.value.includes(s) ? scopes.value.filter((x) => x !== s) : [...scopes.value, s];
+    return () => {
       const r = report.value;
-      if (!r) return null;
-      return [
-        (0, import_vue8.h)("h2", { style: styles.subtitle }, "Admin token"),
-        (0, import_vue8.h)("p", [
+      return (0, import_vue8.h)("div", { style: styles.container }, [
+        (0, import_vue8.h)("h1", { style: styles.title }, "Access"),
+        error.value ? (0, import_vue8.h)(
+          "p",
+          { style: styles.error, role: "alert" },
+          error.value.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.value.explanation
+        ) : null,
+        (0, import_vue8.h)("h2", { style: styles.subtitle }, "Root token"),
+        r ? (0, import_vue8.h)("p", [
           (0, import_vue8.h)(
             "span",
             { style: r.admin.ok ? styles.ok : styles.bad },
@@ -437,16 +449,124 @@ var TokensScreen = (0, import_vue8.defineComponent)({
           ...r.admin.problems.map(
             (p) => (0, import_vue8.h)("div", { key: p.message, style: styles.bad }, p.message)
           )
-        ]),
+        ]) : null,
+        (0, import_vue8.h)("h2", { style: styles.subtitle }, "Issued tokens"),
+        r?.issued === null ? (0, import_vue8.h)(
+          "p",
+          { style: styles.muted },
+          "Issuing is off \u2014 give AdminModule a store and run its migrations."
+        ) : [
+          minted.value ? (0, import_vue8.h)("p", { style: styles.ok }, [
+            "Copy this now \u2014 it is never shown again. ",
+            (0, import_vue8.h)("span", { style: styles.mono }, minted.value.token),
+            ` (${minted.value.name})`
+          ]) : null,
+          (0, import_vue8.h)(
+            "form",
+            {
+              style: styles.toolbar,
+              onSubmit: (e) => {
+                e.preventDefault();
+                const d = Number(days.value);
+                void issue({
+                  name: name.value.trim(),
+                  scopes: scopes.value,
+                  ...days.value && Number.isInteger(d) && d > 0 ? { expiresInDays: d } : {}
+                }).then((t) => {
+                  minted.value = { name: t.name, token: t.token };
+                  name.value = "";
+                  days.value = "";
+                }).catch(() => {
+                });
+              }
+            },
+            [
+              (0, import_vue8.h)("input", {
+                value: name.value,
+                onInput: (e) => name.value = e.target.value,
+                placeholder: "name",
+                style: { ...styles.button, cursor: "text" },
+                "aria-label": "Name"
+              }),
+              ...ALL.map(
+                (s) => (0, import_vue8.h)("label", { key: s, style: { ...styles.badge, cursor: "pointer" } }, [
+                  (0, import_vue8.h)("input", {
+                    type: "checkbox",
+                    checked: scopes.value.includes(s),
+                    onChange: () => toggle(s)
+                  }),
+                  ` ${s}`
+                ])
+              ),
+              (0, import_vue8.h)("input", {
+                value: days.value,
+                onInput: (e) => days.value = e.target.value,
+                placeholder: "days (optional)",
+                style: { ...styles.button, cursor: "text", width: "140px" },
+                "aria-label": "Days"
+              }),
+              (0, import_vue8.h)(
+                "button",
+                {
+                  type: "submit",
+                  style: styles.button,
+                  disabled: !name.value.trim() || scopes.value.length === 0 || isLoading.value
+                },
+                "Issue"
+              )
+            ]
+          ),
+          r?.issued && r.issued.length > 0 ? table(
+            ["Name", "Scopes", "Created", "Expires", "Last used", ""],
+            r.issued.map(
+              (t) => (0, import_vue8.h)("tr", { key: t.id }, [
+                td([
+                  t.name,
+                  t.revokedAt ? (0, import_vue8.h)("span", { style: styles.badge }, " revoked") : ""
+                ]),
+                td(t.scopes.join(", "), styles.mono),
+                td(
+                  `${new Date(t.createdAt).toLocaleDateString()} \xB7 ${t.createdBy}`,
+                  styles.muted
+                ),
+                td(
+                  t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : "never",
+                  styles.muted
+                ),
+                td(
+                  t.lastUsedAt ? new Date(t.lastUsedAt).toLocaleString() : "never",
+                  styles.muted
+                ),
+                td(
+                  t.revokedAt ? "" : (0, import_vue8.h)(
+                    "button",
+                    {
+                      type: "button",
+                      style: styles.button,
+                      onClick: () => {
+                        if (window.confirm(
+                          `Revoke "${t.name}"? Anything using it stops working immediately.`
+                        ))
+                          void revoke(t.id).catch(() => {
+                          });
+                      }
+                    },
+                    "Revoke"
+                  )
+                )
+              ])
+            )
+          ) : (0, import_vue8.h)("p", { style: styles.muted }, "None issued.")
+        ],
         (0, import_vue8.h)("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
-        r.legacy.length === 0 ? (0, import_vue8.h)(
+        r && r.legacy.length === 0 ? (0, import_vue8.h)(
           "p",
           { style: styles.muted },
           "None \u2014 every brick's admin surface goes through this token."
         ) : (0, import_vue8.h)(
           "ul",
           { style: styles.list },
-          r.legacy.map(
+          (r?.legacy ?? []).map(
             (l) => (0, import_vue8.h)("li", { key: l.module, style: styles.row }, [
               (0, import_vue8.h)("span", { style: styles.mono }, l.module),
               " ",
@@ -458,8 +578,8 @@ var TokensScreen = (0, import_vue8.defineComponent)({
             ])
           )
         )
-      ];
-    });
+      ]);
+    };
   }
 });
 
@@ -824,6 +944,85 @@ var SubscriberScreen = (0, import_vue11.defineComponent)({
   }
 });
 
+// src/screens/AuditScreen.ts
+var import_vue_admin11 = require("@fonderie/vue-admin");
+var import_vue12 = require("vue");
+var AuditScreen = (0, import_vue12.defineComponent)({
+  name: "FonderieAuditScreen",
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
+  setup(props) {
+    const draft = (0, import_vue12.ref)({ workspaceId: "", type: "", actorId: "" });
+    const query = (0, import_vue12.ref)({ limit: props.pageSize });
+    const { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_vue_admin11.useAdminAudit)(
+      props.client,
+      query
+    );
+    const field = (key, placeholder) => (0, import_vue12.h)("input", {
+      value: draft.value[key],
+      onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
+      placeholder,
+      style: { ...styles.button, cursor: "text" },
+      "aria-label": placeholder
+    });
+    return () => (0, import_vue12.h)("div", { style: styles.container }, [
+      (0, import_vue12.h)("h1", { style: styles.title }, "Audit"),
+      (0, import_vue12.h)(
+        "form",
+        {
+          style: styles.toolbar,
+          onSubmit: (e) => {
+            e.preventDefault();
+            const d = draft.value;
+            query.value = {
+              limit: props.pageSize,
+              ...d.workspaceId.trim() ? { workspaceId: d.workspaceId.trim() } : {},
+              ...d.type.trim() ? { type: d.type.trim() } : {},
+              ...d.actorId.trim() ? { actorId: d.actorId.trim() } : {}
+            };
+          }
+        },
+        [
+          field("workspaceId", "workspace id (all if empty)"),
+          field("type", "event type"),
+          field("actorId", "actor id"),
+          (0, import_vue12.h)(
+            "button",
+            { type: "submit", style: styles.button, disabled: isLoading.value },
+            "Filter"
+          ),
+          refreshButton("Refresh", isLoading.value, () => void refresh())
+        ]
+      ),
+      error.value ? (0, import_vue12.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      events.value.length === 0 && !isLoading.value ? (0, import_vue12.h)("p", { style: styles.muted }, "Nothing recorded for this filter.") : table(
+        ["When", "Type", "Workspace", "Actor", "Request"],
+        events.value.map(
+          (e) => (0, import_vue12.h)("tr", { key: e.id }, [
+            td(new Date(e.createdAt).toLocaleString(), styles.muted),
+            td(e.type, styles.mono),
+            td(String(e.payload["workspaceId"] ?? "\u2014"), styles.mono),
+            td(e.actorId ?? "\u2014", styles.mono),
+            td(e.requestId ?? "", styles.muted)
+          ])
+        )
+      ),
+      isLoading.value ? (0, import_vue12.h)("p", { style: styles.status }, "Loading\u2026") : null,
+      hasMore.value && !isLoading.value ? (0, import_vue12.h)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: "8px" },
+          onClick: () => void loadMore()
+        },
+        "Load more"
+      ) : null
+    ]);
+  }
+});
+
 // src/screens/AdminShell.ts
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
@@ -849,12 +1048,13 @@ var NAV = [
   {
     group: "Activity",
     items: [
+      { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
       { page: "tokens", label: "Access" }
     ]
   }
 ];
-var AdminShell = (0, import_vue12.defineComponent)({
+var AdminShell = (0, import_vue13.defineComponent)({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -866,6 +1066,8 @@ var AdminShell = (0, import_vue12.defineComponent)({
     authClient: { type: Object, default: void 0 },
     // Given ⇒ the Money pages (catalog, subscriber) appear; needs @fonderie/billing ≥ 9.10.
     billingClient: { type: Object, default: void 0 },
+    // Given ⇒ the Audit page appears; needs @fonderie/audit ≥ 5.2.
+    auditClient: { type: Object, default: void 0 },
     environment: { type: String, default: void 0 },
     // Controlled navigation: pass `page` and listen to `navigate` to own the
     // URL. Omit `page` and the shell keeps it itself.
@@ -873,15 +1075,15 @@ var AdminShell = (0, import_vue12.defineComponent)({
   },
   emits: { navigate: (_page) => true },
   setup(props, { emit }) {
-    const own = (0, import_vue12.ref)("attention");
-    const current = (0, import_vue12.computed)(() => props.page ?? own.value);
-    const editing = (0, import_vue12.ref)(null);
+    const own = (0, import_vue13.ref)("attention");
+    const current = (0, import_vue13.computed)(() => props.page ?? own.value);
+    const editing = (0, import_vue13.ref)(null);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
     };
-    const back = () => (0, import_vue12.h)(
+    const back = () => (0, import_vue13.h)(
       "button",
       { type: "button", style: styles.button, onClick: () => editing.value = null },
       "\u2190 Back"
@@ -890,37 +1092,43 @@ var AdminShell = (0, import_vue12.defineComponent)({
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return (0, import_vue12.h)(AttentionScreen, { client: c });
+          return (0, import_vue13.h)(AttentionScreen, { client: c });
         case "modules":
-          return (0, import_vue12.h)(ModulesScreen, { client: c });
+          return (0, import_vue13.h)(ModulesScreen, { client: c });
         case "doctor":
-          return (0, import_vue12.h)(DoctorScreen, { client: c });
+          return (0, import_vue13.h)(DoctorScreen, { client: c });
         case "config":
-          return (0, import_vue12.h)(ConfigScreen, { client: c });
+          return (0, import_vue13.h)(ConfigScreen, { client: c });
         case "routes":
-          return (0, import_vue12.h)(RoutesScreen, { client: c });
+          return (0, import_vue13.h)(RoutesScreen, { client: c });
         case "tokens":
-          return (0, import_vue12.h)(TokensScreen, { client: c });
+          return (0, import_vue13.h)(TokensScreen, { client: c });
         case "log":
-          return (0, import_vue12.h)(AdminLogScreen, { client: c });
+          return (0, import_vue13.h)(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? (0, import_vue12.h)(CatalogScreen, { client: props.billingClient }) : (0, import_vue12.h)(
+          return props.billingClient ? (0, import_vue13.h)(CatalogScreen, { client: props.billingClient }) : (0, import_vue13.h)(
             "p",
             { style: styles.status },
             "Pass a BillingAdminClient to see the catalog here."
           );
         case "subscriber":
-          return props.billingClient ? (0, import_vue12.h)(SubscriberScreen, { client: props.billingClient }) : (0, import_vue12.h)(
+          return props.billingClient ? (0, import_vue13.h)(SubscriberScreen, { client: props.billingClient }) : (0, import_vue13.h)(
             "p",
             { style: styles.status },
             "Pass a BillingAdminClient to look up subscribers here."
           );
+        case "audit":
+          return props.auditClient ? (0, import_vue13.h)(AuditScreen, { client: props.auditClient }) : (0, import_vue13.h)(
+            "p",
+            { style: styles.status },
+            "Pass an AuditAdminClient to see the audit trail here."
+          );
         case "users":
-          return props.authClient ? (0, import_vue12.h)(UsersScreen, { client: props.authClient }) : (0, import_vue12.h)("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? (0, import_vue13.h)(UsersScreen, { client: props.authClient }) : (0, import_vue13.h)("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
           if (!cc)
-            return (0, import_vue12.h)(
+            return (0, import_vue13.h)(
               "p",
               { style: styles.status },
               "Pass a ConfigAdminClient to manage config and secrets here."
@@ -929,7 +1137,7 @@ var AdminShell = (0, import_vue12.defineComponent)({
           if (e && e.kind !== "template")
             return [
               back(),
-              (0, import_vue12.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
+              (0, import_vue13.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -937,7 +1145,7 @@ var AdminShell = (0, import_vue12.defineComponent)({
                 onSaved: () => editing.value = null
               })
             ];
-          return (0, import_vue12.h)(import_vue_config_admin_screens.ConfigListScreen, {
+          return (0, import_vue13.h)(import_vue_config_admin_screens.ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -947,7 +1155,7 @@ var AdminShell = (0, import_vue12.defineComponent)({
         case "templates": {
           const kc = props.courierClient;
           if (!kc)
-            return (0, import_vue12.h)(
+            return (0, import_vue13.h)(
               "p",
               { style: styles.status },
               "Pass a CourierAdminClient to manage templates here."
@@ -956,32 +1164,32 @@ var AdminShell = (0, import_vue12.defineComponent)({
           if (e?.kind === "template")
             return [
               back(),
-              (0, import_vue12.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
+              (0, import_vue13.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return (0, import_vue12.h)(import_vue_courier_admin_screens.TemplateListScreen, {
+          return (0, import_vue13.h)(import_vue_courier_admin_screens.TemplateListScreen, {
             client: kc,
             "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
           });
         }
       }
     };
-    return () => (0, import_vue12.h)("div", { style: styles.shell }, [
-      (0, import_vue12.h)(
+    return () => (0, import_vue13.h)("div", { style: styles.shell }, [
+      (0, import_vue13.h)(
         "nav",
         { style: styles.nav, "aria-label": "Admin" },
         NAV.map((g) => {
           const items = g.items.filter(
-            (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : props.billingClient)
+            (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient)
           );
           if (items.length === 0) return null;
-          return (0, import_vue12.h)("div", { key: g.group }, [
-            (0, import_vue12.h)("div", { style: styles.navGroup }, g.group),
+          return (0, import_vue13.h)("div", { key: g.group }, [
+            (0, import_vue13.h)("div", { style: styles.navGroup }, g.group),
             ...items.map(
-              (i) => (0, import_vue12.h)(
+              (i) => (0, import_vue13.h)(
                 "button",
                 {
                   key: i.page,
@@ -999,7 +1207,7 @@ var AdminShell = (0, import_vue12.defineComponent)({
           ]);
         })
       ),
-      (0, import_vue12.h)("main", { style: styles.main }, body())
+      (0, import_vue13.h)("main", { style: styles.main }, body())
     ]);
   }
 });
@@ -1008,6 +1216,7 @@ var AdminShell = (0, import_vue12.defineComponent)({
   AdminLogScreen,
   AdminShell,
   AttentionScreen,
+  AuditScreen,
   CatalogScreen,
   ConfigScreen,
   DoctorScreen,