@stackframe/stack 2.8.2 → 2.8.5

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @stackframe/stack
 
+## 2.8.5
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.5
+  - @stackframe/stack-ui@2.8.5
+  - @stackframe/stack-sc@2.8.5
+
+## 2.8.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.4
+  - @stackframe/stack-ui@2.8.4
+  - @stackframe/stack-sc@2.8.4
+
+## 2.8.3
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.3
+  - @stackframe/stack-ui@2.8.3
+  - @stackframe/stack-sc@2.8.3
+
 ## 2.8.2
 
 ### Patch Changes

package/dist/components/api-key-dialogs.js

@@ -0,0 +1,184 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/api-key-dialogs.tsx
+var api_key_dialogs_exports = {};
+__export(api_key_dialogs_exports, {
+  CreateApiKeyDialog: () => CreateApiKeyDialog,
+  ShowApiKeyDialog: () => ShowApiKeyDialog,
+  expiresInOptions: () => expiresInOptions,
+  neverInMs: () => neverInMs
+});
+module.exports = __toCommonJS(api_key_dialogs_exports);
+var import_yup = require("@hookform/resolvers/yup");
+var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import__ = require("..");
+var import_form_warning = require("../components/elements/form-warning");
+var import_translations = require("../lib/translations");
+var import_jsx_runtime = require("react/jsx-runtime");
+var neverInMs = 1e3 * 60 * 60 * 24 * 365 * 200;
+var expiresInOptions = {
+  [1e3 * 60 * 60 * 24 * 1]: "1 day",
+  [1e3 * 60 * 60 * 24 * 7]: "7 days",
+  [1e3 * 60 * 60 * 24 * 30]: "30 days",
+  [1e3 * 60 * 60 * 24 * 90]: "90 days",
+  [1e3 * 60 * 60 * 24 * 365]: "1 year",
+  [neverInMs]: "Never"
+};
+function CreateApiKeyDialog(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const apiKeySchema = (0, import_schema_fields.yupObject)({
+    description: (0, import_schema_fields.yupString)().defined().nonEmpty(t("Description is required")),
+    expiresIn: (0, import_schema_fields.yupString)().defined()
+  });
+  const { register, handleSubmit, formState: { errors }, reset } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(apiKeySchema),
+    defaultValues: {
+      description: "",
+      expiresIn: Object.keys(expiresInOptions)[2]
+      // Default to 30 days
+    }
+  });
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));
+      const apiKey = await props.createApiKey({
+        description: data.description,
+        expiresAt
+      });
+      if (props.onKeyCreated) {
+        props.onKeyCreated(apiKey);
+      }
+      reset();
+      props.onOpenChange(false);
+    } catch (error) {
+      (0, import_errors.captureError)("Failed to create API key", { error });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.ActionDialog,
+    {
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      title: t("Create API Key"),
+      description: t("API keys grant programmatic access to your account."),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            (0, import_promises.runAsynchronously)(handleSubmit(onSubmit));
+          },
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "description", children: t("Description") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Input,
+                {
+                  id: "description",
+                  placeholder: t("e.g. Development, Production, CI/CD"),
+                  ...register("description")
+                }
+              ),
+              errors.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.description.message })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "expiresIn", children: t("Expires In") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "select",
+                {
+                  id: "expiresIn",
+                  className: "w-full p-2 border border-input rounded-md bg-background",
+                  ...register("expiresIn"),
+                  children: Object.entries(expiresInOptions).map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value, children: t(label) }, value))
+                }
+              ),
+              errors.expiresIn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.expiresIn.message })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-end gap-2 pt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Button,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  onClick: () => {
+                    reset();
+                    props.onOpenChange(false);
+                  },
+                  children: t("Cancel")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: t("Create") })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function ShowApiKeyDialog(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.ActionDialog,
+    {
+      open: !!props.apiKey,
+      title: t("API Key"),
+      okButton: { label: t("Close") },
+      onClose: props.onClose,
+      preventClose: true,
+      confirmText: t("I understand that I will not be able to view this key again."),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Typography, { children: [
+          t("Here is your API key."),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold", children: t("Copy it to a safe place. You will not be able to view it again.") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.CopyField,
+          {
+            monospace: true,
+            value: props.apiKey?.value ?? "",
+            label: t("Secret API Key")
+          }
+        )
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CreateApiKeyDialog,
+  ShowApiKeyDialog,
+  expiresInOptions,
+  neverInMs
+});
+//# sourceMappingURL=api-key-dialogs.js.map

package/dist/components/api-key-dialogs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { captureError } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@stackframe/stack-ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/stack-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n  [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n  [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n  [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n  [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n  [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n  [neverInMs]: \"Never\",\n} as const;\n\n/**\n * Dialog for creating a new API key\n */\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n  onKeyCreated?: (key: ApiKey<Type, true>) => void,\n  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  const apiKeySchema = yupObject({\n    description: yupString().defined().nonEmpty(t('Description is required')),\n    expiresIn: yupString().defined(),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(apiKeySchema),\n    defaultValues: {\n      description: '',\n      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n    }\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n    setLoading(true);\n    try {\n      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n      const apiKey = await props.createApiKey({\n        description: data.description,\n        expiresAt,\n      });\n\n      if (props.onKeyCreated) {\n        props.onKeyCreated(apiKey);\n      }\n\n      reset();\n      props.onOpenChange(false);\n    } catch (error) {\n      captureError(\"Failed to create API key\", { error });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <ActionDialog\n      open={props.open}\n      onOpenChange={props.onOpenChange}\n      title={t('Create API Key')}\n      description={t('API keys grant programmatic access to your account.')}\n    >\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          runAsynchronously(handleSubmit(onSubmit));\n        }}\n        className=\"space-y-4\"\n      >\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"description\">{t('Description')}</Label>\n          <Input\n            id=\"description\"\n            placeholder={t('e.g. Development, Production, CI/CD')}\n            {...register('description')}\n          />\n          {errors.description && <FormWarningText text={errors.description.message} />}\n        </div>\n\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n          <select\n            id=\"expiresIn\"\n            className=\"w-full p-2 border border-input rounded-md bg-background\"\n            {...register('expiresIn')}\n          >\n            {Object.entries(expiresInOptions).map(([value, label]) => (\n              <option key={value} value={value}>{t(label)}</option>\n            ))}\n          </select>\n          {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n        </div>\n\n        <div className=\"flex justify-end gap-2 pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => {\n              reset();\n              props.onOpenChange(false);\n            }}\n          >\n            {t('Cancel')}\n          </Button>\n          <Button type=\"submit\" loading={loading}>\n            {t('Create')}\n          </Button>\n        </div>\n      </form>\n    </ActionDialog>\n  );\n}\n\n/**\n * Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  apiKey: ApiKey<Type, true> | null,\n  onClose?: () => void,\n}) {\n  const { t } = useTranslation();\n\n  return (\n    <ActionDialog\n      open={!!props.apiKey}\n      title={t(\"API Key\")}\n      okButton={{ label: t(\"Close\") }}\n      onClose={props.onClose}\n      preventClose\n      confirmText={t(\"I understand that I will not be able to view this key again.\")}\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Typography>\n          {t(\"Here is your API key.\")}{\" \"}\n          <span className=\"font-bold\">\n            {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n          </span>\n        </Typography>\n        <CopyField\n          monospace\n          value={props.apiKey?.value ?? ''}\n          label={t(\"Secret API Key\")}\n        />\n      </div>\n    </ActionDialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,iBAA4B;AAC5B,2BAAqC;AACrC,oBAA6B;AAC7B,sBAAkC;AAClC,sBAA0E;AAC1E,mBAAyB;AACzB,6BAAwB;AAExB,eAAwB;AACxB,0BAAgC;AAEhC,0BAA+B;AA2EvB;AAxED,IAAM,YAAY,MAAO,KAAK,KAAK,KAAK,MAAM;AAC9C,IAAM,mBAAmB;AAAA,EAC9B,CAAC,MAAO,KAAK,KAAK,KAAK,CAAC,GAAG;AAAA,EAC3B,CAAC,MAAO,KAAK,KAAK,KAAK,CAAC,GAAG;AAAA,EAC3B,CAAC,MAAO,KAAK,KAAK,KAAK,EAAE,GAAG;AAAA,EAC5B,CAAC,MAAO,KAAK,KAAK,KAAK,EAAE,GAAG;AAAA,EAC5B,CAAC,MAAO,KAAK,KAAK,KAAK,GAAG,GAAG;AAAA,EAC7B,CAAC,SAAS,GAAG;AACf;AAKO,SAAS,mBAAyD,OAKtE;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,WAAO,kBAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,mBAAe,gCAAU;AAAA,IAC7B,iBAAa,gCAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAyB,CAAC;AAAA,IACxE,eAAW,gCAAU,EAAE,QAAQ;AAAA,EACjC,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,GAAG,MAAM,QAAI,gCAAQ;AAAA,IACvE,cAAU,wBAAY,YAAY;AAAA,IAClC,eAAe;AAAA,MACb,aAAa;AAAA,MACb,WAAW,OAAO,KAAK,gBAAgB,EAAE,CAAC;AAAA;AAAA,IAC5C;AAAA,EACF,CAAC;AAED,QAAM,WAAW,OAAO,SAA6C;AACnE,eAAW,IAAI;AACf,QAAI;AACF,YAAM,YAAY,IAAI,KAAK,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,CAAC;AAChE,YAAM,SAAS,MAAM,MAAM,aAAa;AAAA,QACtC,aAAa,KAAK;AAAA,QAClB;AAAA,MACF,CAAC;AAED,UAAI,MAAM,cAAc;AACtB,cAAM,aAAa,MAAM;AAAA,MAC3B;AAEA,YAAM;AACN,YAAM,aAAa,KAAK;AAAA,IAC1B,SAAS,OAAO;AACd,sCAAa,4BAA4B,EAAE,MAAM,CAAC;AAAA,IACpD,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,MAAM;AAAA,MACZ,cAAc,MAAM;AAAA,MACpB,OAAO,EAAE,gBAAgB;AAAA,MACzB,aAAa,EAAE,qDAAqD;AAAA,MAEpE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,MAAM;AACf,cAAE,eAAe;AACjB,mDAAkB,aAAa,QAAQ,CAAC;AAAA,UAC1C;AAAA,UACA,WAAU;AAAA,UAEV;AAAA,yDAAC,SAAI,WAAU,aACb;AAAA,0DAAC,yBAAM,SAAQ,eAAe,YAAE,aAAa,GAAE;AAAA,cAC/C;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,aAAa,EAAE,qCAAqC;AAAA,kBACnD,GAAG,SAAS,aAAa;AAAA;AAAA,cAC5B;AAAA,cACC,OAAO,eAAe,4CAAC,uCAAgB,MAAM,OAAO,YAAY,SAAS;AAAA,eAC5E;AAAA,YAEA,6CAAC,SAAI,WAAU,aACb;AAAA,0DAAC,yBAAM,SAAQ,aAAa,YAAE,YAAY,GAAE;AAAA,cAC5C;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,WAAU;AAAA,kBACT,GAAG,SAAS,WAAW;AAAA,kBAEvB,iBAAO,QAAQ,gBAAgB,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,MAClD,4CAAC,YAAmB,OAAe,YAAE,KAAK,KAA7B,KAA+B,CAC7C;AAAA;AAAA,cACH;AAAA,cACC,OAAO,aAAa,4CAAC,uCAAgB,MAAM,OAAO,UAAU,SAAS;AAAA,eACxE;AAAA,YAEA,6CAAC,SAAI,WAAU,+BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,SAAS,MAAM;AACb,0BAAM;AACN,0BAAM,aAAa,KAAK;AAAA,kBAC1B;AAAA,kBAEC,YAAE,QAAQ;AAAA;AAAA,cACb;AAAA,cACA,4CAAC,0BAAO,MAAK,UAAS,SACnB,YAAE,QAAQ,GACb;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAKO,SAAS,iBAAuD,OAGpE;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,CAAC,MAAM;AAAA,MACd,OAAO,EAAE,SAAS;AAAA,MAClB,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE;AAAA,MAC9B,SAAS,MAAM;AAAA,MACf,cAAY;AAAA,MACZ,aAAa,EAAE,8DAA8D;AAAA,MAE7E,uDAAC,SAAI,WAAU,uBACb;AAAA,qDAAC,8BACE;AAAA,YAAE,uBAAuB;AAAA,UAAG;AAAA,UAC7B,4CAAC,UAAK,WAAU,aACb,YAAE,iEAAiE,GACtE;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAS;AAAA,YACT,OAAO,MAAM,QAAQ,SAAS;AAAA,YAC9B,OAAO,EAAE,gBAAgB;AAAA;AAAA,QAC3B;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,149 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/api-key-table.tsx
+var api_key_table_exports = {};
+__export(api_key_table_exports, {
+  ApiKeyTable: () => ApiKeyTable
+});
+module.exports = __toCommonJS(api_key_table_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function toolbarRender(table) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SearchToolbarItem, { table, placeholder: "Search table" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.DataTableFacetedFilter,
+      {
+        column: table.getColumn("status"),
+        title: "Status",
+        options: ["valid", "expired", "revoked"].map((provider) => ({
+          value: provider,
+          label: provider
+        }))
+      }
+    )
+  ] });
+}
+function RevokeDialog(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.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] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RevokeDialog, { apiKey: row.original, open: isRevokeModalOpen, onOpenChange: setIsRevokeModalOpen }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.ActionCell,
+      {
+        invisible: row.original.status !== "valid",
+        items: [{
+          item: "Revoke",
+          danger: true,
+          onClick: () => setIsRevokeModalOpen(true)
+        }]
+      }
+    )
+  ] });
+}
+var columns = [
+  {
+    accessorKey: "description",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Description" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TextCell, { size: 100, children: row.original.description })
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Status" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.BadgeCell, { badges: [row.original.status] }),
+    filterFn: import_stack_ui.standardFilterFn
+  },
+  {
+    id: "value",
+    accessorFn: (row) => row.value.lastFour,
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Client Key" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TextCell, { children: [
+      "*******",
+      row.original.value.lastFour
+    ] }),
+    enableSorting: false
+  },
+  {
+    accessorKey: "expiresAt",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Expires At" }),
+    cell: ({ row }) => {
+      if (row.original.status === "revoked") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TextCell, { children: "-" });
+      return row.original.expiresAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DateCell, { date: row.original.expiresAt, ignoreAfterYears: 50 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TextCell, { children: "Never" });
+    }
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Created At" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DateCell, { date: row.original.createdAt, ignoreAfterYears: 50 })
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Actions, { row })
+  }
+];
+function ApiKeyTable(props) {
+  const extendedApiKeys = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.DataTable,
+    {
+      data: extendedApiKeys,
+      columns,
+      toolbarRender,
+      defaultColumnFilters: [],
+      defaultSorting: []
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiKeyTable
+});
+//# sourceMappingURL=api-key-table.js.map

package/dist/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/components-page/account-settings/active-sessions/active-sessions-page.js

@@ -0,0 +1,151 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components-page/account-settings/active-sessions/active-sessions-page.tsx
+var active_sessions_page_exports = {};
+__export(active_sessions_page_exports, {
+  ActiveSessionsPage: () => ActiveSessionsPage
+});
+module.exports = __toCommonJS(active_sessions_page_exports);
+var import_dates = require("@stackframe/stack-shared/dist/utils/dates");
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_hooks = require("../../../lib/hooks");
+var import_translations = require("../../../lib/translations");
+var import_page_layout = require("../page-layout");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ActiveSessionsPage() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import_hooks.useUser)({ or: "throw" });
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [isRevokingAll, setIsRevokingAll] = (0, import_react.useState)(false);
+  const [sessions, setSessions] = (0, import_react.useState)([]);
+  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    (0, import_promises.runAsynchronously)(async () => {
+      setIsLoading(true);
+      const sessionsData = await user.getActiveSessions();
+      const enhancedSessions = sessionsData;
+      setSessions(enhancedSessions);
+      setIsLoading(false);
+    });
+  }, [user]);
+  const handleRevokeSession = async (sessionId) => {
+    try {
+      await user.revokeSession(sessionId);
+      setSessions((prev) => prev.filter((session) => session.id !== sessionId));
+    } catch (error) {
+      (0, import_errors.captureError)("Failed to revoke session", { sessionId, error });
+      throw error;
+    }
+  };
+  const handleRevokeAllSessions = async () => {
+    setIsRevokingAll(true);
+    try {
+      const deletionPromises = sessions.filter((session) => !session.isCurrentSession).map((session) => user.revokeSession(session.id));
+      await Promise.all(deletionPromises);
+      setSessions((prevSessions) => prevSessions.filter((session) => session.isCurrentSession));
+    } catch (error) {
+      (0, import_errors.captureError)("Failed to revoke all sessions", { error, sessionIds: sessions.map((session) => session.id) });
+      throw error;
+    } finally {
+      setIsRevokingAll(false);
+      setShowConfirmRevokeAll(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page_layout.PageLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: t("Active Sessions") }),
+      sessions.filter((s) => !s.isCurrentSession).length > 0 && !isLoading && (showConfirmRevokeAll ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "destructive",
+            size: "sm",
+            loading: isRevokingAll,
+            onClick: handleRevokeAllSessions,
+            children: t("Confirm")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            disabled: isRevokingAll,
+            onClick: () => setShowConfirmRevokeAll(false),
+            children: t("Cancel")
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setShowConfirmRevokeAll(true),
+          children: t("Revoke All Other Sessions")
+        }
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", className: "mb-4", children: t("These are devices where you're currently logged in. You can revoke access to end a session.") }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[300px] w-full rounded-md" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Session") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[150px]", children: t("IP Address") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[150px]", children: t("Location") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[150px]", children: t("Last used") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[80px]" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { colSpan: 5, className: "text-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: t("No active sessions found") }) }) }) : sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.isCurrentSession ? t("Current Session") : t("Other Session") }),
+          session.isImpersonation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "secondary", className: "w-fit mt-1", children: t("Impersonation") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", children: t("Signed in {time}", { time: new Date(session.createdAt).toLocaleDateString() }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.geoInfo?.ip || t("-") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.geoInfo?.cityName || t("Unknown") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: session.lastUsedAt ? (0, import_dates.fromNow)(new Date(session.lastUsedAt)) : t("Never") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", title: session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleString() : "", children: session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleDateString() : "" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.ActionCell,
+          {
+            items: [
+              {
+                item: t("Revoke"),
+                onClick: () => handleRevokeSession(session.id),
+                danger: true,
+                disabled: session.isCurrentSession,
+                disabledTooltip: session.isCurrentSession ? t("You cannot revoke your current session") : void 0
+              }
+            ]
+          }
+        ) })
+      ] }, session.id)) })
+    ] }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActiveSessionsPage
+});
+//# sourceMappingURL=active-sessions-page.js.map

package/dist/components-page/account-settings/active-sessions/active-sessions-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components-page/account-settings/active-sessions/active-sessions-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { fromNow } from \"@stackframe/stack-shared/dist/utils/dates\";\nimport { captureError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { ActiveSession } from \"../../../lib/stack-app/users\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\n\nexport function ActiveSessionsPage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: \"throw\" });\n  const [isLoading, setIsLoading] = useState(true);\n  const [isRevokingAll, setIsRevokingAll] = useState(false);\n  const [sessions, setSessions] = useState<ActiveSession[]>([]);\n  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = useState(false);\n\n  // Fetch sessions when component mounts\n  useEffect(() => {\n    runAsynchronously(async () => {\n      setIsLoading(true);\n      const sessionsData = await user.getActiveSessions();\n      const enhancedSessions = sessionsData;\n      setSessions(enhancedSessions);\n      setIsLoading(false);\n    });\n  }, [user]);\n\n  const handleRevokeSession = async (sessionId: string) => {\n    try {\n      await user.revokeSession(sessionId);\n\n      // Remove the session from the list\n      setSessions(prev => prev.filter(session => session.id !== sessionId));\n    } catch (error) {\n      captureError(\"Failed to revoke session\", { sessionId ,error });\n      throw error;\n    }\n  };\n\n  const handleRevokeAllSessions = async () => {\n    setIsRevokingAll(true);\n    try {\n      const deletionPromises = sessions\n        .filter(session => !session.isCurrentSession)\n        .map(session => user.revokeSession(session.id));\n      await Promise.all(deletionPromises);\n      setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));\n    } catch (error) {\n      captureError(\"Failed to revoke all sessions\", { error, sessionIds: sessions.map(session => session.id) });\n      throw error;\n    } finally {\n      setIsRevokingAll(false);\n      setShowConfirmRevokeAll(false);\n    }\n  };\n\n  return (\n    <PageLayout>\n      <div>\n        <div className=\"flex justify-between items-center mb-2\">\n          <Typography className='font-medium'>{t(\"Active Sessions\")}</Typography>\n          {sessions.filter(s => !s.isCurrentSession).length > 0 && !isLoading && (\n            showConfirmRevokeAll ? (\n              <div className=\"flex gap-2\">\n                <Button\n                  variant=\"destructive\"\n                  size=\"sm\"\n                  loading={isRevokingAll}\n                  onClick={handleRevokeAllSessions}\n                >\n                  {t(\"Confirm\")}\n                </Button>\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  disabled={isRevokingAll}\n                  onClick={() => setShowConfirmRevokeAll(false)}\n                >\n                  {t(\"Cancel\")}\n                </Button>\n              </div>\n            ) : (\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setShowConfirmRevokeAll(true)}\n              >\n                {t(\"Revoke All Other Sessions\")}\n              </Button>\n            )\n          )}\n        </div>\n        <Typography variant='secondary' type='footnote' className=\"mb-4\">\n          {t(\"These are devices where you're currently logged in. You can revoke access to end a session.\")}\n        </Typography>\n\n        {isLoading ? (\n          <Skeleton className=\"h-[300px] w-full rounded-md\" />\n        ) : (\n          <div className='border rounded-md'>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"w-[200px]\">{t(\"Session\")}</TableHead>\n                  <TableHead className=\"w-[150px]\">{t(\"IP Address\")}</TableHead>\n                  <TableHead className=\"w-[150px]\">{t(\"Location\")}</TableHead>\n                  <TableHead className=\"w-[150px]\">{t(\"Last used\")}</TableHead>\n                  <TableHead className=\"w-[80px]\"></TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {sessions.length === 0 ? (\n                  <TableRow>\n                    <TableCell colSpan={5} className=\"text-center py-6\">\n                      <Typography variant=\"secondary\">{t(\"No active sessions found\")}</Typography>\n                    </TableCell>\n                  </TableRow>\n                ) : (\n                  sessions.map((session) => (\n                    <TableRow key={session.id}>\n                      <TableCell>\n                        <div className=\"flex flex-col\">\n                          {/* We currently do not save any usefull information about the user, in the future, the name should probably say what kind of session it is (e.g. cli, browser, maybe what auth method was used) */}\n                          <Typography>{session.isCurrentSession ? t(\"Current Session\") : t(\"Other Session\")}</Typography>\n                          {session.isImpersonation && <Badge variant=\"secondary\" className=\"w-fit mt-1\">{t(\"Impersonation\")}</Badge>}\n                          <Typography variant='secondary' type='footnote'>\n                            {t(\"Signed in {time}\", { time: new Date(session.createdAt).toLocaleDateString() })}\n                          </Typography>\n                        </div>\n                      </TableCell>\n                      <TableCell>\n                        <Typography>{session.geoInfo?.ip || t('-')}</Typography>\n                      </TableCell>\n                      <TableCell>\n                        <Typography>{session.geoInfo?.cityName || t('Unknown')}</Typography>\n                      </TableCell>\n                      <TableCell>\n                        <div className=\"flex flex-col\">\n                          <Typography>{session.lastUsedAt ? fromNow(new Date(session.lastUsedAt)) : t(\"Never\")}</Typography>\n                          <Typography variant='secondary' type='footnote' title={session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleString() : \"\"}>\n                            {session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleDateString() : \"\"}\n                          </Typography>\n                        </div>\n                      </TableCell>\n                      <TableCell align=\"right\">\n                        <ActionCell\n                          items={[\n                            {\n                              item: t(\"Revoke\"),\n                              onClick: () => handleRevokeSession(session.id),\n                              danger: true,\n                              disabled: session.isCurrentSession,\n                              disabledTooltip: session.isCurrentSession ? t(\"You cannot revoke your current session\") : undefined,\n                            },\n                          ]}\n                        />\n                      </TableCell>\n                    </TableRow>\n                  ))\n                )}\n              </TableBody>\n            </Table>\n          </div>\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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","names":[]}