zudoku 0.0.0-fcb84d6 → 0.0.0-fdfe742

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

@@ -1,263 +1,569 @@
-import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as x, R as f } from "./SlotletProvider-DmqWiVFt.js";
-import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-a9rLgbP_.js";
-import { a as N, L as u, O as I } from "./index-DFN92YJN.js";
-import { u as h, a as E, b as S } from "./ZudokuContext-MRoel6bS.js";
-import { B as l, n as A } from "./index-_GxJ8hpM.js";
-import { D as C } from "./DeveloperHint-B_QCCafl.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-Y__eLG0x.js";
-function c(t, s) {
-  if (t)
-    return;
-  const i = typeof s == "function" ? s() : s;
-  throw new F(i ?? "Invariant failed");
-}
-class F extends Error {
-  constructor(s) {
-    super(s), this.name = "ZudokuError";
-  }
-}
-const L = ({ service: t }) => {
-  const s = h(), i = N(), n = g({
-    defaultValues: {
-      expiresOn: "30"
-    }
-  }), o = d({
-    mutationFn: ({ description: a, expiresOn: r }) => {
-      if (!t.createKey)
-        throw new Error("deleteKey not implemented");
-      const y = r !== "never" ? V(Number(r)) : void 0;
-      return t.createKey(
-        { description: a, expiresOn: y },
-        s
-      );
-    },
-    onSuccess: () => i("/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") }),
-          "Expiration",
-          /* @__PURE__ */ e.jsxs(
-            v,
-            {
-              onValueChange: (a) => n.setValue("expiresOn", a),
-              defaultValue: n.getValues("expiresOn"),
-              children: [
-                /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsx(b, {}) }),
-                /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsxs(K, { children: [
-                  [7, 30, 60, 90].map((a) => /* @__PURE__ */ e.jsxs(m, { value: String(a), children: [
-                    a,
-                    " days"
-                  ] }, a)),
-                  /* @__PURE__ */ e.jsx(m, { 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" }) })
-          ] })
-        ] })
-      }
-    )
-  ] }) : null;
-}, V = (t) => {
-  const s = /* @__PURE__ */ new Date();
-  return s.setDate(s.getDate() + t), s.toISOString();
-}, M = () => {
-  const t = A();
-  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: [
+import { j as e } from "./jsx-runtime-C5mzlN2N.js";
+import { CheckIcon as _, XIcon as se, PencilLineIcon as ne, RotateCwIcon as ie, EyeOffIcon as re, EyeIcon as ae, CopyIcon as oe, TrashIcon as le, KeyRoundIcon as de } from "lucide-react";
+import { D as ce, S as F, R as ue } from "./Slot-xguyqKKU.js";
+import { i as P } from "./invariant-DAFpPywt.js";
+import { O as he, L as Q } from "./chunk-DQRVZFIR-BblmKnHy.js";
+import { i as fe, k as pe, e as xe, d as me } from "./hook-k7PfUIsj.js";
+import { Button as j } from "./ui/Button.js";
+import { u as z } from "./useMutation-CZSmsIGW.js";
+import * as S from "react";
+import ye, { createContext as q, useRef as D, useLayoutEffect as ge, useEffect as B, useId as L, useContext as O, useInsertionEffect as je, useMemo as M, useCallback as Ce, Children as ve, isValidElement as we, useState as E } from "react";
+import { C as ke, a as be } from "./Card-DPhGbYUM.js";
+import { D as U, e as W, a as X, b as Y, c as G, d as J, f as V, g as K } from "./Dialog-B53OMCvW.js";
+import { Input as Ee } from "./ui/Input.js";
+import { c as R } from "./cn-wvCW-ho6.js";
+const De = () => {
+  const t = fe();
+  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(he, {}) : 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(C, { className: "max-w-[600px]", children: [
+    /* @__PURE__ */ e.jsx(j, { 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(ce, { 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 s = h(), i = E(), { data: n } = S({
-    queryFn: () => t.getKeys(s),
+}, Pe = q({});
+function Z(t) {
+  const i = D(null);
+  return i.current === null && (i.current = t()), i.current;
+}
+const Ie = typeof window < "u", Ne = Ie ? ge : B, ee = /* @__PURE__ */ q(null);
+function Ke(t) {
+  return typeof t == "object" && t !== null;
+}
+function Re(t) {
+  return Ke(t) && "offsetHeight" in t;
+}
+const Ae = q({
+  transformPagePoint: (t) => t,
+  isStatic: !1,
+  reducedMotion: "never"
+});
+class Te extends S.Component {
+  getSnapshotBeforeUpdate(i) {
+    const s = this.props.childRef.current;
+    if (s && i.isPresent && !this.props.isPresent) {
+      const n = s.offsetParent, o = Re(n) && n.offsetWidth || 0, r = this.props.sizeRef.current;
+      r.height = s.offsetHeight || 0, r.width = s.offsetWidth || 0, r.top = s.offsetTop, r.left = s.offsetLeft, r.right = o - r.width - r.left;
+    }
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+}
+function ze({ children: t, isPresent: i, anchorX: s }) {
+  const n = L(), o = D(null), r = D({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0
+  }), { nonce: u } = O(Ae);
+  return je(() => {
+    const { width: m, height: h, top: x, left: d, right: c } = r.current;
+    if (i || !o.current || !m || !h)
+      return;
+    const y = s === "left" ? `left: ${d}` : `right: ${c}`;
+    o.current.dataset.motionPopId = n;
+    const f = document.createElement("style");
+    return u && (f.nonce = u), document.head.appendChild(f), f.sheet && f.sheet.insertRule(`
+          [data-motion-pop-id="${n}"] {
+            position: absolute !important;
+            width: ${m}px !important;
+            height: ${h}px !important;
+            ${y}px !important;
+            top: ${x}px !important;
+          }
+        `), () => {
+      document.head.contains(f) && document.head.removeChild(f);
+    };
+  }, [i]), e.jsx(Te, { isPresent: i, childRef: o, sizeRef: r, children: S.cloneElement(t, { ref: o }) });
+}
+const Me = ({ children: t, initial: i, isPresent: s, onExitComplete: n, custom: o, presenceAffectsLayout: r, mode: u, anchorX: m }) => {
+  const h = Z(Se), x = L();
+  let d = !0, c = M(() => (d = !1, {
+    id: x,
+    initial: i,
+    isPresent: s,
+    custom: o,
+    onExitComplete: (y) => {
+      h.set(y, !0);
+      for (const f of h.values())
+        if (!f)
+          return;
+      n && n();
+    },
+    register: (y) => (h.set(y, !1), () => h.delete(y))
+  }), [s, h, n]);
+  return r && d && (c = { ...c }), M(() => {
+    h.forEach((y, f) => h.set(f, !1));
+  }, [s]), S.useEffect(() => {
+    !s && !h.size && n && n();
+  }, [s]), u === "popLayout" && (t = e.jsx(ze, { isPresent: s, anchorX: m, children: t })), e.jsx(ee.Provider, { value: c, children: t });
+};
+function Se() {
+  return /* @__PURE__ */ new Map();
+}
+function qe(t = !0) {
+  const i = O(ee);
+  if (i === null)
+    return [!0, null];
+  const { isPresent: s, onExitComplete: n, register: o } = i, r = L();
+  B(() => {
+    if (t)
+      return o(r);
+  }, [t]);
+  const u = Ce(() => t && n && n(r), [r, n, t]);
+  return !s && n ? [!1, u] : [!0];
+}
+const I = (t) => t.key || "";
+function H(t) {
+  const i = [];
+  return ve.forEach(t, (s) => {
+    we(s) && i.push(s);
+  }), i;
+}
+const Le = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presenceAffectsLayout: o = !0, mode: r = "sync", propagate: u = !1, anchorX: m = "left" }) => {
+  const [h, x] = qe(u), d = M(() => H(t), [t]), c = u && !h ? [] : d.map(I), y = D(!0), f = D(d), k = Z(() => /* @__PURE__ */ new Map()), [a, l] = E(d), [p, v] = E(d);
+  Ne(() => {
+    y.current = !1, f.current = d;
+    for (let w = 0; w < p.length; w++) {
+      const g = I(p[w]);
+      c.includes(g) ? k.delete(g) : k.get(g) !== !0 && k.set(g, !1);
+    }
+  }, [p, c.length, c.join("-")]);
+  const C = [];
+  if (d !== a) {
+    let w = [...d];
+    for (let g = 0; g < p.length; g++) {
+      const b = p[g], T = I(b);
+      c.includes(T) || (w.splice(g, 0, b), C.push(b));
+    }
+    return r === "wait" && C.length && (w = C), v(H(w)), l(d), null;
+  }
+  process.env.NODE_ENV !== "production" && r === "wait" && p.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: A } = O(Pe);
+  return e.jsx(e.Fragment, { children: p.map((w) => {
+    const g = I(w), b = u && !h ? !1 : d === p || c.includes(g), T = () => {
+      if (k.has(g))
+        k.set(g, !0);
+      else
+        return;
+      let $ = !0;
+      k.forEach((te) => {
+        te || ($ = !1);
+      }), $ && (A?.(), v(f.current), u && x?.(), n && n());
+    };
+    return e.jsx(Me, { isPresent: b, initial: !y.current || s ? void 0 : !1, custom: i, presenceAffectsLayout: o, mode: r, onExitComplete: b ? void 0 : T, anchorX: m, children: w }, g);
+  }) });
+}, Oe = ({ service: t }) => {
+  const i = pe(), s = xe(), [n, o] = E(
+    null
+  ), [r, u] = E(""), { data: m, isFetching: h } = me({
+    queryFn: () => t.getConsumers(i),
     queryKey: ["api-keys"],
     retry: !1
-  }), o = d({
-    mutationFn: (r) => {
+  }), x = z({
+    mutationFn: ({
+      consumerId: a,
+      keyId: l
+    }) => {
       if (!t.deleteKey)
         throw new Error("deleteKey not implemented");
-      return t.deleteKey(r, s);
+      return t.deleteKey(a, l, i);
+    },
+    onMutate: async ({ consumerId: a, keyId: l }) => {
+      await s.cancelQueries({ queryKey: ["api-keys"] });
+      const p = s.getQueryData([
+        "api-keys"
+      ]);
+      return s.setQueryData(["api-keys"], (v) => v && v.map((C) => C.id === a ? {
+        ...C,
+        apiKeys: C.apiKeys.filter((A) => A.id !== l)
+      } : C)), { previousData: p };
+    },
+    onError: (a, l, p) => {
+      p?.previousData && s.setQueryData(["api-keys"], p.previousData);
     },
     onSuccess: () => {
-      i.invalidateQueries({ queryKey: ["api-keys"] });
+      s.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), a = d({
-    mutationFn: (r) => {
+  }), d = z({
+    mutationFn: ({
+      consumerId: a,
+      label: l
+    }) => {
+      if (!t.updateConsumer)
+        throw new Error("updateConsumer not implemented");
+      return t.updateConsumer({ id: a, label: l }, i);
+    },
+    onMutate: async ({ consumerId: a, label: l }) => {
+      await s.cancelQueries({ queryKey: ["api-keys"] });
+      const p = s.getQueryData(["api-keys"]);
+      return s.setQueryData(["api-keys"], (v) => v && v.map((C) => C.id === a ? {
+        ...C,
+        label: l
+      } : C)), { previousData: p };
+    },
+    onError: (a, l, p) => {
+      p?.previousData && s.setQueryData(["api-keys"], p.previousData);
+    },
+    onSuccess: () => {
+      s.invalidateQueries({ queryKey: ["api-keys"] });
+    }
+  }), c = z({
+    mutationFn: (a) => {
       if (!t.rollKey)
         throw new Error("rollKey not implemented");
-      return t.rollKey(r, s);
+      return t.rollKey(a, 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"] })
+  }), y = (a, l) => {
+    o(a), u(l);
+  }, f = (a) => {
+    r.trim() && d.mutate({
+      consumerId: a,
+      label: r.trim()
+    }), o(null), u("");
+  }, k = () => {
+    o(null), u("");
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-lg h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
+    /* @__PURE__ */ e.jsx(F.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(j, { asChild: !0, children: /* @__PURE__ */ e.jsx(Q, { to: "/settings/api-keys/new", children: "Create API Key" }) })
     ] }),
-    /* @__PURE__ */ e.jsx(x, { 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.jsx("p", { children: "Create, manage, and monitor your API keys" }),
+    /* @__PURE__ */ e.jsx(F.Target, { name: "api-keys-list-page-before-keys" }),
+    /* @__PURE__ */ e.jsx("div", { className: "h-8" }),
+    /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-8", children: m.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(j, { asChild: !0, variant: "outline", children: /* @__PURE__ */ e.jsx(Q, { to: "/settings/api-keys/new", children: "Create API Key" }) })
     ] }) : /* @__PURE__ */ e.jsx(
       "ul",
       {
-        className: T(
-          "grid grid-cols-1 rounded border divide-y divide-border",
-          "lg:grid-cols-[minmax(250px,min-content)_1fr_min-content]"
+        className: R(
+          "grid grid-cols-1 divide-y divide-border col-span-6",
+          "lg:grid-cols-[1fr_min-content]"
         ),
-        children: n.map((r) => /* @__PURE__ */ e.jsxs(
-          "li",
+        children: m.map((a) => /* @__PURE__ */ e.jsxs(
+          ke,
           {
-            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: [
-                r.description ?? r.id,
-                /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
-                  r.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                    "Created on ",
-                    new Date(r.createdOn).toLocaleDateString()
+              /* @__PURE__ */ e.jsxs(be, { 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 === a.id ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                      /* @__PURE__ */ e.jsx(
+                        Ee,
+                        {
+                          maxLength: 32,
+                          value: r,
+                          onChange: (l) => u(l.target.value),
+                          onKeyDown: (l) => {
+                            l.key === "Enter" ? f(a.id) : l.key === "Escape" && k();
+                          },
+                          className: "text-lg font-medium",
+                          autoFocus: !0
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+                        /* @__PURE__ */ e.jsx(
+                          j,
+                          {
+                            size: "icon",
+                            variant: "ghost",
+                            onClick: () => f(a.id),
+                            disabled: !r.trim(),
+                            children: /* @__PURE__ */ e.jsx(_, { size: 16 })
+                          }
+                        ),
+                        /* @__PURE__ */ e.jsx(
+                          j,
+                          {
+                            size: "icon",
+                            variant: "ghost",
+                            onClick: k,
+                            children: /* @__PURE__ */ e.jsx(se, { size: 16 })
+                          }
+                        )
+                      ] })
+                    ] }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: a.label }),
+                    /* @__PURE__ */ e.jsx("div", { className: "text-muted-foreground text-xs", children: a.createdOn })
                   ] }),
-                  r.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                    "Expires on ",
-                    new Date(r.expiresOn).toLocaleDateString()
+                  /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
+                    a.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                      "Created on",
+                      " ",
+                      new Date(a.createdOn).toLocaleDateString()
+                    ] }),
+                    a.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                      "Expires on",
+                      " ",
+                      new Date(a.expiresOn).toLocaleDateString()
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e.jsxs("div", { className: "flex justify-end", children: [
+                  t.updateConsumer && /* @__PURE__ */ e.jsx(
+                    j,
+                    {
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: () => y(a.id, a.label),
+                      className: R(
+                        n === a.id && "opacity-0! pointer-events-none"
+                      ),
+                      disabled: n === a.id,
+                      children: /* @__PURE__ */ e.jsx(ne, { size: 16 })
+                    }
+                  ),
+                  t.rollKey && /* @__PURE__ */ e.jsxs(U, { children: [
+                    /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                      j,
+                      {
+                        size: "icon",
+                        title: "Roll this key",
+                        variant: "ghost",
+                        disabled: c.isPending,
+                        className: c.isPending ? "animate-spin" : void 0,
+                        children: /* @__PURE__ */ e.jsx(ie, { size: 16 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e.jsxs(X, { children: [
+                      /* @__PURE__ */ e.jsxs(Y, { children: [
+                        /* @__PURE__ */ e.jsx(G, { children: "Roll API Key" }),
+                        /* @__PURE__ */ e.jsx(J, { children: "Are you sure you want to roll this API key?" })
+                      ] }),
+                      /* @__PURE__ */ e.jsxs(V, { children: [
+                        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(j, { variant: "outline", children: "Cancel" }) }),
+                        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                          j,
+                          {
+                            onClick: () => {
+                              c.mutate(a.id);
+                            },
+                            children: "Roll Key"
+                          }
+                        ) })
+                      ] })
+                    ] })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ e.jsx("div", { className: "items-center flex lg:justify-center", children: /* @__PURE__ */ e.jsx(Q, { apiKey: r.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(Le, { children: a.apiKeys.map((l) => /* @__PURE__ */ e.jsxs(ye.Fragment, { children: [
+                /* @__PURE__ */ e.jsx(
+                  Fe,
                   {
-                    size: "icon",
-                    title: "Roll this key",
-                    variant: "ghost",
-                    onClick: () => {
-                      confirm("Do you want to roll this key?") && a.mutate(r.id);
+                    apiKey: l,
+                    onDeleteKey: () => {
+                      x.mutate({
+                        consumerId: a.id,
+                        keyId: l.id
+                      });
                     },
-                    children: /* @__PURE__ */ e.jsx(P, { size: 16 })
+                    className: x.variables?.keyId === l.id && (x.isPending || h) ? "opacity-10!" : void 0
                   }
                 ),
-                t.deleteKey && /* @__PURE__ */ e.jsx(
-                  l,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    onClick: () => {
-                      confirm("Do you want to delete this key?") && o.mutate(r.id);
-                    },
-                    disabled: o.isPending,
-                    children: /* @__PURE__ */ e.jsx(D, { size: 16 })
-                  }
-                )
-              ] })
+                /* @__PURE__ */ e.jsx("div", { className: "col-span-full h-px bg-border" })
+              ] }, l.id)) }) })
             ]
           },
-          r.id
+          a.id
         ))
       }
-    )
+    ) })
   ] });
-}, Q = ({ apiKey: t }) => {
-  const [s, i] = 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,
-      {
-        variant: "outline",
-        onClick: () => i((a) => !a),
-        size: "icon",
-        children: s ? /* @__PURE__ */ e.jsx(R, { size: 16 }) : /* @__PURE__ */ e.jsx(q, { size: 16 })
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      l,
+}, $e = (t) => {
+  const i = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((i.getTime() - s.getTime()) / 1e3), o = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return n < 60 ? o.format(-n, "second") : n < 3600 ? o.format(-Math.floor(n / 60), "minute") : n < 86400 ? o.format(-Math.floor(n / 3600), "hour") : n < 2592e3 ? o.format(-Math.floor(n / 86400), "day") : n < 31536e3 ? o.format(-Math.floor(n / 2592e3), "month") : o.format(-Math.floor(n / 31536e3), "year");
+}, Fe = ({
+  apiKey: t,
+  onDeleteKey: i,
+  className: s
+}) => {
+  const [n, o] = E(!1), [r, u] = E(!1), { key: m, createdOn: h, expiresOn: x } = t, d = x && new Date(x) < /* @__PURE__ */ new Date(), c = x ? Math.ceil(
+    (new Date(x).getTime() - (/* @__PURE__ */ new Date()).getTime()) / (1e3 * 60 * 60 * 24)
+  ) : 1 / 0, y = c <= 7 && !d;
+  return /* @__PURE__ */ e.jsxs("div", { className: R("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-fit px-1", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "font-mono truncate h-9 items-center flex px-2 text-xs gap-2", children: [
+          /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: R(
+                "rounded-full w-2 h-2 bg-emerald-400 mr-2",
+                (y || d) && "bg-neutral-200"
+              )
+            }
+          ),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            /* @__PURE__ */ e.jsx("span", { className: n ? "" : "opacity-20", children: n ? m.slice(0, -5) : "**** ".repeat(m.slice(0, -5).length / 5) + "*".repeat(m.slice(0, -5).length % 5) }),
+            /* @__PURE__ */ e.jsx("span", { children: m.slice(-5) })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          j,
+          {
+            variant: "ghost",
+            onClick: () => o((f) => !f),
+            size: "icon",
+            children: n ? /* @__PURE__ */ e.jsx(re, { size: 16 }) : /* @__PURE__ */ e.jsx(ae, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          j,
+          {
+            variant: "ghost",
+            onClick: () => {
+              navigator.clipboard.writeText(m).then(() => {
+                u(!0), setTimeout(() => u(!1), 2e3);
+              });
+            },
+            size: "icon",
+            children: r ? /* @__PURE__ */ e.jsx(_, { size: 16 }) : /* @__PURE__ */ e.jsx(oe, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 mt-0.5 text-nowrap", children: [
+        h && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "Created ",
+          $e(h),
+          "."
+        ] }),
+        " ",
+        x && y && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expires in ",
+          c,
+          " ",
+          c === 1 ? "day" : "days",
+          "."
+        ] }),
+        x && d && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expired",
+          " ",
+          c === 0 ? "today." : `${c * -1} days ago.`
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: d && i && /* @__PURE__ */ e.jsxs(U, { children: [
+      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(j, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(le, { size: 16 }) }) }),
+      /* @__PURE__ */ e.jsxs(X, { children: [
+        /* @__PURE__ */ e.jsxs(Y, { children: [
+          /* @__PURE__ */ e.jsx(G, { children: "Delete API Key" }),
+          /* @__PURE__ */ e.jsx(J, { children: "Are you sure you want to delete this API key?" })
+        ] }),
+        /* @__PURE__ */ e.jsxs(V, { children: [
+          /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(j, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+            j,
+            {
+              onClick: () => {
+                i();
+              },
+              children: "Delete"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}, N = "https://api.zuploedge.com/v2/client", Qe = (t) => ({
+  deleteKey: async (i, s, n) => {
+    const o = new Request(
+      N + `/${t}/consumers/${i}/keys/${s}`,
       {
-        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 })
+        method: "DELETE"
       }
-    )
-  ] });
-}, Z = "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev", B = (t) => ({
-  deleteKey: async (s, i) => {
-    const n = new Request(t + `/v1/developer/api-keys/${s}`, {
-      method: "DELETE"
-    });
-    await i.signRequest(n);
-    const o = await fetch(n);
-    c(o.ok, "Failed to delete API key");
+    );
+    await n.signRequest(o);
+    const r = await fetch(o);
+    P(r.ok, "Failed to delete API key");
   },
-  rollKey: async (s, i) => {
+  updateConsumer: async (i, s) => {
     const n = await fetch(
-      await i.signRequest(
-        new Request(t + `/v1/developer/api-keys/${s}/key`, {
-          method: "DELETE"
-        })
+      await s.signRequest(
+        new Request(
+          N + `/${t}/consumers/${i.id}`,
+          {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              label: i.label
+            })
+          }
+        )
       )
     );
-    c(n.ok, "Failed to delete API key");
+    P(n.ok, "Failed to update API key description");
   },
-  createKey: async (s, i) => {
-    const n = new Request(t + "/v1/developer/api-keys", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(s)
-    });
-    await i.signRequest(n);
-    const o = await fetch(n);
-    c(o.ok, "Failed to create API key");
+  rollKey: async (i, s) => {
+    const n = await fetch(
+      await s.signRequest(
+        new Request(
+          N + `/${t}/consumers/${i}/roll-key`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              expiresOn: /* @__PURE__ */ new Date()
+            })
+          }
+        )
+      )
+    );
+    P(n.ok, "Failed to delete API key");
   },
-  getKeys: async (s) => {
-    const i = new Request(t + "/v1/developer/api-keys");
-    await s.signRequest(i);
-    const n = await fetch(i);
-    return c(n.ok, "Failed to fetch API keys"), await n.json();
+  getConsumers: async (i) => {
+    const s = new Request(
+      N + `/${t}/consumers`
+    );
+    await i.signRequest(s);
+    const n = await fetch(s);
+    return P(n.ok, "Failed to fetch API keys"), (await n.json()).data.map((r) => ({
+      id: r.id,
+      label: r.label || "API Key",
+      apiKeys: r.apiKeys.data,
+      key: r.apiKeys.data.at(0)
+    }));
   }
-}), se = (t) => {
-  const s = "endpoint" in t ? t.endpoint : Z, i = "getKeys" in t ? t : B(s);
+}), st = (t) => t, nt = (t) => {
+  const i = "deploymentName" in t ? Qe(t.deploymentName) : t;
   return {
     getProfileMenuItems: () => [
       {
         label: "API Keys",
-        path: "/settings/api-keys"
+        path: "/settings/api-keys",
+        category: "middle",
+        icon: de
       }
     ],
-    getIdentities: async (n) => {
+    getIdentities: async (s) => {
       try {
-        return (await i.getKeys(n)).map((a) => ({
-          authorizeRequest: (r) => (r.headers.set("Authorization", `Bearer ${a.key}`), r),
-          id: a.id,
-          label: a.description ?? a.id
+        return (await i.getConsumers(s)).map((o) => ({
+          authorizeRequest: (r) => (r.headers.set(
+            "Authorization",
+            `Bearer ${o.apiKeys.at(0)?.key}`
+          ), r),
+          id: o.id,
+          label: o.description ?? o.id
         }));
       } catch {
         return [];
@@ -265,23 +571,24 @@ const L = ({ service: t }) => {
     },
     getRoutes: () => [
       {
-        element: /* @__PURE__ */ e.jsx(M, {}),
-        errorElement: /* @__PURE__ */ e.jsx(f, {}),
+        element: /* @__PURE__ */ e.jsx(De, {}),
+        errorElement: /* @__PURE__ */ e.jsx(ue, {}),
         children: [
           {
             path: "/settings/api-keys",
-            element: /* @__PURE__ */ e.jsx(_, { service: i })
-          },
-          {
-            path: "/settings/api-keys/new",
-            element: /* @__PURE__ */ e.jsx(L, { service: i })
+            element: /* @__PURE__ */ e.jsx(Oe, { service: i })
           }
+          // {
+          //   path: "/settings/api-keys/new",
+          //   element: <CreateApiKey service={service} />,
+          // },
         ]
       }
     ]
   };
 };
 export {
-  se as apiKeyPlugin
+  nt as apiKeyPlugin,
+  st as createApiKeyService
 };
 //# sourceMappingURL=zudoku.plugin-api-keys.js.map