zudoku 0.0.0-f417aae → 0.0.0-f41a0ead

package/lib/zudoku.plugin-api-keys.js

@@ -1,253 +1,768 @@
-import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as m, R as g } from "./SlotletProvider-CBqY8mp6.js";
-import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as f, a as d, I as j, S as v, b, c as w, d as k, e as K, f as x } from "./Input-CO-1DOZa.js";
-import { a as N, L as u, O as I } from "./index-CRo94sKK.js";
-import { u as h, a as S, b as A } from "./ZudokuContext-DEoP3GGJ.js";
-import { B as l, f as C } from "./index-CBr6BM_4.js";
-import { D as E } from "./DeveloperHint-CRiZjqd2.js";
-import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
-import { useState as p } from "react";
-import { a as T } from "./Markdown-DM4zv3MA.js";
-const F = ({ service: t }) => {
-  const s = h(), r = N(), n = f({
+import { j as e } from "./jsx-runtime-BzflLqGi.js";
+import { TrashIcon as me, CircleSlashIcon as z, CheckIcon as xe, XIcon as ye, PencilLineIcon as ge, RefreshCwIcon as je, KeyRoundIcon as ve } from "lucide-react";
+import { Z as M, i as E } from "./invariant-BJAl77rw.js";
+import * as F from "react";
+import { createContext as Q, useRef as A, useLayoutEffect as Ce, useEffect as ie, useId as H, useContext as V, useInsertionEffect as we, useMemo as L, useCallback as ke, Children as Ee, isValidElement as Ie, useState as I } from "react";
+import { D as be, c as Ke, d as ee, B as De, E as Pe } from "./index-CJGQ3vyv.js";
+import { b as re } from "./index-CjTisMeX.js";
+import { F as Ae, g as Se, j as Re, h as Ne, d as Oe, I as Te, a as qe, b as Me, k as Fe, c as $e } from "./Frame-DKlOmSkU.js";
+import { A as D, a as P, b as ae } from "./Mermaid-CGRoylZf.js";
+import { e as _, f as S, D as B, g as Z, a as G, b as J, c as Y, d as oe } from "./Dialog-hlvmmQ_c.js";
+import { Button as le } from "./ui/Button.js";
+import { a as U, g as ce, e as ze } from "./ZudokuContext-CDJYKqMY.js";
+import { u as q, I as Le } from "./Input-nskrp_mj.js";
+import { a as Qe } from "./index.esm-BYObtETB.js";
+import { u as He } from "./chunk-PVWAREVJ-ClM0m2aJ.js";
+import { A as Ve } from "./ActionButton-B0CXL1Lq.js";
+import { S as _e, a as Be, b as Ze, c as Ge, d as Je, e as te, f as Ye } from "./Secret-BDBqq4p3.js";
+import { Input as Ue } from "./ui/Input.js";
+import { c as W } from "./cn-5-Gd1Dss.js";
+import { B as k } from "./Button-GUVe7pmt.js";
+function We({ error: t }) {
+  const a = t instanceof Error ? t.message : "Something went wrong", s = process.env.NODE_ENV === "development", n = t instanceof M ? t.developerHint : void 0, r = t instanceof M ? t.title : "Something went wrong", i = t instanceof Error ? t.stack : void 0, o = t instanceof Error ? t.cause : void 0, d = o instanceof Error ? String(o.stack) : i;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(D, { variant: "destructive", children: [
+      /* @__PURE__ */ e.jsx(P, { children: r }),
+      /* @__PURE__ */ e.jsx(ae, { children: a })
+    ] }),
+    s && n && /* @__PURE__ */ e.jsx(be, { className: "mb-4", children: n }),
+    s && d && /* @__PURE__ */ e.jsx(
+      Ke,
+      {
+        className: "max-h-[400px] [&>pre]:p-4",
+        language: "js",
+        code: d
+      }
+    )
+  ] });
+}
+const Xe = ({
+  service: t,
+  onOpenChange: a
+}) => {
+  const s = U(), n = ce(), r = He(), i = Qe({
     defaultValues: {
       expiresOn: "30"
     }
-  }), o = d({
-    mutationFn: ({ description: a, expiresOn: i }) => {
+  }), o = re(), d = q({
+    mutationFn: ({ description: c, expiresOn: u }) => {
       if (!t.createKey)
-        throw new Error("deleteKey not implemented");
-      const y = i !== "never" ? L(Number(i)) : void 0;
-      return t.createKey(
-        { description: a, expiresOn: y },
-        s
-      );
+        throw new Error("createKey not implemented");
+      const p = u !== "never" ? et(Number(u)) : void 0;
+      return t.createKey({
+        apiKey: {
+          description: c || "Secret Key",
+          expiresOn: p
+        },
+        context: s,
+        auth: o
+      });
     },
-    onSuccess: () => r("/settings/api-keys/")
+    onSuccess: async () => {
+      await n.invalidateQueries({ queryKey: ["api-keys"] }), await r("/settings/api-keys/");
+    }
   });
-  return t.createKey ? /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "flex justify-between mb-4 border-b pb-1", children: /* @__PURE__ */ e.jsx("h1", { className: "font-medium text-2xl", children: "New API Key" }) }),
-    /* @__PURE__ */ e.jsx(
-      "form",
-      {
-        onSubmit: n.handleSubmit((a) => o.mutate(a)),
-        children: /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col", children: [
-          "Note",
-          /* @__PURE__ */ e.jsx(j, { ...n.register("description") }),
+  return t.createKey ? /* @__PURE__ */ e.jsxs(
+    "form",
+    {
+      onSubmit: i.handleSubmit(
+        (c) => d.mutate(
+          { ...c },
+          {
+            onSuccess: () => a(!1)
+          }
+        )
+      ),
+      children: [
+        d.error && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
+          /* @__PURE__ */ e.jsx(P, { children: "Error" }),
+          /* @__PURE__ */ e.jsx(ae, { children: d.error.message })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col text-sm font-medium", children: [
+          "Name",
+          /* @__PURE__ */ e.jsx(Ue, { ...i.register("description") }),
           "Expiration",
           /* @__PURE__ */ e.jsxs(
-            v,
+            _e,
             {
-              onValueChange: (a) => n.setValue("expiresOn", a),
-              defaultValue: n.getValues("expiresOn"),
+              onValueChange: (c) => i.setValue("expiresOn", c),
+              defaultValue: i.getValues("expiresOn"),
               children: [
-                /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsx(w, {}) }),
-                /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsxs(K, { children: [
-                  [7, 30, 60, 90].map((a) => /* @__PURE__ */ e.jsxs(x, { value: String(a), children: [
-                    a,
+                /* @__PURE__ */ e.jsx(Be, { children: /* @__PURE__ */ e.jsx(Ze, {}) }),
+                /* @__PURE__ */ e.jsx(Ge, { children: /* @__PURE__ */ e.jsxs(Je, { children: [
+                  [7, 30, 60, 90].map((c) => /* @__PURE__ */ e.jsxs(te, { value: String(c), children: [
+                    c,
                     " days"
-                  ] }, a)),
-                  /* @__PURE__ */ e.jsx(x, { value: "never", children: "Never" })
+                  ] }, c)),
+                  /* @__PURE__ */ e.jsx(te, { value: "never", children: "Never" })
                 ] }) })
               ]
             }
           ),
-          /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ e.jsx(l, { children: "Generate Key" }),
-            /* @__PURE__ */ e.jsx(l, { variant: "outline", asChild: !0, children: /* @__PURE__ */ e.jsx(u, { to: "/settings/api-keys/", children: "Cancel" }) })
+          /* @__PURE__ */ e.jsxs(_, { children: [
+            /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(le, { variant: "outline", children: "Cancel" }) }),
+            /* @__PURE__ */ e.jsx(Ve, { isPending: d.isPending, children: "Generate Key" })
           ] })
         ] })
-      }
-    )
-  ] }) : null;
-}, L = (t) => {
-  const s = /* @__PURE__ */ new Date();
-  return s.setDate(s.getDate() + t), s.toISOString();
-}, V = () => {
-  const t = C();
-  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(I, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
-    "Please login first to view this page",
-    /* @__PURE__ */ e.jsx(l, { onClick: () => t.login(), children: "Login" })
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(E, { className: "max-w-[600px]", children: [
-    "Authentication needs to be enabled for API keys to work. Enable it in your Zudoku configuration under ",
-    /* @__PURE__ */ e.jsx("code", { children: "authentication" }),
-    "."
-  ] }) });
-}, M = ({ service: t }) => {
-  const s = h(), r = S(), { data: n } = A({
-    queryFn: () => t.getKeys(s),
-    queryKey: ["api-keys"],
-    retry: !1
-  }), o = d({
-    mutationFn: (i) => {
-      if (!t.deleteKey)
+      ]
+    }
+  ) : null;
+}, et = (t) => {
+  const a = /* @__PURE__ */ new Date();
+  return a.setDate(a.getDate() + t), a.toISOString();
+}, de = ({
+  service: t,
+  isOpen: a,
+  onOpenChange: s,
+  trigger: n,
+  buttonVariant: r = "outline"
+}) => {
+  const i = /* @__PURE__ */ e.jsx(le, { variant: r, children: "Create API Key" });
+  return /* @__PURE__ */ e.jsxs(B, { open: a, onOpenChange: s, children: [
+    /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: n ?? i }),
+    /* @__PURE__ */ e.jsxs(G, { children: [
+      /* @__PURE__ */ e.jsx(J, { children: /* @__PURE__ */ e.jsx(Y, { children: "Create API Key" }) }),
+      /* @__PURE__ */ e.jsx(Xe, { service: t, onOpenChange: s })
+    ] })
+  ] });
+}, tt = Q({});
+function ue(t) {
+  const a = A(null);
+  return a.current === null && (a.current = t()), a.current;
+}
+const st = typeof window < "u", nt = st ? Ce : ie, fe = /* @__PURE__ */ Q(null);
+function it(t) {
+  return typeof t == "object" && t !== null;
+}
+function rt(t) {
+  return it(t) && "offsetHeight" in t;
+}
+const at = Q({
+  transformPagePoint: (t) => t,
+  isStatic: !1,
+  reducedMotion: "never"
+});
+function se(t, a) {
+  if (typeof t == "function")
+    return t(a);
+  t != null && (t.current = a);
+}
+function ot(...t) {
+  return (a) => {
+    let s = !1;
+    const n = t.map((r) => {
+      const i = se(r, a);
+      return !s && typeof i == "function" && (s = !0), i;
+    });
+    if (s)
+      return () => {
+        for (let r = 0; r < n.length; r++) {
+          const i = n[r];
+          typeof i == "function" ? i() : se(t[r], null);
+        }
+      };
+  };
+}
+function lt(...t) {
+  return F.useCallback(ot(...t), t);
+}
+class ct extends F.Component {
+  getSnapshotBeforeUpdate(a) {
+    const s = this.props.childRef.current;
+    if (s && a.isPresent && !this.props.isPresent) {
+      const n = s.offsetParent, r = rt(n) && n.offsetWidth || 0, i = this.props.sizeRef.current;
+      i.height = s.offsetHeight || 0, i.width = s.offsetWidth || 0, i.top = s.offsetTop, i.left = s.offsetLeft, i.right = r - i.width - i.left;
+    }
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+}
+function dt({ children: t, isPresent: a, anchorX: s, root: n }) {
+  const r = H(), i = A(null), o = A({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0
+  }), { nonce: d } = V(at), c = lt(i, t?.ref);
+  return we(() => {
+    const { width: u, height: p, top: f, left: m, right: g } = o.current;
+    if (a || !i.current || !u || !p)
+      return;
+    const j = s === "left" ? `left: ${m}` : `right: ${g}`;
+    i.current.dataset.motionPopId = r;
+    const l = document.createElement("style");
+    d && (l.nonce = d);
+    const x = n ?? document.head;
+    return x.appendChild(l), l.sheet && l.sheet.insertRule(`
+          [data-motion-pop-id="${r}"] {
+            position: absolute !important;
+            width: ${u}px !important;
+            height: ${p}px !important;
+            ${j}px !important;
+            top: ${f}px !important;
+          }
+        `), () => {
+      x.contains(l) && x.removeChild(l);
+    };
+  }, [a]), e.jsx(ct, { isPresent: a, childRef: i, sizeRef: o, children: F.cloneElement(t, { ref: c }) });
+}
+const ut = ({ children: t, initial: a, isPresent: s, onExitComplete: n, custom: r, presenceAffectsLayout: i, mode: o, anchorX: d, root: c }) => {
+  const u = ue(ft), p = H();
+  let f = !0, m = L(() => (f = !1, {
+    id: p,
+    initial: a,
+    isPresent: s,
+    custom: r,
+    onExitComplete: (g) => {
+      u.set(g, !0);
+      for (const j of u.values())
+        if (!j)
+          return;
+      n && n();
+    },
+    register: (g) => (u.set(g, !1), () => u.delete(g))
+  }), [s, u, n]);
+  return i && f && (m = { ...m }), L(() => {
+    u.forEach((g, j) => u.set(j, !1));
+  }, [s]), F.useEffect(() => {
+    !s && !u.size && n && n();
+  }, [s]), o === "popLayout" && (t = e.jsx(dt, { isPresent: s, anchorX: d, root: c, children: t })), e.jsx(fe.Provider, { value: m, children: t });
+};
+function ft() {
+  return /* @__PURE__ */ new Map();
+}
+function pt(t = !0) {
+  const a = V(fe);
+  if (a === null)
+    return [!0, null];
+  const { isPresent: s, onExitComplete: n, register: r } = a, i = H();
+  ie(() => {
+    if (t)
+      return r(i);
+  }, [t]);
+  const o = ke(() => t && n && n(i), [i, n, t]);
+  return !s && n ? [!1, o] : [!0];
+}
+const R = (t) => t.key || "";
+function ne(t) {
+  const a = [];
+  return Ee.forEach(t, (s) => {
+    Ie(s) && a.push(s);
+  }), a;
+}
+const ht = ({ children: t, custom: a, initial: s = !0, onExitComplete: n, presenceAffectsLayout: r = !0, mode: i = "sync", propagate: o = !1, anchorX: d = "left", root: c }) => {
+  const [u, p] = pt(o), f = L(() => ne(t), [t]), m = o && !u ? [] : f.map(R), g = A(!0), j = A(f), l = ue(() => /* @__PURE__ */ new Map()), [x, v] = I(f), [h, C] = I(f);
+  nt(() => {
+    g.current = !1, j.current = f;
+    for (let w = 0; w < h.length; w++) {
+      const y = R(h[w]);
+      m.includes(y) ? l.delete(y) : l.get(y) !== !0 && l.set(y, !1);
+    }
+  }, [h, m.length, m.join("-")]);
+  const K = [];
+  if (f !== x) {
+    let w = [...f];
+    for (let y = 0; y < h.length; y++) {
+      const b = h[y], $ = R(b);
+      m.includes($) || (w.splice(y, 0, b), K.push(b));
+    }
+    return i === "wait" && K.length && (w = K), C(ne(w)), v(f), null;
+  }
+  process.env.NODE_ENV !== "production" && i === "wait" && h.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: pe } = V(tt);
+  return e.jsx(e.Fragment, { children: h.map((w) => {
+    const y = R(w), b = o && !u ? !1 : f === h || m.includes(y), $ = () => {
+      if (l.has(y))
+        l.set(y, !0);
+      else
+        return;
+      let X = !0;
+      l.forEach((he) => {
+        he || (X = !1);
+      }), X && (pe?.(), C(j.current), o && p?.(), n && n());
+    };
+    return e.jsx(ut, { isPresent: b, initial: !g.current || s ? void 0 : !1, custom: a, presenceAffectsLayout: r, mode: i, root: c, onExitComplete: b ? void 0 : $, anchorX: d, children: w }, y);
+  }) });
+}, mt = ({
+  apiKey: t,
+  onDeleteKey: a,
+  className: s
+}) => {
+  const [n, r] = I(!1), { key: i, createdOn: o, expiresOn: d } = t, c = d && new Date(d) < /* @__PURE__ */ new Date(), u = d ? Math.ceil(
+    (new Date(d).getTime() - Date.now()) / (1e3 * 60 * 60 * 24)
+  ) : 1 / 0, p = u <= 7 && !c;
+  return /* @__PURE__ */ e.jsxs("div", { className: W("grid col-span-full grid-cols-subgrid p-6", s), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e.jsx(
+        Ye,
+        {
+          className: "max-w-fit w-full",
+          secret: i,
+          status: c ? "expired" : p ? "expiring" : "active",
+          revealed: n,
+          onReveal: r
+        }
+      ),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 mt-0.5 text-nowrap", children: [
+        o && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "Created ",
+          xt(o),
+          "."
+        ] }),
+        " ",
+        d && p && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expires in ",
+          u,
+          " ",
+          u === 1 ? "day" : "days",
+          "."
+        ] }),
+        d && c && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expired",
+          " ",
+          u === 0 ? "today." : `${u * -1} days ago.`
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: d && a && /* @__PURE__ */ e.jsxs(B, { children: [
+      /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsx(k, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(me, { size: 16 }) }) }),
+      /* @__PURE__ */ e.jsxs(G, { children: [
+        /* @__PURE__ */ e.jsxs(J, { children: [
+          /* @__PURE__ */ e.jsx(Y, { children: "Delete API Key" }),
+          /* @__PURE__ */ e.jsx(oe, { children: "Are you sure you want to delete this API key?" })
+        ] }),
+        /* @__PURE__ */ e.jsxs(_, { children: [
+          /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(k, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+            k,
+            {
+              onClick: () => {
+                a();
+              },
+              children: "Delete"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}, xt = (t) => {
+  const a = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((a.getTime() - s.getTime()) / 1e3), r = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return n < 60 ? r.format(-n, "second") : n < 3600 ? r.format(-Math.floor(n / 60), "minute") : n < 86400 ? r.format(-Math.floor(n / 3600), "hour") : n < 2592e3 ? r.format(-Math.floor(n / 86400), "day") : n < 31536e3 ? r.format(-Math.floor(n / 2592e3), "month") : r.format(-Math.floor(n / 31536e3), "year");
+}, yt = ({
+  consumer: t,
+  onUpdate: a,
+  onRollKey: s,
+  onDeleteKey: n
+}) => {
+  const [r, i] = I(!1), [o, d] = I(t.label), c = ce(), u = U(), p = q({
+    mutationFn: async (l) => {
+      if (!s)
+        throw new Error("rollKey not implemented");
+      return await s?.(l, u);
+    },
+    onSuccess: () => void c.invalidateQueries({ queryKey: ["api-keys"] })
+  }), f = q({
+    mutationFn: ({
+      consumerId: l,
+      keyId: x
+    }) => {
+      if (!n)
         throw new Error("deleteKey not implemented");
-      return t.deleteKey(i, s);
+      return n(l, x, u);
+    },
+    onMutate: async ({ consumerId: l, keyId: x }) => {
+      await c.cancelQueries({ queryKey: ["api-keys"] });
+      const v = c.getQueryData([
+        "api-keys"
+      ]);
+      return c.setQueryData(["api-keys"], (h) => h && h.map((C) => C.id === l ? {
+        ...C,
+        apiKeys: C.apiKeys.filter((K) => K.id !== x)
+      } : C)), { previousData: v };
+    },
+    onError: (l, x, v) => {
+      v?.previousData && c.setQueryData(["api-keys"], v.previousData);
     },
     onSuccess: () => {
-      r.invalidateQueries({ queryKey: ["api-keys"] });
+      c.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), a = d({
-    mutationFn: (i) => {
-      if (!t.rollKey)
-        throw new Error("rollKey not implemented");
-      return t.rollKey(i, s);
+  }), m = q({
+    mutationFn: ({
+      consumerId: l,
+      label: x
+    }) => {
+      if (!a)
+        throw new Error("updateConsumer not implemented");
+      return a({ id: l, label: x }, u);
     },
-    onSuccess: () => r.invalidateQueries({ queryKey: ["api-keys"] })
-  });
-  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]", children: [
-    /* @__PURE__ */ e.jsx(m, { name: "api-keys-list-page" }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between mb-4 border-b pb-3", children: [
-      /* @__PURE__ */ e.jsx("h1", { className: "font-medium text-2xl", children: "API Keys" }),
-      t.createKey && /* @__PURE__ */ e.jsx(l, { asChild: !0, children: /* @__PURE__ */ e.jsx(u, { to: "/settings/api-keys/new", children: "Create API Key" }) })
+    onMutate: async ({ consumerId: l, label: x }) => {
+      await c.cancelQueries({ queryKey: ["api-keys"] });
+      const v = c.getQueryData(["api-keys"]);
+      return c.setQueryData(["api-keys"], (h) => h && h.map((C) => C.id === l ? {
+        ...C,
+        label: x
+      } : C)), { previousData: v };
+    },
+    onError: (l, x, v) => {
+      v?.previousData && c.setQueryData(["api-keys"], v.previousData);
+    },
+    onSuccess: () => {
+      c.invalidateQueries({ queryKey: ["api-keys"] });
+    }
+  }), g = () => {
+    i(!0), d(t.label);
+  }, j = () => {
+    o.trim() && m.mutate({
+      label: o.trim(),
+      consumerId: t.id
+    }), i(!1);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    p.isError && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx(z, { size: 16 }),
+      /* @__PURE__ */ e.jsx(P, { children: p.error.message })
     ] }),
-    /* @__PURE__ */ e.jsx(m, { name: "api-keys-list-page-before-keys" }),
-    n.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-4 items-center p-8 border rounded bg-muted/30 text-muted-foreground", children: [
-      /* @__PURE__ */ e.jsxs("p", { className: "text-center", children: [
-        "No API keys created yet.",
-        /* @__PURE__ */ e.jsx("br", {}),
-        "Get started and create your first key."
-      ] }),
-      t.createKey && /* @__PURE__ */ e.jsx(l, { asChild: !0, variant: "outline", children: /* @__PURE__ */ e.jsx(u, { to: "/settings/api-keys/new", children: "Create API Key" }) })
-    ] }) : /* @__PURE__ */ e.jsx(
-      "ul",
+    m.isError && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx(z, { size: 16 }),
+      /* @__PURE__ */ e.jsx(P, { children: m.error.message })
+    ] }),
+    f.isError && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx(z, { size: 16 }),
+      /* @__PURE__ */ e.jsx(P, { children: f.error.message })
+    ] }),
+    /* @__PURE__ */ e.jsxs(
+      Ae,
       {
-        className: T(
-          "grid grid-cols-1 rounded border divide-y divide-border",
-          "lg:grid-cols-[minmax(250px,min-content)_1fr_min-content]"
-        ),
-        children: n.map((i) => /* @__PURE__ */ e.jsxs(
-          "li",
-          {
-            className: "p-5 grid grid-cols-subgrid col-span-full gap-2 items-center",
-            children: [
-              /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 text-sm", children: [
-                i.description ?? i.id,
-                /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
-                  i.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                    "Created on ",
-                    new Date(i.createdOn).toLocaleDateString()
-                  ] }),
-                  i.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                    "Expires on ",
-                    new Date(i.expiresOn).toLocaleDateString()
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ e.jsx("div", { className: "items-center flex lg:justify-center", children: /* @__PURE__ */ e.jsx(_, { apiKey: i.key }) }),
-              /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2", children: [
-                t.rollKey && /* @__PURE__ */ e.jsx(
-                  l,
+        className: "grid grid-cols-subgrid col-span-full items-center mb-4 group",
+        children: [
+          /* @__PURE__ */ e.jsxs(Se, { className: "col-span-full flex-row items-start justify-between gap-4", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+              r ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e.jsx(
+                  Le,
                   {
-                    size: "icon",
-                    title: "Roll this key",
-                    variant: "ghost",
-                    onClick: () => {
-                      confirm("Do you want to roll this key?") && a.mutate(i.id);
+                    maxLength: 32,
+                    value: o,
+                    onChange: (l) => d(l.target.value),
+                    onKeyDown: (l) => {
+                      l.key === "Enter" ? j() : l.key === "Escape" && i(!1);
                     },
-                    children: /* @__PURE__ */ e.jsx(P, { size: 16 })
+                    autoFocus: !0
                   }
                 ),
-                t.deleteKey && /* @__PURE__ */ e.jsx(
-                  l,
+                /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ e.jsx(
+                    k,
+                    {
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: j,
+                      disabled: !o.trim(),
+                      children: /* @__PURE__ */ e.jsx(xe, { size: 16 })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    k,
+                    {
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: () => i(!1),
+                      children: /* @__PURE__ */ e.jsx(ye, { size: 16 })
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ e.jsx(Re, { children: t.label }),
+              /* @__PURE__ */ e.jsxs(Ne, { children: [
+                t.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                  "Created on ",
+                  new Date(t.createdOn).toLocaleDateString()
+                ] }),
+                t.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                  "Expires on ",
+                  new Date(t.expiresOn).toLocaleDateString()
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1", children: [
+              a && /* @__PURE__ */ e.jsxs(
+                k,
+                {
+                  variant: "ghost",
+                  onClick: g,
+                  className: W(
+                    "flex gap-2",
+                    r && "opacity-0! pointer-events-none"
+                  ),
+                  disabled: r,
+                  children: [
+                    /* @__PURE__ */ e.jsx(ge, { size: 16 }),
+                    /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Edit label" })
+                  ]
+                }
+              ),
+              s && /* @__PURE__ */ e.jsxs(B, { children: [
+                /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                  k,
                   {
+                    title: "Roll this key",
                     variant: "ghost",
-                    size: "icon",
-                    onClick: () => {
-                      confirm("Do you want to delete this key?") && o.mutate(i.id);
-                    },
-                    disabled: o.isPending,
-                    children: /* @__PURE__ */ e.jsx(D, { size: 16 })
+                    disabled: p.isPending,
+                    className: "flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ e.jsx(
+                        je,
+                        {
+                          size: 16,
+                          className: p.isPending ? "animate-spin" : void 0
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Roll key" })
+                    ]
                   }
-                )
+                ) }),
+                /* @__PURE__ */ e.jsxs(G, { children: [
+                  /* @__PURE__ */ e.jsxs(J, { children: [
+                    /* @__PURE__ */ e.jsx(Y, { children: "Roll API Key" }),
+                    /* @__PURE__ */ e.jsx(oe, { children: "Are you sure you want to roll this API key?" })
+                  ] }),
+                  /* @__PURE__ */ e.jsxs(_, { children: [
+                    /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(k, { variant: "outline", children: "Cancel" }) }),
+                    /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                      k,
+                      {
+                        onClick: () => {
+                          p.mutate(t.id);
+                        },
+                        children: "Roll Key"
+                      }
+                    ) })
+                  ] })
+                ] })
               ] })
-            ]
-          },
-          i.id
-        ))
-      }
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx(Oe, { className: "p-0 grid grid-cols-subgrid col-span-full divide-y divide-border", children: /* @__PURE__ */ e.jsx(ht, { children: t.apiKeys.map((l) => /* @__PURE__ */ e.jsx(
+            mt,
+            {
+              apiKey: l,
+              onDeleteKey: () => {
+                f.mutate({
+                  consumerId: t.id,
+                  keyId: l.id
+                });
+              },
+              className: f.variables?.keyId === l.id && f.isPending ? "opacity-10!" : void 0
+            },
+            l.id
+          )) }) })
+        ]
+      },
+      t.id
     )
   ] });
-}, _ = ({ apiKey: t }) => {
-  const [s, r] = p(!1), [n, o] = p(!1);
-  return /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center text-sm", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono truncate h-9 items-center flex px-2", children: s ? t : "•".repeat(t.length) }),
-    /* @__PURE__ */ e.jsx(
-      l,
+}, gt = ({ service: t }) => {
+  const a = U(), { data: s } = ze({
+    queryFn: async () => {
+      try {
+        return await t.getConsumers(a);
+      } catch (i) {
+        throw i instanceof M ? i : new M("Cannot get API keys", {
+          cause: i,
+          title: "Error getting API keys",
+          developerHint: "Check the response of the API request for more information."
+        });
+      }
+    },
+    queryKey: ["api-keys"],
+    retry: !1
+  }), [n, r] = I(!1);
+  return /* @__PURE__ */ e.jsx("div", { className: "mt-8", children: s.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground", children: [
+    /* @__PURE__ */ e.jsxs("p", { className: "text-center", children: [
+      "You have no API keys yet.",
+      /* @__PURE__ */ e.jsx("br", {}),
+      t.createKey && "Get started and create your first key."
+    ] }),
+    t.createKey && /* @__PURE__ */ e.jsx(
+      de,
       {
-        variant: "outline",
-        onClick: () => r((a) => !a),
-        size: "icon",
-        children: s ? /* @__PURE__ */ e.jsx(R, { size: 16 }) : /* @__PURE__ */ e.jsx(q, { size: 16 })
+        service: t,
+        isOpen: n,
+        onOpenChange: r
       }
-    ),
-    /* @__PURE__ */ e.jsx(
-      l,
+    )
+  ] }) : /* @__PURE__ */ e.jsx("ul", { className: W("grid grid-cols-[1fr_min-content] col-span-6"), children: s.map((i) => /* @__PURE__ */ e.jsx(
+    yt,
+    {
+      consumer: i,
+      onUpdate: t.updateConsumer,
+      onRollKey: t.rollKey,
+      onDeleteKey: t.deleteKey
+    },
+    i.id
+  )) }) });
+}, jt = ({ service: t }) => {
+  const [a, s] = I(!1), n = re();
+  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-3xl h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
+    /* @__PURE__ */ e.jsx(ee.Target, { name: "api-keys-list-page" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between pb-3", children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "font-medium text-2xl", children: "API Keys" }),
+      t.createKey && /* @__PURE__ */ e.jsx(
+        de,
+        {
+          service: t,
+          isOpen: a,
+          onOpenChange: s
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx("p", { children: "Create, manage, and monitor your API keys" }),
+    /* @__PURE__ */ e.jsx(ee.Target, { name: "api-keys-list-page-before-keys" }),
+    n.profile?.emailVerified === !1 ? /* @__PURE__ */ e.jsxs(Te, { variant: "outline", children: [
+      /* @__PURE__ */ e.jsxs(qe, { children: [
+        /* @__PURE__ */ e.jsx(Me, { children: "Verified email required" }),
+        /* @__PURE__ */ e.jsx(Fe, { children: "You need to verify your email to access API keys." })
+      ] }),
+      /* @__PURE__ */ e.jsx($e, { children: /* @__PURE__ */ e.jsx(De, { onClick: () => n.requestEmailVerification(), children: "Verify email" }) })
+    ] }) : /* @__PURE__ */ e.jsx(
+      Pe,
       {
-        variant: "outline",
-        onClick: () => {
-          navigator.clipboard.writeText(t).then(() => {
-            o(!0), setTimeout(() => o(!1), 2e3);
-          });
-        },
-        size: "icon",
-        children: n ? /* @__PURE__ */ e.jsx(O, { size: 16 }) : /* @__PURE__ */ e.jsx(z, { size: 16 })
+        fallbackRender: ({ error: r }) => /* @__PURE__ */ e.jsx(We, { error: r }),
+        children: /* @__PURE__ */ e.jsx(gt, { service: t })
       }
     )
   ] });
-}, Q = "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev", B = (t) => ({
-  deleteKey: async (s, r) => {
-    const n = new Request(t + `/v1/developer/api-keys/${s}`, {
-      method: "DELETE"
-    });
-    await r.signRequest(n);
-    const o = await fetch(n);
-    c(o.ok, "Failed to delete API key");
+}, N = "https://api.zuploedge.com/v2/client", vt = async (t) => {
+  try {
+    return await t.json();
+  } catch {
+    return;
+  }
+}, O = async (t) => {
+  const a = t.headers.get("content-type");
+  if (!t.ok && a?.includes("application/problem+json")) {
+    const s = await vt(t);
+    if (s.type && s.title)
+      throw new Error(s.detail ?? s.title);
+  }
+}, T = {
+  developerHint: "This project is not linked to a Zuplo deployment. Run `zuplo link` to get started with API Keys.",
+  title: "Not linked to a Zuplo deployment"
+}, Ct = ({
+  deploymentName: t,
+  ...a
+}) => ({
+  deleteKey: async (s, n, r) => {
+    E(t, "Cannot delete API key.", T);
+    const i = new Request(
+      N + `/${t}/consumers/${s}/keys/${n}`,
+      {
+        method: "DELETE"
+      }
+    ), o = await fetch(await r.signRequest(i));
+    await O(o), E(o.ok, "Failed to delete API key");
   },
-  rollKey: async (s, r) => {
-    const n = await fetch(
-      await r.signRequest(
-        new Request(t + `/v1/developer/api-keys/${s}/key`, {
-          method: "DELETE"
-        })
+  updateConsumer: async (s, n) => {
+    E(
+      t,
+      "Cannot update API key description.",
+      T
+    );
+    const r = await fetch(
+      await n.signRequest(
+        new Request(
+          `${N}/${t}/consumers/${s.id}`,
+          {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              label: s.label
+            })
+          }
+        )
       )
     );
-    c(n.ok, "Failed to delete API key");
+    await O(r), E(r.ok, "Failed to update API key description");
   },
-  createKey: async (s, r) => {
-    const n = new Request(t + "/v1/developer/api-keys", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(s)
-    });
-    await r.signRequest(n);
-    const o = await fetch(n);
-    c(o.ok, "Failed to create API key");
+  rollKey: async (s, n) => {
+    E(t, "Cannot roll API key.", T);
+    const r = await fetch(
+      await n.signRequest(
+        new Request(
+          `${N}/${t}/consumers/${s}/roll-key`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({})
+          }
+        )
+      )
+    );
+    await O(r), E(r.ok, "Failed to roll API key");
   },
-  getKeys: async (s) => {
-    const r = new Request(t + "/v1/developer/api-keys");
-    await s.signRequest(r);
-    const n = await fetch(r);
-    return c(n.ok, "Failed to fetch API keys"), await n.json();
-  }
-}), se = (t) => {
-  const s = "endpoint" in t ? t.endpoint : Q, r = "getKeys" in t ? t : B(s);
+  getConsumers: async (s) => {
+    E(t, "Cannot get API keys.", T);
+    const n = new Request(
+      `${N}/${t}/consumers`
+    );
+    await s.signRequest(n);
+    const r = await fetch(n);
+    return await O(r), E(r.ok, "Failed to fetch API keys"), (await r.json()).data.map((o) => ({
+      id: o.id,
+      createdOn: o.createdOn,
+      updatedOn: o.updatedOn,
+      expiresOn: o.expiresOn,
+      label: o.label || o.subject || "API Key",
+      apiKeys: o.apiKeys.data,
+      key: o.apiKeys.data.at(0)
+    }));
+  },
+  ...a
+}), Lt = (t) => t, Qt = ({
+  deploymentName: t,
+  isZuplo: a,
+  ...s
+}) => {
+  a && !t && console.warn(
+    "This project is not linked to a Zuplo deployment. Run `zuplo link` to get started."
+  );
+  const n = a ? Ct({ deploymentName: t, ...s }) : s;
+  if (!n.getConsumers)
+    throw new Error("getConsumers is required when using the apiKeyPlugin");
+  const r = {
+    ...n,
+    getConsumers: n.getConsumers
+  };
   return {
     getProfileMenuItems: () => [
       {
         label: "API Keys",
-        path: "/settings/api-keys"
+        path: "/settings/api-keys",
+        category: "middle",
+        icon: ve
       }
     ],
-    getIdentities: async (n) => {
+    getIdentities: async (i) => {
       try {
-        return (await r.getKeys(n)).map((a) => ({
-          authorizeRequest: (i) => (i.headers.set("Authorization", `Bearer ${a.key}`), i),
-          id: a.id,
-          label: a.description ?? a.id
+        return (await r.getConsumers(i)).map((d) => ({
+          authorizeRequest: (c) => (c.headers.set(
+            "Authorization",
+            `Bearer ${d.apiKeys.at(0)?.key}`
+          ), c),
+          id: d.id,
+          label: d.label
         }));
       } catch {
         return [];
@@ -255,23 +770,15 @@ const F = ({ service: t }) => {
     },
     getRoutes: () => [
       {
-        element: /* @__PURE__ */ e.jsx(V, {}),
-        errorElement: /* @__PURE__ */ e.jsx(g, {}),
-        children: [
-          {
-            path: "/settings/api-keys",
-            element: /* @__PURE__ */ e.jsx(M, { service: r })
-          },
-          {
-            path: "/settings/api-keys/new",
-            element: /* @__PURE__ */ e.jsx(F, { service: r })
-          }
-        ]
+        path: "/settings/api-keys",
+        element: /* @__PURE__ */ e.jsx(jt, { service: r })
       }
-    ]
+    ],
+    getProtectedRoutes: () => ["/settings/api-keys"]
   };
 };
 export {
-  se as apiKeyPlugin
+  Qt as apiKeyPlugin,
+  Lt as createApiKeyService
 };
 //# sourceMappingURL=zudoku.plugin-api-keys.js.map