@stackframe/stack 2.8.3 → 2.8.6

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @stackframe/stack
 
+## 2.8.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.6
+  - @stackframe/stack-ui@2.8.6
+  - @stackframe/stack-sc@2.8.6
+
+## 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

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":[]}

package/dist/components-page/account-settings/api-keys/api-keys-page.js

@@ -0,0 +1,70 @@
+"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/api-keys/api-keys-page.tsx
+var api_keys_page_exports = {};
+__export(api_keys_page_exports, {
+  ApiKeysPage: () => ApiKeysPage
+});
+module.exports = __toCommonJS(api_keys_page_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_api_key_dialogs = require("../../../components/api-key-dialogs");
+var import_api_key_table = require("../../../components/api-key-table");
+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 ApiKeysPage() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import_hooks.useUser)({ or: "redirect" });
+  const apiKeys = user.useApiKeys();
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = (0, import_react.useState)(false);
+  const [returnedApiKey, setReturnedApiKey] = (0, import_react.useState)(null);
+  const CreateDialog = import_api_key_dialogs.CreateApiKeyDialog;
+  const ShowDialog = import_api_key_dialogs.ShowApiKeyDialog;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_page_layout.PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_key_table.ApiKeyTable, { apiKeys }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CreateDialog,
+      {
+        open: isNewApiKeyDialogOpen,
+        onOpenChange: setIsNewApiKeyDialogOpen,
+        onKeyCreated: setReturnedApiKey,
+        createApiKey: async (data) => {
+          const apiKey = await user.createApiKey(data);
+          return apiKey;
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ShowDialog,
+      {
+        apiKey: returnedApiKey,
+        onClose: () => setReturnedApiKey(null)
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiKeysPage
+});
+//# sourceMappingURL=api-keys-page.js.map

package/dist/components-page/account-settings/api-keys/api-keys-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components-page/account-settings/api-keys/api-keys-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { CreateApiKeyDialog, ShowApiKeyDialog } from \"../../../components/api-key-dialogs\";\nimport { ApiKeyTable } from \"../../../components/api-key-table\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { ApiKey, ApiKeyCreationOptions } from \"../../../lib/stack-app/api-keys\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\n\n\nexport function ApiKeysPage() {\n  const { t } = useTranslation();\n\n  const user = useUser({ or: 'redirect' });\n  const apiKeys = user.useApiKeys();\n\n  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);\n  const [returnedApiKey, setReturnedApiKey] = useState<ApiKey<\"user\", true>   | null>(null);\n\n  const CreateDialog = CreateApiKeyDialog<\"user\">;\n  const ShowDialog = ShowApiKeyDialog<\"user\">;\n\n  return (\n    <PageLayout>\n      <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>\n        {t(\"Create API Key\")}\n      </Button>\n      <ApiKeyTable apiKeys={apiKeys} />\n      <CreateDialog\n        open={isNewApiKeyDialogOpen}\n        onOpenChange={setIsNewApiKeyDialogOpen}\n        onKeyCreated={setReturnedApiKey}\n        createApiKey={async (data: ApiKeyCreationOptions<\"user\">) => {\n          const apiKey = await user.createApiKey(data);\n          return apiKey;\n        }}\n      />\n      <ShowDialog\n        apiKey={returnedApiKey}\n        onClose={() => setReturnedApiKey(null)}\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,sBAAuB;AACvB,mBAAyB;AACzB,6BAAqD;AACrD,2BAA4B;AAC5B,mBAAwB;AAExB,0BAA+B;AAC/B,yBAA2B;AAgBvB;AAbG,SAAS,cAAc;AAC5B,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,QAAM,WAAO,sBAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,UAAU,KAAK,WAAW;AAEhC,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,KAAK;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwC,IAAI;AAExF,QAAM,eAAe;AACrB,QAAM,aAAa;AAEnB,SACE,6CAAC,iCACC;AAAA,gDAAC,0BAAO,SAAS,MAAM,yBAAyB,IAAI,GACjD,YAAE,gBAAgB,GACrB;AAAA,IACA,4CAAC,oCAAY,SAAkB;AAAA,IAC/B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc,OAAO,SAAwC;AAC3D,gBAAM,SAAS,MAAM,KAAK,aAAa,IAAI;AAC3C,iBAAO;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,kBAAkB,IAAI;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;","names":[]}

package/dist/components-page/account-settings/editable-text.js

@@ -0,0 +1,75 @@
+"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/editable-text.tsx
+var editable_text_exports = {};
+__export(editable_text_exports, {
+  EditableText: () => EditableText
+});
+module.exports = __toCommonJS(editable_text_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_translations = require("../../lib/translations");
+var import_jsx_runtime = require("react/jsx-runtime");
+function EditableText(props) {
+  const [editing, setEditing] = (0, import_react.useState)(false);
+  const [editingValue, setEditingValue] = (0, import_react.useState)(props.value);
+  const { t } = (0, import_translations.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Input,
+      {
+        value: editingValue,
+        onChange: (e) => setEditingValue(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        size: "sm",
+        onClick: async () => {
+          await props.onSave?.(editingValue);
+          setEditing(false);
+        },
+        children: t("Save")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        size: "sm",
+        variant: "secondary",
+        onClick: () => {
+          setEditingValue(props.value);
+          setEditing(false);
+        },
+        children: t("Cancel")
+      }
+    )
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Edit, { className: "w-4 h-4" }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditableText
+});
+//# sourceMappingURL=editable-text.js.map

package/dist/components-page/account-settings/editable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-page/account-settings/editable-text.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Input, Typography } from \"@stackframe/stack-ui\";\nimport { Edit } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { useTranslation } from \"../../lib/translations\";\n\n\nexport function EditableText(props: { value: string, onSave?: (value: string) => void | Promise<void> }) {\n  const [editing, setEditing] = useState(false);\n  const [editingValue, setEditingValue] = useState(props.value);\n  const { t } = useTranslation();\n\n  return (\n    <div className='flex items-center gap-2'>\n      {editing ? (\n        <>\n          <Input\n            value={editingValue}\n            onChange={(e) => setEditingValue(e.target.value)}\n          />\n          <Button\n            size='sm'\n            onClick={async () => {\n              await props.onSave?.(editingValue);\n              setEditing(false);\n            }}\n          >\n            {t(\"Save\")}\n          </Button>\n          <Button\n            size='sm'\n            variant='secondary'\n            onClick={() => {\n              setEditingValue(props.value);\n              setEditing(false);\n            }}>\n            {t(\"Cancel\")}\n          </Button>\n        </>\n      ) : (\n        <>\n          <Typography>{props.value}</Typography>\n          <Button onClick={() => setEditing(true)} size='icon' variant='ghost'>\n            <Edit className=\"w-4 h-4\" />\n          </Button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,sBAA0C;AAC1C,0BAAqB;AACrB,mBAAyB;AACzB,0BAA+B;AAWvB;AARD,SAAS,aAAa,OAA4E;AACvG,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,MAAM,KAAK;AAC5D,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,SACE,4CAAC,SAAI,WAAU,2BACZ,oBACC,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,gBAAgB,EAAE,OAAO,KAAK;AAAA;AAAA,IACjD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,YAAY;AACnB,gBAAM,MAAM,SAAS,YAAY;AACjC,qBAAW,KAAK;AAAA,QAClB;AAAA,QAEC,YAAE,MAAM;AAAA;AAAA,IACX;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,0BAAgB,MAAM,KAAK;AAC3B,qBAAW,KAAK;AAAA,QAClB;AAAA,QACC,YAAE,QAAQ;AAAA;AAAA,IACb;AAAA,KACF,IAEA,4EACE;AAAA,gDAAC,8BAAY,gBAAM,OAAM;AAAA,IACzB,4CAAC,0BAAO,SAAS,MAAM,WAAW,IAAI,GAAG,MAAK,QAAO,SAAQ,SAC3D,sDAAC,4BAAK,WAAU,WAAU,GAC5B;AAAA,KACF,GAEJ;AAEJ;","names":[]}

package/dist/components-page/account-settings/email-and-auth/email-and-auth-page.js

@@ -0,0 +1,46 @@
+"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/email-and-auth/email-and-auth-page.tsx
+var email_and_auth_page_exports = {};
+__export(email_and_auth_page_exports, {
+  EmailsAndAuthPage: () => EmailsAndAuthPage
+});
+module.exports = __toCommonJS(email_and_auth_page_exports);
+var import_page_layout = require("../page-layout");
+var import_emails_section = require("./emails-section");
+var import_mfa_section = require("./mfa-section");
+var import_otp_section = require("./otp-section");
+var import_passkey_section = require("./passkey-section");
+var import_password_section = require("./password-section");
+var import_jsx_runtime = require("react/jsx-runtime");
+function EmailsAndAuthPage() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_page_layout.PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_emails_section.EmailsSection, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_password_section.PasswordSection, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_passkey_section.PasskeySection, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_otp_section.OtpSection, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mfa_section.MfaSection, {})
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmailsAndAuthPage
+});
+//# sourceMappingURL=email-and-auth-page.js.map

package/dist/components-page/account-settings/email-and-auth/email-and-auth-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components-page/account-settings/email-and-auth/email-and-auth-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { EmailsSection } from \"./emails-section\";\nimport { MfaSection } from \"./mfa-section\";\nimport { OtpSection } from \"./otp-section\";\nimport { PasskeySection } from \"./passkey-section\";\nimport { PasswordSection } from \"./password-section\";\n\nexport function EmailsAndAuthPage() {\n  return (\n    <PageLayout>\n      <EmailsSection/>\n      <PasswordSection />\n      <PasskeySection />\n      <OtpSection />\n      <MfaSection />\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,yBAA2B;AAC3B,4BAA8B;AAC9B,yBAA2B;AAC3B,yBAA2B;AAC3B,6BAA+B;AAC/B,8BAAgC;AAI5B;AAFG,SAAS,oBAAoB;AAClC,SACE,6CAAC,iCACC;AAAA,gDAAC,uCAAa;AAAA,IACd,4CAAC,2CAAgB;AAAA,IACjB,4CAAC,yCAAe;AAAA,IAChB,4CAAC,iCAAW;AAAA,IACZ,4CAAC,iCAAW;AAAA,KACd;AAEJ;","names":[]}

package/dist/components-page/account-settings/email-and-auth/emails-section.js

@@ -0,0 +1,188 @@
+"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/email-and-auth/emails-section.tsx
+var emails_section_exports = {};
+__export(emails_section_exports, {
+  EmailsSection: () => EmailsSection
+});
+module.exports = __toCommonJS(emails_section_exports);
+var import_yup = require("@hookform/resolvers/yup");
+var import_known_errors = require("@stackframe/stack-shared/dist/known-errors");
+var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+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_form_warning = require("../../../components/elements/form-warning");
+var import_hooks = require("../../../lib/hooks");
+var import_translations = require("../../../lib/translations");
+var import_jsx_runtime = require("react/jsx-runtime");
+function EmailsSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import_hooks.useUser)({ or: "redirect" });
+  const contactChannels = user.useContactChannels();
+  const [addingEmail, setAddingEmail] = (0, import_react.useState)(contactChannels.length === 0);
+  const [addingEmailLoading, setAddingEmailLoading] = (0, import_react.useState)(false);
+  const [addedEmail, setAddedEmail] = (0, import_react.useState)(null);
+  const isLastEmail = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
+  (0, import_react.useEffect)(() => {
+    if (addedEmail) {
+      (0, import_promises.runAsynchronously)(async () => {
+        const cc = contactChannels.find((x) => x.value === addedEmail);
+        if (cc && !cc.isVerified) {
+          await cc.sendVerificationEmail();
+        }
+        setAddedEmail(null);
+      });
+    }
+  }, [contactChannels, addedEmail]);
+  const emailSchema = (0, import_schema_fields.yupObject)({
+    email: (0, import_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).defined().nonEmpty(t("Email is required"))
+  });
+  const { register, handleSubmit, formState: { errors }, reset } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(emailSchema)
+  });
+  const onSubmit = async (data) => {
+    setAddingEmailLoading(true);
+    try {
+      await user.createContactChannel({ type: "email", value: data.email, usedForAuth: false });
+      setAddedEmail(data.email);
+    } finally {
+      setAddingEmailLoading(false);
+    }
+    setAddingEmail(false);
+    reset();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: t("Emails") }),
+      addingEmail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            (0, import_promises.runAsynchronously)(handleSubmit(onSubmit));
+          },
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Input,
+                {
+                  ...register("email"),
+                  placeholder: t("Enter email")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading: addingEmailLoading, children: t("Add") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setAddingEmail(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] }),
+            errors.email && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email.message })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex md:justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { variant: "secondary", onClick: () => setAddingEmail(true), children: t("Add an email") }) })
+    ] }),
+    contactChannels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
+      if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+      if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
+      return 0;
+    }).map((x) => /* @__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 md:flex-row gap-2 md:gap-4", children: [
+        x.value,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+          x.isPrimary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { children: t("Primary") }) : null,
+          !x.isVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "destructive", children: t("Unverified") }) : null,
+          x.usedForAuth ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "outline", children: t("Used for sign-in") }) : null
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.ActionCell, { items: [
+        ...!x.isVerified ? [{
+          item: t("Send verification email"),
+          onClick: async () => {
+            await x.sendVerificationEmail();
+          }
+        }] : [],
+        ...!x.isPrimary && x.isVerified ? [{
+          item: t("Set as primary"),
+          onClick: async () => {
+            await x.update({ isPrimary: true });
+          }
+        }] : !x.isPrimary ? [{
+          item: t("Set as primary"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("Please verify your email first")
+        }] : [],
+        ...!x.usedForAuth && x.isVerified ? [{
+          item: t("Use for sign-in"),
+          onClick: async () => {
+            try {
+              await x.update({ usedForAuth: true });
+            } catch (e) {
+              if (e instanceof import_known_errors.KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse) {
+                alert(t("This email is already used for sign-in by another user."));
+              }
+            }
+          }
+        }] : [],
+        ...x.usedForAuth && !isLastEmail ? [{
+          item: t("Stop using for sign-in"),
+          onClick: async () => {
+            await x.update({ usedForAuth: false });
+          }
+        }] : x.usedForAuth ? [{
+          item: t("Stop using for sign-in"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("You can not remove your last sign-in email")
+        }] : [],
+        ...!isLastEmail || !x.usedForAuth ? [{
+          item: t("Remove"),
+          onClick: async () => {
+            await x.delete();
+          },
+          danger: true
+        }] : [{
+          item: t("Remove"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("You can not remove your last sign-in email")
+        }]
+      ] }) })
+    ] }, x.id)) }) }) }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmailsSection
+});
+//# sourceMappingURL=emails-section.js.map