zudoku 0.0.0-f9211eb → 0.0.0-f98e47d6

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

@@ -1,258 +1,805 @@
-import { j as e } from "./jsx-runtime-CYK1ROHF.js";
-import { RotateCwIcon as j, TrashIcon as v, EyeOffIcon as w, EyeIcon as K, CheckIcon as b, CopyIcon as k, FileKey2Icon as N } from "lucide-react";
-import { D as I, S as x, R as S } from "./SlotletProvider-DXvc0aY6.js";
-import { i as c } from "./invariant-Caa8-XvF.js";
-import { e as h, g, l as A, d as C } from "./hook-CqpVYDqN.js";
-import { u as d, S as E, a as P, b as D, c as q, d as R, e as p } from "./Select-DVFRKf1R.js";
-import { a as O } from "./index.esm--gIChbWs.js";
-import { a as z, L as u, O as F } from "./chunk-HA7DTUK3-C4gP41vD.js";
-import { Button as l } from "./ui/Button.js";
-import { Input as T } from "./ui/Input.js";
-import { useState as y } from "react";
-import { c as L } from "./cn-qaFjX9_3.js";
-const V = ({ service: t }) => {
-  const n = h(), i = g(), r = z(), a = O({
+import { j as e } from "./jsx-runtime-DywqP_6a.js";
+import { EyeOffIcon as ne, EyeIcon as ie, CheckIcon as L, CopyIcon as re, CircleSlashIcon as $, XIcon as me, PencilLineIcon as ye, RefreshCwIcon as ge, TrashIcon as je, KeyRoundIcon as ve } from "lucide-react";
+import { R as Ce } from "./RouterError-DPrYdVmB.js";
+import { i as P } from "./invariant-Bm-FVUQE.js";
+import { O as we, aP as be } from "./chunk-QMGIS6GS-DqecZ6nq.js";
+import { a as ke } from "./hook-ChlxzJwv.js";
+import { D as Ne, a as Z } from "./ErrorAlert-IEDm37qc.js";
+import { Button as g } from "./ui/Button.js";
+import { d as ae, g as oe, b as Ee } from "./ZudokuContext-3cqbu21w.js";
+import { u as T, A as O, a as M, b as Ke, S as De, c as Ie, d as Ae, e as Pe, f as Re, g as ee } from "./Select-BPQp7Yqx.js";
+import * as Q from "react";
+import Se, { createContext as _, useRef as D, useLayoutEffect as ze, useEffect as le, useId as B, useContext as H, useInsertionEffect as Te, useMemo as F, useCallback as Oe, Children as Me, isValidElement as qe, useState as E, forwardRef as $e } from "react";
+import { C as Fe, a as Le } from "./Card-hTy9PAnh.js";
+import { e as V, f as I, D as G, g as J, a as U, b as W, c as X, d as ce } from "./Dialog-VIMic7xI.js";
+import { c as N } from "./cn-dYga0KKN.js";
+import { u as de } from "./useCopyToClipboard-B_085nfO.js";
+import { Input as ue } from "./ui/Input.js";
+import { a as Qe } from "./index.esm-CdzlRw50.js";
+import { B as _e } from "./Button-DTDRi4CT.js";
+import { S as Be } from "./Spinner-Cf6E803I.js";
+import { useAuth as He } from "./zudoku.hooks.js";
+const Ve = () => {
+  const t = ke();
+  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(we, {}) : 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(g, { 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(Ne, { 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" }),
+    "."
+  ] }) });
+}, Ge = _({});
+function he(t) {
+  const i = D(null);
+  return i.current === null && (i.current = t()), i.current;
+}
+const Je = typeof window < "u", Ue = Je ? ze : le, fe = /* @__PURE__ */ _(null);
+function We(t) {
+  return typeof t == "object" && t !== null;
+}
+function Xe(t) {
+  return We(t) && "offsetHeight" in t;
+}
+const Ye = _({
+  transformPagePoint: (t) => t,
+  isStatic: !1,
+  reducedMotion: "never"
+});
+class Ze extends Q.Component {
+  getSnapshotBeforeUpdate(i) {
+    const s = this.props.childRef.current;
+    if (s && i.isPresent && !this.props.isPresent) {
+      const n = s.offsetParent, r = Xe(n) && n.offsetWidth || 0, a = this.props.sizeRef.current;
+      a.height = s.offsetHeight || 0, a.width = s.offsetWidth || 0, a.top = s.offsetTop, a.left = s.offsetLeft, a.right = r - a.width - a.left;
+    }
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+}
+function et({ children: t, isPresent: i, anchorX: s, root: n }) {
+  const r = B(), a = D(null), l = D({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0
+  }), { nonce: x } = H(Ye);
+  return Te(() => {
+    const { width: c, height: d, top: y, left: h, right: p } = l.current;
+    if (i || !a.current || !c || !d)
+      return;
+    const f = s === "left" ? `left: ${h}` : `right: ${p}`;
+    a.current.dataset.motionPopId = r;
+    const m = document.createElement("style");
+    x && (m.nonce = x);
+    const v = n ?? document.head;
+    return v.appendChild(m), m.sheet && m.sheet.insertRule(`
+          [data-motion-pop-id="${r}"] {
+            position: absolute !important;
+            width: ${c}px !important;
+            height: ${d}px !important;
+            ${f}px !important;
+            top: ${y}px !important;
+          }
+        `), () => {
+      v.contains(m) && v.removeChild(m);
+    };
+  }, [i]), e.jsx(Ze, { isPresent: i, childRef: a, sizeRef: l, children: Q.cloneElement(t, { ref: a }) });
+}
+const tt = ({ children: t, initial: i, isPresent: s, onExitComplete: n, custom: r, presenceAffectsLayout: a, mode: l, anchorX: x, root: c }) => {
+  const d = he(st), y = B();
+  let h = !0, p = F(() => (h = !1, {
+    id: y,
+    initial: i,
+    isPresent: s,
+    custom: r,
+    onExitComplete: (f) => {
+      d.set(f, !0);
+      for (const m of d.values())
+        if (!m)
+          return;
+      n && n();
+    },
+    register: (f) => (d.set(f, !1), () => d.delete(f))
+  }), [s, d, n]);
+  return a && h && (p = { ...p }), F(() => {
+    d.forEach((f, m) => d.set(m, !1));
+  }, [s]), Q.useEffect(() => {
+    !s && !d.size && n && n();
+  }, [s]), l === "popLayout" && (t = e.jsx(et, { isPresent: s, anchorX: x, root: c, children: t })), e.jsx(fe.Provider, { value: p, children: t });
+};
+function st() {
+  return /* @__PURE__ */ new Map();
+}
+function nt(t = !0) {
+  const i = H(fe);
+  if (i === null)
+    return [!0, null];
+  const { isPresent: s, onExitComplete: n, register: r } = i, a = B();
+  le(() => {
+    if (t)
+      return r(a);
+  }, [t]);
+  const l = Oe(() => t && n && n(a), [a, n, t]);
+  return !s && n ? [!1, l] : [!0];
+}
+const R = (t) => t.key || "";
+function te(t) {
+  const i = [];
+  return Me.forEach(t, (s) => {
+    qe(s) && i.push(s);
+  }), i;
+}
+const it = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presenceAffectsLayout: r = !0, mode: a = "sync", propagate: l = !1, anchorX: x = "left", root: c }) => {
+  const [d, y] = nt(l), h = F(() => te(t), [t]), p = l && !d ? [] : h.map(R), f = D(!0), m = D(h), v = he(() => /* @__PURE__ */ new Map()), [A, o] = E(h), [u, C] = E(h);
+  Ue(() => {
+    f.current = !1, m.current = h;
+    for (let w = 0; w < u.length; w++) {
+      const j = R(u[w]);
+      p.includes(j) ? v.delete(j) : v.get(j) !== !0 && v.set(j, !1);
+    }
+  }, [u, p.length, p.join("-")]);
+  const b = [];
+  if (h !== A) {
+    let w = [...h];
+    for (let j = 0; j < u.length; j++) {
+      const K = u[j], q = R(K);
+      p.includes(q) || (w.splice(j, 0, K), b.push(K));
+    }
+    return a === "wait" && b.length && (w = b), C(te(w)), o(h), null;
+  }
+  process.env.NODE_ENV !== "production" && a === "wait" && u.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: k } = H(Ge);
+  return e.jsx(e.Fragment, { children: u.map((w) => {
+    const j = R(w), K = l && !d ? !1 : h === u || p.includes(j), q = () => {
+      if (v.has(j))
+        v.set(j, !0);
+      else
+        return;
+      let Y = !0;
+      v.forEach((xe) => {
+        xe || (Y = !1);
+      }), Y && (k?.(), C(m.current), l && y?.(), n && n());
+    };
+    return e.jsx(tt, { isPresent: K, initial: !f.current || s ? void 0 : !1, custom: i, presenceAffectsLayout: r, mode: a, root: c, onExitComplete: K ? void 0 : q, anchorX: x, children: w }, j);
+  }) });
+}, rt = ({
+  secret: t,
+  preview: i = 5,
+  className: s,
+  status: n,
+  onCopy: r,
+  revealed: a,
+  onReveal: l,
+  noReveal: x
+}) => {
+  const c = Math.abs(i), [d, y] = E(!1), [h, p] = de(), f = a ?? d;
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: N(
+        "flex gap-2 items-center text-sm border rounded-md px-1",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "font-mono w-full h-9 items-center flex px-2 text-xs gap-2", children: [
+          n && /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: N(
+                "rounded-full shrink-0 w-2 h-2 mr-2",
+                n === "active" && "bg-emerald-400",
+                n === "expired" && "bg-neutral-200",
+                n === "expiring" && "bg-yellow-400",
+                n === "revoked" && "bg-red-400",
+                n === "none" && "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ e.jsxs("span", { className: "w-full truncate", children: [
+            /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                className: N(
+                  "w-40 inline-block md:w-fit",
+                  f ? "" : "opacity-50"
+                ),
+                children: f ? t.slice(
+                  0,
+                  c === 0 ? t.length : -c
+                ) : "•••• ".repeat(
+                  t.slice(
+                    0,
+                    c === 0 ? t.length : -c
+                  ).length / 5
+                ) + "•".repeat(
+                  t.slice(
+                    0,
+                    c === 0 ? t.length : -c
+                  ).length % 5
+                )
+              }
+            ),
+            c > 0 && /* @__PURE__ */ e.jsx("span", { children: t.slice(-c) })
+          ] })
+        ] }),
+        x !== !0 && /* @__PURE__ */ e.jsx(
+          g,
+          {
+            variant: "ghost",
+            onClick: () => {
+              y((m) => !m), l?.(!f);
+            },
+            size: "icon",
+            children: f ? /* @__PURE__ */ e.jsx(ne, { size: 16 }) : /* @__PURE__ */ e.jsx(ie, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          g,
+          {
+            variant: "ghost",
+            onClick: () => {
+              p(t), r?.(t);
+            },
+            size: "icon",
+            children: h ? /* @__PURE__ */ e.jsx(L, { size: 16 }) : /* @__PURE__ */ e.jsx(re, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}, pe = $e(
+  ({ isPending: t, children: i, className: s, ...n }, r) => /* @__PURE__ */ e.jsxs(
+    _e,
+    {
+      ref: r,
+      disabled: t,
+      ...n,
+      className: N("relative", s),
+      children: [
+        t && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ e.jsx(Be, {}) }),
+        /* @__PURE__ */ e.jsx("span", { className: N("block", t && "invisible"), children: i })
+      ]
+    }
+  )
+);
+pe.displayName = "ActionButton";
+const at = ({
+  service: t,
+  onOpenChange: i
+}) => {
+  const s = ae(), n = oe(), r = be(), a = Qe({
     defaultValues: {
       expiresOn: "30"
     }
-  }), o = d({
-    mutationFn: ({ description: s, expiresOn: m }) => {
+  }), l = He(), x = T({
+    mutationFn: ({ description: c, expiresOn: d }) => {
       if (!t.createKey)
         throw new Error("createKey not implemented");
-      const f = m !== "never" ? M(Number(m)) : void 0;
-      return t.createKey(
-        { description: s, expiresOn: f },
-        n
-      );
+      const y = d !== "never" ? ot(Number(d)) : void 0;
+      return t.createKey({
+        apiKey: {
+          description: c || "Secret Key",
+          expiresOn: y
+        },
+        context: s,
+        auth: l
+      });
     },
     onSuccess: async () => {
-      await i.invalidateQueries({ queryKey: ["api-keys"] }), await r("/settings/api-keys/");
+      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: a.handleSubmit((s) => o.mutate(s)),
-        children: /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col", children: [
-          "Note",
-          /* @__PURE__ */ e.jsx(T, { ...a.register("description") }),
+  return t.createKey ? /* @__PURE__ */ e.jsxs(
+    "form",
+    {
+      onSubmit: a.handleSubmit(
+        (c) => x.mutate(
+          { ...c },
+          {
+            onSuccess: () => i(!1)
+          }
+        )
+      ),
+      children: [
+        x.error && /* @__PURE__ */ e.jsxs(O, { variant: "destructive", className: "mb-4", children: [
+          /* @__PURE__ */ e.jsx(M, { children: "Error" }),
+          /* @__PURE__ */ e.jsx(Ke, { children: x.error.message })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col text-sm font-medium", children: [
+          "Name",
+          /* @__PURE__ */ e.jsx(ue, { ...a.register("description") }),
           "Expiration",
           /* @__PURE__ */ e.jsxs(
-            E,
+            De,
             {
-              onValueChange: (s) => a.setValue("expiresOn", s),
+              onValueChange: (c) => a.setValue("expiresOn", c),
               defaultValue: a.getValues("expiresOn"),
               children: [
-                /* @__PURE__ */ e.jsx(P, { children: /* @__PURE__ */ e.jsx(D, {}) }),
-                /* @__PURE__ */ e.jsx(q, { children: /* @__PURE__ */ e.jsxs(R, { children: [
-                  [7, 30, 60, 90].map((s) => /* @__PURE__ */ e.jsxs(p, { value: String(s), children: [
-                    s,
+                /* @__PURE__ */ e.jsx(Ie, { children: /* @__PURE__ */ e.jsx(Ae, {}) }),
+                /* @__PURE__ */ e.jsx(Pe, { children: /* @__PURE__ */ e.jsxs(Re, { children: [
+                  [7, 30, 60, 90].map((c) => /* @__PURE__ */ e.jsxs(ee, { value: String(c), children: [
+                    c,
                     " days"
-                  ] }, s)),
-                  /* @__PURE__ */ e.jsx(p, { value: "never", children: "Never" })
+                  ] }, c)),
+                  /* @__PURE__ */ e.jsx(ee, { 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(V, { children: [
+            /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsx(g, { variant: "outline", children: "Cancel" }) }),
+            /* @__PURE__ */ e.jsx(pe, { isPending: x.isPending, children: "Generate Key" })
           ] })
         ] })
-      }
-    )
-  ] }) : null;
-}, M = (t) => {
-  const n = /* @__PURE__ */ new Date();
-  return n.setDate(n.getDate() + t), n.toISOString();
-}, Q = () => {
-  const t = A();
-  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(F, {}) : 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(I, { 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" }),
-    "."
-  ] }) });
-}, _ = ({ service: t }) => {
-  const n = h(), i = g(), { data: r } = C({
-    queryFn: () => t.getKeys(n),
+      ]
+    }
+  ) : null;
+}, ot = (t) => {
+  const i = /* @__PURE__ */ new Date();
+  return i.setDate(i.getDate() + t), i.toISOString();
+}, se = ({
+  service: t,
+  isOpen: i,
+  onOpenChange: s,
+  trigger: n,
+  buttonVariant: r = "outline"
+}) => {
+  const a = /* @__PURE__ */ e.jsx(g, { variant: r, children: "Create API Key" });
+  return /* @__PURE__ */ e.jsxs(G, { open: i, onOpenChange: s, children: [
+    /* @__PURE__ */ e.jsx(J, { asChild: !0, children: n ?? a }),
+    /* @__PURE__ */ e.jsxs(U, { children: [
+      /* @__PURE__ */ e.jsx(W, { children: /* @__PURE__ */ e.jsx(X, { children: "Create API Key" }) }),
+      /* @__PURE__ */ e.jsx(at, { service: t, onOpenChange: s })
+    ] })
+  ] });
+}, lt = ({ service: t }) => {
+  const i = ae(), s = oe(), [n, r] = E(
+    null
+  ), [a, l] = E(""), { data: x, isFetching: c } = Ee({
+    queryFn: () => t.getConsumers(i),
     queryKey: ["api-keys"],
     retry: !1
-  }), a = d({
-    mutationFn: (s) => {
+  }), [d, y] = E(!1), h = T({
+    mutationFn: ({
+      consumerId: o,
+      keyId: u
+    }) => {
       if (!t.deleteKey)
         throw new Error("deleteKey not implemented");
-      return t.deleteKey(s, n);
+      return t.deleteKey(o, u, i);
+    },
+    onMutate: async ({ consumerId: o, keyId: u }) => {
+      await s.cancelQueries({ queryKey: ["api-keys"] });
+      const C = s.getQueryData([
+        "api-keys"
+      ]);
+      return s.setQueryData(["api-keys"], (b) => b && b.map((k) => k.id === o ? {
+        ...k,
+        apiKeys: k.apiKeys.filter((w) => w.id !== u)
+      } : k)), { previousData: C };
+    },
+    onError: (o, u, C) => {
+      C?.previousData && s.setQueryData(["api-keys"], C.previousData);
+    },
+    onSuccess: () => {
+      s.invalidateQueries({ queryKey: ["api-keys"] });
+    }
+  }), p = T({
+    mutationFn: ({
+      consumerId: o,
+      label: u
+    }) => {
+      if (!t.updateConsumer)
+        throw new Error("updateConsumer not implemented");
+      return t.updateConsumer({ id: o, label: u }, i);
+    },
+    onMutate: async ({ consumerId: o, label: u }) => {
+      await s.cancelQueries({ queryKey: ["api-keys"] });
+      const C = s.getQueryData(["api-keys"]);
+      return s.setQueryData(["api-keys"], (b) => b && b.map((k) => k.id === o ? {
+        ...k,
+        label: u
+      } : k)), { previousData: C };
+    },
+    onError: (o, u, C) => {
+      C?.previousData && s.setQueryData(["api-keys"], C.previousData);
     },
     onSuccess: () => {
-      i.invalidateQueries({ queryKey: ["api-keys"] });
+      s.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), o = d({
-    mutationFn: (s) => {
+  }), f = T({
+    mutationFn: (o) => {
       if (!t.rollKey)
         throw new Error("rollKey not implemented");
-      return t.rollKey(s, n);
+      return t.rollKey(o, i);
     },
-    onSuccess: () => i.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(x, { name: "api-keys-list-page" }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between mb-4 border-b pb-3", children: [
+    onSuccess: () => s.invalidateQueries({ queryKey: ["api-keys"] })
+  }), m = (o, u) => {
+    r(o), l(u);
+  }, v = (o) => {
+    a.trim() && p.mutate({
+      consumerId: o,
+      label: a.trim()
+    }), r(null), l("");
+  }, A = () => {
+    r(null), l("");
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-md h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
+    /* @__PURE__ */ e.jsx(Z.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(l, { asChild: !0, children: /* @__PURE__ */ e.jsx(u, { to: "/settings/api-keys/new", children: "Create API Key" }) })
+      t.createKey && /* @__PURE__ */ e.jsx(
+        se,
+        {
+          service: t,
+          isOpen: d,
+          onOpenChange: y
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx("p", { children: "Create, manage, and monitor your API keys" }),
+    /* @__PURE__ */ e.jsx(Z.Target, { name: "api-keys-list-page-before-keys" }),
+    /* @__PURE__ */ e.jsx("div", { className: "h-8" }),
+    f.isError && /* @__PURE__ */ e.jsxs(O, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx($, { size: 16 }),
+      /* @__PURE__ */ e.jsx(M, { children: f.error.message })
+    ] }),
+    p.isError && /* @__PURE__ */ e.jsxs(O, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx($, { size: 16 }),
+      /* @__PURE__ */ e.jsx(M, { children: p.error.message })
+    ] }),
+    h.isError && /* @__PURE__ */ e.jsxs(O, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx($, { size: 16 }),
+      /* @__PURE__ */ e.jsx(M, { children: h.error.message })
     ] }),
-    /* @__PURE__ */ e.jsx(x, { name: "api-keys-list-page-before-keys" }),
-    r.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.jsx("div", { className: "", children: x.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: [
-        "No API keys created yet.",
+        "You have no API keys yet.",
         /* @__PURE__ */ e.jsx("br", {}),
-        "Get started and create your first key."
+        t.createKey && "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" }) })
+      t.createKey && /* @__PURE__ */ e.jsx(
+        se,
+        {
+          service: t,
+          isOpen: d,
+          onOpenChange: y
+        }
+      )
     ] }) : /* @__PURE__ */ e.jsx(
       "ul",
       {
-        className: L(
-          "grid grid-cols-1 rounded border divide-y divide-border",
-          "lg:grid-cols-[minmax(250px,min-content)_1fr_min-content]"
+        className: N(
+          "grid grid-cols-[1fr_min-content] divide-y divide-border col-span-6"
         ),
-        children: r.map((s) => /* @__PURE__ */ e.jsxs(
-          "li",
+        children: x.map((o) => /* @__PURE__ */ e.jsxs(
+          Fe,
           {
-            className: "p-5 grid grid-cols-subgrid col-span-full gap-2 items-center",
+            className: "grid grid-cols-subgrid col-span-full items-center mb-4 group",
             children: [
-              /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 text-sm", children: [
-                s.description ?? s.id,
-                /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
-                  s.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                    "Created on ",
-                    new Date(s.createdOn).toLocaleDateString()
+              /* @__PURE__ */ e.jsxs(Le, { className: "border-b col-span-full grid-cols-subgrid grid", children: [
+                /* @__PURE__ */ e.jsxs("div", { className: "h-10 flex flex-col text-sm justify-center", children: [
+                  /* @__PURE__ */ e.jsxs("div", { className: "font-medium text-lg flex items-center gap-2", children: [
+                    n === o.id ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                      /* @__PURE__ */ e.jsx(
+                        ue,
+                        {
+                          maxLength: 32,
+                          value: a,
+                          onChange: (u) => l(u.target.value),
+                          onKeyDown: (u) => {
+                            u.key === "Enter" ? v(o.id) : u.key === "Escape" && A();
+                          },
+                          className: "text-lg font-medium",
+                          autoFocus: !0
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+                        /* @__PURE__ */ e.jsx(
+                          g,
+                          {
+                            size: "icon",
+                            variant: "ghost",
+                            onClick: () => v(o.id),
+                            disabled: !a.trim(),
+                            children: /* @__PURE__ */ e.jsx(L, { size: 16 })
+                          }
+                        ),
+                        /* @__PURE__ */ e.jsx(
+                          g,
+                          {
+                            size: "icon",
+                            variant: "ghost",
+                            onClick: A,
+                            children: /* @__PURE__ */ e.jsx(me, { size: 16 })
+                          }
+                        )
+                      ] })
+                    ] }) : o.label,
+                    /* @__PURE__ */ e.jsx("div", { className: "text-muted-foreground text-xs", children: o.createdOn })
                   ] }),
-                  s.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                    "Expires on ",
-                    new Date(s.expiresOn).toLocaleDateString()
+                  /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
+                    o.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                      "Created on",
+                      " ",
+                      new Date(o.createdOn).toLocaleDateString()
+                    ] }),
+                    o.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                      "Expires on",
+                      " ",
+                      new Date(o.expiresOn).toLocaleDateString()
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e.jsxs("div", { className: "flex justify-end", children: [
+                  t.updateConsumer && /* @__PURE__ */ e.jsxs(
+                    g,
+                    {
+                      variant: "ghost",
+                      onClick: () => m(o.id, o.label),
+                      className: N(
+                        "flex gap-2",
+                        n === o.id && "opacity-0! pointer-events-none"
+                      ),
+                      disabled: n === o.id,
+                      children: [
+                        /* @__PURE__ */ e.jsx(ye, { size: 16 }),
+                        /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Edit label" })
+                      ]
+                    }
+                  ),
+                  t.rollKey && /* @__PURE__ */ e.jsxs(G, { children: [
+                    /* @__PURE__ */ e.jsx(J, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                      g,
+                      {
+                        title: "Roll this key",
+                        variant: "ghost",
+                        disabled: f.isPending,
+                        className: "flex items-center gap-2",
+                        children: [
+                          /* @__PURE__ */ e.jsx(
+                            ge,
+                            {
+                              size: 16,
+                              className: f.isPending ? "animate-spin" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Roll key" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ e.jsxs(U, { children: [
+                      /* @__PURE__ */ e.jsxs(W, { children: [
+                        /* @__PURE__ */ e.jsx(X, { children: "Roll API Key" }),
+                        /* @__PURE__ */ e.jsx(ce, { children: "Are you sure you want to roll this API key?" })
+                      ] }),
+                      /* @__PURE__ */ e.jsxs(V, { children: [
+                        /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsx(g, { variant: "outline", children: "Cancel" }) }),
+                        /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                          g,
+                          {
+                            onClick: () => {
+                              f.mutate(o.id);
+                            },
+                            children: "Roll Key"
+                          }
+                        ) })
+                      ] })
+                    ] })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ e.jsx("div", { className: "items-center flex lg:justify-center", children: /* @__PURE__ */ e.jsx(G, { apiKey: s.key }) }),
-              /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2", children: [
-                t.rollKey && /* @__PURE__ */ e.jsx(
-                  l,
+              /* @__PURE__ */ e.jsx("div", { className: "col-span-full grid-cols-subgrid grid", children: /* @__PURE__ */ e.jsx(it, { children: o.apiKeys.map((u) => /* @__PURE__ */ e.jsxs(Se.Fragment, { children: [
+                /* @__PURE__ */ e.jsx(
+                  dt,
                   {
-                    size: "icon",
-                    title: "Roll this key",
-                    variant: "ghost",
-                    onClick: () => {
-                      confirm("Do you want to roll this key?") && o.mutate(s.id);
+                    apiKey: u,
+                    onDeleteKey: () => {
+                      h.mutate({
+                        consumerId: o.id,
+                        keyId: u.id
+                      });
                     },
-                    children: /* @__PURE__ */ e.jsx(j, { size: 16 })
+                    className: h.variables?.keyId === u.id && (h.isPending || c) ? "opacity-10!" : void 0
                   }
                 ),
-                t.deleteKey && /* @__PURE__ */ e.jsx(
-                  l,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    onClick: () => {
-                      confirm("Do you want to delete this key?") && a.mutate(s.id);
-                    },
-                    disabled: a.isPending,
-                    children: /* @__PURE__ */ e.jsx(v, { size: 16 })
-                  }
-                )
-              ] })
+                /* @__PURE__ */ e.jsx("div", { className: "col-span-full h-px bg-border" })
+              ] }, u.id)) }) })
             ]
           },
-          s.id
+          o.id
         ))
       }
-    )
+    ) })
   ] });
-}, G = ({ apiKey: t }) => {
-  const [n, i] = y(!1), [r, a] = y(!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: n ? t : "•".repeat(t.length) }),
-    /* @__PURE__ */ e.jsx(
-      l,
-      {
-        variant: "outline",
-        onClick: () => i((o) => !o),
-        size: "icon",
-        children: n ? /* @__PURE__ */ e.jsx(w, { size: 16 }) : /* @__PURE__ */ e.jsx(K, { size: 16 })
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      l,
+}, ct = (t) => {
+  const i = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((i.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");
+}, dt = ({
+  apiKey: t,
+  onDeleteKey: i,
+  className: s
+}) => {
+  const [n, r] = E(!1), [a, l] = de(), { key: x, createdOn: c, expiresOn: d } = t, y = d && new Date(d) < /* @__PURE__ */ new Date(), h = d ? Math.ceil(
+    (new Date(d).getTime() - Date.now()) / (1e3 * 60 * 60 * 24)
+  ) : 1 / 0, p = h <= 7 && !y;
+  return /* @__PURE__ */ e.jsxs("div", { className: N("grid col-span-full grid-cols-subgrid p-6", s), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center text-sm border rounded-md w-full max-w-fit px-1", children: [
+        /* @__PURE__ */ e.jsx(
+          rt,
+          {
+            className: "max-w-fit w-full",
+            secret: x,
+            status: y ? "expired" : p ? "expiring" : "active"
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          g,
+          {
+            variant: "ghost",
+            onClick: () => r((f) => !f),
+            size: "icon",
+            children: n ? /* @__PURE__ */ e.jsx(ne, { size: 16 }) : /* @__PURE__ */ e.jsx(ie, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          g,
+          {
+            variant: "ghost",
+            onClick: () => l(x),
+            size: "icon",
+            children: a ? /* @__PURE__ */ e.jsx(L, { size: 16 }) : /* @__PURE__ */ e.jsx(re, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 mt-0.5 text-nowrap", children: [
+        c && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "Created ",
+          ct(c),
+          "."
+        ] }),
+        " ",
+        d && p && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expires in ",
+          h,
+          " ",
+          h === 1 ? "day" : "days",
+          "."
+        ] }),
+        d && y && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expired",
+          " ",
+          h === 0 ? "today." : `${h * -1} days ago.`
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: d && i && /* @__PURE__ */ e.jsxs(G, { children: [
+      /* @__PURE__ */ e.jsx(J, { asChild: !0, children: /* @__PURE__ */ e.jsx(g, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(je, { size: 16 }) }) }),
+      /* @__PURE__ */ e.jsxs(U, { children: [
+        /* @__PURE__ */ e.jsxs(W, { children: [
+          /* @__PURE__ */ e.jsx(X, { children: "Delete API Key" }),
+          /* @__PURE__ */ e.jsx(ce, { children: "Are you sure you want to delete this API key?" })
+        ] }),
+        /* @__PURE__ */ e.jsxs(V, { children: [
+          /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsx(g, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+            g,
+            {
+              onClick: () => {
+                i();
+              },
+              children: "Delete"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}, S = "https://api.zuploedge.com/v2/client", ut = async (t) => {
+  try {
+    return await t.json();
+  } catch {
+    return;
+  }
+}, z = async (t) => {
+  const i = t.headers.get("content-type");
+  if (!t.ok && i?.includes("application/problem+json")) {
+    const s = await ut(t);
+    if (s.type && s.title)
+      throw new Error(s.detail ?? s.title);
+  }
+}, ht = (t, i) => ({
+  deleteKey: async (s, n, r) => {
+    const a = new Request(
+      S + `/${t}/consumers/${s}/keys/${n}`,
       {
-        variant: "outline",
-        onClick: () => {
-          navigator.clipboard.writeText(t).then(() => {
-            a(!0), setTimeout(() => a(!1), 2e3);
-          });
-        },
-        size: "icon",
-        children: r ? /* @__PURE__ */ e.jsx(b, { size: 16 }) : /* @__PURE__ */ e.jsx(k, { size: 16 })
+        method: "DELETE"
       }
-    )
-  ] });
-}, $ = "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev", B = (t) => ({
-  deleteKey: async (n, i) => {
-    const r = new Request(t + `/v1/developer/api-keys/${n}`, {
-      method: "DELETE"
-    });
-    await i.signRequest(r);
-    const a = await fetch(r);
-    c(a.ok, "Failed to delete API key");
+    );
+    await r.signRequest(a);
+    const l = await fetch(a);
+    await z(l), P(l.ok, "Failed to delete API key");
   },
-  rollKey: async (n, i) => {
+  updateConsumer: async (s, n) => {
     const r = await fetch(
-      await i.signRequest(
-        new Request(t + `/v1/developer/api-keys/${n}/key`, {
-          method: "DELETE"
-        })
+      await n.signRequest(
+        new Request(
+          S + `/${t}/consumers/${s.id}`,
+          {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              label: s.label
+            })
+          }
+        )
       )
     );
-    c(r.ok, "Failed to delete API key");
+    await z(r), P(r.ok, "Failed to update API key description");
   },
-  createKey: async (n, i) => {
-    const r = new Request(t + "/v1/developer/api-keys", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(n)
-    });
-    await i.signRequest(r);
-    const a = await fetch(r);
-    c(a.ok, "Failed to create API key");
+  rollKey: async (s, n) => {
+    const r = await fetch(
+      await n.signRequest(
+        new Request(
+          S + `/${t}/consumers/${s}/roll-key`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({})
+          }
+        )
+      )
+    );
+    await z(r), P(r.ok, "Failed to delete API key");
   },
-  getKeys: async (n) => {
-    const i = new Request(t + "/v1/developer/api-keys");
-    await n.signRequest(i);
-    const r = await fetch(i);
-    return c(r.ok, "Failed to fetch API keys"), await r.json();
-  }
-}), re = (t) => t, ae = (t) => {
-  const n = "endpoint" in t ? t.endpoint : $, i = "getKeys" in t ? t : B(n);
+  getConsumers: async (s) => {
+    const n = new Request(
+      `${S}/${t}/consumers`
+    );
+    await s.signRequest(n);
+    const r = await fetch(n);
+    return await z(r), P(r.ok, "Failed to fetch API keys"), (await r.json()).data.map((l) => ({
+      id: l.id,
+      label: l.label || l.subject || "API Key",
+      apiKeys: l.apiKeys.data,
+      key: l.apiKeys.data.at(0)
+    }));
+  },
+  ...i
+}), St = (t) => t, zt = (t) => {
+  const i = "deploymentName" in t ? ht(t.deploymentName, t) : t;
   return {
     getProfileMenuItems: () => [
       {
         label: "API Keys",
         path: "/settings/api-keys",
         category: "middle",
-        icon: N
+        icon: ve
       }
     ],
-    getIdentities: async (r) => {
+    getIdentities: async (s) => {
       try {
-        return (await i.getKeys(r)).map((o) => ({
-          authorizeRequest: (s) => (s.headers.set("Authorization", `Bearer ${o.key}`), s),
-          id: o.id,
-          label: o.description ?? o.id
+        return (await i.getConsumers(s)).map((r) => ({
+          authorizeRequest: (a) => (a.headers.set(
+            "Authorization",
+            `Bearer ${r.apiKeys.at(0)?.key}`
+          ), a),
+          id: r.id,
+          label: r.label
         }));
       } catch {
         return [];
@@ -260,16 +807,12 @@ const V = ({ service: t }) => {
     },
     getRoutes: () => [
       {
-        element: /* @__PURE__ */ e.jsx(Q, {}),
-        errorElement: /* @__PURE__ */ e.jsx(S, {}),
+        element: /* @__PURE__ */ e.jsx(Ve, {}),
+        errorElement: /* @__PURE__ */ e.jsx(Ce, {}),
         children: [
           {
             path: "/settings/api-keys",
-            element: /* @__PURE__ */ e.jsx(_, { service: i })
-          },
-          {
-            path: "/settings/api-keys/new",
-            element: /* @__PURE__ */ e.jsx(V, { service: i })
+            element: /* @__PURE__ */ e.jsx(lt, { service: i })
           }
         ]
       }
@@ -277,7 +820,7 @@ const V = ({ service: t }) => {
   };
 };
 export {
-  ae as apiKeyPlugin,
-  re as createApiKeyService
+  zt as apiKeyPlugin,
+  St as createApiKeyService
 };
 //# sourceMappingURL=zudoku.plugin-api-keys.js.map