@fonderie/vue-admin-screens 0.4.0 → 0.6.0

package/README.md

@@ -14,7 +14,7 @@ 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 | Audit · Admin log · Access | what happened, every workspace (`auditClient`) · who did what through here · 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, AuditAdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
@@ -38,6 +38,13 @@ 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

@@ -419,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 },
@@ -438,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),
               " ",
@@ -459,8 +578,8 @@ var TokensScreen = (0, import_vue8.defineComponent)({
             ])
           )
         )
-      ];
-    });
+      ]);
+    };
   }
 });
 
@@ -469,19 +588,30 @@ var import_vue_admin8 = require("@fonderie/vue-admin");
 var import_vue9 = require("vue");
 var UsersScreen = (0, import_vue9.defineComponent)({
   name: "FonderieUsersScreen",
-  props: { client: { type: Object, required: true } },
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
   setup(props) {
     const input = (0, import_vue9.ref)("");
     const email = (0, import_vue9.ref)("");
+    const selectedId = (0, import_vue9.ref)("");
+    const list = (0, import_vue_admin8.useAdminUsers)(props.client, { limit: props.pageSize });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_vue_admin8.useAdminUser)(
       props.client,
-      { email }
+      { email, id: selectedId }
     );
     const userId = (0, import_vue9.computed)(() => user.value?.id ?? null);
     const sessions = (0, import_vue_admin8.useAdminUserSessions)(props.client, userId);
     const history = (0, import_vue_admin8.useAdminLoginHistory)(props.client, userId, { limit: 20 });
+    const showList = (0, import_vue9.computed)(() => !email.value && !selectedId.value);
     const yesNo = (v) => (0, import_vue9.h)("span", { style: v ? styles.ok : styles.muted }, v ? "yes" : "no");
     const row = (k, v) => (0, import_vue9.h)("tr", [td(k), td(v)]);
+    const clear = () => {
+      email.value = "";
+      selectedId.value = "";
+      input.value = "";
+    };
     return () => {
       const u = user.value;
       return (0, import_vue9.h)("div", { style: styles.container }, [
@@ -492,6 +622,7 @@ var UsersScreen = (0, import_vue9.defineComponent)({
             style: styles.toolbar,
             onSubmit: (e) => {
               e.preventDefault();
+              selectedId.value = "";
               email.value = input.value.trim();
             }
           },
@@ -508,9 +639,48 @@ var UsersScreen = (0, import_vue9.defineComponent)({
               "button",
               { type: "submit", style: styles.button, disabled: isLoading.value },
               "Look up"
-            )
+            ),
+            showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : refreshButton("\u2190 All users", false, clear)
           ]
         ),
+        showList.value ? (0, import_vue9.h)("div", [
+          list.error.value ? (0, import_vue9.h)("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.users.value.length === 0 && !list.isLoading.value ? (0, import_vue9.h)("p", { style: styles.muted }, "No users yet.") : table(
+            ["Email", "Name", "Created", "Status"],
+            list.users.value.map(
+              (u2) => (0, import_vue9.h)("tr", { key: u2.id }, [
+                td(
+                  (0, import_vue9.h)(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.navItem, padding: 0 },
+                      onClick: () => selectedId.value = u2.id
+                    },
+                    u2.email
+                  )
+                ),
+                td(
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || (0, import_vue9.h)("span", { style: styles.muted }, "\u2014")
+                ),
+                td(new Date(u2.createdAt).toLocaleDateString()),
+                td(
+                  u2.suspended ? (0, import_vue9.h)("span", { style: styles.badge }, "suspended") : u2.deletedAt ? (0, import_vue9.h)("span", { style: styles.badge }, "deleted") : (0, import_vue9.h)("span", { style: styles.muted }, "active")
+                )
+              ])
+            )
+          ),
+          list.isLoading.value ? (0, import_vue9.h)("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? (0, import_vue9.h)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, marginTop: "8px" },
+              onClick: () => void list.loadMore()
+            },
+            "Load more"
+          ) : null
+        ]) : null,
         error.value ? (0, import_vue9.h)(
           "p",
           { style: styles.error, role: "alert" },
@@ -673,12 +843,22 @@ var import_vue_admin10 = require("@fonderie/vue-admin");
 var import_vue11 = require("vue");
 var SubscriberScreen = (0, import_vue11.defineComponent)({
   name: "FonderieSubscriberScreen",
-  props: { client: { type: Object, required: true } },
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
   setup(props) {
     const type = (0, import_vue11.ref)("user");
     const idInput = (0, import_vue11.ref)("");
     const subscriber = (0, import_vue11.ref)(null);
+    const list = (0, import_vue_admin10.useAdminSubscribers)(props.client, { limit: props.pageSize });
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin10.useAdminSubscriber)(props.client, subscriber, { limit: 20 });
+    const open = (t, id) => {
+      granted.value = null;
+      type.value = t;
+      idInput.value = id;
+      subscriber.value = { type: t, id };
+    };
     const amount = (0, import_vue11.ref)("");
     const note = (0, import_vue11.ref)("");
     const granted = (0, import_vue11.ref)(null);
@@ -723,9 +903,69 @@ var SubscriberScreen = (0, import_vue11.defineComponent)({
               "button",
               { type: "submit", style: styles.button, disabled: isLoading.value },
               "Look up"
+            ),
+            subscriber.value ? (0, import_vue11.h)(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                onClick: () => {
+                  subscriber.value = null;
+                  idInput.value = "";
+                  granted.value = null;
+                }
+              },
+              "\u2190 All subscribers"
+            ) : (0, import_vue11.h)(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: list.isLoading.value,
+                onClick: () => void list.refresh()
+              },
+              "Refresh"
             )
           ]
         ),
+        !subscriber.value ? (0, import_vue11.h)("div", [
+          list.error.value ? (0, import_vue11.h)("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.subscriptions.value.length === 0 && !list.isLoading.value ? (0, import_vue11.h)("p", { style: styles.muted }, "No subscribers yet.") : table(
+            ["Subscriber", "Plan", "Status", "Renews"],
+            list.subscriptions.value.map(
+              (sub) => (0, import_vue11.h)("tr", { key: sub.id }, [
+                td(
+                  (0, import_vue11.h)(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.navItem, padding: 0, ...styles.mono },
+                      onClick: () => open(sub.subscriberType, sub.subscriberId)
+                    },
+                    `${sub.subscriberType}/${sub.subscriberId}`
+                  )
+                ),
+                td(`${sub.plan} \xB7 ${sub.interval}`),
+                td(
+                  sub.cancelAtPeriodEnd ? [sub.status, " ", (0, import_vue11.h)("span", { style: styles.badge }, "cancels")] : sub.status
+                ),
+                td(
+                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : (0, import_vue11.h)("span", { style: styles.muted }, "\u2014")
+                )
+              ])
+            )
+          ),
+          list.isLoading.value ? (0, import_vue11.h)("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? (0, import_vue11.h)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, marginTop: "8px" },
+              onClick: () => void list.loadMore()
+            },
+            "Load more"
+          ) : null
+        ]) : null,
         error.value ? (0, import_vue11.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
         subscriber.value && !isLoading.value ? [
           (0, import_vue11.h)("h2", { style: styles.subtitle }, "Subscription"),