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

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

@@ -1 +1 @@
-{"version":3,"file":"AddUser.mjs","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":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAM,gBAA0B;CAC9B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,WAAW,mBAAmB,cAAc,IAAI;CACtD,MAAM,EAAE,MAAM,SAAS,qBAAqB,QAAQ;CACpD,MAAM,YAAY,QAAM,SAAS,OAAO,SAAS,mBAAmB,IAAI,MAAM;CAC9E,MAAM,oBAAoB,eAAe,OAAO;CAWhD,MAAM,EACJ,UACA,cACA,UACA,OACA,WAAW,EAAE,SAAS,aAfX,QAA2B;EACtC,MAAM;EACN,eAAe;GACb,UAAU,OAAO,SAAS,WAAW,OAAO;GAC5C,UAAU;GACV,OAAO;EACT;EACA,UAAU,YAAY,aAAa;CACrC,CAQI;CAEJ,MAAM,WAAW,MAAM,UAAU;CAEjC,MAAM,cAAc,GAAG,QAAM,SAAS,GAAG,mBAAmB,QAAQ;CAEpE,MAAM,EAAE,YAAY,gBAA+C,UAAU,aAAa,KAAK;CAE/F,MAAM,gBAAgB,YACpB,OAAO,SAAsB;EAC3B,IAAI;GACF,MAAM,QAAQ,IAAI;EACpB,SAAS,KAAK;GACZ,MAAM,mBAAmB,GAAG;EAC9B;CACF,GACA,CAAC,OAAO,CACV;CAEA,MAAM,WAAW,YACf,OAAO,SAA4B;EACjC,IAAI;GACF,MAAM,cAAc;IAClB,MAAM,KAAK;IACX,UAAU,KAAK;IACf,OAAO,KAAK;GACd,CAAC;GACD,SAAS,GAAG,QAAM,QAAQ,eAAe,YAAY,SAAS;EAChE,QAAQ;GACN,SAAS,QAAQ;IACf,MAAM;IAEN,SAAS;GACX,CAAC;EACH;CACF,GACA;EAAC;EAAe;EAAU;CAAQ,CACpC;CAEA,gBAAgB;EACd,IAAI,CAAC,mBACH,SAAS,GAAG;CAEhB,GAAG,CAAC,mBAAmB,QAAQ,CAAC;CAEhC,OAAO,oBACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,cAAD;EAAc,UAAU,aAAa,QAAQ;EAA7C,UAAA;GACE,oBAAC,YAAD;IAAY,OAAM;IAAS,WAAU;IAAK,cAAc;IAAM,SAAQ;IACnE,UAAA,EAAE,wBAAwB;GACjB,CAAA;GACZ,oBAAC,eAAD;IAAuB;IAAkB;GAAW,CAAA;GACpD,oBAAC,eAAD;IAAuB;IAAkB;GAAW,CAAA;GAEpD,oBAAC,mBAAD;IACE,OAAO,EAAE,wBAAwB;IACjC,MAAK;IACL,GAAI,SAAS,OAAO;GACrB,CAAA;GAED,oBAAC,YAAD;IAAY,OAAM;IAAiB,WAAW;IAAM,IAAI,EAAE,UAAU,GAAG;IAAG,SAAQ;IAC/E,UAAA,EAAE,mCAAmC;GAC5B,CAAA;GACX,OAAO,QAAQ,oBAAC,sBAAD,EAAsB,OAAO,OAAO,KAAO,CAAA;GAC3D,oBAAC,QAAD;IACE,OAAM;IACN,UAAU,CAAC;IACX,WAAW;IACX,IAAI,EAAE,IAAI,EAAE;IACZ,MAAK;IACL,SAAQ;IAEP,UAAA,EAAE,yBAAyB;GACtB,CAAA;GACR,qBAAC,YAAD;IAAY,OAAM;IAAS,IAAI;KAAE,IAAI;KAAG,UAAU;IAAG;IAAG,SAAQ;IAAhE,UAAA,CACG,EAAE,sCAAsC,GACzC,oBAAC,QAAD;KAAM,MAAM;KAAW,IAAI,EAAE,IAAI,EAAE;KAChC,UAAA,EAAE,wBAAwB;IACvB,CAAA,CACI;;EACA;CACG,CAAA,EAAA,CAAA,EACL,CAAA,IACd;AACN"}
+{"version":3,"file":"AddUser.mjs","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/ChangePassword.js

@@ -12,8 +12,8 @@ const require_styles = require("./styles.js");
 const require_Success = require("./Success.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");
@@ -25,7 +25,7 @@ var ChangePassword = () => {
 	const configuration = require_configuration.getConfiguration();
 	const basePath = require_utils.stripTrailingSlash(configuration.base);
 	const changePasswordEnabled = configuration?.flags?.changePassword;
-	const { setError, handleSubmit, register, 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: "",
@@ -37,29 +37,31 @@ var ChangePassword = () => {
 	});
 	const { trigger } = require_use_data_mutation.useDataMutation(basePath, require_routes.APIRoute.RESET_PASSWORD, "PUT");
 	const handleChangePassword = (0, react.useCallback)(async (body) => {
-		try {
-			await trigger(body);
-		} catch (err) {
-			throw require_utils$1.normalizeAuthError(err);
-		}
+		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 handleChangePassword({ password: {
 				old: data.oldPassword,
 				new: data.newPassword
 			} });
 			navigate(`${require_routes.Route.SUCCESS}?messageType=${require_Success.MessageType.ChangePassword}`);
-		} catch {
+		} catch (err) {
 			setError("root", {
 				type: "server",
-				message: "Failed to change password"
+				message: require_utils$1.authErrorMessage(err, t("security.error.unable-to-change-password"))
 			});
+		} finally {
+			inFlight.current = false;
 		}
 	}, [
 		handleChangePassword,
 		setError,
-		navigate
+		navigate,
+		t
 	]);
 	(0, react.useEffect)(() => {
 		if (!changePasswordEnabled) navigate("/");
@@ -76,14 +78,14 @@ var ChangePassword = () => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityTextField, {
 				error: !!errors.username,
-				helperText: errors.username?.message,
+				helperText: errors.username?.message ? t(errors.username.message, { length: 2 }) : void 0,
 				label: t("security.changePassword.username"),
 				...register("username"),
 				required: true
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityTextField, {
 				error: !!errors.oldPassword,
-				helperText: errors.oldPassword?.message,
+				helperText: errors.oldPassword?.message ? t(errors.oldPassword.message, { length: 2 }) : void 0,
 				label: t("security.changePassword.oldPassword"),
 				...register("oldPassword"),
 				required: true,
@@ -91,7 +93,7 @@ var ChangePassword = () => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityTextField, {
 				error: !!errors.newPassword,
-				helperText: errors.newPassword?.message,
+				helperText: errors.newPassword?.message ? t(errors.newPassword.message, { length: 2 }) : void 0,
 				label: t("security.changePassword.newPassword"),
 				...register("newPassword"),
 				required: true,
@@ -99,7 +101,7 @@ var ChangePassword = () => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityTextField, {
 				error: !!errors.confirmPassword,
-				helperText: errors.confirmPassword?.message,
+				helperText: errors.confirmPassword?.message ? t(errors.confirmPassword.message) : void 0,
 				label: t("security.changePassword.confirmPassword"),
 				...register("confirmPassword"),
 				required: true,
@@ -108,7 +110,7 @@ var ChangePassword = () => {
 			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",

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

@@ -1 +1 @@
-{"version":3,"file":"ChangePassword.js","names":[],"sources":["../../../src/sections/Security/ChangePassword.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\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 { APIRoute } from '../../utils/routes';\nimport type { ChangePasswordFormValues } from '../../utils/schemas';\nimport { changePasswordSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\n\nconst ChangePassword: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const changePasswordEnabled = configuration?.flags?.changePassword;\n\n  const form = useForm<ChangePasswordFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: '',\n      oldPassword: '',\n      newPassword: '',\n      confirmPassword: '',\n    },\n    resolver: yupResolver(changePasswordSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, errors },\n  } = form;\n\n  const { trigger } = useDataMutation<{ ok: string }>(basePath, APIRoute.RESET_PASSWORD, 'PUT');\n\n  const handleChangePassword = useCallback(\n    async (body: { password: { old: string; new: string } }) => {\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: ChangePasswordFormValues) => {\n      try {\n        await handleChangePassword({\n          password: {\n            old: data.oldPassword,\n            new: data.newPassword,\n          },\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.ChangePassword}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          message: 'Failed to change password',\n        });\n      }\n    },\n    [handleChangePassword, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!changePasswordEnabled) {\n      navigate('/');\n    }\n  }, [changePasswordEnabled, navigate]);\n\n  return changePasswordEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.changePassword.title')}\n          </Typography>\n          <SecurityTextField\n            error={!!errors.username}\n            helperText={errors.username?.message}\n            label={t('security.changePassword.username')}\n            {...register('username')}\n            required={true}\n          />\n          <SecurityTextField\n            error={!!errors.oldPassword}\n            helperText={errors.oldPassword?.message}\n            label={t('security.changePassword.oldPassword')}\n            {...register('oldPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.newPassword}\n            helperText={errors.newPassword?.message}\n            label={t('security.changePassword.newPassword')}\n            {...register('newPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.confirmPassword}\n            helperText={errors.confirmPassword?.message}\n            label={t('security.changePassword.confirmPassword')}\n            {...register('confirmPassword')}\n            required={true}\n            type=\"password\"\n          />\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.changePassword.submit')}\n          </Button>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default ChangePassword;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,uBAAiC;CACrC,MAAM,EAAE,OAAA,GAAM,cAAA,eAAA,CAAe;CAC7B,MAAM,YAAA,GAAW,aAAA,YAAA,CAAY;CAC7B,MAAM,gBAAgB,sBAAA,iBAAiB;CACvC,MAAM,WAAW,cAAA,mBAAmB,cAAc,IAAI;CACtD,MAAM,wBAAwB,eAAe,OAAO;CAapD,MAAM,EACJ,UACA,cACA,UACA,WAAW,EAAE,SAAS,cAAA,GAfX,gBAAA,QAAA,CAAkC;EAC7C,MAAM;EACN,eAAe;GACb,UAAU;GACV,aAAa;GACb,aAAa;GACb,iBAAiB;EACnB;EACA,WAAA,GAAU,wBAAA,YAAA,CAAY,gBAAA,oBAAoB;CAC5C,CAOI;CAEJ,MAAM,EAAE,YAAY,0BAAA,gBAAgC,UAAU,eAAA,SAAS,gBAAgB,KAAK;CAE5F,MAAM,wBAAA,GAAuB,MAAA,YAAA,CAC3B,OAAO,SAAqD;EAC1D,IAAI;GACF,MAAM,QAAQ,IAAI;EACpB,SAAS,KAAK;GACZ,MAAM,gBAAA,mBAAmB,GAAG;EAC9B;CACF,GACA,CAAC,OAAO,CACV;CAEA,MAAM,YAAA,GAAW,MAAA,YAAA,CACf,OAAO,SAAmC;EACxC,IAAI;GACF,MAAM,qBAAqB,EACzB,UAAU;IACR,KAAK,KAAK;IACV,KAAK,KAAK;GACZ,EACF,CAAC;GACD,SAAS,GAAG,eAAA,MAAM,QAAQ,eAAe,gBAAA,YAAY,gBAAgB;EACvE,QAAQ;GACN,SAAS,QAAQ;IACf,MAAM;IACN,SAAS;GACX,CAAC;EACH;CACF,GACA;EAAC;EAAsB;EAAU;CAAQ,CAC3C;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,uBACH,SAAS,GAAG;CAEhB,GAAG,CAAC,uBAAuB,QAAQ,CAAC;CAEpC,OAAO,wBACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAA,cAAD;EAAc,UAAU,aAAa,QAAQ;EAA7C,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,YAAD;IAAY,OAAM;IAAS,WAAU;IAAK,cAAc;IAAM,SAAQ;IACnE,UAAA,EAAE,+BAA+B;GACxB,CAAA;GACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,UAAU;IAC7B,OAAO,EAAE,kCAAkC;IAC3C,GAAI,SAAS,UAAU;IACvB,UAAU;GACX,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,aAAa;IAChC,OAAO,EAAE,qCAAqC;IAC9C,GAAI,SAAS,aAAa;IAC1B,UAAU;IACV,MAAK;GACN,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,aAAa;IAChC,OAAO,EAAE,qCAAqC;IAC9C,GAAI,SAAS,aAAa;IAC1B,UAAU;IACV,MAAK;GACN,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,iBAAiB;IACpC,OAAO,EAAE,yCAAyC;IAClD,GAAI,SAAS,iBAAiB;IAC9B,UAAU;IACV,MAAK;GACN,CAAA;GACA,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,6BAAA,SAAD,EAAsB,OAAO,OAAO,KAAO,CAAA;GAC3D,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,QAAD;IACE,OAAM;IACN,UAAU,CAAC;IACX,WAAW;IACX,IAAI,EAAE,IAAI,EAAE;IACZ,MAAK;IACL,SAAQ;IAEP,UAAA,EAAE,gCAAgC;GAC7B,CAAA;EACI;CACG,CAAA,EAAA,CAAA,EACL,CAAA,IACd;AACN"}
+{"version":3,"file":"ChangePassword.js","names":[],"sources":["../../../src/sections/Security/ChangePassword.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Typography } from '@mui/material';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { authErrorMessage } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport { APIRoute } from '../../utils/routes';\nimport type { ChangePasswordFormValues } from '../../utils/schemas';\nimport {\n  PASSWORD_MIN_LENGTH,\n  USERNAME_MIN_LENGTH,\n  changePasswordSchema,\n} from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\n\nconst ChangePassword: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const changePasswordEnabled = configuration?.flags?.changePassword;\n\n  const form = useForm<ChangePasswordFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: '',\n      oldPassword: '',\n      newPassword: '',\n      confirmPassword: '',\n    },\n    resolver: yupResolver(changePasswordSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, isSubmitting, errors },\n  } = form;\n\n  const { trigger } = useDataMutation<{ ok: string }>(basePath, APIRoute.RESET_PASSWORD, 'PUT');\n\n  const handleChangePassword = useCallback(\n    async (body: { password: { old: string; new: string } }) => {\n      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: ChangePasswordFormValues) => {\n      if (inFlight.current) {\n        return;\n      }\n      inFlight.current = true;\n      try {\n        await handleChangePassword({\n          password: {\n            old: data.oldPassword,\n            new: data.newPassword,\n          },\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.ChangePassword}`);\n      } catch (err) {\n        setError('root', {\n          type: 'server',\n          message: authErrorMessage(err, t('security.error.unable-to-change-password')),\n        });\n      } finally {\n        inFlight.current = false;\n      }\n    },\n    [handleChangePassword, setError, navigate, t]\n  );\n\n  useEffect(() => {\n    if (!changePasswordEnabled) {\n      navigate('/');\n    }\n  }, [changePasswordEnabled, navigate]);\n\n  return changePasswordEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.changePassword.title')}\n          </Typography>\n          <SecurityTextField\n            error={!!errors.username}\n            helperText={\n              errors.username?.message\n                ? t(errors.username.message, { length: USERNAME_MIN_LENGTH })\n                : undefined\n            }\n            label={t('security.changePassword.username')}\n            {...register('username')}\n            required={true}\n          />\n          <SecurityTextField\n            error={!!errors.oldPassword}\n            helperText={\n              errors.oldPassword?.message\n                ? t(errors.oldPassword.message, { length: PASSWORD_MIN_LENGTH })\n                : undefined\n            }\n            label={t('security.changePassword.oldPassword')}\n            {...register('oldPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.newPassword}\n            helperText={\n              errors.newPassword?.message\n                ? t(errors.newPassword.message, { length: PASSWORD_MIN_LENGTH })\n                : undefined\n            }\n            label={t('security.changePassword.newPassword')}\n            {...register('newPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.confirmPassword}\n            helperText={\n              errors.confirmPassword?.message ? t(errors.confirmPassword.message) : undefined\n            }\n            label={t('security.changePassword.confirmPassword')}\n            {...register('confirmPassword')}\n            required={true}\n            type=\"password\"\n          />\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.changePassword.submit')}\n          </Button>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default ChangePassword;\n"],"mappings":"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"}

package/build/sections/Security/ChangePassword.mjs

@@ -3,15 +3,15 @@ import "../../utils/index.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 LoginDialogFormError from "../../components/LoginDialog/LoginDialogFormError.mjs";
 import { changePasswordSchema } from "../../utils/schemas.mjs";
 import SecurityLayout from "../../layouts/Security/Dialog.mjs";
 import { SecurityContainer, SecurityForm, SecurityTextField } from "./styles.mjs";
 import { MessageType } from "./Success.mjs";
-import { useCallback, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useNavigate } from "react-router";
 import { Button, Typography } from "@mui/material";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -23,7 +23,7 @@ var ChangePassword = () => {
 	const configuration = getConfiguration();
 	const basePath = stripTrailingSlash(configuration.base);
 	const changePasswordEnabled = configuration?.flags?.changePassword;
-	const { setError, handleSubmit, register, formState: { isValid, errors } } = useForm({
+	const { setError, handleSubmit, register, formState: { isValid, isSubmitting, errors } } = useForm({
 		mode: "onChange",
 		defaultValues: {
 			username: "",
@@ -35,29 +35,31 @@ var ChangePassword = () => {
 	});
 	const { trigger } = useDataMutation(basePath, APIRoute.RESET_PASSWORD, "PUT");
 	const handleChangePassword = useCallback(async (body) => {
-		try {
-			await trigger(body);
-		} catch (err) {
-			throw normalizeAuthError(err);
-		}
+		await trigger(body);
 	}, [trigger]);
+	const inFlight = useRef(false);
 	const onSubmit = useCallback(async (data) => {
+		if (inFlight.current) return;
+		inFlight.current = true;
 		try {
 			await handleChangePassword({ password: {
 				old: data.oldPassword,
 				new: data.newPassword
 			} });
 			navigate(`${Route$1.SUCCESS}?messageType=${MessageType.ChangePassword}`);
-		} catch {
+		} catch (err) {
 			setError("root", {
 				type: "server",
-				message: "Failed to change password"
+				message: authErrorMessage(err, t("security.error.unable-to-change-password"))
 			});
+		} finally {
+			inFlight.current = false;
 		}
 	}, [
 		handleChangePassword,
 		setError,
-		navigate
+		navigate,
+		t
 	]);
 	useEffect(() => {
 		if (!changePasswordEnabled) navigate("/");
@@ -74,14 +76,14 @@ var ChangePassword = () => {
 			}),
 			/* @__PURE__ */ jsx(SecurityTextField, {
 				error: !!errors.username,
-				helperText: errors.username?.message,
+				helperText: errors.username?.message ? t(errors.username.message, { length: 2 }) : void 0,
 				label: t("security.changePassword.username"),
 				...register("username"),
 				required: true
 			}),
 			/* @__PURE__ */ jsx(SecurityTextField, {
 				error: !!errors.oldPassword,
-				helperText: errors.oldPassword?.message,
+				helperText: errors.oldPassword?.message ? t(errors.oldPassword.message, { length: 2 }) : void 0,
 				label: t("security.changePassword.oldPassword"),
 				...register("oldPassword"),
 				required: true,
@@ -89,7 +91,7 @@ var ChangePassword = () => {
 			}),
 			/* @__PURE__ */ jsx(SecurityTextField, {
 				error: !!errors.newPassword,
-				helperText: errors.newPassword?.message,
+				helperText: errors.newPassword?.message ? t(errors.newPassword.message, { length: 2 }) : void 0,
 				label: t("security.changePassword.newPassword"),
 				...register("newPassword"),
 				required: true,
@@ -97,7 +99,7 @@ var ChangePassword = () => {
 			}),
 			/* @__PURE__ */ jsx(SecurityTextField, {
 				error: !!errors.confirmPassword,
-				helperText: errors.confirmPassword?.message,
+				helperText: errors.confirmPassword?.message ? t(errors.confirmPassword.message) : void 0,
 				label: t("security.changePassword.confirmPassword"),
 				...register("confirmPassword"),
 				required: true,
@@ -106,7 +108,7 @@ var ChangePassword = () => {
 			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",

package/build/sections/Security/ChangePassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChangePassword.mjs","names":[],"sources":["../../../src/sections/Security/ChangePassword.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\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 { APIRoute } from '../../utils/routes';\nimport type { ChangePasswordFormValues } from '../../utils/schemas';\nimport { changePasswordSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\n\nconst ChangePassword: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const changePasswordEnabled = configuration?.flags?.changePassword;\n\n  const form = useForm<ChangePasswordFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: '',\n      oldPassword: '',\n      newPassword: '',\n      confirmPassword: '',\n    },\n    resolver: yupResolver(changePasswordSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, errors },\n  } = form;\n\n  const { trigger } = useDataMutation<{ ok: string }>(basePath, APIRoute.RESET_PASSWORD, 'PUT');\n\n  const handleChangePassword = useCallback(\n    async (body: { password: { old: string; new: string } }) => {\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: ChangePasswordFormValues) => {\n      try {\n        await handleChangePassword({\n          password: {\n            old: data.oldPassword,\n            new: data.newPassword,\n          },\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.ChangePassword}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          message: 'Failed to change password',\n        });\n      }\n    },\n    [handleChangePassword, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!changePasswordEnabled) {\n      navigate('/');\n    }\n  }, [changePasswordEnabled, navigate]);\n\n  return changePasswordEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.changePassword.title')}\n          </Typography>\n          <SecurityTextField\n            error={!!errors.username}\n            helperText={errors.username?.message}\n            label={t('security.changePassword.username')}\n            {...register('username')}\n            required={true}\n          />\n          <SecurityTextField\n            error={!!errors.oldPassword}\n            helperText={errors.oldPassword?.message}\n            label={t('security.changePassword.oldPassword')}\n            {...register('oldPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.newPassword}\n            helperText={errors.newPassword?.message}\n            label={t('security.changePassword.newPassword')}\n            {...register('newPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.confirmPassword}\n            helperText={errors.confirmPassword?.message}\n            label={t('security.changePassword.confirmPassword')}\n            {...register('confirmPassword')}\n            required={true}\n            type=\"password\"\n          />\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.changePassword.submit')}\n          </Button>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default ChangePassword;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAM,uBAAiC;CACrC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,WAAW,mBAAmB,cAAc,IAAI;CACtD,MAAM,wBAAwB,eAAe,OAAO;CAapD,MAAM,EACJ,UACA,cACA,UACA,WAAW,EAAE,SAAS,aAfX,QAAkC;EAC7C,MAAM;EACN,eAAe;GACb,UAAU;GACV,aAAa;GACb,aAAa;GACb,iBAAiB;EACnB;EACA,UAAU,YAAY,oBAAoB;CAC5C,CAOI;CAEJ,MAAM,EAAE,YAAY,gBAAgC,UAAU,SAAS,gBAAgB,KAAK;CAE5F,MAAM,uBAAuB,YAC3B,OAAO,SAAqD;EAC1D,IAAI;GACF,MAAM,QAAQ,IAAI;EACpB,SAAS,KAAK;GACZ,MAAM,mBAAmB,GAAG;EAC9B;CACF,GACA,CAAC,OAAO,CACV;CAEA,MAAM,WAAW,YACf,OAAO,SAAmC;EACxC,IAAI;GACF,MAAM,qBAAqB,EACzB,UAAU;IACR,KAAK,KAAK;IACV,KAAK,KAAK;GACZ,EACF,CAAC;GACD,SAAS,GAAG,QAAM,QAAQ,eAAe,YAAY,gBAAgB;EACvE,QAAQ;GACN,SAAS,QAAQ;IACf,MAAM;IACN,SAAS;GACX,CAAC;EACH;CACF,GACA;EAAC;EAAsB;EAAU;CAAQ,CAC3C;CAEA,gBAAgB;EACd,IAAI,CAAC,uBACH,SAAS,GAAG;CAEhB,GAAG,CAAC,uBAAuB,QAAQ,CAAC;CAEpC,OAAO,wBACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,cAAD;EAAc,UAAU,aAAa,QAAQ;EAA7C,UAAA;GACE,oBAAC,YAAD;IAAY,OAAM;IAAS,WAAU;IAAK,cAAc;IAAM,SAAQ;IACnE,UAAA,EAAE,+BAA+B;GACxB,CAAA;GACZ,oBAAC,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,UAAU;IAC7B,OAAO,EAAE,kCAAkC;IAC3C,GAAI,SAAS,UAAU;IACvB,UAAU;GACX,CAAA;GACD,oBAAC,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,aAAa;IAChC,OAAO,EAAE,qCAAqC;IAC9C,GAAI,SAAS,aAAa;IAC1B,UAAU;IACV,MAAK;GACN,CAAA;GACD,oBAAC,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,aAAa;IAChC,OAAO,EAAE,qCAAqC;IAC9C,GAAI,SAAS,aAAa;IAC1B,UAAU;IACV,MAAK;GACN,CAAA;GACD,oBAAC,mBAAD;IACE,OAAO,CAAC,CAAC,OAAO;IAChB,YAAY,OAAO,iBAAiB;IACpC,OAAO,EAAE,yCAAyC;IAClD,GAAI,SAAS,iBAAiB;IAC9B,UAAU;IACV,MAAK;GACN,CAAA;GACA,OAAO,QAAQ,oBAAC,sBAAD,EAAsB,OAAO,OAAO,KAAO,CAAA;GAC3D,oBAAC,QAAD;IACE,OAAM;IACN,UAAU,CAAC;IACX,WAAW;IACX,IAAI,EAAE,IAAI,EAAE;IACZ,MAAK;IACL,SAAQ;IAEP,UAAA,EAAE,gCAAgC;GAC7B,CAAA;EACI;CACG,CAAA,EAAA,CAAA,EACL,CAAA,IACd;AACN"}
+{"version":3,"file":"ChangePassword.mjs","names":[],"sources":["../../../src/sections/Security/ChangePassword.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Typography } from '@mui/material';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { authErrorMessage } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport { APIRoute } from '../../utils/routes';\nimport type { ChangePasswordFormValues } from '../../utils/schemas';\nimport {\n  PASSWORD_MIN_LENGTH,\n  USERNAME_MIN_LENGTH,\n  changePasswordSchema,\n} from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\n\nconst ChangePassword: React.FC = () => {\n  const { t } = useTranslation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const changePasswordEnabled = configuration?.flags?.changePassword;\n\n  const form = useForm<ChangePasswordFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: '',\n      oldPassword: '',\n      newPassword: '',\n      confirmPassword: '',\n    },\n    resolver: yupResolver(changePasswordSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, isSubmitting, errors },\n  } = form;\n\n  const { trigger } = useDataMutation<{ ok: string }>(basePath, APIRoute.RESET_PASSWORD, 'PUT');\n\n  const handleChangePassword = useCallback(\n    async (body: { password: { old: string; new: string } }) => {\n      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: ChangePasswordFormValues) => {\n      if (inFlight.current) {\n        return;\n      }\n      inFlight.current = true;\n      try {\n        await handleChangePassword({\n          password: {\n            old: data.oldPassword,\n            new: data.newPassword,\n          },\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.ChangePassword}`);\n      } catch (err) {\n        setError('root', {\n          type: 'server',\n          message: authErrorMessage(err, t('security.error.unable-to-change-password')),\n        });\n      } finally {\n        inFlight.current = false;\n      }\n    },\n    [handleChangePassword, setError, navigate, t]\n  );\n\n  useEffect(() => {\n    if (!changePasswordEnabled) {\n      navigate('/');\n    }\n  }, [changePasswordEnabled, navigate]);\n\n  return changePasswordEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.changePassword.title')}\n          </Typography>\n          <SecurityTextField\n            error={!!errors.username}\n            helperText={\n              errors.username?.message\n                ? t(errors.username.message, { length: USERNAME_MIN_LENGTH })\n                : undefined\n            }\n            label={t('security.changePassword.username')}\n            {...register('username')}\n            required={true}\n          />\n          <SecurityTextField\n            error={!!errors.oldPassword}\n            helperText={\n              errors.oldPassword?.message\n                ? t(errors.oldPassword.message, { length: PASSWORD_MIN_LENGTH })\n                : undefined\n            }\n            label={t('security.changePassword.oldPassword')}\n            {...register('oldPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.newPassword}\n            helperText={\n              errors.newPassword?.message\n                ? t(errors.newPassword.message, { length: PASSWORD_MIN_LENGTH })\n                : undefined\n            }\n            label={t('security.changePassword.newPassword')}\n            {...register('newPassword')}\n            required={true}\n            type=\"password\"\n          />\n          <SecurityTextField\n            error={!!errors.confirmPassword}\n            helperText={\n              errors.confirmPassword?.message ? t(errors.confirmPassword.message) : undefined\n            }\n            label={t('security.changePassword.confirmPassword')}\n            {...register('confirmPassword')}\n            required={true}\n            type=\"password\"\n          />\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.changePassword.submit')}\n          </Button>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default ChangePassword;\n"],"mappings":"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"}

package/build/sections/Security/Login.js

@@ -6,19 +6,20 @@ 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_NotFound = require("../../components/NotFound/NotFound.js");
 require("../../components/NotFound/index.js");
 const require_styles = require("../../components/LoginForm/styles.js");
-const require_Login = require("../../components/LoginForm/Login.js");
 const require_schemas = require("../../utils/schemas.js");
+const require_Login = require("../../components/LoginForm/Login.js");
 const require_Dialog = require("../../layouts/Security/Dialog.js");
 const require_styles$1 = require("./styles.js");
 const require_Success = require("./Success.js");
 const require_utils$2 = require("./utils.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");
@@ -30,63 +31,78 @@ var Login = () => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const location = (0, react_router.useLocation)();
 	const navigate = (0, react_router.useNavigate)();
+	const { setUserState } = require_AuthProvider.useAuth();
 	const { next } = require_utils$2.getSecurityUrlParams(location);
 	const createUserEnabled = configuration?.flags?.createUser;
 	const addUserLink = require_routes.Route.ADD_USER + (next ? "?next=" + next : "");
 	const { trigger } = require_use_data_mutation.useDataMutation(basePath, next, "POST");
-	const { setError, handleSubmit, register, formState: { isValid, errors } } = (0, react_hook_form.useForm)({
+	const { setError, handleSubmit, register, formState: { isValid, isSubmitting, errors } } = (0, react_hook_form.useForm)({
 		mode: "onChange",
 		resolver: (0, _hookform_resolvers_yup.yupResolver)(require_schemas.loginSchema)
 	});
 	const handleLogin = (0, react.useCallback)(async (body) => {
-		try {
-			return await trigger(body);
-		} catch (err) {
-			throw require_utils$1.normalizeAuthError(err);
-		}
+		return await trigger(body);
 	}, [trigger]);
 	const onSuccess = (0, react.useCallback)(() => {
 		navigate(`${require_routes.Route.SUCCESS}?messageType=${require_Success.MessageType.Login}`);
 	}, [navigate]);
+	const inFlight = (0, react.useRef)(false);
 	const onSubmit = (0, react.useCallback)(async (data) => {
+		if (inFlight.current) return;
+		inFlight.current = true;
 		try {
 			const result = await handleLogin?.(data);
-			if (result && result.username && result.token) require_storage.saveAuth(result.username, result.token);
+			if (!result || !result.username || !result.token) throw new Error("login response is missing the token");
+			require_storage.saveAuth(result.username, result.token);
+			setUserState?.({
+				username: result.username,
+				token: result.token
+			});
 			onSuccess();
-		} catch {
+		} catch (err) {
+			const message = err?.code === 401 ? t("security.error.invalid-credentials") : require_utils$1.authErrorMessage(err, t("security.error.unable-to-login"));
 			setError("root", {
 				type: "server",
-				message: "Invalid username or password"
+				message
 			});
+		} finally {
+			inFlight.current = false;
 		}
 	}, [
 		handleLogin,
 		setError,
-		onSuccess
+		setUserState,
+		onSuccess,
+		t
 	]);
-	return !next ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotFound.default, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles$1.SecurityContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles$1.SecurityForm, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.default, {}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Login.default, {
-			errors,
-			handleSubmit,
-			isValid,
-			onSubmit,
-			register
-		}),
-		createUserEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.Typography, {
-			align: "center",
-			sx: {
-				mt: 2,
-				fontSize: 12
-			},
-			variant: "body2",
-			children: [t("security.login.noUserQuestion"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Link, {
-				href: addUserLink,
-				sx: { ml: 1 },
-				children: t("security.login.createUser")
-			})]
-		})
-	] }) }) });
+	return !next ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotFound.default, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles$1.SecurityContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles$1.SecurityForm, {
+		as: "div",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.default, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Login.default, {
+				errors,
+				handleSubmit,
+				isSubmitting,
+				isValid,
+				onSubmit,
+				register
+			}),
+			createUserEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.Typography, {
+				align: "center",
+				sx: {
+					mt: 2,
+					fontSize: 12
+				},
+				variant: "body2",
+				children: [t("security.login.noUserQuestion"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Link, {
+					component: react_router.Link,
+					sx: { ml: 1 },
+					to: addUserLink,
+					children: t("security.login.createUser")
+				})]
+			})
+		]
+	}) }) });
 };
 //#endregion
 exports.default = Login;

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

@@ -1 +1 @@
-{"version":3,"file":"Login.js","names":[],"sources":["../../../src/sections/Security/Login.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Link, Typography } from '@mui/material';\nimport React, { useCallback } 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 type { LoginFormValues } from '../../components/LoginForm/Login';\nimport LoginForm from '../../components/LoginForm/Login';\nimport LoginFormHeader from '../../components/LoginForm/styles';\nimport NotFound from '../../components/NotFound';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport type { LoginBody } from '../../providers/AuthProvider/types';\nimport { normalizeAuthError } from '../../providers/AuthProvider/utils';\nimport { saveAuth } from '../../store/storage';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport { loginSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\nconst configuration = getConfiguration();\nconst basePath = stripTrailingSlash(configuration.base);\n\nconst Login: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { next } = getSecurityUrlParams(location);\n  const createUserEnabled = configuration?.flags?.createUser;\n  const addUserLink = Route.ADD_USER + (next ? '?next=' + next : '');\n\n  const { trigger } = useDataMutation<LoginBody>(basePath, next, 'POST');\n\n  const form = useForm<LoginFormValues>({\n    mode: 'onChange',\n    resolver: yupResolver(loginSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, errors },\n  } = form;\n\n  const handleLogin = useCallback(\n    async (body: { username: string; password: string }) => {\n      try {\n        return await trigger(body);\n      } catch (err) {\n        throw normalizeAuthError(err);\n      }\n    },\n    [trigger]\n  );\n\n  const onSuccess = useCallback(() => {\n    navigate(`${Route.SUCCESS}?messageType=${MessageType.Login}`);\n  }, [navigate]);\n\n  const onSubmit = useCallback(\n    async (data: LoginFormValues) => {\n      try {\n        const result = await handleLogin?.(data);\n        if (result && result.username && result.token) {\n          saveAuth(result.username, result.token);\n        }\n        onSuccess();\n      } catch {\n        setError('root', {\n          type: 'server',\n          // TODO: add translation key\n          message: 'Invalid username or password',\n        });\n      }\n    },\n    [handleLogin, setError, onSuccess]\n  );\n\n  return !next ? (\n    <NotFound />\n  ) : (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm>\n          <LoginFormHeader />\n          <LoginForm\n            errors={errors}\n            handleSubmit={handleSubmit}\n            isValid={isValid}\n            onSubmit={onSubmit}\n            register={register}\n          />\n          {createUserEnabled && (\n            <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n              {t('security.login.noUserQuestion')}\n              <Link href={addUserLink} sx={{ ml: 1 }}>\n                {t('security.login.createUser')}\n              </Link>\n            </Typography>\n          )}\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  );\n};\n\nexport default Login;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAM,gBAAgB,sBAAA,iBAAiB;AACvC,IAAM,WAAW,cAAA,mBAAmB,cAAc,IAAI;AAEtD,IAAM,cAAwB;CAC5B,MAAM,EAAE,OAAA,GAAM,cAAA,eAAA,CAAe;CAC7B,MAAM,YAAA,GAAW,aAAA,YAAA,CAAY;CAC7B,MAAM,YAAA,GAAW,aAAA,YAAA,CAAY;CAC7B,MAAM,EAAE,SAAS,gBAAA,qBAAqB,QAAQ;CAC9C,MAAM,oBAAoB,eAAe,OAAO;CAChD,MAAM,cAAc,eAAA,MAAM,YAAY,OAAO,WAAW,OAAO;CAE/D,MAAM,EAAE,YAAY,0BAAA,gBAA2B,UAAU,MAAM,MAAM;CAOrE,MAAM,EACJ,UACA,cACA,UACA,WAAW,EAAE,SAAS,cAAA,GATX,gBAAA,QAAA,CAAyB;EACpC,MAAM;EACN,WAAA,GAAU,wBAAA,YAAA,CAAY,gBAAA,WAAW;CACnC,CAOI;CAEJ,MAAM,eAAA,GAAc,MAAA,YAAA,CAClB,OAAO,SAAiD;EACtD,IAAI;GACF,OAAO,MAAM,QAAQ,IAAI;EAC3B,SAAS,KAAK;GACZ,MAAM,gBAAA,mBAAmB,GAAG;EAC9B;CACF,GACA,CAAC,OAAO,CACV;CAEA,MAAM,aAAA,GAAY,MAAA,YAAA,OAAkB;EAClC,SAAS,GAAG,eAAA,MAAM,QAAQ,eAAe,gBAAA,YAAY,OAAO;CAC9D,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,YAAA,GAAW,MAAA,YAAA,CACf,OAAO,SAA0B;EAC/B,IAAI;GACF,MAAM,SAAS,MAAM,cAAc,IAAI;GACvC,IAAI,UAAU,OAAO,YAAY,OAAO,OACtC,gBAAA,SAAS,OAAO,UAAU,OAAO,KAAK;GAExC,UAAU;EACZ,QAAQ;GACN,SAAS,QAAQ;IACf,MAAM;IAEN,SAAS;GACX,CAAC;EACH;CACF,GACA;EAAC;EAAa;EAAU;CAAS,CACnC;CAEA,OAAO,CAAC,OACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAA,SAAD,CAAW,CAAA,IAEX,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAA,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,iBAAA,cAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,SAAD,CAAkB,CAAA;EAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,SAAD;GACU;GACM;GACL;GACC;GACA;EACX,CAAA;EACA,qBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAA,YAAD;GAAY,OAAM;GAAS,IAAI;IAAE,IAAI;IAAG,UAAU;GAAG;GAAG,SAAQ;GAAhE,UAAA,CACG,EAAE,+BAA+B,GAClC,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,MAAD;IAAM,MAAM;IAAa,IAAI,EAAE,IAAI,EAAE;IAClC,UAAA,EAAE,2BAA2B;GAC1B,CAAA,CACI;;CAEF,EAAA,CAAA,EACG,CAAA,EACL,CAAA;AAEpB"}
+{"version":3,"file":"Login.js","names":[],"sources":["../../../src/sections/Security/Login.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Link, Typography } from '@mui/material';\nimport React, { useCallback, 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 type { LoginFormValues } from '../../components/LoginForm/Login';\nimport LoginForm from '../../components/LoginForm/Login';\nimport LoginFormHeader from '../../components/LoginForm/styles';\nimport NotFound from '../../components/NotFound';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { useAuth } from '../../providers/AuthProvider/AuthProvider';\nimport type { LoginBody } from '../../providers/AuthProvider/types';\nimport { authErrorMessage } from '../../providers/AuthProvider/utils';\nimport { saveAuth } from '../../store/storage';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport { loginSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\nconst configuration = getConfiguration();\nconst basePath = stripTrailingSlash(configuration.base);\n\nconst Login: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { setUserState } = useAuth();\n  const { next } = getSecurityUrlParams(location);\n  const createUserEnabled = configuration?.flags?.createUser;\n  const addUserLink = Route.ADD_USER + (next ? '?next=' + next : '');\n\n  const { trigger } = useDataMutation<LoginBody>(basePath, next, 'POST');\n\n  const form = useForm<LoginFormValues>({\n    mode: 'onChange',\n    resolver: yupResolver(loginSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    formState: { isValid, isSubmitting, errors },\n  } = form;\n\n  const handleLogin = useCallback(\n    async (body: { username: string; password: string }) => {\n      return await trigger(body);\n    },\n    [trigger]\n  );\n\n  const onSuccess = useCallback(() => {\n    navigate(`${Route.SUCCESS}?messageType=${MessageType.Login}`);\n  }, [navigate]);\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: LoginFormValues) => {\n      if (inFlight.current) {\n        return;\n      }\n      inFlight.current = true;\n      try {\n        const result = await handleLogin?.(data);\n        if (!result || !result.username || !result.token) {\n          // a 2xx with an unexpected body must not pass as a successful login\n          throw new Error('login 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        onSuccess();\n      } catch (err: any) {\n        // only a 401 means wrong credentials; a dead server, 500 or 429 must\n        // not claim the credentials were invalid\n        const message =\n          err?.code === 401\n            ? t('security.error.invalid-credentials')\n            : authErrorMessage(err, t('security.error.unable-to-login'));\n        setError('root', { type: 'server', message });\n      } finally {\n        inFlight.current = false;\n      }\n    },\n    [handleLogin, setError, setUserState, onSuccess, t]\n  );\n\n  return !next ? (\n    <NotFound />\n  ) : (\n    <SecurityLayout>\n      <SecurityContainer>\n        {/* container only: LoginForm renders the real <form>, and a <form>\n            cannot be a descendant of another <form> */}\n        <SecurityForm as=\"div\">\n          <LoginFormHeader />\n          <LoginForm\n            errors={errors}\n            handleSubmit={handleSubmit}\n            isSubmitting={isSubmitting}\n            isValid={isValid}\n            onSubmit={onSubmit}\n            register={register}\n          />\n          {createUserEnabled && (\n            <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n              {t('security.login.noUserQuestion')}\n              <Link component={RouterLink} sx={{ ml: 1 }} to={addUserLink}>\n                {t('security.login.createUser')}\n              </Link>\n            </Typography>\n          )}\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  );\n};\n\nexport default Login;\n"],"mappings":"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"}