@stackframe/stack 2.8.2 → 2.8.3

package/dist/esm/components/api-key-table.js

@@ -0,0 +1,125 @@
+"use client";
+"use client";
+
+// src/components/api-key-table.tsx
+import { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from "@stackframe/stack-ui";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function toolbarRender(table) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchToolbarItem, { table, placeholder: "Search table" }),
+    /* @__PURE__ */ jsx(
+      DataTableFacetedFilter,
+      {
+        column: table.getColumn("status"),
+        title: "Status",
+        options: ["valid", "expired", "revoked"].map((provider) => ({
+          value: provider,
+          label: provider
+        }))
+      }
+    )
+  ] });
+}
+function RevokeDialog(props) {
+  return /* @__PURE__ */ jsx(
+    ActionDialog,
+    {
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      title: "Revoke API Key",
+      danger: true,
+      cancelButton: true,
+      okButton: { label: "Revoke Key", onClick: async () => {
+        await props.apiKey.revoke();
+      } },
+      confirmText: "I understand this will unlink all the apps using this API key",
+      children: `Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`
+    }
+  );
+}
+function Actions({ row }) {
+  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RevokeDialog, { apiKey: row.original, open: isRevokeModalOpen, onOpenChange: setIsRevokeModalOpen }),
+    /* @__PURE__ */ jsx(
+      ActionCell,
+      {
+        invisible: row.original.status !== "valid",
+        items: [{
+          item: "Revoke",
+          danger: true,
+          onClick: () => setIsRevokeModalOpen(true)
+        }]
+      }
+    )
+  ] });
+}
+var columns = [
+  {
+    accessorKey: "description",
+    header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, { column, columnTitle: "Description" }),
+    cell: ({ row }) => /* @__PURE__ */ jsx(TextCell, { size: 100, children: row.original.description })
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, { column, columnTitle: "Status" }),
+    cell: ({ row }) => /* @__PURE__ */ jsx(BadgeCell, { badges: [row.original.status] }),
+    filterFn: standardFilterFn
+  },
+  {
+    id: "value",
+    accessorFn: (row) => row.value.lastFour,
+    header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, { column, columnTitle: "Client Key" }),
+    cell: ({ row }) => /* @__PURE__ */ jsxs(TextCell, { children: [
+      "*******",
+      row.original.value.lastFour
+    ] }),
+    enableSorting: false
+  },
+  {
+    accessorKey: "expiresAt",
+    header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, { column, columnTitle: "Expires At" }),
+    cell: ({ row }) => {
+      if (row.original.status === "revoked") return /* @__PURE__ */ jsx(TextCell, { children: "-" });
+      return row.original.expiresAt ? /* @__PURE__ */ jsx(DateCell, { date: row.original.expiresAt, ignoreAfterYears: 50 }) : /* @__PURE__ */ jsx(TextCell, { children: "Never" });
+    }
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, { column, columnTitle: "Created At" }),
+    cell: ({ row }) => /* @__PURE__ */ jsx(DateCell, { date: row.original.createdAt, ignoreAfterYears: 50 })
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => /* @__PURE__ */ jsx(Actions, { row })
+  }
+];
+function ApiKeyTable(props) {
+  const extendedApiKeys = useMemo(() => {
+    const keys = props.apiKeys.map((apiKey) => ({
+      ...apiKey,
+      status: { "valid": "valid", "manually-revoked": "revoked", "expired": "expired" }[apiKey.whyInvalid() || "valid"]
+    }));
+    return keys.sort((a, b) => {
+      if (a.status === b.status) {
+        return a.createdAt < b.createdAt ? 1 : -1;
+      }
+      return a.status === "valid" ? -1 : 1;
+    });
+  }, [props.apiKeys]);
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      data: extendedApiKeys,
+      columns,
+      toolbarRender,
+      defaultColumnFilters: [],
+      defaultSorting: []
+    }
+  );
+}
+export {
+  ApiKeyTable
+};
+//# sourceMappingURL=api-key-table.js.map

package/dist/esm/components/api-key-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/api-key-table.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from \"@stackframe/stack-ui\";\nimport { ColumnDef, Row, Table } from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { ApiKey } from \"../lib/stack-app/api-keys\";\n\ntype ExtendedApiKey = ApiKey & {\n  status: 'valid' | 'expired' | 'revoked',\n};\n\nfunction toolbarRender<TData>(table: Table<TData>) {\n  return (\n    <>\n      <SearchToolbarItem table={table} placeholder=\"Search table\" />\n      <DataTableFacetedFilter\n        column={table.getColumn(\"status\")}\n        title=\"Status\"\n        options={['valid', 'expired', 'revoked'].map((provider) => ({\n          value: provider,\n          label: provider,\n        }))}\n      />\n    </>\n  );\n}\n\nfunction RevokeDialog(props: {\n  apiKey: ExtendedApiKey,\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n}) {\n  return <ActionDialog\n    open={props.open}\n    onOpenChange={props.onOpenChange}\n    title=\"Revoke API Key\"\n    danger\n    cancelButton\n    okButton={{ label: \"Revoke Key\", onClick: async () => { await props.apiKey.revoke(); } }}\n    confirmText=\"I understand this will unlink all the apps using this API key\"\n  >\n    {`Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`}\n  </ActionDialog>;\n}\n\nfunction Actions({ row }: { row: Row<ExtendedApiKey> }) {\n  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n  return (\n    <>\n      <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />\n      <ActionCell\n        invisible={row.original.status !== 'valid'}\n        items={[{\n          item: \"Revoke\",\n          danger: true,\n          onClick: () => setIsRevokeModalOpen(true),\n        }]}\n      />\n    </>\n  );\n}\n\nconst columns: ColumnDef<ExtendedApiKey>[] =  [\n  {\n    accessorKey: \"description\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Description\" />,\n    cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,\n  },\n  {\n    accessorKey: \"status\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Status\" />,\n    cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,\n    filterFn: standardFilterFn,\n  },\n  {\n    id: \"value\",\n    accessorFn: (row) => row.value.lastFour,\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Client Key\" />,\n    cell: ({ row }) => <TextCell>*******{row.original.value.lastFour}</TextCell>,\n    enableSorting: false,\n  },\n  {\n    accessorKey: \"expiresAt\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Expires At\" />,\n    cell: ({ row }) => {\n      if (row.original.status === 'revoked') return <TextCell>-</TextCell>;\n      return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;\n    },\n  },\n  {\n    accessorKey: \"createdAt\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Created At\" />,\n    cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <Actions row={row} />,\n  },\n];\n\nexport function ApiKeyTable(props: { apiKeys: ApiKey[] }) {\n  const extendedApiKeys = useMemo(() => {\n    const keys = props.apiKeys.map((apiKey) => ({\n      ...apiKey,\n      status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() || 'valid'],\n    } satisfies ExtendedApiKey));\n    // first sort based on status, then by createdAt\n    return keys.sort((a, b) => {\n      if (a.status === b.status) {\n        return a.createdAt < b.createdAt ? 1 : -1;\n      }\n      return a.status === 'valid' ? -1 : 1;\n    });\n  }, [props.apiKeys]);\n\n  return <DataTable\n    data={extendedApiKeys}\n    columns={columns}\n    toolbarRender={toolbarRender}\n    defaultColumnFilters={[]}\n    defaultSorting={[]}\n  />;\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/account-settings.js

@@ -10,7 +10,7 @@ import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-
 import { passwordSchema as schemaFieldsPasswordSchema, strictEmailSchema, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
 import { fromNow } from "@stackframe/stack-shared/dist/utils/dates";
-import { captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { StackAssertionError, captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, Badge, Button, Input, Label, PasswordInput, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
 import { Edit, Trash, icons } from "lucide-react";
@@ -19,6 +19,8 @@ import { Suspense, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { MessageCard, useStackApp, useUser } from "..";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../components/api-key-dialogs";
+import { ApiKeyTable } from "../components/api-key-table";
 import { FormWarningText } from "../components/elements/form-warning";
 import { MaybeFullPage } from "../components/elements/maybe-full-page";
 import { SidebarLayout } from "../components/elements/sidebar-layout";
@@ -62,6 +64,13 @@ function AccountSettings(props) {
           icon: /* @__PURE__ */ jsx(Icon, { name: "Monitor" }),
           content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ActiveSessionsPageSkeleton, {}), children: /* @__PURE__ */ jsx(ActiveSessionsPage, {}) })
         },
+        ...project.config.allowUserApiKeys ? [{
+          title: t("API Keys"),
+          type: "item",
+          id: "api-keys",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "Key" }),
+          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ApiKeysPageSkeleton, {}), children: /* @__PURE__ */ jsx(ApiKeysPage, {}) })
+        }] : [],
         {
           title: t("Settings"),
           type: "item",
@@ -95,14 +104,14 @@ function AccountSettings(props) {
           ] }),
           type: "item",
           id: `team-${team.id}`,
-          content: /* @__PURE__ */ jsx(TeamPage, { team })
+          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(TeamPageSkeleton, {}), children: /* @__PURE__ */ jsx(TeamPage, { team }) })
         })),
         ...project.config.clientTeamCreationEnabled ? [{
           title: t("Create a team"),
           icon: /* @__PURE__ */ jsx(Icon, { name: "CirclePlus" }),
           type: "item",
           id: "team-creation",
-          content: /* @__PURE__ */ jsx(TeamCreation, {})
+          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(TeamCreationSkeleton, {}), children: /* @__PURE__ */ jsx(TeamCreation, {}) })
         }] : []
       ].filter((p) => p.type === "divider" || p.content),
       title: t("Account Settings")
@@ -124,6 +133,88 @@ function Section(props) {
 function PageLayout(props) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: props.children });
 }
+function ApiKeysPage() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const apiKeys = user.useApiKeys();
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState(null);
+  const CreateDialog = CreateApiKeyDialog;
+  const ShowDialog = ShowApiKeyDialog;
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") }),
+    /* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
+    /* @__PURE__ */ jsx(
+      CreateDialog,
+      {
+        open: isNewApiKeyDialogOpen,
+        onOpenChange: setIsNewApiKeyDialogOpen,
+        onKeyCreated: setReturnedApiKey,
+        createApiKey: async (data) => {
+          const apiKey = await user.createApiKey(data);
+          return apiKey;
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ShowDialog,
+      {
+        apiKey: returnedApiKey,
+        onClose: () => setReturnedApiKey(null)
+      }
+    )
+  ] });
+}
+function TeamApiKeysSection(props) {
+  const user = useUser({ or: "redirect" });
+  const team = user.useTeam(props.team.id);
+  if (!team) {
+    throw new StackAssertionError("Team not found");
+  }
+  const manageApiKeysPermission = user.usePermission(props.team, "$manage_api_keys");
+  if (!manageApiKeysPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(TeamApiKeysSectionInner, { team: props.team });
+}
+function TeamApiKeysSectionInner(props) {
+  const { t } = useTranslation();
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState(null);
+  const apiKeys = props.team.useApiKeys();
+  const CreateDialog = CreateApiKeyDialog;
+  const ShowDialog = ShowApiKeyDialog;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("API Keys"),
+        description: t("API keys grant programmatic access to your team."),
+        children: /* @__PURE__ */ jsx(Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") })
+      }
+    ),
+    /* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
+    /* @__PURE__ */ jsx(
+      CreateDialog,
+      {
+        open: isNewApiKeyDialogOpen,
+        onOpenChange: setIsNewApiKeyDialogOpen,
+        onKeyCreated: setReturnedApiKey,
+        createApiKey: async (data) => {
+          const apiKey = await props.team.createApiKey(data);
+          return apiKey;
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ShowDialog,
+      {
+        apiKey: returnedApiKey,
+        onClose: () => setReturnedApiKey(null)
+      }
+    )
+  ] });
+}
 function ProfilePage() {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
@@ -801,12 +892,13 @@ function SignOutSection() {
 }
 function TeamPage(props) {
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(TeamUserProfileSection, { team: props.team }),
-    /* @__PURE__ */ jsx(MemberListSection, { team: props.team }),
-    /* @__PURE__ */ jsx(MemberInvitationSection, { team: props.team }),
-    /* @__PURE__ */ jsx(TeamProfileImageSection, { team: props.team }),
-    /* @__PURE__ */ jsx(TeamDisplayNameSection, { team: props.team }),
-    /* @__PURE__ */ jsx(LeaveTeamSection, { team: props.team })
+    /* @__PURE__ */ jsx(TeamUserProfileSection, { team: props.team }, `user-profile-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamProfileImageSection, { team: props.team }, `profile-image-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamDisplayNameSection, { team: props.team }, `display-name-${props.team.id}`),
+    /* @__PURE__ */ jsx(MemberListSection, { team: props.team }, `member-list-${props.team.id}`),
+    /* @__PURE__ */ jsx(MemberInvitationSection, { team: props.team }, `member-invitation-${props.team.id}`),
+    /* @__PURE__ */ jsx(TeamApiKeysSection, { team: props.team }, `api-keys-${props.team.id}`),
+    /* @__PURE__ */ jsx(LeaveTeamSection, { team: props.team }, `leave-team-${props.team.id}`)
   ] });
 }
 function LeaveTeamSection(props) {
@@ -938,11 +1030,14 @@ function MemberInvitationsSectionInvitationsList(props) {
       /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]", children: t("Expires") }),
       /* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
     ] }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
-    ] }, invitation.id)) })
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
+      ] }, invitation.id)),
+      invitationsToShow.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("No outstanding invitations") }) }) })
+    ] })
   ] }) });
 }
 function MemberInvitationSectionInner(props) {
@@ -1171,8 +1266,30 @@ function EditableText(props) {
     /* @__PURE__ */ jsx(Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Edit, { className: "w-4 h-4" }) })
   ] }) });
 }
+function ApiKeysPageSkeleton() {
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+  ] });
+}
+function TeamPageSkeleton() {
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+  ] });
+}
+function TeamCreationSkeleton() {
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" })
+  ] });
+}
 export {
   AccountSettings,
-  EditableText
+  ApiKeysPage,
+  EditableText,
+  TeamApiKeysSection
 };
 //# sourceMappingURL=account-settings.js.map