@stackframe/stack 2.8.12 → 2.8.17

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

@@ -4,29 +4,70 @@ import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { ActionCell, Badge, Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
 import { useEffect, useState } from "react";
-import { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { PageLayout } from "../page-layout";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ActiveSessionsPage() {
+function ActiveSessionsPage(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
-  const [isLoading, setIsLoading] = useState(true);
+  const userFromHook = useUser({ or: props?.mockSessions || props?.mockMode ? "return-null" : "throw" });
+  const [isLoading, setIsLoading] = useState(!props?.mockSessions);
   const [isRevokingAll, setIsRevokingAll] = useState(false);
   const [sessions, setSessions] = useState([]);
   const [showConfirmRevokeAll, setShowConfirmRevokeAll] = useState(false);
+  const mockSessionsData = props?.mockSessions ? props.mockSessions.map((session) => ({
+    id: session.id,
+    isCurrentSession: session.isCurrentSession,
+    isImpersonation: session.isImpersonation || false,
+    createdAt: session.createdAt,
+    lastUsedAt: session.lastUsedAt,
+    geoInfo: session.geoInfo
+  })) : [
+    {
+      id: "current-session",
+      isCurrentSession: true,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      lastUsedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      geoInfo: { ip: "192.168.1.1", cityName: "San Francisco" }
+    },
+    {
+      id: "mobile-session",
+      isCurrentSession: false,
+      createdAt: new Date(Date.now() - 864e5).toISOString(),
+      // 1 day ago
+      lastUsedAt: new Date(Date.now() - 72e5).toISOString(),
+      // 2 hours ago
+      geoInfo: { ip: "10.0.0.1", cityName: "New York" }
+    }
+  ];
   useEffect(() => {
+    if (props?.mockSessions) {
+      setSessions(mockSessionsData);
+      setIsLoading(false);
+      return;
+    }
+    if (props?.mockMode && !userFromHook) {
+      setSessions(mockSessionsData);
+      setIsLoading(false);
+      return;
+    }
+    if (!userFromHook) return;
     runAsynchronously(async () => {
       setIsLoading(true);
-      const sessionsData = await user.getActiveSessions();
+      const sessionsData = await userFromHook.getActiveSessions();
       const enhancedSessions = sessionsData;
       setSessions(enhancedSessions);
       setIsLoading(false);
     });
-  }, [user]);
+  }, [userFromHook, props?.mockSessions]);
   const handleRevokeSession = async (sessionId) => {
+    if (props?.mockSessions) {
+      setSessions((prev) => prev.filter((session) => session.id !== sessionId));
+      return;
+    }
+    if (!userFromHook) return;
     try {
-      await user.revokeSession(sessionId);
+      await userFromHook.revokeSession(sessionId);
       setSessions((prev) => prev.filter((session) => session.id !== sessionId));
     } catch (error) {
       captureError("Failed to revoke session", { sessionId, error });
@@ -36,9 +77,13 @@ function ActiveSessionsPage() {
   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));
+      if (props?.mockSessions) {
+        setSessions((prevSessions) => prevSessions.filter((session) => session.isCurrentSession));
+      } else if (userFromHook) {
+        const deletionPromises = sessions.filter((session) => !session.isCurrentSession).map((session) => userFromHook.revokeSession(session.id));
+        await Promise.all(deletionPromises);
+        setSessions((prevSessions) => prevSessions.filter((session) => session.isCurrentSession));
+      }
     } catch (error) {
       captureError("Failed to revoke all sessions", { error, sessionIds: sessions.map((session) => session.id) });
       throw error;

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

@@ -1 +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":";AAIA,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,YAAY,OAAO,QAAQ,UAAU,OAAO,WAAW,WAAW,WAAW,aAAa,UAAU,kBAAkB;AAC/H,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAsDjB,cAGI,YAHJ;AApDH,SAAS,qBAAqB;AACnC,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,QAAQ,CAAC;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAA0B,CAAC,CAAC;AAC5D,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AAGtE,YAAU,MAAM;AACd,sBAAkB,YAAY;AAC5B,mBAAa,IAAI;AACjB,YAAM,eAAe,MAAM,KAAK,kBAAkB;AAClD,YAAM,mBAAmB;AACzB,kBAAY,gBAAgB;AAC5B,mBAAa,KAAK;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,sBAAsB,OAAO,cAAsB;AACvD,QAAI;AACF,YAAM,KAAK,cAAc,SAAS;AAGlC,kBAAY,UAAQ,KAAK,OAAO,aAAW,QAAQ,OAAO,SAAS,CAAC;AAAA,IACtE,SAAS,OAAO;AACd,mBAAa,4BAA4B,EAAE,WAAW,MAAM,CAAC;AAC7D,YAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,0BAA0B,YAAY;AAC1C,qBAAiB,IAAI;AACrB,QAAI;AACF,YAAM,mBAAmB,SACtB,OAAO,aAAW,CAAC,QAAQ,gBAAgB,EAC3C,IAAI,aAAW,KAAK,cAAc,QAAQ,EAAE,CAAC;AAChD,YAAM,QAAQ,IAAI,gBAAgB;AAClC,kBAAY,kBAAgB,aAAa,OAAO,aAAW,QAAQ,gBAAgB,CAAC;AAAA,IACtF,SAAS,OAAO;AACd,mBAAa,iCAAiC,EAAE,OAAO,YAAY,SAAS,IAAI,aAAW,QAAQ,EAAE,EAAE,CAAC;AACxG,YAAM;AAAA,IACR,UAAE;AACA,uBAAiB,KAAK;AACtB,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,SACE,oBAAC,cACC,+BAAC,SACC;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,cAAW,WAAU,eAAe,YAAE,iBAAiB,GAAE;AAAA,MACzD,SAAS,OAAO,OAAK,CAAC,EAAE,gBAAgB,EAAE,SAAS,KAAK,CAAC,cACxD,uBACE,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS;AAAA,YAER,YAAE,SAAS;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,UAAU;AAAA,YACV,SAAS,MAAM,wBAAwB,KAAK;AAAA,YAE3C,YAAE,QAAQ;AAAA;AAAA,QACb;AAAA,SACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,wBAAwB,IAAI;AAAA,UAE1C,YAAE,2BAA2B;AAAA;AAAA,MAChC;AAAA,OAGN;AAAA,IACA,oBAAC,cAAW,SAAQ,aAAY,MAAK,YAAW,WAAU,QACvD,YAAE,6FAA6F,GAClG;AAAA,IAEC,YACC,oBAAC,YAAS,WAAU,+BAA8B,IAElD,oBAAC,SAAI,WAAU,qBACb,+BAAC,SACC;AAAA,0BAAC,eACC,+BAAC,YACC;AAAA,4BAAC,aAAU,WAAU,aAAa,YAAE,SAAS,GAAE;AAAA,QAC/C,oBAAC,aAAU,WAAU,aAAa,YAAE,YAAY,GAAE;AAAA,QAClD,oBAAC,aAAU,WAAU,aAAa,YAAE,UAAU,GAAE;AAAA,QAChD,oBAAC,aAAU,WAAU,aAAa,YAAE,WAAW,GAAE;AAAA,QACjD,oBAAC,aAAU,WAAU,YAAW;AAAA,SAClC,GACF;AAAA,MACA,oBAAC,aACE,mBAAS,WAAW,IACnB,oBAAC,YACC,8BAAC,aAAU,SAAS,GAAG,WAAU,oBAC/B,8BAAC,cAAW,SAAQ,aAAa,YAAE,0BAA0B,GAAE,GACjE,GACF,IAEA,SAAS,IAAI,CAAC,YACZ,qBAAC,YACC;AAAA,4BAAC,aACC,+BAAC,SAAI,WAAU,iBAEb;AAAA,8BAAC,cAAY,kBAAQ,mBAAmB,EAAE,iBAAiB,IAAI,EAAE,eAAe,GAAE;AAAA,UACjF,QAAQ,mBAAmB,oBAAC,SAAM,SAAQ,aAAY,WAAU,cAAc,YAAE,eAAe,GAAE;AAAA,UAClG,oBAAC,cAAW,SAAQ,aAAY,MAAK,YAClC,YAAE,oBAAoB,EAAE,MAAM,IAAI,KAAK,QAAQ,SAAS,EAAE,mBAAmB,EAAE,CAAC,GACnF;AAAA,WACF,GACF;AAAA,QACA,oBAAC,aACC,8BAAC,cAAY,kBAAQ,SAAS,MAAM,EAAE,GAAG,GAAE,GAC7C;AAAA,QACA,oBAAC,aACC,8BAAC,cAAY,kBAAQ,SAAS,YAAY,EAAE,SAAS,GAAE,GACzD;AAAA,QACA,oBAAC,aACC,+BAAC,SAAI,WAAU,iBACb;AAAA,8BAAC,cAAY,kBAAQ,aAAa,QAAQ,IAAI,KAAK,QAAQ,UAAU,CAAC,IAAI,EAAE,OAAO,GAAE;AAAA,UACrF,oBAAC,cAAW,SAAQ,aAAY,MAAK,YAAW,OAAO,QAAQ,aAAa,IAAI,KAAK,QAAQ,UAAU,EAAE,eAAe,IAAI,IACzH,kBAAQ,aAAa,IAAI,KAAK,QAAQ,UAAU,EAAE,mBAAmB,IAAI,IAC5E;AAAA,WACF,GACF;AAAA,QACA,oBAAC,aAAU,OAAM,SACf;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL;AAAA,gBACE,MAAM,EAAE,QAAQ;AAAA,gBAChB,SAAS,MAAM,oBAAoB,QAAQ,EAAE;AAAA,gBAC7C,QAAQ;AAAA,gBACR,UAAU,QAAQ;AAAA,gBAClB,iBAAiB,QAAQ,mBAAmB,EAAE,wCAAwC,IAAI;AAAA,cAC5F;AAAA,YACF;AAAA;AAAA,QACF,GACF;AAAA,WArCa,QAAQ,EAsCvB,CACD,GAEL;AAAA,OACF,GACF;AAAA,KAEJ,GACF;AAEJ;","names":[]}
+{"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(props?: {\n  mockSessions?: Array<{\n    id: string,\n    isCurrentSession: boolean,\n    isImpersonation?: boolean,\n    createdAt: string,\n    lastUsedAt?: string,\n    geoInfo?: {\n      ip?: string,\n      cityName?: string,\n    },\n  }>,\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: (props?.mockSessions || props?.mockMode) ? 'return-null' : 'throw' });\n  const [isLoading, setIsLoading] = useState(!props?.mockSessions);\n  const [isRevokingAll, setIsRevokingAll] = useState(false);\n  const [sessions, setSessions] = useState<ActiveSession[]>([]);\n  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = useState(false);\n\n  // Use mock data if provided\n  const mockSessionsData = props?.mockSessions ? props.mockSessions.map(session => ({\n    id: session.id,\n    isCurrentSession: session.isCurrentSession,\n    isImpersonation: session.isImpersonation || false,\n    createdAt: session.createdAt,\n    lastUsedAt: session.lastUsedAt,\n    geoInfo: session.geoInfo,\n  })) : [\n    {\n      id: 'current-session',\n      isCurrentSession: true,\n      createdAt: new Date().toISOString(),\n      lastUsedAt: new Date().toISOString(),\n      geoInfo: { ip: '192.168.1.1', cityName: 'San Francisco' }\n    },\n    {\n      id: 'mobile-session',\n      isCurrentSession: false,\n      createdAt: new Date(Date.now() - 86400000).toISOString(), // 1 day ago\n      lastUsedAt: new Date(Date.now() - 7200000).toISOString(), // 2 hours ago\n      geoInfo: { ip: '10.0.0.1', cityName: 'New York' }\n    }\n  ];\n\n  // Fetch sessions when component mounts (only if not using mock data)\n  useEffect(() => {\n    if (props?.mockSessions) {\n      setSessions(mockSessionsData as any);\n      setIsLoading(false);\n      return;\n    }\n\n    // If in mock mode but no mock sessions provided, use default mock data\n    if (props?.mockMode && !userFromHook) {\n      setSessions(mockSessionsData as any);\n      setIsLoading(false);\n      return;\n    }\n\n    if (!userFromHook) return;\n\n    runAsynchronously(async () => {\n      setIsLoading(true);\n      const sessionsData = await userFromHook.getActiveSessions();\n      const enhancedSessions = sessionsData;\n      setSessions(enhancedSessions);\n      setIsLoading(false);\n    });\n  }, [userFromHook, props?.mockSessions]);\n\n  const handleRevokeSession = async (sessionId: string) => {\n    if (props?.mockSessions) {\n      // Mock revoke - just remove from list\n      setSessions(prev => prev.filter(session => session.id !== sessionId));\n      return;\n    }\n\n    if (!userFromHook) return;\n\n    try {\n      await userFromHook.revokeSession(sessionId);\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      if (props?.mockSessions) {\n        // Mock revoke all - just keep current session\n        setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));\n      } else if (userFromHook) {\n        const deletionPromises = sessions\n          .filter(session => !session.isCurrentSession)\n          .map(session => userFromHook.revokeSession(session.id));\n        await Promise.all(deletionPromises);\n        setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));\n      }\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/esm/components-page/account-settings/api-keys/api-keys-page.js

@@ -1,20 +1,110 @@
 // src/components-page/account-settings/api-keys/api-keys-page.tsx
 import { Button } from "@stackframe/stack-ui";
 import { useState } from "react";
-import { CreateApiKeyDialog, ShowApiKeyDialog } from "../../../components/api-key-dialogs";
-import { ApiKeyTable } from "../../../components/api-key-table";
-import { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { PageLayout } from "../page-layout";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../../../components/api-key-dialogs.js";
+import { ApiKeyTable } from "../../../components/api-key-table.js";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ApiKeysPage() {
+function ApiKeysPage(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const apiKeys = user.useApiKeys();
+  const isInMockMode = !!(props?.mockApiKeys || props?.mockMode);
+  const userFromHook = useUser({ or: isInMockMode ? "return-null" : "redirect" });
+  if (isInMockMode && !userFromHook) {
+  }
+  if (!isInMockMode && !userFromHook) {
+    return null;
+  }
+  const mockApiKeysData = props?.mockApiKeys ? props.mockApiKeys.map((mockKey) => ({
+    id: mockKey.id,
+    description: mockKey.description,
+    createdAt: new Date(mockKey.createdAt),
+    expiresAt: mockKey.expiresAt ? new Date(mockKey.expiresAt) : void 0,
+    manuallyRevokedAt: mockKey.manuallyRevokedAt ? new Date(mockKey.manuallyRevokedAt) : null,
+    value: {
+      lastFour: mockKey.id.slice(-4).padStart(4, "0")
+      // Use last 4 chars of ID or pad with zeros
+    },
+    type: "user",
+    userId: "mock-user-id",
+    update: async () => {
+      console.log("Mock API key update called");
+    },
+    revoke: async () => {
+      console.log("Mock API key revoke called");
+    },
+    isValid: () => {
+      const now = /* @__PURE__ */ new Date();
+      const isExpired = mockKey.expiresAt ? new Date(mockKey.expiresAt) < now : false;
+      const isRevoked = !!mockKey.manuallyRevokedAt;
+      return !isExpired && !isRevoked;
+    },
+    whyInvalid: () => {
+      const now = /* @__PURE__ */ new Date();
+      if (mockKey.manuallyRevokedAt) return "manually-revoked";
+      if (mockKey.expiresAt && new Date(mockKey.expiresAt) < now) return "expired";
+      return null;
+    }
+  })) : [
+    {
+      id: "key-1",
+      description: "Development Key",
+      createdAt: new Date(Date.now() - 1728e5),
+      // 2 days ago
+      expiresAt: void 0,
+      manuallyRevokedAt: null,
+      value: {
+        lastFour: "ey-1".slice(-4).padStart(4, "0")
+      },
+      type: "user",
+      userId: "mock-user-id",
+      update: async () => {
+        console.log("Mock API key update called");
+      },
+      revoke: async () => {
+        console.log("Mock API key revoke called");
+      },
+      isValid: () => true,
+      whyInvalid: () => null
+    }
+  ];
+  let apiKeys;
+  if (isInMockMode) {
+    apiKeys = mockApiKeysData;
+  } else if (userFromHook) {
+    apiKeys = userFromHook.useApiKeys();
+  } else {
+    apiKeys = [];
+  }
   const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
   const [returnedApiKey, setReturnedApiKey] = useState(null);
   const CreateDialog = CreateApiKeyDialog;
   const ShowDialog = ShowApiKeyDialog;
+  const handleCreateApiKey = async (data) => {
+    if (isInMockMode) {
+      const mockApiKey = {
+        id: `key-${Date.now()}`,
+        description: data.description,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        expiresAt: data.expiresAt?.toISOString(),
+        value: "sk_dev_mock_key_" + Math.random().toString(36).substring(2),
+        update: async () => {
+          console.log("Mock API key update called");
+        },
+        revoke: async () => {
+          console.log("Mock API key revoke called");
+        },
+        isValid: () => true,
+        whyInvalid: () => null,
+        type: "user",
+        userId: "mock-user-id"
+      };
+      return mockApiKey;
+    }
+    if (!userFromHook) throw new Error("User not available");
+    return await userFromHook.createApiKey(data);
+  };
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
     /* @__PURE__ */ jsx(Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") }),
     /* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
@@ -24,10 +114,8 @@ function ApiKeysPage() {
         open: isNewApiKeyDialogOpen,
         onOpenChange: setIsNewApiKeyDialogOpen,
         onKeyCreated: setReturnedApiKey,
-        createApiKey: async (data) => {
-          const apiKey = await user.createApiKey(data);
-          return apiKey;
-        }
+        createApiKey: handleCreateApiKey,
+        mockMode: isInMockMode
       }
     ),
     /* @__PURE__ */ jsx(

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

@@ -1 +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":";AAIA,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAgBvB,SACE,KADF;AAbG,SAAS,cAAc;AAC5B,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,UAAU,KAAK,WAAW;AAEhC,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwC,IAAI;AAExF,QAAM,eAAe;AACrB,QAAM,aAAa;AAEnB,SACE,qBAAC,cACC;AAAA,wBAAC,UAAO,SAAS,MAAM,yBAAyB,IAAI,GACjD,YAAE,gBAAgB,GACrB;AAAA,IACA,oBAAC,eAAY,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":[]}
+{"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(props?: {\n  mockApiKeys?: Array<{\n    id: string,\n    description: string,\n    createdAt: string,\n    expiresAt?: string,\n    manuallyRevokedAt?: string,\n  }>,\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n\n  // Check if we're in any kind of mock mode first\n  const isInMockMode = !!(props?.mockApiKeys || props?.mockMode);\n\n  const userFromHook = useUser({ or: isInMockMode ? 'return-null' : 'redirect' });\n\n  // In mock mode, we don't need a user - just show mock data\n  if (isInMockMode && !userFromHook) {\n    // This is expected in mock mode, continue with mock data\n  }\n\n  // Only return null if we're not in mock mode and don't have a user\n  if (!isInMockMode && !userFromHook) {\n    return null; // This shouldn't happen due to redirect, but just in case\n  }\n\n  // Use mock data if provided\n  const mockApiKeysData = props?.mockApiKeys ? props.mockApiKeys.map(mockKey => ({\n    id: mockKey.id,\n    description: mockKey.description,\n    createdAt: new Date(mockKey.createdAt),\n    expiresAt: mockKey.expiresAt ? new Date(mockKey.expiresAt) : undefined,\n    manuallyRevokedAt: mockKey.manuallyRevokedAt ? new Date(mockKey.manuallyRevokedAt) : null,\n    value: {\n      lastFour: mockKey.id.slice(-4).padStart(4, '0'), // Use last 4 chars of ID or pad with zeros\n    },\n    type: 'user' as const,\n    userId: 'mock-user-id',\n    update: async () => {\n      console.log('Mock API key update called');\n    },\n    revoke: async () => {\n      console.log('Mock API key revoke called');\n    },\n    isValid: () => {\n      const now = new Date();\n      const isExpired = mockKey.expiresAt ? new Date(mockKey.expiresAt) < now : false;\n      const isRevoked = !!mockKey.manuallyRevokedAt;\n      return !isExpired && !isRevoked;\n    },\n    whyInvalid: () => {\n      const now = new Date();\n      if (mockKey.manuallyRevokedAt) return 'manually-revoked';\n      if (mockKey.expiresAt && new Date(mockKey.expiresAt) < now) return 'expired';\n      return null;\n    },\n  })) : [\n    {\n      id: 'key-1',\n      description: 'Development Key',\n      createdAt: new Date(Date.now() - 172800000), // 2 days ago\n      expiresAt: undefined,\n      manuallyRevokedAt: null,\n      value: {\n        lastFour: 'ey-1'.slice(-4).padStart(4, '0'),\n      },\n      type: 'user' as const,\n      userId: 'mock-user-id',\n      update: async () => {\n        console.log('Mock API key update called');\n      },\n      revoke: async () => {\n        console.log('Mock API key revoke called');\n      },\n      isValid: () => true,\n      whyInvalid: () => null,\n    }\n  ];\n\n  // Determine which API keys to use\n  let apiKeys: any[];\n  if (isInMockMode) {\n    apiKeys = mockApiKeysData;\n  } else if (userFromHook) {\n    apiKeys = userFromHook.useApiKeys();\n  } else {\n    apiKeys = [];\n  }\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  const handleCreateApiKey = async (data: ApiKeyCreationOptions<\"user\">) => {\n    if (isInMockMode) {\n      // Mock API key creation\n      const mockApiKey = {\n        id: `key-${Date.now()}`,\n        description: data.description,\n        createdAt: new Date().toISOString(),\n        expiresAt: data.expiresAt?.toISOString(),\n        value: 'sk_dev_mock_key_' + Math.random().toString(36).substring(2),\n        update: async () => {\n          console.log('Mock API key update called');\n        },\n        revoke: async () => {\n          console.log('Mock API key revoke called');\n        },\n        isValid: () => true,\n        whyInvalid: () => null,\n        type: 'user' as const,\n        userId: 'mock-user-id',\n      };\n      return mockApiKey as any;\n    }\n\n    if (!userFromHook) throw new Error('User not available');\n    return await userFromHook.createApiKey(data);\n  };\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={handleCreateApiKey}\n        mockMode={isInMockMode}\n      />\n      <ShowDialog\n        apiKey={returnedApiKey}\n        onClose={() => setReturnedApiKey(null)}\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,7 +2,7 @@
 import { Button, Input, Typography } from "@stackframe/stack-ui";
 import { Edit } from "lucide-react";
 import { useState } from "react";
-import { useTranslation } from "../../lib/translations";
+import { useTranslation } from "../../lib/translations.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function EditableText(props) {
   const [editing, setEditing] = useState(false);

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

@@ -1,18 +1,18 @@
 // src/components-page/account-settings/email-and-auth/email-and-auth-page.tsx
-import { PageLayout } from "../page-layout";
-import { EmailsSection } from "./emails-section";
-import { MfaSection } from "./mfa-section";
-import { OtpSection } from "./otp-section";
-import { PasskeySection } from "./passkey-section";
-import { PasswordSection } from "./password-section";
+import { PageLayout } from "../page-layout.js";
+import { EmailsSection } from "./emails-section.js";
+import { MfaSection } from "./mfa-section.js";
+import { OtpSection } from "./otp-section.js";
+import { PasskeySection } from "./passkey-section.js";
+import { PasswordSection } from "./password-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function EmailsAndAuthPage() {
+function EmailsAndAuthPage(props) {
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(EmailsSection, {}),
-    /* @__PURE__ */ jsx(PasswordSection, {}),
-    /* @__PURE__ */ jsx(PasskeySection, {}),
-    /* @__PURE__ */ jsx(OtpSection, {}),
-    /* @__PURE__ */ jsx(MfaSection, {})
+    /* @__PURE__ */ jsx(EmailsSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(PasswordSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(PasskeySection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(OtpSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(MfaSection, { mockMode: props?.mockMode })
   ] });
 }
 export {

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

@@ -1 +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":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAI5B,SACE,KADF;AAFG,SAAS,oBAAoB;AAClC,SACE,qBAAC,cACC;AAAA,wBAAC,iBAAa;AAAA,IACd,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,kBAAe;AAAA,IAChB,oBAAC,cAAW;AAAA,IACZ,oBAAC,cAAW;AAAA,KACd;AAEJ;","names":[]}
+{"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(props?: {\n  mockMode?: boolean,\n}) {\n  return (\n    <PageLayout>\n      <EmailsSection mockMode={props?.mockMode}/>\n      <PasswordSection mockMode={props?.mockMode} />\n      <PasskeySection mockMode={props?.mockMode} />\n      <OtpSection mockMode={props?.mockMode} />\n      <MfaSection mockMode={props?.mockMode} />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAM5B,SACE,KADF;AAJG,SAAS,kBAAkB,OAE/B;AACD,SACE,qBAAC,cACC;AAAA,wBAAC,iBAAc,UAAU,OAAO,UAAS;AAAA,IACzC,oBAAC,mBAAgB,UAAU,OAAO,UAAU;AAAA,IAC5C,oBAAC,kBAAe,UAAU,OAAO,UAAU;AAAA,IAC3C,oBAAC,cAAW,UAAU,OAAO,UAAU;AAAA,IACvC,oBAAC,cAAW,UAAU,OAAO,UAAU;AAAA,KACzC;AAEJ;","names":[]}

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

@@ -6,13 +6,22 @@ import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises"
 import { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from "@stackframe/stack-ui";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { FormWarningText } from "../../../components/elements/form-warning";
-import { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function EmailsSection() {
+function EmailsSection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "redirect" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Emails") }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("Email management is not available in demo mode.") })
+    ] });
+  }
+  if (!user) {
+    return null;
+  }
   const contactChannels = user.useContactChannels();
   const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
   const [addingEmailLoading, setAddingEmailLoading] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/emails-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared/dist/known-errors\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function EmailsSection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const contactChannels = user.useContactChannels();\n  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);\n  const [addingEmailLoading, setAddingEmailLoading] = useState(false);\n  const [addedEmail, setAddedEmail] = useState<string | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const isLastEmail = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;\n\n  useEffect(() => {\n    if (addedEmail) {\n      runAsynchronously(async () => {\n        const cc = contactChannels.find(x => x.value === addedEmail);\n        if (cc && !cc.isVerified) {\n          await cc.sendVerificationEmail();\n        }\n        setAddedEmail(null);\n      });\n    }\n  }, [contactChannels, addedEmail]);\n\n  const emailSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address'))\n      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))\n      .defined()\n      .nonEmpty(t('Email is required')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(emailSchema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {\n    setAddingEmailLoading(true);\n    try {\n      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });\n      setAddedEmail(data.email);\n    } finally {\n      setAddingEmailLoading(false);\n    }\n    setAddingEmail(false);\n    reset();\n  };\n\n  return (\n    <div>\n      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n        <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        {addingEmail ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              runAsynchronously(handleSubmit(onSubmit));\n            }}\n            className='flex flex-col'\n          >\n            <div className='flex gap-2'>\n              <Input\n                {...register(\"email\")}\n                placeholder={t(\"Enter email\")}\n              />\n              <Button type=\"submit\" loading={addingEmailLoading}>\n                {t(\"Add\")}\n              </Button>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setAddingEmail(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n            {errors.email && <FormWarningText text={errors.email.message} />}\n          </form>\n        ) : (\n          <div className='flex md:justify-end'>\n            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t(\"Add an email\")}</Button>\n          </div>\n        )}\n      </div>\n\n      {contactChannels.length > 0 ? (\n        <div className='border rounded-md'>\n          <Table>\n            <TableBody>\n              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}\n              {contactChannels.filter(x => x.type === 'email')\n                .sort((a, b) => {\n                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;\n                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;\n                  return 0;\n                })\n                .map(x => (\n                  <TableRow key={x.id}>\n                    <TableCell>\n                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>\n                        {x.value}\n                        <div className='flex gap-2'>\n                          {x.isPrimary ? <Badge>{t(\"Primary\")}</Badge> : null}\n                          {!x.isVerified ? <Badge variant='destructive'>{t(\"Unverified\")}</Badge> : null}\n                          {x.usedForAuth ? <Badge variant='outline'>{t(\"Used for sign-in\")}</Badge> : null}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <ActionCell items={[\n                        ...(!x.isVerified ? [{\n                          item: t(\"Send verification email\"),\n                          onClick: async () => { await x.sendVerificationEmail(); },\n                        }] : []),\n                        ...(!x.isPrimary && x.isVerified ? [{\n                          item: t(\"Set as primary\"),\n                          onClick: async () => { await x.update({ isPrimary: true }); },\n                        }] :\n                          !x.isPrimary ? [{\n                            item: t(\"Set as primary\"),\n                            onClick: async () => {},\n                            disabled: true,\n                            disabledTooltip: t(\"Please verify your email first\"),\n                          }] : []),\n                        ...(!x.usedForAuth && x.isVerified ? [{\n                          item: t(\"Use for sign-in\"),\n                          onClick: async () => {\n                            try {\n                              await x.update({ usedForAuth: true });\n                            } catch (e) {\n                              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {\n                                alert(t(\"This email is already used for sign-in by another user.\"));\n                              }\n                            }\n                          }\n                        }] : []),\n                        ...(x.usedForAuth && !isLastEmail ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => { await x.update({ usedForAuth: false }); },\n                        }] : x.usedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }] : []),\n                        ...(!isLastEmail || !x.usedForAuth ? [{\n                          item: t(\"Remove\"),\n                          onClick: async () => { await x.delete(); },\n                          danger: true,\n                        }] : [{\n                          item: t(\"Remove\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }]),\n                      ]}/>\n                    </TableCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </Table>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/emails-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared/dist/known-errors\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function EmailsSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <div>\n        <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n          <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        </div>\n        <Typography variant='secondary'>{t(\"Email management is not available in demo mode.\")}</Typography>\n      </div>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to redirect\n  }\n\n  const contactChannels = user.useContactChannels();\n  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);\n  const [addingEmailLoading, setAddingEmailLoading] = useState(false);\n  const [addedEmail, setAddedEmail] = useState<string | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const isLastEmail = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;\n\n  useEffect(() => {\n    if (addedEmail) {\n      runAsynchronously(async () => {\n        const cc = contactChannels.find(x => x.value === addedEmail);\n        if (cc && !cc.isVerified) {\n          await cc.sendVerificationEmail();\n        }\n        setAddedEmail(null);\n      });\n    }\n  }, [contactChannels, addedEmail]);\n\n  const emailSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address'))\n      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))\n      .defined()\n      .nonEmpty(t('Email is required')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(emailSchema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {\n    setAddingEmailLoading(true);\n    try {\n      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });\n      setAddedEmail(data.email);\n    } finally {\n      setAddingEmailLoading(false);\n    }\n    setAddingEmail(false);\n    reset();\n  };\n\n  return (\n    <div>\n      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n        <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        {addingEmail ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              runAsynchronously(handleSubmit(onSubmit));\n            }}\n            className='flex flex-col'\n          >\n            <div className='flex gap-2'>\n              <Input\n                {...register(\"email\")}\n                placeholder={t(\"Enter email\")}\n              />\n              <Button type=\"submit\" loading={addingEmailLoading}>\n                {t(\"Add\")}\n              </Button>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setAddingEmail(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n            {errors.email && <FormWarningText text={errors.email.message} />}\n          </form>\n        ) : (\n          <div className='flex md:justify-end'>\n            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t(\"Add an email\")}</Button>\n          </div>\n        )}\n      </div>\n\n      {contactChannels.length > 0 ? (\n        <div className='border rounded-md'>\n          <Table>\n            <TableBody>\n              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}\n              {contactChannels.filter(x => x.type === 'email')\n                .sort((a, b) => {\n                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;\n                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;\n                  return 0;\n                })\n                .map(x => (\n                  <TableRow key={x.id}>\n                    <TableCell>\n                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>\n                        {x.value}\n                        <div className='flex gap-2'>\n                          {x.isPrimary ? <Badge>{t(\"Primary\")}</Badge> : null}\n                          {!x.isVerified ? <Badge variant='destructive'>{t(\"Unverified\")}</Badge> : null}\n                          {x.usedForAuth ? <Badge variant='outline'>{t(\"Used for sign-in\")}</Badge> : null}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <ActionCell items={[\n                        ...(!x.isVerified ? [{\n                          item: t(\"Send verification email\"),\n                          onClick: async () => { await x.sendVerificationEmail(); },\n                        }] : []),\n                        ...(!x.isPrimary && x.isVerified ? [{\n                          item: t(\"Set as primary\"),\n                          onClick: async () => { await x.update({ isPrimary: true }); },\n                        }] :\n                          !x.isPrimary ? [{\n                            item: t(\"Set as primary\"),\n                            onClick: async () => {},\n                            disabled: true,\n                            disabledTooltip: t(\"Please verify your email first\"),\n                          }] : []),\n                        ...(!x.usedForAuth && x.isVerified ? [{\n                          item: t(\"Use for sign-in\"),\n                          onClick: async () => {\n                            try {\n                              await x.update({ usedForAuth: true });\n                            } catch (e) {\n                              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {\n                                alert(t(\"This email is already used for sign-in by another user.\"));\n                              }\n                            }\n                          }\n                        }] : []),\n                        ...(x.usedForAuth && !isLastEmail ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => { await x.update({ usedForAuth: false }); },\n                        }] : x.usedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }] : []),\n                        ...(!isLastEmail || !x.usedForAuth ? [{\n                          item: t(\"Remove\"),\n                          onClick: async () => { await x.delete(); },\n                          danger: true,\n                        }] : [{\n                          item: t(\"Remove\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }]),\n                      ]}/>\n                    </TableCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </Table>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -7,14 +7,27 @@ import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/
 import { Button, Input, Typography } from "@stackframe/stack-ui";
 import * as QRCode from "qrcode";
 import { useEffect, useState } from "react";
-import { useStackApp, useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function MfaSection() {
+function MfaSection(props) {
   const { t } = useTranslation();
   const project = useStackApp().useProject();
-  const user = useUser({ or: "throw" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Multi-factor authentication"),
+        description: t("MFA management is not available in demo mode."),
+        children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("MFA management is not available in demo mode.") })
+      }
+    );
+  }
+  if (!user) {
+    return null;
+  }
   const [generatedSecret, setGeneratedSecret] = useState(null);
   const [qrCodeUrl, setQrCodeUrl] = useState(null);
   const [mfaCode, setMfaCode] = useState("");

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/mfa-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { createTOTPKeyURI, verifyTOTP } from \"@oslojs/otp\";\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Typography } from \"@stackframe/stack-ui\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from \"react\";\nimport { CurrentUser, Project } from '../../..';\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function MfaSection() {\n  const { t } = useTranslation();\n  const project = useStackApp().useProject();\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <Section\n      title={t(\"Multi-factor authentication\")}\n      description={isEnabled\n        ? t(\"Multi-factor authentication is currently enabled.\")\n        : t(\"Multi-factor authentication is currently disabled.\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!isEnabled && generatedSecret && (\n          <>\n            <Typography>{t(\"Scan this QR code with your authenticator app:\")}</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt={t(\"TOTP multi-factor authentication QR code\")} />\n            <Typography>{t(\"Then, enter your six-digit MFA code:\")}</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">{t(\"Incorrect code. Please try again.\")}</Typography>\n            )}\n            <div className='flex'>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setGeneratedSecret(null);\n                  setQrCodeUrl(null);\n                  setMfaCode(\"\");\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </>\n        )}\n        <div className='flex gap-2'>\n          {isEnabled ? (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              }}\n            >\n              {t(\"Disable MFA\")}\n            </Button>\n          ) : !generatedSecret && (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              }}\n            >\n              {t(\"Enable MFA\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);\n  return await QRCode.toDataURL(uri) as any;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/mfa-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { createTOTPKeyURI, verifyTOTP } from \"@oslojs/otp\";\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Typography } from \"@stackframe/stack-ui\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from \"react\";\nimport { CurrentUser, Project } from '../../..';\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function MfaSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const project = useStackApp().useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Multi-factor authentication\")}\n        description={t(\"MFA management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"MFA management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <Section\n      title={t(\"Multi-factor authentication\")}\n      description={isEnabled\n        ? t(\"Multi-factor authentication is currently enabled.\")\n        : t(\"Multi-factor authentication is currently disabled.\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!isEnabled && generatedSecret && (\n          <>\n            <Typography>{t(\"Scan this QR code with your authenticator app:\")}</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt={t(\"TOTP multi-factor authentication QR code\")} />\n            <Typography>{t(\"Then, enter your six-digit MFA code:\")}</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">{t(\"Incorrect code. Please try again.\")}</Typography>\n            )}\n            <div className='flex'>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setGeneratedSecret(null);\n                  setQrCodeUrl(null);\n                  setMfaCode(\"\");\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </>\n        )}\n        <div className='flex gap-2'>\n          {isEnabled ? (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              }}\n            >\n              {t(\"Disable MFA\")}\n            </Button>\n          ) : !generatedSecret && (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              }}\n            >\n              {t(\"Enable MFA\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);\n  return await QRCode.toDataURL(uri) as any;\n}\n"],"mappings":";AAIA,SAAS,kBAAkB,kBAAkB;AAC7C,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,OAAO,kBAAkB;AAC1C,YAAY,YAAY;AACxB,SAAS,WAAW,gBAAgB;AAEpC,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAgBhB,SA0CE,UA1CF,KA0CE,YA1CF;AAdD,SAAS,WAAW,OAExB;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,UAAU,YAAY,EAAE,WAAW;AACzC,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAGtE,MAAI,OAAO,YAAY,CAAC,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,6BAA6B;AAAA,QACtC,aAAa,EAAE,+CAA+C;AAAA,QAE9D,8BAAC,cAAW,SAAQ,aAAa,YAAE,+CAA+C,GAAE;AAAA;AAAA,IACtF;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA4B,IAAI;AAC9E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiB,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,YAAY,KAAK;AAEvB,QAAM,CAAC,cAAc,SAAS,IAAI,iBAAiB,YAAY;AAC7D,UAAM,KAAK,OAAO;AAAA,MAChB,uBAAuB;AAAA,IACzB,CAAC;AACD,uBAAmB,IAAI;AACvB,iBAAa,IAAI;AACjB,eAAW,EAAE;AAAA,EACf,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,YAAU,MAAM;AACd,oBAAgB,KAAK;AACrB,+BAA2B,YAAY;AACrC,UAAI,mBAAmB,WAAW,iBAAiB,IAAI,GAAG,OAAO,GAAG;AAClE,cAAM,aAAa;AAAA,MACrB;AACA,sBAAgB,IAAI;AAAA,IACtB,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,iBAAiB,YAAY,CAAC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,6BAA6B;AAAA,MACtC,aAAa,YACT,EAAE,mDAAmD,IACrD,EAAE,oDAAoD;AAAA,MAE1D,+BAAC,SAAI,WAAU,uBACZ;AAAA,SAAC,aAAa,mBACb,iCACE;AAAA,8BAAC,cAAY,YAAE,gDAAgD,GAAE;AAAA,UACjE,oBAAC,SAAI,OAAO,KAAK,QAAQ,KAAK,KAAK,aAAa,SAAS,iCAAiC,GAAG,KAAK,EAAE,0CAA0C,GAAG;AAAA,UACjJ,oBAAC,cAAY,YAAE,sCAAsC,GAAE;AAAA,UACvD;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU,CAAC,MAAM;AACf,gCAAgB,KAAK;AACrB,2BAAW,EAAE,OAAO,KAAK;AAAA,cAC3B;AAAA,cACA,aAAY;AAAA,cACZ,WAAW;AAAA,cACX,UAAU;AAAA;AAAA,UACZ;AAAA,UACC,gBAAgB,QAAQ,WAAW,KAClC,oBAAC,cAAW,SAAQ,eAAe,YAAE,mCAAmC,GAAE;AAAA,UAE5E,oBAAC,SAAI,WAAU,QACb;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MAAM;AACb,mCAAmB,IAAI;AACvB,6BAAa,IAAI;AACjB,2BAAW,EAAE;AAAA,cACf;AAAA,cAEC,YAAE,QAAQ;AAAA;AAAA,UACb,GACF;AAAA,WACF;AAAA,QAEF,oBAAC,SAAI,WAAU,cACZ,sBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,YAAY;AACnB,oBAAM,KAAK,OAAO;AAAA,gBAChB,uBAAuB;AAAA,cACzB,CAAC;AAAA,YACH;AAAA,YAEC,YAAE,aAAa;AAAA;AAAA,QAClB,IACE,CAAC,mBACH;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,YAAY;AACnB,oBAAM,SAAS,qBAAqB,IAAI,WAAW,EAAE,CAAC;AACtD,2BAAa,MAAM,mBAAmB,SAAS,MAAM,MAAM,CAAC;AAC5D,iCAAmB,MAAM;AAAA,YAC3B;AAAA,YAEC,YAAE,YAAY;AAAA;AAAA,QACjB,GAEJ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,eAAe,mBAAmB,SAAkB,MAAmB,QAAoB;AACzF,QAAM,MAAM,iBAAiB,QAAQ,aAAa,KAAK,gBAAgB,KAAK,IAAI,QAAQ,IAAI,CAAC;AAC7F,SAAO,MAAa,iBAAU,GAAG;AACnC;","names":[]}

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

@@ -1,13 +1,26 @@
 // src/components-page/account-settings/email-and-auth/otp-section.tsx
 import { Button, Typography } from "@stackframe/stack-ui";
 import { useState } from "react";
-import { useStackApp, useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function OtpSection() {
+function OtpSection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("One-Time Password"),
+        description: t("OTP management is not available in demo mode."),
+        children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("OTP management is not available in demo mode.") })
+      }
+    );
+  }
+  if (!user) {
+    return null;
+  }
   const project = useStackApp().useProject();
   const contactChannels = user.useContactChannels();
   const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function OtpSection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: \"throw\" });\n  const project = useStackApp().useProject();\n  const contactChannels = user.useContactChannels();\n  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;\n  const [disabling, setDisabling] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.magicLinkEnabled) {\n    return null;\n  }\n\n  const handleDisableOTP = async () => {\n    await user.update({ otpAuthEnabled: false });\n    setDisabling(false);\n  };\n\n  return (\n    <Section title={t(\"OTP sign-in\")} description={user.otpAuthEnabled ? t(\"OTP/magic link sign-in is currently enabled.\") : t(\"Enable sign-in via magic link or OTP sent to your sign-in emails.\")}>\n      <div className='flex md:justify-end'>\n        {hasValidEmail ? (\n          user.otpAuthEnabled ? (\n            !isLastAuth ? (\n              !disabling ? (\n                <Button\n                  variant='secondary'\n                  onClick={() => setDisabling(true)}\n                >\n                  {t(\"Disable OTP\")}\n                </Button>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDisableOTP}\n                    >\n                      {t(\"Disable\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDisabling(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )\n            ) : (\n              <Typography variant='secondary' type='label'>{t(\"OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n            )\n          ) : (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({ otpAuthEnabled: true });\n              }}\n            >\n              {t(\"Enable OTP\")}\n            </Button>\n          )\n        ) : (\n          <Typography variant='secondary' type='label'>{t(\"To enable OTP sign-in, please add a verified sign-in email.\")}</Typography>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AA6BR,cAWE,YAXF;AA3BT,SAAS,aAAa;AAC3B,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,QAAQ,CAAC;AACpC,QAAM,UAAU,YAAY,EAAE,WAAW;AACzC,QAAM,kBAAkB,KAAK,mBAAmB;AAChD,QAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;AACzG,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS;AAEhH,MAAI,CAAC,QAAQ,OAAO,kBAAkB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,YAAY;AACnC,UAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;AAC3C,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,oBAAC,WAAQ,OAAO,EAAE,aAAa,GAAG,aAAa,KAAK,iBAAiB,EAAE,8CAA8C,IAAI,EAAE,mEAAmE,GAC5L,8BAAC,SAAI,WAAU,uBACZ,0BACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM,aAAa,IAAI;AAAA,MAE/B,YAAE,aAAa;AAAA;AAAA,EAClB,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,cAAW,SAAQ,eACjB,YAAE,yGAAyG,GAC9G;AAAA,IACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,YAAE,SAAS;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,aAAa,KAAK;AAAA,UAEhC,YAAE,QAAQ;AAAA;AAAA,MACb;AAAA,OACF;AAAA,KACF,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,0FAA0F,GAAE,IAG9I;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,YAAY;AACnB,cAAM,KAAK,OAAO,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AAAA,MAEC,YAAE,YAAY;AAAA;AAAA,EACjB,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,6DAA6D,GAAE,GAEnH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function OtpSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"One-Time Password\")}\n        description={t(\"OTP management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"OTP management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const project = useStackApp().useProject();\n  const contactChannels = user.useContactChannels();\n  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;\n  const [disabling, setDisabling] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.magicLinkEnabled) {\n    return null;\n  }\n\n  const handleDisableOTP = async () => {\n    await user.update({ otpAuthEnabled: false });\n    setDisabling(false);\n  };\n\n  return (\n    <Section title={t(\"OTP sign-in\")} description={user.otpAuthEnabled ? t(\"OTP/magic link sign-in is currently enabled.\") : t(\"Enable sign-in via magic link or OTP sent to your sign-in emails.\")}>\n      <div className='flex md:justify-end'>\n        {hasValidEmail ? (\n          user.otpAuthEnabled ? (\n            !isLastAuth ? (\n              !disabling ? (\n                <Button\n                  variant='secondary'\n                  onClick={() => setDisabling(true)}\n                >\n                  {t(\"Disable OTP\")}\n                </Button>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDisableOTP}\n                    >\n                      {t(\"Disable\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDisabling(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )\n            ) : (\n              <Typography variant='secondary' type='label'>{t(\"OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n            )\n          ) : (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({ otpAuthEnabled: true });\n              }}\n            >\n              {t(\"Enable OTP\")}\n            </Button>\n          )\n        ) : (\n          <Typography variant='secondary' type='label'>{t(\"To enable OTP sign-in, please add a verified sign-in email.\")}</Typography>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAehB,cA2CU,YA3CV;AAbD,SAAS,WAAW,OAExB;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAGtE,MAAI,OAAO,YAAY,CAAC,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,mBAAmB;AAAA,QAC5B,aAAa,EAAE,+CAA+C;AAAA,QAE9D,8BAAC,cAAW,SAAQ,aAAa,YAAE,+CAA+C,GAAE;AAAA;AAAA,IACtF;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,QAAM,UAAU,YAAY,EAAE,WAAW;AACzC,QAAM,kBAAkB,KAAK,mBAAmB;AAChD,QAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;AACzG,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS;AAEhH,MAAI,CAAC,QAAQ,OAAO,kBAAkB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,YAAY;AACnC,UAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;AAC3C,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,oBAAC,WAAQ,OAAO,EAAE,aAAa,GAAG,aAAa,KAAK,iBAAiB,EAAE,8CAA8C,IAAI,EAAE,mEAAmE,GAC5L,8BAAC,SAAI,WAAU,uBACZ,0BACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM,aAAa,IAAI;AAAA,MAE/B,YAAE,aAAa;AAAA;AAAA,EAClB,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,cAAW,SAAQ,eACjB,YAAE,yGAAyG,GAC9G;AAAA,IACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,YAAE,SAAS;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,aAAa,KAAK;AAAA,UAEhC,YAAE,QAAQ;AAAA;AAAA,MACb;AAAA,OACF;AAAA,KACF,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,0FAA0F,GAAE,IAG9I;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,YAAY;AACnB,cAAM,KAAK,OAAO,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AAAA,MAEC,YAAE,YAAY;AAAA;AAAA,EACjB,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,6DAA6D,GAAE,GAEnH,GACF;AAEJ;","names":[]}