@fonderie/vue-admin-screens 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
-import { computed as computed2, defineComponent as defineComponent12, h as h13, ref as ref4 } from "vue";
+import { computed as computed2, defineComponent as defineComponent12, h as h13, ref as ref5 } from "vue";
 
 // src/styles.ts
 var styles = {
@@ -381,18 +381,29 @@ var RoutesScreen = defineComponent6({
 
 // src/screens/TokensScreen.ts
 import { useAdminTokens } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent7, h as h8 } from "vue";
+import { defineComponent as defineComponent7, h as h8, ref } from "vue";
+var ALL = ["read", "write", "secrets"];
 var TokensScreen = defineComponent7({
   name: "FonderieTokensScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
-    const { report, isLoading, error } = useAdminTokens(props.client);
-    return () => page("Access", { isLoading, error }, () => {
+    const { report, isLoading, error, issue, revoke } = useAdminTokens(props.client);
+    const name = ref("");
+    const scopes = ref(["read"]);
+    const days = ref("");
+    const minted = 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 [
-        h8("h2", { style: styles.subtitle }, "Admin token"),
-        h8("p", [
+      return h8("div", { style: styles.container }, [
+        h8("h1", { style: styles.title }, "Access"),
+        error.value ? h8(
+          "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,
+        h8("h2", { style: styles.subtitle }, "Root token"),
+        r ? h8("p", [
           h8(
             "span",
             { style: r.admin.ok ? styles.ok : styles.bad },
@@ -401,16 +412,124 @@ var TokensScreen = defineComponent7({
           ...r.admin.problems.map(
             (p) => h8("div", { key: p.message, style: styles.bad }, p.message)
           )
-        ]),
+        ]) : null,
+        h8("h2", { style: styles.subtitle }, "Issued tokens"),
+        r?.issued === null ? h8(
+          "p",
+          { style: styles.muted },
+          "Issuing is off \u2014 give AdminModule a store and run its migrations."
+        ) : [
+          minted.value ? h8("p", { style: styles.ok }, [
+            "Copy this now \u2014 it is never shown again. ",
+            h8("span", { style: styles.mono }, minted.value.token),
+            ` (${minted.value.name})`
+          ]) : null,
+          h8(
+            "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(() => {
+                });
+              }
+            },
+            [
+              h8("input", {
+                value: name.value,
+                onInput: (e) => name.value = e.target.value,
+                placeholder: "name",
+                style: { ...styles.button, cursor: "text" },
+                "aria-label": "Name"
+              }),
+              ...ALL.map(
+                (s) => h8("label", { key: s, style: { ...styles.badge, cursor: "pointer" } }, [
+                  h8("input", {
+                    type: "checkbox",
+                    checked: scopes.value.includes(s),
+                    onChange: () => toggle(s)
+                  }),
+                  ` ${s}`
+                ])
+              ),
+              h8("input", {
+                value: days.value,
+                onInput: (e) => days.value = e.target.value,
+                placeholder: "days (optional)",
+                style: { ...styles.button, cursor: "text", width: "140px" },
+                "aria-label": "Days"
+              }),
+              h8(
+                "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) => h8("tr", { key: t.id }, [
+                td([
+                  t.name,
+                  t.revokedAt ? h8("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 ? "" : h8(
+                    "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"
+                  )
+                )
+              ])
+            )
+          ) : h8("p", { style: styles.muted }, "None issued.")
+        ],
         h8("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
-        r.legacy.length === 0 ? h8(
+        r && r.legacy.length === 0 ? h8(
           "p",
           { style: styles.muted },
           "None \u2014 every brick's admin surface goes through this token."
         ) : h8(
           "ul",
           { style: styles.list },
-          r.legacy.map(
+          (r?.legacy ?? []).map(
             (l) => h8("li", { key: l.module, style: styles.row }, [
               h8("span", { style: styles.mono }, l.module),
               " ",
@@ -422,20 +541,20 @@ var TokensScreen = defineComponent7({
             ])
           )
         )
-      ];
-    });
+      ]);
+    };
   }
 });
 
 // src/screens/UsersScreen.ts
 import { useAdminLoginHistory, useAdminUser, useAdminUserSessions } from "@fonderie/vue-admin";
-import { computed, defineComponent as defineComponent8, h as h9, ref } from "vue";
+import { computed, defineComponent as defineComponent8, h as h9, ref as ref2 } from "vue";
 var UsersScreen = defineComponent8({
   name: "FonderieUsersScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
-    const input = ref("");
-    const email = ref("");
+    const input = ref2("");
+    const email = ref2("");
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
       { email }
@@ -633,18 +752,18 @@ var CatalogScreen = defineComponent9({
 
 // src/screens/SubscriberScreen.ts
 import { useAdminSubscriber } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent10, h as h11, ref as ref2 } from "vue";
+import { defineComponent as defineComponent10, h as h11, ref as ref3 } from "vue";
 var SubscriberScreen = defineComponent10({
   name: "FonderieSubscriberScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
-    const type = ref2("user");
-    const idInput = ref2("");
-    const subscriber = ref2(null);
+    const type = ref3("user");
+    const idInput = ref3("");
+    const subscriber = ref3(null);
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
-    const amount = ref2("");
-    const note = ref2("");
-    const granted = ref2(null);
+    const amount = ref3("");
+    const note = ref3("");
+    const granted = ref3(null);
     const input = (model, placeholder, extra = {}) => h11("input", {
       value: model.value,
       onInput: (e) => model.value = e.target.value,
@@ -790,7 +909,7 @@ var SubscriberScreen = defineComponent10({
 
 // src/screens/AuditScreen.ts
 import { useAdminAudit } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent11, h as h12, ref as ref3 } from "vue";
+import { defineComponent as defineComponent11, h as h12, ref as ref4 } from "vue";
 var AuditScreen = defineComponent11({
   name: "FonderieAuditScreen",
   props: {
@@ -798,8 +917,8 @@ var AuditScreen = defineComponent11({
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = ref3({ workspaceId: "", type: "", actorId: "" });
-    const query = ref3({ limit: props.pageSize });
+    const draft = ref4({ workspaceId: "", type: "", actorId: "" });
+    const query = ref4({ limit: props.pageSize });
     const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(
       props.client,
       query
@@ -919,9 +1038,9 @@ var AdminShell = defineComponent12({
   },
   emits: { navigate: (_page) => true },
   setup(props, { emit }) {
-    const own = ref4("attention");
+    const own = ref5("attention");
     const current = computed2(() => props.page ?? own.value);
-    const editing = ref4(null);
+    const editing = ref5(null);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);