@verdaccio/ui-components 5.0.0-next-9.20 → 5.0.0-next-9.21

package/build/sections/Header/Header.mjs

@@ -1,4 +1,4 @@
-import { isTokenExpire } from "../../utils/token.mjs";
+import { tokenExpireInMs } from "../../utils/token.mjs";
 import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.mjs";
 import { useAuth } from "../../providers/AuthProvider/AuthProvider.mjs";
 import LoginDialog from "../../components/LoginDialog/LoginDialog.mjs";
@@ -9,11 +9,11 @@ import HeaderRight from "./HeaderRight.mjs";
 import HeaderSettingsDialog from "./HeaderSettingsDialog.mjs";
 import "../../index.mjs";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Button from "@mui/material/Button";
 //#region src/sections/Header/Header.tsx
-var Header = ({ HeaderInfoDialog, isPlainHeader, tokenCheckIntervalMs = 36e5 }) => {
+var Header = ({ HeaderInfoDialog, isPlainHeader }) => {
 	const { t } = useTranslation();
 	const [isInfoDialogOpen, setOpenInfoDialog] = useState(false);
 	const [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
@@ -21,23 +21,25 @@ var Header = ({ HeaderInfoDialog, isPlainHeader, tokenCheckIntervalMs = 36e5 })
 	const [showLoginModal, setShowLoginModal] = useState(false);
 	const { configOptions } = useConfig();
 	const { userState, logOutUser } = useAuth();
-	const tokenRef = useRef(userState?.token);
 	const logOutUserRef = useRef(logOutUser);
-	useEffect(() => {
-		tokenRef.current = userState?.token;
-	}, [userState?.token]);
 	useEffect(() => {
 		logOutUserRef.current = logOutUser;
 	}, [logOutUser]);
 	useEffect(() => {
-		function checkToken() {
-			const token = tokenRef.current;
-			if (token && isTokenExpire(token)) logOutUserRef.current?.();
-		}
-		checkToken();
-		const interval = setInterval(checkToken, tokenCheckIntervalMs);
-		return () => clearInterval(interval);
-	}, [tokenCheckIntervalMs]);
+		const token = userState?.token;
+		if (!token) return;
+		let timer;
+		const arm = () => {
+			const remaining = tokenExpireInMs(token);
+			if (remaining === null || remaining <= 0) {
+				logOutUserRef.current?.();
+				return;
+			}
+			timer = setTimeout(arm, Math.min(remaining, 2 ** 31 - 1));
+		};
+		arm();
+		return () => clearTimeout(timer);
+	}, [userState?.token]);
 	const handleLogout = () => {
 		logOutUser?.();
 		setShowLoginModal(false);

package/build/sections/Header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","names":[],"sources":["../../../src/sections/Header/Header.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { LoginDialog, Search, useAuth, useConfig } from '../../';\nimport { isTokenExpire } from '../../utils/token';\nimport HeaderLeft from './HeaderLeft';\nimport HeaderRight from './HeaderRight';\nimport HeaderSettingsDialog from './HeaderSettingsDialog';\nimport { InnerMobileNavBar, InnerNavBar, MobileNavBar, NavBar } from './styles';\n\ntype Props = {\n  HeaderInfoDialog?: React.FC<any>;\n  isPlainHeader?: boolean;\n  tokenCheckIntervalMs?: number;\n};\n\n// Session timeout default is 1 hour\nconst Header: React.FC<Props> = ({\n  HeaderInfoDialog,\n  isPlainHeader,\n  tokenCheckIntervalMs = 60 * 60 * 1000,\n}) => {\n  const { t } = useTranslation();\n  const [isInfoDialogOpen, setOpenInfoDialog] = useState<boolean>(false);\n  const [isSettingsDialogOpen, setSettingsDialogOpen] = useState<boolean>(false);\n  const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);\n  const [showLoginModal, setShowLoginModal] = useState<boolean>(false);\n  const { configOptions } = useConfig();\n  const { userState, logOutUser } = useAuth();\n\n  // Use refs to always have the latest token/logout in the interval callback\n  const tokenRef = useRef(userState?.token);\n  const logOutUserRef = useRef(logOutUser);\n  useEffect(() => {\n    tokenRef.current = userState?.token;\n  }, [userState?.token]);\n  useEffect(() => {\n    logOutUserRef.current = logOutUser;\n  }, [logOutUser]);\n\n  useEffect(() => {\n    function checkToken() {\n      const token = tokenRef.current;\n      if (token && isTokenExpire(token)) {\n        logOutUserRef.current?.();\n      }\n    }\n    checkToken();\n    const interval = setInterval(checkToken, tokenCheckIntervalMs);\n    return () => clearInterval(interval);\n  }, [tokenCheckIntervalMs]);\n\n  const handleLogout = () => {\n    logOutUser?.();\n    setShowLoginModal(false);\n  };\n  if (isPlainHeader) {\n    return (\n      <NavBar data-testid=\"header\" position=\"static\">\n        <InnerNavBar data-testid=\"inner-nav-bar\">\n          <HeaderLeft showSearch={false} />\n          <HeaderRight\n            hasLogin={false}\n            onLogout={() => {}}\n            onOpenRegistryInfoDialog={() => {}}\n            onOpenSettingsDialog={() => {}}\n            onToggleLogin={() => {}}\n            onToggleMobileNav={() => {}}\n            showInfo={false}\n            showSearch={false}\n            showSettings={false}\n            showThemeSwitch={false}\n            username={''}\n          />\n        </InnerNavBar>\n      </NavBar>\n    );\n  }\n\n  return (\n    <>\n      <NavBar data-testid=\"header\" position=\"static\">\n        <InnerNavBar data-testid=\"inner-nav-bar\">\n          <HeaderLeft showSearch={configOptions.showSearch} />\n          <HeaderRight\n            hasLogin={configOptions?.login}\n            onLogout={handleLogout}\n            onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}\n            onOpenSettingsDialog={() => setSettingsDialogOpen(true)}\n            onToggleLogin={() => setShowLoginModal(!showLoginModal)}\n            onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}\n            showInfo={configOptions.showInfo}\n            showSearch={configOptions.showSearch}\n            showSettings={configOptions.showSettings}\n            showThemeSwitch={configOptions.showThemeSwitch}\n            username={userState?.username}\n          />\n        </InnerNavBar>\n        <HeaderSettingsDialog\n          isOpen={isSettingsDialogOpen}\n          onCloseDialog={() => setSettingsDialogOpen(false)}\n        />\n        {HeaderInfoDialog ? (\n          <HeaderInfoDialog\n            dialogTitle={t('dialog.registry-info.title')}\n            isOpen={isInfoDialogOpen}\n            onCloseDialog={() => setOpenInfoDialog(false)}\n          />\n        ) : null}\n      </NavBar>\n      {showMobileNavBar && (\n        <MobileNavBar data-testid=\"mobile-nav-bar\">\n          <InnerMobileNavBar>\n            <Search />\n          </InnerMobileNavBar>\n          <Button color=\"inherit\" onClick={() => setShowMobileNavBar(false)}>\n            {t('button.cancel')}\n          </Button>\n        </MobileNavBar>\n      )}\n      {!userState?.username && (\n        <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />\n      )}\n    </>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,UAA2B,EAC/B,kBACA,eACA,uBAAuB,WACnB;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,kBAAkB,qBAAqB,SAAkB,KAAK;CACrE,MAAM,CAAC,sBAAsB,yBAAyB,SAAkB,KAAK;CAC7E,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,KAAK;CACvE,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,EAAE,WAAW,eAAe,QAAQ;CAG1C,MAAM,WAAW,OAAO,WAAW,KAAK;CACxC,MAAM,gBAAgB,OAAO,UAAU;CACvC,gBAAgB;EACd,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,WAAW,KAAK,CAAC;CACrB,gBAAgB;EACd,cAAc,UAAU;CAC1B,GAAG,CAAC,UAAU,CAAC;CAEf,gBAAgB;EACd,SAAS,aAAa;GACpB,MAAM,QAAQ,SAAS;GACvB,IAAI,SAAS,cAAc,KAAK,GAC9B,cAAc,UAAU;EAE5B;EACA,WAAW;EACX,MAAM,WAAW,YAAY,YAAY,oBAAoB;EAC7D,aAAa,cAAc,QAAQ;CACrC,GAAG,CAAC,oBAAoB,CAAC;CAEzB,MAAM,qBAAqB;EACzB,aAAa;EACb,kBAAkB,KAAK;CACzB;CACA,IAAI,eACF,OACE,oBAAC,QAAD;EAAQ,eAAY;EAAS,UAAS;EACpC,UAAA,qBAAC,aAAD;GAAa,eAAY;GAAzB,UAAA,CACE,oBAAC,YAAD,EAAY,YAAY,MAAQ,CAAA,GAChC,oBAAC,aAAD;IACE,UAAU;IACV,gBAAgB,CAAC;IACjB,gCAAgC,CAAC;IACjC,4BAA4B,CAAC;IAC7B,qBAAqB,CAAC;IACtB,yBAAyB,CAAC;IAC1B,UAAU;IACV,YAAY;IACZ,cAAc;IACd,iBAAiB;IACjB,UAAU;GACX,CAAA,CACU;;CACP,CAAA;CAIZ,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,qBAAC,QAAD;GAAQ,eAAY;GAAS,UAAS;GAAtC,UAAA;IACE,qBAAC,aAAD;KAAa,eAAY;KAAzB,UAAA,CACE,oBAAC,YAAD,EAAY,YAAY,cAAc,WAAa,CAAA,GACnD,oBAAC,aAAD;MACE,UAAU,eAAe;MACzB,UAAU;MACV,gCAAgC,kBAAkB,IAAI;MACtD,4BAA4B,sBAAsB,IAAI;MACtD,qBAAqB,kBAAkB,CAAC,cAAc;MACtD,yBAAyB,oBAAoB,CAAC,gBAAgB;MAC9D,UAAU,cAAc;MACxB,YAAY,cAAc;MAC1B,cAAc,cAAc;MAC5B,iBAAiB,cAAc;MAC/B,UAAU,WAAW;KACtB,CAAA,CACU;;IACb,oBAAC,sBAAD;KACE,QAAQ;KACR,qBAAqB,sBAAsB,KAAK;IACjD,CAAA;IACA,mBACC,oBAAC,kBAAD;KACE,aAAa,EAAE,4BAA4B;KAC3C,QAAQ;KACR,qBAAqB,kBAAkB,KAAK;IAC7C,CAAA,IACC;GACE;;EACP,oBACC,qBAAC,cAAD;GAAc,eAAY;GAA1B,UAAA,CACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,QAAD,CAAS,CAAA,EACQ,CAAA,GACnB,oBAAC,QAAD;IAAQ,OAAM;IAAU,eAAe,oBAAoB,KAAK;IAC7D,UAAA,EAAE,eAAe;GACZ,CAAA,CACI;;EAEf,CAAC,WAAW,YACX,oBAAC,aAAD;GAAa,eAAe,kBAAkB,KAAK;GAAG,MAAM;EAAiB,CAAA;CAE/E,EAAA,CAAA;AAEN"}
+{"version":3,"file":"Header.mjs","names":[],"sources":["../../../src/sections/Header/Header.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { LoginDialog, Search, useAuth, useConfig } from '../../';\nimport { tokenExpireInMs } from '../../utils/token';\nimport HeaderLeft from './HeaderLeft';\nimport HeaderRight from './HeaderRight';\nimport HeaderSettingsDialog from './HeaderSettingsDialog';\nimport { InnerMobileNavBar, InnerNavBar, MobileNavBar, NavBar } from './styles';\n\ntype Props = {\n  HeaderInfoDialog?: React.FC<any>;\n  isPlainHeader?: boolean;\n};\n\nconst Header: React.FC<Props> = ({ HeaderInfoDialog, isPlainHeader }) => {\n  const { t } = useTranslation();\n  const [isInfoDialogOpen, setOpenInfoDialog] = useState<boolean>(false);\n  const [isSettingsDialogOpen, setSettingsDialogOpen] = useState<boolean>(false);\n  const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);\n  const [showLoginModal, setShowLoginModal] = useState<boolean>(false);\n  const { configOptions } = useConfig();\n  const { userState, logOutUser } = useAuth();\n\n  // Use a ref to always have the latest logout in the timer callback\n  const logOutUserRef = useRef(logOutUser);\n  useEffect(() => {\n    logOutUserRef.current = logOutUser;\n  }, [logOutUser]);\n\n  // log out exactly when the token expires; polling reloaded the page at an\n  // arbitrary moment up to a minute later, mid-interaction\n  useEffect(() => {\n    const token = userState?.token;\n    if (!token) {\n      return;\n    }\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const arm = () => {\n      const remaining = tokenExpireInMs(token);\n      if (remaining === null || remaining <= 0) {\n        logOutUserRef.current?.();\n        return;\n      }\n      // setTimeout overflows above 2^31-1 ms; re-arm for far-away expiries\n      timer = setTimeout(arm, Math.min(remaining, 2 ** 31 - 1));\n    };\n    arm();\n    return () => clearTimeout(timer);\n  }, [userState?.token]);\n\n  const handleLogout = () => {\n    logOutUser?.();\n    setShowLoginModal(false);\n  };\n  if (isPlainHeader) {\n    return (\n      <NavBar data-testid=\"header\" position=\"static\">\n        <InnerNavBar data-testid=\"inner-nav-bar\">\n          <HeaderLeft showSearch={false} />\n          <HeaderRight\n            hasLogin={false}\n            onLogout={() => {}}\n            onOpenRegistryInfoDialog={() => {}}\n            onOpenSettingsDialog={() => {}}\n            onToggleLogin={() => {}}\n            onToggleMobileNav={() => {}}\n            showInfo={false}\n            showSearch={false}\n            showSettings={false}\n            showThemeSwitch={false}\n            username={''}\n          />\n        </InnerNavBar>\n      </NavBar>\n    );\n  }\n\n  return (\n    <>\n      <NavBar data-testid=\"header\" position=\"static\">\n        <InnerNavBar data-testid=\"inner-nav-bar\">\n          <HeaderLeft showSearch={configOptions.showSearch} />\n          <HeaderRight\n            hasLogin={configOptions?.login}\n            onLogout={handleLogout}\n            onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}\n            onOpenSettingsDialog={() => setSettingsDialogOpen(true)}\n            onToggleLogin={() => setShowLoginModal(!showLoginModal)}\n            onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}\n            showInfo={configOptions.showInfo}\n            showSearch={configOptions.showSearch}\n            showSettings={configOptions.showSettings}\n            showThemeSwitch={configOptions.showThemeSwitch}\n            username={userState?.username}\n          />\n        </InnerNavBar>\n        <HeaderSettingsDialog\n          isOpen={isSettingsDialogOpen}\n          onCloseDialog={() => setSettingsDialogOpen(false)}\n        />\n        {HeaderInfoDialog ? (\n          <HeaderInfoDialog\n            dialogTitle={t('dialog.registry-info.title')}\n            isOpen={isInfoDialogOpen}\n            onCloseDialog={() => setOpenInfoDialog(false)}\n          />\n        ) : null}\n      </NavBar>\n      {showMobileNavBar && (\n        <MobileNavBar data-testid=\"mobile-nav-bar\">\n          <InnerMobileNavBar>\n            <Search />\n          </InnerMobileNavBar>\n          <Button color=\"inherit\" onClick={() => setShowMobileNavBar(false)}>\n            {t('button.cancel')}\n          </Button>\n        </MobileNavBar>\n      )}\n      {!userState?.username && (\n        <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />\n      )}\n    </>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,UAA2B,EAAE,kBAAkB,oBAAoB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,kBAAkB,qBAAqB,SAAkB,KAAK;CACrE,MAAM,CAAC,sBAAsB,yBAAyB,SAAkB,KAAK;CAC7E,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,KAAK;CACvE,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,EAAE,WAAW,eAAe,QAAQ;CAG1C,MAAM,gBAAgB,OAAO,UAAU;CACvC,gBAAgB;EACd,cAAc,UAAU;CAC1B,GAAG,CAAC,UAAU,CAAC;CAIf,gBAAgB;EACd,MAAM,QAAQ,WAAW;EACzB,IAAI,CAAC,OACH;EAEF,IAAI;EACJ,MAAM,YAAY;GAChB,MAAM,YAAY,gBAAgB,KAAK;GACvC,IAAI,cAAc,QAAQ,aAAa,GAAG;IACxC,cAAc,UAAU;IACxB;GACF;GAEA,QAAQ,WAAW,KAAK,KAAK,IAAI,WAAW,KAAK,KAAK,CAAC,CAAC;EAC1D;EACA,IAAI;EACJ,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,WAAW,KAAK,CAAC;CAErB,MAAM,qBAAqB;EACzB,aAAa;EACb,kBAAkB,KAAK;CACzB;CACA,IAAI,eACF,OACE,oBAAC,QAAD;EAAQ,eAAY;EAAS,UAAS;EACpC,UAAA,qBAAC,aAAD;GAAa,eAAY;GAAzB,UAAA,CACE,oBAAC,YAAD,EAAY,YAAY,MAAQ,CAAA,GAChC,oBAAC,aAAD;IACE,UAAU;IACV,gBAAgB,CAAC;IACjB,gCAAgC,CAAC;IACjC,4BAA4B,CAAC;IAC7B,qBAAqB,CAAC;IACtB,yBAAyB,CAAC;IAC1B,UAAU;IACV,YAAY;IACZ,cAAc;IACd,iBAAiB;IACjB,UAAU;GACX,CAAA,CACU;;CACP,CAAA;CAIZ,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,qBAAC,QAAD;GAAQ,eAAY;GAAS,UAAS;GAAtC,UAAA;IACE,qBAAC,aAAD;KAAa,eAAY;KAAzB,UAAA,CACE,oBAAC,YAAD,EAAY,YAAY,cAAc,WAAa,CAAA,GACnD,oBAAC,aAAD;MACE,UAAU,eAAe;MACzB,UAAU;MACV,gCAAgC,kBAAkB,IAAI;MACtD,4BAA4B,sBAAsB,IAAI;MACtD,qBAAqB,kBAAkB,CAAC,cAAc;MACtD,yBAAyB,oBAAoB,CAAC,gBAAgB;MAC9D,UAAU,cAAc;MACxB,YAAY,cAAc;MAC1B,cAAc,cAAc;MAC5B,iBAAiB,cAAc;MAC/B,UAAU,WAAW;KACtB,CAAA,CACU;;IACb,oBAAC,sBAAD;KACE,QAAQ;KACR,qBAAqB,sBAAsB,KAAK;IACjD,CAAA;IACA,mBACC,oBAAC,kBAAD;KACE,aAAa,EAAE,4BAA4B;KAC3C,QAAQ;KACR,qBAAqB,kBAAkB,KAAK;IAC7C,CAAA,IACC;GACE;;EACP,oBACC,qBAAC,cAAD;GAAc,eAAY;GAA1B,UAAA,CACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,QAAD,CAAS,CAAA,EACQ,CAAA,GACnB,oBAAC,QAAD;IAAQ,OAAM;IAAU,eAAe,oBAAoB,KAAK;IAC7D,UAAA,EAAE,eAAe;GACZ,CAAA,CACI;;EAEf,CAAC,WAAW,YACX,oBAAC,aAAD;GAAa,eAAe,kBAAkB,KAAK;GAAG,MAAM;EAAiB,CAAA;CAE/E,EAAA,CAAA;AAEN"}

package/build/sections/Header/HeaderGreetings.js

@@ -4,8 +4,8 @@ const require_styles = require("./styles.js");
 require("../../index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/sections/Header/HeaderGreetings.tsx
 var HeaderGreetings = ({ username }) => {
 	const { t } = (0, react_i18next.useTranslation)();

package/build/sections/Header/HeaderGreetings.mjs

@@ -2,8 +2,8 @@ import Label from "../../components/Label/Label.mjs";
 import { Greetings } from "./styles.mjs";
 import "../../index.mjs";
 import "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/sections/Header/HeaderGreetings.tsx
 var HeaderGreetings = ({ username }) => {
 	const { t } = useTranslation();

package/build/sections/Header/HeaderMenu.js

@@ -9,8 +9,8 @@ let _mui_material_IconButton = require("@mui/material/IconButton");
 _mui_material_IconButton = require_runtime.__toESM(_mui_material_IconButton);
 let react = require("react");
 react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
 let react_router = require("react-router");
 let _mui_material_Menu = require("@mui/material/Menu");
 _mui_material_Menu = require_runtime.__toESM(_mui_material_Menu);

package/build/sections/Header/HeaderMenu.mjs

@@ -6,8 +6,8 @@ import HeaderGreetings from "./HeaderGreetings.mjs";
 import "../../index.mjs";
 import IconButton from "@mui/material/IconButton";
 import "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useNavigate } from "react-router";
 import Menu from "@mui/material/Menu";
 import AccountCircle from "@mui/icons-material/AccountCircle";

package/build/sections/Header/HeaderRight.js

@@ -5,8 +5,8 @@ const require_ThemeProvider = require("../../Theme/ThemeProvider.js");
 require("../../index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_Button = require("@mui/material/Button");
 _mui_material_Button = require_runtime.__toESM(_mui_material_Button);
 let _mui_material_Toolbar = require("@mui/material/Toolbar");

package/build/sections/Header/HeaderRight.mjs

@@ -3,8 +3,8 @@ import HeaderToolTip from "./HeaderToolTip.mjs";
 import { useCustomTheme } from "../../Theme/ThemeProvider.mjs";
 import "../../index.mjs";
 import { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Button from "@mui/material/Button";
 import Toolbar from "@mui/material/Toolbar";
 //#region src/sections/Header/HeaderRight.tsx

package/build/sections/Header/HeaderSettingsDialog.js

@@ -9,10 +9,10 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_Box = require("@mui/material/Box");
 _mui_material_Box = require_runtime.__toESM(_mui_material_Box);
-let react_i18next = require("react-i18next");
 let _mui_material_Tab = require("@mui/material/Tab");
 _mui_material_Tab = require_runtime.__toESM(_mui_material_Tab);
 let _mui_material_Tabs = require("@mui/material/Tabs");

package/build/sections/Header/HeaderSettingsDialog.mjs

@@ -6,9 +6,9 @@ import RegistryInfoContent from "./RegistryInfoContent/RegistryInfoContent.mjs";
 import "./RegistryInfoContent/index.mjs";
 import styled from "@emotion/styled";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import ReactMarkdown from "react-markdown";

package/build/sections/Header/LanguageSwitch.js

@@ -5,10 +5,10 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 let i18next = require("i18next");
 i18next = require_runtime.__toESM(i18next);
-let react_i18next = require("react-i18next");
 let _mui_material_Typography = require("@mui/material/Typography");
 _mui_material_Typography = require_runtime.__toESM(_mui_material_Typography);
 let _mui_material_Card = require("@mui/material/Card");

package/build/sections/Header/LanguageSwitch.mjs

@@ -2,9 +2,9 @@ import { useLanguage } from "../../providers/TranslatorProvider/TranslatorProvid
 import "../../index.mjs";
 import styled from "@emotion/styled";
 import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import i18next from "i18next";
-import { useTranslation } from "react-i18next";
 import Typography from "@mui/material/Typography";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.js

@@ -8,10 +8,10 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_Box = require("@mui/material/Box");
 _mui_material_Box = require_runtime.__toESM(_mui_material_Box);
-let react_i18next = require("react-i18next");
 let _mui_material_Link = require("@mui/material/Link");
 _mui_material_Link = require_runtime.__toESM(_mui_material_Link);
 let _mui_material_Typography = require("@mui/material/Typography");

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.mjs

@@ -5,9 +5,9 @@ import { Description, TextContent } from "./styles.mjs";
 import "../../../index.mjs";
 import styled from "@emotion/styled";
 import "react";
+import { useTranslation } from "react-i18next";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
 import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import ReactMarkdown from "react-markdown";

package/build/sections/Home/Home.js

@@ -1,5 +1,6 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_ManifestsProvider = require("../../providers/ManifestsProvider/ManifestsProvider.js");
+const require_GenericError = require("../../components/GenericError/GenericError.js");
 const require_Loading = require("../../components/Loading/Loading.js");
 const require_PackageList = require("../../components/PackageList/PackageList.js");
 require("../../index.js");
@@ -9,11 +10,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/sections/Home/Home.tsx
 var Home = () => {
 	const manifests = require_ManifestsProvider.useManifests();
-	if (manifests.isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "Error loading manifests" });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	if (manifests.isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GenericError.default, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "container content",
 		"data-testid": "home-page-container",
-		children: [manifests.isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loading.default, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PackageList.default, { packages: manifests.manifests }), manifests.isError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "Error loading manifests" })]
+		children: manifests.isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loading.default, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PackageList.default, { packages: manifests.manifests })
 	});
 };
 //#endregion

package/build/sections/Home/Home.js.map

@@ -1 +1 @@
-{"version":3,"file":"Home.js","names":[],"sources":["../../../src/sections/Home/Home.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Loading, PackageList, useManifests } from '../..';\nimport type { ManifestWeb } from '../../providers/ManifestsProvider/ManifestsProvider';\n\nconst Home: React.FC = () => {\n  const manifests = useManifests();\n\n  if (manifests.isError) {\n    return <div>Error loading manifests</div>;\n  }\n\n  return (\n    <div className=\"container content\" data-testid=\"home-page-container\">\n      {manifests.isLoading ? (\n        <Loading />\n      ) : (\n        <PackageList packages={manifests.manifests as ManifestWeb[]} />\n      )}\n      {manifests.isError && <div>{'Error loading manifests'}</div>}\n    </div>\n  );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;;AAKA,IAAM,aAAuB;CAC3B,MAAM,YAAY,0BAAA,aAAa;CAE/B,IAAI,UAAU,SACZ,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UAAK,0BAA4B,CAAA;CAG1C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAoB,eAAY;EAA/C,UAAA,CACG,UAAU,YACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,SAAD,CAAU,CAAA,IAEV,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAA,SAAD,EAAa,UAAU,UAAU,UAA6B,CAAA,GAE/D,UAAU,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UAAM,0BAA+B,CAAA,CACxD;;AAET"}
+{"version":3,"file":"Home.js","names":[],"sources":["../../../src/sections/Home/Home.tsx"],"sourcesContent":["import React from 'react';\n\nimport { GenericError, Loading, PackageList, useManifests } from '../..';\nimport type { ManifestWeb } from '../../providers/ManifestsProvider/ManifestsProvider';\n\nconst Home: React.FC = () => {\n  const manifests = useManifests();\n\n  if (manifests.isError) {\n    return <GenericError />;\n  }\n\n  return (\n    <div className=\"container content\" data-testid=\"home-page-container\">\n      {manifests.isLoading ? (\n        <Loading />\n      ) : (\n        <PackageList packages={manifests.manifests as ManifestWeb[]} />\n      )}\n    </div>\n  );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;;;AAKA,IAAM,aAAuB;CAC3B,MAAM,YAAY,0BAAA,aAAa;CAE/B,IAAI,UAAU,SACZ,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,SAAD,CAAe,CAAA;CAGxB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAAoB,eAAY;EAC5C,UAAA,UAAU,YACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,SAAD,CAAU,CAAA,IAEV,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAA,SAAD,EAAa,UAAU,UAAU,UAA6B,CAAA;CAE7D,CAAA;AAET"}

package/build/sections/Home/Home.mjs

@@ -1,17 +1,18 @@
 import { useManifests } from "../../providers/ManifestsProvider/ManifestsProvider.mjs";
+import GenericError from "../../components/GenericError/GenericError.mjs";
 import Loading from "../../components/Loading/Loading.mjs";
 import PackageList from "../../components/PackageList/PackageList.mjs";
 import "../../index.mjs";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/sections/Home/Home.tsx
 var Home = () => {
 	const manifests = useManifests();
-	if (manifests.isError) return /* @__PURE__ */ jsx("div", { children: "Error loading manifests" });
-	return /* @__PURE__ */ jsxs("div", {
+	if (manifests.isError) return /* @__PURE__ */ jsx(GenericError, {});
+	return /* @__PURE__ */ jsx("div", {
 		className: "container content",
 		"data-testid": "home-page-container",
-		children: [manifests.isLoading ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsx(PackageList, { packages: manifests.manifests }), manifests.isError && /* @__PURE__ */ jsx("div", { children: "Error loading manifests" })]
+		children: manifests.isLoading ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsx(PackageList, { packages: manifests.manifests })
 	});
 };
 //#endregion

package/build/sections/Home/Home.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Home.mjs","names":[],"sources":["../../../src/sections/Home/Home.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Loading, PackageList, useManifests } from '../..';\nimport type { ManifestWeb } from '../../providers/ManifestsProvider/ManifestsProvider';\n\nconst Home: React.FC = () => {\n  const manifests = useManifests();\n\n  if (manifests.isError) {\n    return <div>Error loading manifests</div>;\n  }\n\n  return (\n    <div className=\"container content\" data-testid=\"home-page-container\">\n      {manifests.isLoading ? (\n        <Loading />\n      ) : (\n        <PackageList packages={manifests.manifests as ManifestWeb[]} />\n      )}\n      {manifests.isError && <div>{'Error loading manifests'}</div>}\n    </div>\n  );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;AAKA,IAAM,aAAuB;CAC3B,MAAM,YAAY,aAAa;CAE/B,IAAI,UAAU,SACZ,OAAO,oBAAC,OAAD,EAAA,UAAK,0BAA4B,CAAA;CAG1C,OACE,qBAAC,OAAD;EAAK,WAAU;EAAoB,eAAY;EAA/C,UAAA,CACG,UAAU,YACT,oBAAC,SAAD,CAAU,CAAA,IAEV,oBAAC,aAAD,EAAa,UAAU,UAAU,UAA6B,CAAA,GAE/D,UAAU,WAAW,oBAAC,OAAD,EAAA,UAAM,0BAA+B,CAAA,CACxD;;AAET"}
+{"version":3,"file":"Home.mjs","names":[],"sources":["../../../src/sections/Home/Home.tsx"],"sourcesContent":["import React from 'react';\n\nimport { GenericError, Loading, PackageList, useManifests } from '../..';\nimport type { ManifestWeb } from '../../providers/ManifestsProvider/ManifestsProvider';\n\nconst Home: React.FC = () => {\n  const manifests = useManifests();\n\n  if (manifests.isError) {\n    return <GenericError />;\n  }\n\n  return (\n    <div className=\"container content\" data-testid=\"home-page-container\">\n      {manifests.isLoading ? (\n        <Loading />\n      ) : (\n        <PackageList packages={manifests.manifests as ManifestWeb[]} />\n      )}\n    </div>\n  );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;AAKA,IAAM,aAAuB;CAC3B,MAAM,YAAY,aAAa;CAE/B,IAAI,UAAU,SACZ,OAAO,oBAAC,cAAD,CAAe,CAAA;CAGxB,OACE,oBAAC,OAAD;EAAK,WAAU;EAAoB,eAAY;EAC5C,UAAA,UAAU,YACT,oBAAC,SAAD,CAAU,CAAA,IAEV,oBAAC,aAAD,EAAa,UAAU,UAAU,UAA6B,CAAA;CAE7D,CAAA;AAET"}

package/build/sections/Security/AddUser.js

@@ -1,22 +1,25 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_routes = require("../../utils/routes.js");
 require("../../utils/index.js");
+const require_storage = require("../../store/storage.js");
 const require_configuration = require("../../configuration.js");
 const require_utils = require("../../store/utils.js");
 const require_use_data_mutation = require("../../api/use-data-mutation.js");
 const require_utils$1 = require("../../providers/AuthProvider/utils.js");
+const require_AuthProvider = require("../../providers/AuthProvider/AuthProvider.js");
 const require_LoginDialogFormError = require("../../components/LoginDialog/LoginDialogFormError.js");
+const require_schemas = require("../../utils/schemas.js");
 const require_PasswordField = require("../../components/LoginForm/PasswordField.js");
 const require_UsernameField = require("../../components/LoginForm/UsernameField.js");
-const require_schemas = require("../../utils/schemas.js");
 const require_Dialog = require("../../layouts/Security/Dialog.js");
 const require_styles = require("./styles.js");
 const require_Success = require("./Success.js");
 const require_utils$2 = require("./utils.js");
+const require_session_id = require("../../utils/session-id.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
 let react_router = require("react-router");
 let _mui_material = require("@mui/material");
 let _hookform_resolvers_yup = require("@hookform/resolvers/yup");
@@ -26,12 +29,13 @@ var AddUser = () => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const location = (0, react_router.useLocation)();
 	const navigate = (0, react_router.useNavigate)();
+	const { setUserState } = require_AuthProvider.useAuth();
 	const configuration = require_configuration.getConfiguration();
 	const basePath = require_utils.stripTrailingSlash(configuration.base);
 	const { next, user } = require_utils$2.getSecurityUrlParams(location);
 	const loginLink = require_routes.Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : "");
 	const createUserEnabled = configuration?.flags?.createUser;
-	const { setError, handleSubmit, register, watch, formState: { isValid, errors } } = (0, react_hook_form.useForm)({
+	const { setError, handleSubmit, register, formState: { isValid, isSubmitting, errors } } = (0, react_hook_form.useForm)({
 		mode: "onChange",
 		defaultValues: {
 			username: typeof user === "string" ? user : "",
@@ -40,34 +44,42 @@ var AddUser = () => {
 		},
 		resolver: (0, _hookform_resolvers_yup.yupResolver)(require_schemas.addUserSchema)
 	});
-	const username = watch("username");
-	const addUserLink = `${require_routes.Route.ADD_USER}:${encodeURIComponent(username)}`;
-	const { trigger } = require_use_data_mutation.useDataMutation(basePath, addUserLink, "PUT");
+	const { trigger } = require_use_data_mutation.useDataMutation(basePath, require_routes.APIRoute.SIGNUP, "PUT");
 	const handleAddUser = (0, react.useCallback)(async (body) => {
-		try {
-			await trigger(body);
-		} catch (err) {
-			throw require_utils$1.normalizeAuthError(err);
-		}
+		return await trigger(body);
 	}, [trigger]);
+	const inFlight = (0, react.useRef)(false);
 	const onSubmit = (0, react.useCallback)(async (data) => {
+		if (inFlight.current) return;
+		inFlight.current = true;
 		try {
-			await handleAddUser({
+			const result = await handleAddUser({
 				name: data.username,
 				password: data.password,
-				email: data.email
+				email: data.email,
+				sessionId: require_session_id.generateSessionId()
+			});
+			if (!result || !result.username || !result.token) throw new Error("signup response is missing the token");
+			require_storage.saveAuth(result.username, result.token);
+			setUserState?.({
+				username: result.username,
+				token: result.token
 			});
 			navigate(`${require_routes.Route.SUCCESS}?messageType=${require_Success.MessageType.AddUser}`);
-		} catch {
+		} catch (err) {
 			setError("root", {
 				type: "server",
-				message: "Failed to create user"
+				message: require_utils$1.authErrorMessage(err, t("security.error.unable-to-add-user"))
 			});
+		} finally {
+			inFlight.current = false;
 		}
 	}, [
 		handleAddUser,
 		setError,
-		navigate
+		setUserState,
+		navigate,
+		t
 	]);
 	(0, react.useEffect)(() => {
 		if (!createUserEnabled) navigate("/");
@@ -91,6 +103,8 @@ var AddUser = () => {
 				register
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityTextField, {
+				error: !!errors.email,
+				helperText: errors.email?.message ? t(errors.email.message) : void 0,
 				label: t("security.addUser.email"),
 				type: "email",
 				...register("email")
@@ -105,7 +119,7 @@ var AddUser = () => {
 			errors.root && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoginDialogFormError.default, { error: errors.root }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Button, {
 				color: "primary",
-				disabled: !isValid,
+				disabled: !isValid || isSubmitting,
 				fullWidth: true,
 				sx: { mt: 2 },
 				type: "submit",
@@ -120,8 +134,9 @@ var AddUser = () => {
 				},
 				variant: "body2",
 				children: [t("security.addUser.alreadyUserQuestion"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Link, {
-					href: loginLink,
+					component: react_router.Link,
 					sx: { ml: 1 },
+					to: loginLink,
 					children: t("security.addUser.login")
 				})]
 			})

package/build/sections/Security/AddUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddUser.js","names":[],"sources":["../../../src/sections/Security/AddUser.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Link, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport PasswordField from '../../components/LoginForm/PasswordField';\nimport UsernameField from '../../components/LoginForm/UsernameField';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { normalizeAuthError } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport type { AddUserFormValues } from '../../utils/schemas';\nimport { addUserSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\ntype AddUserBody = {\n  name: string;\n  password: string;\n  email?: string;\n};\n\nconst AddUser: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const { next, user } = getSecurityUrlParams(location);\n  const loginLink = Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : '');\n  const createUserEnabled = configuration?.flags?.createUser;\n  const form = useForm<AddUserFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: typeof user === 'string' ? user : '',\n      password: '',\n      email: '',\n    },\n    resolver: yupResolver(addUserSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    watch,\n    formState: { isValid, errors },\n  } = form;\n\n  const username = watch('username');\n\n  const addUserLink = `${Route.ADD_USER}:${encodeURIComponent(username)}`;\n\n  const { trigger } = useDataMutation<{ ok: string; token: string }>(basePath, addUserLink, 'PUT');\n\n  const handleAddUser = useCallback(\n    async (body: AddUserBody) => {\n      try {\n        await trigger(body);\n      } catch (err) {\n        throw normalizeAuthError(err);\n      }\n    },\n    [trigger]\n  );\n\n  const onSubmit = useCallback(\n    async (data: AddUserFormValues) => {\n      try {\n        await handleAddUser({\n          name: data.username,\n          password: data.password,\n          email: data.email,\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.AddUser}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          // TODO: add translation key\n          message: 'Failed to create user',\n        });\n      }\n    },\n    [handleAddUser, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!createUserEnabled) {\n      navigate('/');\n    }\n  }, [createUserEnabled, navigate]);\n\n  return createUserEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.addUser.title')}\n          </Typography>\n          <UsernameField errors={errors} register={register} />\n          <PasswordField errors={errors} register={register} />\n\n          <SecurityTextField\n            label={t('security.addUser.email')}\n            type=\"email\"\n            {...register('email')}\n          />\n\n          <Typography color=\"text.secondary\" paragraph={true} sx={{ fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.emailDescription')}\n          </Typography>\n          {errors.root && <LoginDialogFormError error={errors.root} />}\n          <Button\n            color=\"primary\"\n            disabled={!isValid}\n            fullWidth={true}\n            sx={{ mt: 2 }}\n            type=\"submit\"\n            variant=\"contained\"\n          >\n            {t('security.addUser.submit')}\n          </Button>\n          <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.alreadyUserQuestion')}\n            <Link href={loginLink} sx={{ ml: 1 }}>\n              {t('security.addUser.login')}\n            </Link>\n          </Typography>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default AddUser;\n"],"mappings":"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"}
+{"version":3,"file":"AddUser.js","names":[],"sources":["../../../src/sections/Security/AddUser.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Link, Typography } from '@mui/material';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Link as RouterLink, useLocation, useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport PasswordField from '../../components/LoginForm/PasswordField';\nimport UsernameField from '../../components/LoginForm/UsernameField';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { useAuth } from '../../providers/AuthProvider/AuthProvider';\nimport { authErrorMessage } from '../../providers/AuthProvider/utils';\nimport { saveAuth } from '../../store/storage';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport { APIRoute } from '../../utils/routes';\nimport { generateSessionId } from '../../utils/session-id';\nimport type { AddUserFormValues } from '../../utils/schemas';\nimport { addUserSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\ntype AddUserBody = {\n  name: string;\n  password: string;\n  email?: string;\n  // the signup endpoint rejects requests without a 36-char session id\n  sessionId: string;\n};\n\nconst AddUser: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { setUserState } = useAuth();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const { next, user } = getSecurityUrlParams(location);\n  const loginLink = Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : '');\n  const createUserEnabled = configuration?.flags?.createUser;\n  const form = useForm<AddUserFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: typeof user === 'string' ? user : '',\n      password: '',\n      email: '',\n    },\n    resolver: yupResolver(addUserSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, isSubmitting, errors },\n  } = form;\n\n  const { trigger } = useDataMutation<{ token?: string; username?: string }>(\n    basePath,\n    APIRoute.SIGNUP,\n    'PUT'\n  );\n\n  const handleAddUser = useCallback(\n    async (body: AddUserBody) => {\n      return await trigger(body);\n    },\n    [trigger]\n  );\n\n  // `disabled={isSubmitting}` only applies after a re-render; clicks landing in\n  // the same React batch would still fire duplicate requests\n  const inFlight = useRef(false);\n\n  const onSubmit = useCallback(\n    async (data: AddUserFormValues) => {\n      if (inFlight.current) {\n        return;\n      }\n      inFlight.current = true;\n      try {\n        const result = await handleAddUser({\n          name: data.username,\n          password: data.password,\n          email: data.email,\n          sessionId: generateSessionId(),\n        });\n        if (!result || !result.username || !result.token) {\n          // a 2xx with an unexpected body must not pass as a successful signup\n          throw new Error('signup response is missing the token');\n        }\n        saveAuth(result.username, result.token);\n        // AuthProvider reads storage only once, so the header needs the state update\n        setUserState?.({ username: result.username, token: result.token });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.AddUser}`);\n      } catch (err) {\n        setError('root', {\n          type: 'server',\n          message: authErrorMessage(err, t('security.error.unable-to-add-user')),\n        });\n      } finally {\n        inFlight.current = false;\n      }\n    },\n    [handleAddUser, setError, setUserState, navigate, t]\n  );\n\n  useEffect(() => {\n    if (!createUserEnabled) {\n      navigate('/');\n    }\n  }, [createUserEnabled, navigate]);\n\n  return createUserEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.addUser.title')}\n          </Typography>\n          <UsernameField errors={errors} register={register} />\n          <PasswordField errors={errors} register={register} />\n\n          <SecurityTextField\n            error={!!errors.email}\n            // without this the submit button silently stays disabled on an\n            // invalid email, with no visible reason\n            helperText={errors.email?.message ? t(errors.email.message) : undefined}\n            label={t('security.addUser.email')}\n            type=\"email\"\n            {...register('email')}\n          />\n\n          <Typography color=\"text.secondary\" paragraph={true} sx={{ fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.emailDescription')}\n          </Typography>\n          {errors.root && <LoginDialogFormError error={errors.root} />}\n          <Button\n            color=\"primary\"\n            disabled={!isValid || isSubmitting}\n            fullWidth={true}\n            sx={{ mt: 2 }}\n            type=\"submit\"\n            variant=\"contained\"\n          >\n            {t('security.addUser.submit')}\n          </Button>\n          <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.alreadyUserQuestion')}\n            <Link component={RouterLink} sx={{ ml: 1 }} to={loginLink}>\n              {t('security.addUser.login')}\n            </Link>\n          </Typography>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default AddUser;\n"],"mappings":"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"}

package/build/sections/Security/AddUser.mjs

@@ -1,21 +1,24 @@
-import { Route as Route$1 } from "../../utils/routes.mjs";
+import { APIRoute, Route as Route$1 } from "../../utils/routes.mjs";
 import "../../utils/index.mjs";
+import { saveAuth } from "../../store/storage.mjs";
 import { getConfiguration } from "../../configuration.mjs";
 import { stripTrailingSlash } from "../../store/utils.mjs";
 import { useDataMutation } from "../../api/use-data-mutation.mjs";
-import { normalizeAuthError } from "../../providers/AuthProvider/utils.mjs";
+import { authErrorMessage } from "../../providers/AuthProvider/utils.mjs";
+import { useAuth } from "../../providers/AuthProvider/AuthProvider.mjs";
 import LoginDialogFormError from "../../components/LoginDialog/LoginDialogFormError.mjs";
+import { addUserSchema } from "../../utils/schemas.mjs";
 import PasswordField from "../../components/LoginForm/PasswordField.mjs";
 import UsernameField from "../../components/LoginForm/UsernameField.mjs";
-import { addUserSchema } from "../../utils/schemas.mjs";
 import SecurityLayout from "../../layouts/Security/Dialog.mjs";
 import { SecurityContainer, SecurityForm, SecurityTextField } from "./styles.mjs";
 import { MessageType } from "./Success.mjs";
 import { getSecurityUrlParams } from "./utils.mjs";
-import { useCallback, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { generateSessionId } from "../../utils/session-id.mjs";
+import { useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link, useLocation, useNavigate } from "react-router";
 import { Button, Link as Link$1, Typography } from "@mui/material";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
@@ -24,12 +27,13 @@ var AddUser = () => {
 	const { t } = useTranslation();
 	const location = useLocation();
 	const navigate = useNavigate();
+	const { setUserState } = useAuth();
 	const configuration = getConfiguration();
 	const basePath = stripTrailingSlash(configuration.base);
 	const { next, user } = getSecurityUrlParams(location);
 	const loginLink = Route$1.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : "");
 	const createUserEnabled = configuration?.flags?.createUser;
-	const { setError, handleSubmit, register, watch, formState: { isValid, errors } } = useForm({
+	const { setError, handleSubmit, register, formState: { isValid, isSubmitting, errors } } = useForm({
 		mode: "onChange",
 		defaultValues: {
 			username: typeof user === "string" ? user : "",
@@ -38,34 +42,42 @@ var AddUser = () => {
 		},
 		resolver: yupResolver(addUserSchema)
 	});
-	const username = watch("username");
-	const addUserLink = `${Route$1.ADD_USER}:${encodeURIComponent(username)}`;
-	const { trigger } = useDataMutation(basePath, addUserLink, "PUT");
+	const { trigger } = useDataMutation(basePath, APIRoute.SIGNUP, "PUT");
 	const handleAddUser = useCallback(async (body) => {
-		try {
-			await trigger(body);
-		} catch (err) {
-			throw normalizeAuthError(err);
-		}
+		return await trigger(body);
 	}, [trigger]);
+	const inFlight = useRef(false);
 	const onSubmit = useCallback(async (data) => {
+		if (inFlight.current) return;
+		inFlight.current = true;
 		try {
-			await handleAddUser({
+			const result = await handleAddUser({
 				name: data.username,
 				password: data.password,
-				email: data.email
+				email: data.email,
+				sessionId: generateSessionId()
+			});
+			if (!result || !result.username || !result.token) throw new Error("signup response is missing the token");
+			saveAuth(result.username, result.token);
+			setUserState?.({
+				username: result.username,
+				token: result.token
 			});
 			navigate(`${Route$1.SUCCESS}?messageType=${MessageType.AddUser}`);
-		} catch {
+		} catch (err) {
 			setError("root", {
 				type: "server",
-				message: "Failed to create user"
+				message: authErrorMessage(err, t("security.error.unable-to-add-user"))
 			});
+		} finally {
+			inFlight.current = false;
 		}
 	}, [
 		handleAddUser,
 		setError,
-		navigate
+		setUserState,
+		navigate,
+		t
 	]);
 	useEffect(() => {
 		if (!createUserEnabled) navigate("/");
@@ -89,6 +101,8 @@ var AddUser = () => {
 				register
 			}),
 			/* @__PURE__ */ jsx(SecurityTextField, {
+				error: !!errors.email,
+				helperText: errors.email?.message ? t(errors.email.message) : void 0,
 				label: t("security.addUser.email"),
 				type: "email",
 				...register("email")
@@ -103,7 +117,7 @@ var AddUser = () => {
 			errors.root && /* @__PURE__ */ jsx(LoginDialogFormError, { error: errors.root }),
 			/* @__PURE__ */ jsx(Button, {
 				color: "primary",
-				disabled: !isValid,
+				disabled: !isValid || isSubmitting,
 				fullWidth: true,
 				sx: { mt: 2 },
 				type: "submit",
@@ -118,8 +132,9 @@ var AddUser = () => {
 				},
 				variant: "body2",
 				children: [t("security.addUser.alreadyUserQuestion"), /* @__PURE__ */ jsx(Link$1, {
-					href: loginLink,
+					component: Link,
 					sx: { ml: 1 },
+					to: loginLink,
 					children: t("security.addUser.login")
 				})]
 			})