@plumile/backoffice-react 0.2.3 → 0.2.6

package/lib/esm/auth/pages/AcceptInvitationScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptInvitationScreen.js","names":[],"sources":["../../../../src/auth/pages/AcceptInvitationScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\nimport { MfaChallengeForm } from '../login/MfaChallengeForm.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\nimport * as styles from '../login/loginPage.css.js';\n\ntype AcceptanceState = 'pending' | 'mfa' | 'completed' | 'error' | 'idle';\n\ntype Props = {\n  auth: UseAuthReturn;\n  onSuccessRedirect: () => void;\n  onBackToLogin: () => void;\n  token?: string;\n};\n\nexport const AcceptInvitationScreen = ({\n  auth,\n  onSuccessRedirect,\n  onBackToLogin,\n  token,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const { acceptInvitation } = auth;\n  const [status, setStatus] = useState<AcceptanceState>('idle');\n  const [password, setPassword] = useState('');\n  const [passwordConfirmation, setPasswordConfirmation] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n\n  const resolvedToken = useMemo(() => {\n    if (token != null) {\n      return token;\n    }\n    if (typeof window === 'undefined') {\n      return '';\n    }\n    const params = new URLSearchParams(window.location.search);\n    return params.get('token') ?? '';\n  }, [token]);\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      if (resolvedToken === '') {\n        setErrorMessage(t('auth.acceptInvitation.errors.missingToken'));\n        setStatus('error');\n        return;\n      }\n\n      if (password !== passwordConfirmation) {\n        setErrorMessage(t('auth.acceptInvitation.errors.passwordMismatch'));\n        setStatus('error');\n        return;\n      }\n\n      setStatus('pending');\n      setErrorMessage(null);\n      setIsSubmitting(true);\n\n      // eslint-disable-next-line no-void\n      void acceptInvitation({\n        token: resolvedToken,\n        password,\n        passwordConfirmation,\n      })\n        .then((result) => {\n          if (result === 'mfa-required') {\n            setStatus('mfa');\n            return;\n          }\n          setStatus('completed');\n          onSuccessRedirect();\n        })\n        .catch(() => {\n          setStatus('error');\n          setErrorMessage(t('auth.acceptInvitation.errors.default'));\n        })\n        .finally(() => {\n          setIsSubmitting(false);\n        });\n    },\n    [\n      acceptInvitation,\n      onSuccessRedirect,\n      password,\n      passwordConfirmation,\n      resolvedToken,\n      t,\n    ],\n  );\n\n  const handleMfaSuccess = useCallback(() => {\n    setStatus('completed');\n    onSuccessRedirect();\n  }, [onSuccessRedirect]);\n\n  const handleRetry = useCallback(() => {\n    setStatus('idle');\n    setErrorMessage(null);\n    setIsSubmitting(false);\n  }, []);\n\n  if (status === 'mfa') {\n    return (\n      <AuthLayout\n        title={t('auth.acceptInvitation.mfaTitle')}\n        subtitle={t('auth.acceptInvitation.mfaSubtitle')}\n      >\n        <MfaChallengeForm\n          auth={auth}\n          onSuccess={handleMfaSuccess}\n          onBack={() => {\n            auth.reset();\n            handleRetry();\n          }}\n        />\n      </AuthLayout>\n    );\n  }\n\n  let content: JSX.Element;\n  if (status === 'completed') {\n    content = (\n      <div className={styles.stack}>\n        <p className={styles.helper}>\n          {t('auth.acceptInvitation.status.success')}\n        </p>\n      </div>\n    );\n  } else {\n    content = (\n      <AuthPanel description={t('auth.acceptInvitation.subtitle')}>\n        <Form\n          className={styles.formSurface}\n          onSubmit={handleSubmit}\n          noValidate\n          initialFocus=\"first-form-control\"\n        >\n          {errorMessage != null ? <FormError>{errorMessage}</FormError> : null}\n          <FormField\n            label={t('auth.acceptInvitation.form.passwordLabel')}\n            name=\"password\"\n            type=\"password\"\n            value={password}\n            onChange={(event) => {\n              setPassword(event.target.value);\n              setErrorMessage(null);\n              if (status === 'error') {\n                setStatus('idle');\n              }\n            }}\n            placeholder={t('auth.acceptInvitation.form.passwordPlaceholder')}\n            autoComplete=\"new-password\"\n            required\n          />\n          <FormField\n            label={t('auth.acceptInvitation.form.confirmLabel')}\n            name=\"password-confirmation\"\n            type=\"password\"\n            value={passwordConfirmation}\n            onChange={(event) => {\n              setPasswordConfirmation(event.target.value);\n              setErrorMessage(null);\n              if (status === 'error') {\n                setStatus('idle');\n              }\n            }}\n            placeholder={t('auth.acceptInvitation.form.confirmPlaceholder')}\n            autoComplete=\"new-password\"\n            required\n          />\n          <Button type=\"submit\" isLoading={isSubmitting}>\n            {status === 'pending'\n              ? t('auth.acceptInvitation.status.workingButton')\n              : t('auth.acceptInvitation.form.submit')}\n          </Button>\n          <Button type=\"button\" variant=\"secondary\" onClick={onBackToLogin}>\n            {t('auth.acceptInvitation.actions.backToLogin')}\n          </Button>\n        </Form>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout title={t('auth.acceptInvitation.title')}>{content}</AuthLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AcceptInvitationScreen.js","names":[],"sources":["../../../../src/auth/pages/AcceptInvitationScreen.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormError, FormField, Form, AuthLayout } from '@plumile/ui';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\nimport { MfaChallengeForm } from '../login/MfaChallengeForm.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\nimport * as styles from '../login/loginPage.css.js';\n\ntype AcceptanceState = 'pending' | 'mfa' | 'completed' | 'error' | 'idle';\ntype InvitationErrorField = 'password' | 'passwordConfirmation' | null;\n\ntype Props = {\n  auth: UseAuthReturn;\n  onSuccessRedirect: () => void;\n  onBackToLogin: () => void;\n  token?: string;\n};\n\nexport const AcceptInvitationScreen = ({\n  auth,\n  onSuccessRedirect,\n  onBackToLogin,\n  token,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const { acceptInvitation } = auth;\n  const [status, setStatus] = useState<AcceptanceState>('idle');\n  const [password, setPassword] = useState('');\n  const [passwordConfirmation, setPasswordConfirmation] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [errorField, setErrorField] = useState<InvitationErrorField>(null);\n\n  const resolvedToken = useMemo(() => {\n    if (token != null) {\n      return token;\n    }\n    if (typeof window === 'undefined') {\n      return '';\n    }\n    const params = new URLSearchParams(window.location.search);\n    return params.get('token') ?? '';\n  }, [token]);\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setErrorField(null);\n      if (resolvedToken === '') {\n        setErrorMessage(t('auth.acceptInvitation.errors.missingToken'));\n        setStatus('error');\n        return;\n      }\n\n      if (password === '') {\n        setErrorMessage(\n          t('auth.acceptInvitation.errors.passwordPolicyViolation'),\n        );\n        setErrorField('password');\n        setStatus('error');\n        return;\n      }\n\n      if (passwordConfirmation === '') {\n        setErrorMessage(t('auth.acceptInvitation.errors.passwordMismatch'));\n        setErrorField('passwordConfirmation');\n        setStatus('error');\n        return;\n      }\n\n      if (password !== passwordConfirmation) {\n        setErrorMessage(t('auth.acceptInvitation.errors.passwordMismatch'));\n        setErrorField('passwordConfirmation');\n        setStatus('error');\n        return;\n      }\n\n      setStatus('pending');\n      setErrorMessage(null);\n      setIsSubmitting(true);\n\n      // eslint-disable-next-line no-void\n      void acceptInvitation({\n        token: resolvedToken,\n        password,\n        passwordConfirmation,\n      })\n        .then((result) => {\n          if (result === 'mfa-required') {\n            setStatus('mfa');\n            return;\n          }\n          setStatus('completed');\n          onSuccessRedirect();\n        })\n        .catch(() => {\n          setStatus('error');\n          setErrorMessage(t('auth.acceptInvitation.errors.default'));\n        })\n        .finally(() => {\n          setIsSubmitting(false);\n        });\n    },\n    [\n      acceptInvitation,\n      onSuccessRedirect,\n      password,\n      passwordConfirmation,\n      resolvedToken,\n      t,\n    ],\n  );\n\n  const handleMfaSuccess = useCallback(() => {\n    setStatus('completed');\n    onSuccessRedirect();\n  }, [onSuccessRedirect]);\n\n  const handleRetry = useCallback(() => {\n    setStatus('idle');\n    setErrorMessage(null);\n    setErrorField(null);\n    setIsSubmitting(false);\n  }, []);\n\n  if (status === 'mfa') {\n    return (\n      <AuthLayout\n        title={t('auth.acceptInvitation.mfaTitle')}\n        subtitle={t('auth.acceptInvitation.mfaSubtitle')}\n      >\n        <MfaChallengeForm\n          auth={auth}\n          onSuccess={handleMfaSuccess}\n          onBack={() => {\n            auth.reset();\n            handleRetry();\n          }}\n        />\n      </AuthLayout>\n    );\n  }\n\n  let content: JSX.Element;\n  if (status === 'completed') {\n    content = (\n      <AuthPanel>\n        <p className={styles.helper}>\n          {t('auth.acceptInvitation.status.success')}\n        </p>\n      </AuthPanel>\n    );\n  } else {\n    content = (\n      <AuthPanel description={t('auth.acceptInvitation.subtitle')}>\n        <Form\n          className={styles.formSurface}\n          onSubmit={handleSubmit}\n          noValidate\n          initialFocus=\"first-form-control\"\n        >\n          {errorMessage != null && errorField == null ? (\n            <FormError>{errorMessage}</FormError>\n          ) : null}\n          <FormField\n            label={t('auth.acceptInvitation.form.passwordLabel')}\n            error={errorField === 'password' ? errorMessage : null}\n            name=\"password\"\n            type=\"password\"\n            value={password}\n            onChange={(event) => {\n              setPassword(event.target.value);\n              setErrorMessage(null);\n              setErrorField(null);\n              if (status === 'error') {\n                setStatus('idle');\n              }\n            }}\n            placeholder={t('auth.acceptInvitation.form.passwordPlaceholder')}\n            autoComplete=\"new-password\"\n            required\n          />\n          <FormField\n            label={t('auth.acceptInvitation.form.confirmLabel')}\n            error={errorField === 'passwordConfirmation' ? errorMessage : null}\n            name=\"password-confirmation\"\n            type=\"password\"\n            value={passwordConfirmation}\n            onChange={(event) => {\n              setPasswordConfirmation(event.target.value);\n              setErrorMessage(null);\n              setErrorField(null);\n              if (status === 'error') {\n                setStatus('idle');\n              }\n            }}\n            placeholder={t('auth.acceptInvitation.form.confirmPlaceholder')}\n            autoComplete=\"new-password\"\n            required\n          />\n          <Button type=\"submit\" loading={isSubmitting}>\n            {status === 'pending'\n              ? t('auth.acceptInvitation.status.workingButton')\n              : t('auth.acceptInvitation.form.submit')}\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"soft\"\n            onClick={onBackToLogin}\n            tone=\"neutral\"\n          >\n            {t('auth.acceptInvitation.actions.backToLogin')}\n          </Button>\n        </Form>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout title={t('auth.acceptInvitation.title')}>{content}</AuthLayout>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/auth/pages/PasswordResetCompleteScreen.js

@@ -2,105 +2,105 @@ import { brandGhostButton as e, formSurface as t, helper as n } from "../login/l
 import { AuthPanel as r } from "../login/AuthPanel.js";
 import { useBackofficeReactTranslation as i } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as a, useMemo as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Button as u } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as d } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { FormField as f } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
-import { Form as p } from "@plumile/ui/atomic/molecules/form/Form.js";
-import { AuthLayout as m } from "@plumile/ui/atomic/templates/auth_layout/AuthLayout.js";
+import { AuthLayout as c, Form as l, FormError as u, FormField as d } from "@plumile/ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as m } from "@plumile/ui/button";
 //#region src/auth/pages/PasswordResetCompleteScreen.tsx
 var h = 8, g = ({ onBackToLogin: g, onCompletePasswordReset: _, token: v }) => {
-	let { t: y } = i(), [b, x] = s(""), [S, C] = s(""), [w, T] = s("idle"), [E, D] = s(null), [O, k] = s(!1), A = o(() => v ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [v]), j = a((e) => {
-		if (e.preventDefault(), D(null), A === "") {
+	let { t: y } = i(), [b, x] = s(""), [S, C] = s(""), [w, T] = s("idle"), [E, D] = s(null), [O, k] = s(null), [A, j] = s(!1), M = o(() => v ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [v]), N = a((e) => {
+		if (e.preventDefault(), D(null), k(null), M === "") {
 			D(y("auth.passwordResetComplete.errors.missingToken"));
 			return;
 		}
 		if (b.length < h) {
-			D(y("auth.passwordResetComplete.errors.minLength", { minLength: h }));
+			D(y("auth.passwordResetComplete.errors.minLength", { minLength: h })), k("password");
 			return;
 		}
 		if (b !== S) {
-			D(y("auth.passwordResetComplete.errors.mismatch"));
+			D(y("auth.passwordResetComplete.errors.mismatch")), k("passwordConfirm");
 			return;
 		}
-		k(!0), (async () => {
+		j(!0), (async () => {
 			try {
 				await _({
 					newPassword: b,
-					token: A
+					token: M
 				}) ? T("completed") : D(y("auth.passwordResetComplete.errors.invalid"));
 			} catch (e) {
 				D(e instanceof Error ? e.message : y("auth.passwordResetComplete.errors.invalid"));
 			} finally {
-				k(!1);
+				j(!1);
 			}
 		})().catch(() => {});
 	}, [
 		_,
 		b,
 		S,
-		A,
+		M,
 		y
-	]), M;
-	return M = w === "completed" ? /* @__PURE__ */ c(r, {
+	]), P;
+	return P = w === "completed" ? /* @__PURE__ */ f(r, {
 		title: y("auth.passwordResetComplete.success.title"),
 		description: y("auth.passwordResetComplete.success.description"),
-		footer: /* @__PURE__ */ c(u, {
+		footer: /* @__PURE__ */ f(m, {
 			type: "button",
-			variant: "secondary",
+			variant: "soft",
 			className: e,
 			onClick: g,
+			tone: "neutral",
 			children: y("auth.passwordResetComplete.success.action")
 		}),
-		children: /* @__PURE__ */ c("p", {
+		children: /* @__PURE__ */ f("p", {
 			className: n,
 			children: y("auth.passwordResetComplete.success.helper")
 		})
-	}) : /* @__PURE__ */ c(r, {
+	}) : /* @__PURE__ */ f(r, {
 		title: y("auth.passwordResetComplete.form.title"),
 		description: y("auth.passwordResetComplete.form.description"),
-		children: /* @__PURE__ */ l(p, {
+		children: /* @__PURE__ */ p(l, {
 			className: t,
-			onSubmit: j,
+			onSubmit: N,
 			noValidate: !0,
 			initialFocus: "first-form-control",
 			children: [
-				E == null ? null : /* @__PURE__ */ c(d, { children: E }),
-				/* @__PURE__ */ c(f, {
+				E != null && O == null ? /* @__PURE__ */ f(u, { children: E }) : null,
+				/* @__PURE__ */ f(d, {
 					label: y("auth.passwordResetComplete.form.passwordLabel"),
+					error: O === "password" ? E : null,
 					name: "new-password",
 					type: "password",
 					value: b,
 					onChange: (e) => {
-						x(e.target.value), D(null);
+						x(e.target.value), D(null), k(null);
 					},
 					placeholder: y("auth.passwordResetComplete.form.passwordPlaceholder"),
 					autoComplete: "new-password",
 					required: !0
 				}),
-				/* @__PURE__ */ c(f, {
+				/* @__PURE__ */ f(d, {
 					label: y("auth.passwordResetComplete.form.confirmLabel"),
+					error: O === "passwordConfirm" ? E : null,
 					name: "confirm-password",
 					type: "password",
 					value: S,
 					onChange: (e) => {
-						C(e.target.value), D(null);
+						C(e.target.value), D(null), k(null);
 					},
 					placeholder: y("auth.passwordResetComplete.form.confirmPlaceholder"),
 					autoComplete: "new-password",
 					required: !0
 				}),
-				/* @__PURE__ */ c(u, {
+				/* @__PURE__ */ f(m, {
 					type: "submit",
-					isLoading: O,
+					loading: A,
 					children: y("auth.passwordResetComplete.form.submit")
 				})
 			]
 		})
-	}), /* @__PURE__ */ c(m, {
+	}), /* @__PURE__ */ f(c, {
 		title: y("auth.passwordResetComplete.title"),
 		subtitle: y("auth.passwordResetComplete.subtitle"),
-		children: M
+		children: P
 	});
 };
 //#endregion

package/lib/esm/auth/pages/PasswordResetCompleteScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordResetCompleteScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetCompleteScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport * as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\nconst MIN_PASSWORD_LENGTH = 8;\n\ntype Props = {\n  onBackToLogin: () => void;\n  onCompletePasswordReset: (input: {\n    newPassword: string;\n    token: string;\n  }) => Promise<boolean>;\n  token?: string;\n};\n\nexport const PasswordResetCompleteScreen = ({\n  onBackToLogin,\n  onCompletePasswordReset,\n  token,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [password, setPassword] = useState('');\n  const [passwordConfirm, setPasswordConfirm] = useState('');\n  const [status, setStatus] = useState<'idle' | 'completed'>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const resolvedToken = useMemo(() => {\n    if (token != null) {\n      return token;\n    }\n    if (typeof window === 'undefined') {\n      return '';\n    }\n    const params = new URLSearchParams(window.location.search);\n    return params.get('token') ?? '';\n  }, [token]);\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setError(null);\n\n      if (resolvedToken === '') {\n        setError(t('auth.passwordResetComplete.errors.missingToken'));\n        return;\n      }\n\n      if (password.length < MIN_PASSWORD_LENGTH) {\n        setError(\n          t('auth.passwordResetComplete.errors.minLength', {\n            minLength: MIN_PASSWORD_LENGTH,\n          }),\n        );\n        return;\n      }\n\n      if (password !== passwordConfirm) {\n        setError(t('auth.passwordResetComplete.errors.mismatch'));\n        return;\n      }\n\n      setIsSubmitting(true);\n\n      const completePasswordReset = async (): Promise<void> => {\n        try {\n          const success = await onCompletePasswordReset({\n            newPassword: password,\n            token: resolvedToken,\n          });\n          if (success) {\n            setStatus('completed');\n          } else {\n            setError(t('auth.passwordResetComplete.errors.invalid'));\n          }\n        } catch (mutationError) {\n          setError(\n            mutationError instanceof Error\n              ? mutationError.message\n              : t('auth.passwordResetComplete.errors.invalid'),\n          );\n        } finally {\n          setIsSubmitting(false);\n        }\n      };\n\n      completePasswordReset().catch(() => {\n        return undefined;\n      });\n    },\n    [onCompletePasswordReset, password, passwordConfirm, resolvedToken, t],\n  );\n\n  let content: JSX.Element;\n  if (status === 'completed') {\n    content = (\n      <AuthPanel\n        title={t('auth.passwordResetComplete.success.title')}\n        description={t('auth.passwordResetComplete.success.description')}\n        footer={\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            className={styles.brandGhostButton}\n            onClick={onBackToLogin}\n          >\n            {t('auth.passwordResetComplete.success.action')}\n          </Button>\n        }\n      >\n        <p className={styles.helper}>\n          {t('auth.passwordResetComplete.success.helper')}\n        </p>\n      </AuthPanel>\n    );\n  } else {\n    content = (\n      <AuthPanel\n        title={t('auth.passwordResetComplete.form.title')}\n        description={t('auth.passwordResetComplete.form.description')}\n      >\n        <Form\n          className={styles.formSurface}\n          onSubmit={handleSubmit}\n          noValidate\n          initialFocus=\"first-form-control\"\n        >\n          {error != null ? <FormError>{error}</FormError> : null}\n          <FormField\n            label={t('auth.passwordResetComplete.form.passwordLabel')}\n            name=\"new-password\"\n            type=\"password\"\n            value={password}\n            onChange={(event) => {\n              setPassword(event.target.value);\n              setError(null);\n            }}\n            placeholder={t(\n              'auth.passwordResetComplete.form.passwordPlaceholder',\n            )}\n            autoComplete=\"new-password\"\n            required\n          />\n          <FormField\n            label={t('auth.passwordResetComplete.form.confirmLabel')}\n            name=\"confirm-password\"\n            type=\"password\"\n            value={passwordConfirm}\n            onChange={(event) => {\n              setPasswordConfirm(event.target.value);\n              setError(null);\n            }}\n            placeholder={t(\n              'auth.passwordResetComplete.form.confirmPlaceholder',\n            )}\n            autoComplete=\"new-password\"\n            required\n          />\n          <Button type=\"submit\" isLoading={isSubmitting}>\n            {t('auth.passwordResetComplete.form.submit')}\n          </Button>\n        </Form>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout\n      title={t('auth.passwordResetComplete.title')}\n      subtitle={t('auth.passwordResetComplete.subtitle')}\n    >\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,IAAsB,GAWf,KAA+B,EAC1C,kBACA,4BACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAU,KAAe,EAAS,EAAE,GACrC,CAAC,GAAiB,KAAsB,EAAS,EAAE,GACnD,CAAC,GAAQ,KAAa,EAA+B,MAAM,GAC3D,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAgB,QAChB,MAGA,OAAO,SAAW,MACb,KAGF,IADY,gBAAgB,OAAO,SAAS,MAC5C,CAAA,CAAO,IAAI,OAAO,KAAK,KAC7B,CAAC,CAAK,CAAC,GAEJ,IAAe,GAClB,MAAsC;EAIrC,IAHA,EAAM,eAAe,GACrB,EAAS,IAAI,GAET,MAAkB,IAAI;GACxB,EAAS,EAAE,gDAAgD,CAAC;GAC5D;EACF;EAEA,IAAI,EAAS,SAAS,GAAqB;GACzC,EACE,EAAE,+CAA+C,EAC/C,WAAW,EACb,CAAC,CACH;GACA;EACF;EAEA,IAAI,MAAa,GAAiB;GAChC,EAAS,EAAE,4CAA4C,CAAC;GACxD;EACF;EA0BA,AAxBA,EAAgB,EAAI,IAwBpB,YAtByD;GACvD,IAAI;IAKF,AAAI,MAJkB,EAAwB;KAC5C,aAAa;KACb,OAAO;IACT,CAAC,IAEC,EAAU,WAAW,IAErB,EAAS,EAAE,2CAA2C,CAAC;GAE3D,SAAS,GAAe;IACtB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,2CAA2C,CACnD;GACF,UAAU;IACR,EAAgB,EAAK;GACvB;EACF,EAEA,CAAsB,CAAC,CAAC,YAAY,CAEpC,CAAC;CACH,GACA;EAAC;EAAyB;EAAU;EAAiB;EAAe;CAAC,CACvE,GAEI;CAyEJ,OAxEA,AAsBE,IAtBE,MAAW,cAEX,kBAAC,GAAD;EACE,OAAO,EAAE,0CAA0C;EACnD,aAAa,EAAE,gDAAgD;EAC/D,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,WAAW;GACX,SAAS;GAER,UAAA,EAAE,2CAA2C;EACxC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,2CAA2C;EAC7C,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EACE,OAAO,EAAE,uCAAuC;EAChD,aAAa,EAAE,6CAA6C;EAE5D,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA;IAC9C,kBAAC,GAAD;KACE,OAAO,EAAE,+CAA+C;KACxD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAY,EAAM,OAAO,KAAK,GAC9B,EAAS,IAAI;KACf;KACA,aAAa,EACX,qDACF;KACA,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KACE,OAAO,EAAE,8CAA8C;KACvD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAmB,EAAM,OAAO,KAAK,GACrC,EAAS,IAAI;KACf;KACA,aAAa,EACX,oDACF;KACA,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,WAAW;KAC9B,UAAA,EAAE,wCAAwC;IACrC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EACE,OAAO,EAAE,kCAAkC;EAC3C,UAAU,EAAE,qCAAqC;EAEhD,UAAA;CACS,CAAA;AAEhB"}
+{"version":3,"file":"PasswordResetCompleteScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetCompleteScreen.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormError, FormField, Form, AuthLayout } from '@plumile/ui';\n\nimport * as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\nconst MIN_PASSWORD_LENGTH = 8;\ntype PasswordResetErrorField = 'password' | 'passwordConfirm' | null;\n\ntype Props = {\n  onBackToLogin: () => void;\n  onCompletePasswordReset: (input: {\n    newPassword: string;\n    token: string;\n  }) => Promise<boolean>;\n  token?: string;\n};\n\nexport const PasswordResetCompleteScreen = ({\n  onBackToLogin,\n  onCompletePasswordReset,\n  token,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [password, setPassword] = useState('');\n  const [passwordConfirm, setPasswordConfirm] = useState('');\n  const [status, setStatus] = useState<'idle' | 'completed'>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [errorField, setErrorField] = useState<PasswordResetErrorField>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const resolvedToken = useMemo(() => {\n    if (token != null) {\n      return token;\n    }\n    if (typeof window === 'undefined') {\n      return '';\n    }\n    const params = new URLSearchParams(window.location.search);\n    return params.get('token') ?? '';\n  }, [token]);\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setError(null);\n      setErrorField(null);\n\n      if (resolvedToken === '') {\n        setError(t('auth.passwordResetComplete.errors.missingToken'));\n        return;\n      }\n\n      if (password.length < MIN_PASSWORD_LENGTH) {\n        setError(\n          t('auth.passwordResetComplete.errors.minLength', {\n            minLength: MIN_PASSWORD_LENGTH,\n          }),\n        );\n        setErrorField('password');\n        return;\n      }\n\n      if (password !== passwordConfirm) {\n        setError(t('auth.passwordResetComplete.errors.mismatch'));\n        setErrorField('passwordConfirm');\n        return;\n      }\n\n      setIsSubmitting(true);\n\n      const completePasswordReset = async (): Promise<void> => {\n        try {\n          const success = await onCompletePasswordReset({\n            newPassword: password,\n            token: resolvedToken,\n          });\n          if (success) {\n            setStatus('completed');\n          } else {\n            setError(t('auth.passwordResetComplete.errors.invalid'));\n          }\n        } catch (mutationError) {\n          setError(\n            mutationError instanceof Error\n              ? mutationError.message\n              : t('auth.passwordResetComplete.errors.invalid'),\n          );\n        } finally {\n          setIsSubmitting(false);\n        }\n      };\n\n      completePasswordReset().catch(() => {\n        return undefined;\n      });\n    },\n    [onCompletePasswordReset, password, passwordConfirm, resolvedToken, t],\n  );\n\n  let content: JSX.Element;\n  if (status === 'completed') {\n    content = (\n      <AuthPanel\n        title={t('auth.passwordResetComplete.success.title')}\n        description={t('auth.passwordResetComplete.success.description')}\n        footer={\n          <Button\n            type=\"button\"\n            variant=\"soft\"\n            className={styles.brandGhostButton}\n            onClick={onBackToLogin}\n            tone=\"neutral\"\n          >\n            {t('auth.passwordResetComplete.success.action')}\n          </Button>\n        }\n      >\n        <p className={styles.helper}>\n          {t('auth.passwordResetComplete.success.helper')}\n        </p>\n      </AuthPanel>\n    );\n  } else {\n    content = (\n      <AuthPanel\n        title={t('auth.passwordResetComplete.form.title')}\n        description={t('auth.passwordResetComplete.form.description')}\n      >\n        <Form\n          className={styles.formSurface}\n          onSubmit={handleSubmit}\n          noValidate\n          initialFocus=\"first-form-control\"\n        >\n          {error != null && errorField == null ? (\n            <FormError>{error}</FormError>\n          ) : null}\n          <FormField\n            label={t('auth.passwordResetComplete.form.passwordLabel')}\n            error={errorField === 'password' ? error : null}\n            name=\"new-password\"\n            type=\"password\"\n            value={password}\n            onChange={(event) => {\n              setPassword(event.target.value);\n              setError(null);\n              setErrorField(null);\n            }}\n            placeholder={t(\n              'auth.passwordResetComplete.form.passwordPlaceholder',\n            )}\n            autoComplete=\"new-password\"\n            required\n          />\n          <FormField\n            label={t('auth.passwordResetComplete.form.confirmLabel')}\n            error={errorField === 'passwordConfirm' ? error : null}\n            name=\"confirm-password\"\n            type=\"password\"\n            value={passwordConfirm}\n            onChange={(event) => {\n              setPasswordConfirm(event.target.value);\n              setError(null);\n              setErrorField(null);\n            }}\n            placeholder={t(\n              'auth.passwordResetComplete.form.confirmPlaceholder',\n            )}\n            autoComplete=\"new-password\"\n            required\n          />\n          <Button type=\"submit\" loading={isSubmitting}>\n            {t('auth.passwordResetComplete.form.submit')}\n          </Button>\n        </Form>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout\n      title={t('auth.passwordResetComplete.title')}\n      subtitle={t('auth.passwordResetComplete.subtitle')}\n    >\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/auth/pages/PasswordResetRequestScreen.js

@@ -2,85 +2,89 @@ import { formSurface as e, helper as t } from "../login/loginPage.css.js";
 import { AuthPanel as n } from "../login/AuthPanel.js";
 import { useBackofficeReactTranslation as r } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as i, useMemo as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Button as l } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as u } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { FormField as d } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
-import { Form as f } from "@plumile/ui/atomic/molecules/form/Form.js";
-import { AuthLayout as p } from "@plumile/ui/atomic/templates/auth_layout/AuthLayout.js";
+import { AuthLayout as s, Form as c, FormError as l, FormField as u } from "@plumile/ui";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Button as p } from "@plumile/ui/button";
 //#region src/auth/pages/PasswordResetRequestScreen.tsx
 var m = ({ onStartPasswordReset: m }) => {
-	let { i18n: h, t: g } = r(), [_, v] = o(""), [y, b] = o("idle"), [x, S] = o(null), [C, w] = o(!1), T = a(() => {
+	let { i18n: h, t: g } = r(), [_, v] = o(""), [y, b] = o("idle"), [x, S] = o(null), [C, w] = o(!1), [T, E] = o(!1), D = a(() => {
 		let e = h.language.trim();
 		if (e !== "") return e;
 		if (!(typeof navigator > "u")) return navigator.language;
-	}, [h.language]), E = i((e) => {
-		if (e.preventDefault(), S(null), _.trim() === "") {
-			S(g("auth.passwordResetRequest.errors.emailRequired"));
+	}, [h.language]), O = i((e) => {
+		if (e.preventDefault(), S(null), w(!1), _.trim() === "") {
+			S(g("auth.passwordResetRequest.errors.emailRequired")), w(!0);
 			return;
 		}
-		w(!0), m({
+		let t = e.currentTarget.elements.namedItem("email");
+		if (t instanceof HTMLInputElement && !t.validity.valid) {
+			S(g("auth.passwordResetRequest.errors.invalidEmail")), w(!0);
+			return;
+		}
+		E(!0), m({
 			email: _.trim(),
-			locale: T
+			locale: D
 		}).then((e) => {
 			e ? b("sent") : S(g("auth.passwordResetRequest.errors.startFailed"));
 		}).catch((e) => {
 			S(e instanceof Error ? e.message : g("auth.passwordResetRequest.errors.startFailed"));
 		}).finally(() => {
-			w(!1);
+			E(!1);
 		});
 	}, [
 		_,
-		T,
+		D,
 		m,
 		g
-	]), D;
-	return D = y === "sent" ? /* @__PURE__ */ s(n, {
+	]), k;
+	return k = y === "sent" ? /* @__PURE__ */ d(n, {
 		title: g("auth.passwordResetRequest.sent.title"),
 		description: g("auth.passwordResetRequest.sent.description", { email: _ }),
-		footer: /* @__PURE__ */ s(l, {
+		footer: /* @__PURE__ */ d(p, {
 			type: "button",
-			variant: "secondary",
+			variant: "soft",
 			onClick: () => {
 				b("idle");
 			},
+			tone: "neutral",
 			children: g("auth.passwordResetRequest.sent.action")
 		}),
-		children: /* @__PURE__ */ s("p", {
+		children: /* @__PURE__ */ d("p", {
 			className: t,
 			children: g("auth.passwordResetRequest.sent.helper")
 		})
-	}) : /* @__PURE__ */ s(n, {
+	}) : /* @__PURE__ */ d(n, {
 		description: g("auth.passwordResetRequest.form.description"),
-		children: /* @__PURE__ */ c(f, {
+		children: /* @__PURE__ */ f(c, {
 			className: e,
-			onSubmit: E,
+			onSubmit: O,
 			noValidate: !0,
 			initialFocus: "first-form-control",
 			children: [
-				x == null ? null : /* @__PURE__ */ s(u, { children: x }),
-				/* @__PURE__ */ s(d, {
+				x != null && !C ? /* @__PURE__ */ d(l, { children: x }) : null,
+				/* @__PURE__ */ d(u, {
 					label: g("auth.passwordResetRequest.form.emailLabel"),
+					error: C ? x : null,
 					name: "email",
 					type: "email",
 					value: _,
 					onChange: (e) => {
-						v(e.target.value), S(null);
+						v(e.target.value), S(null), w(!1);
 					},
 					placeholder: g("auth.passwordResetRequest.form.emailPlaceholder"),
 					autoComplete: "email",
 					required: !0
 				}),
-				/* @__PURE__ */ s(l, {
+				/* @__PURE__ */ d(p, {
 					type: "submit",
-					isLoading: C,
+					loading: T,
 					children: g("auth.passwordResetRequest.form.submit")
 				})
 			]
 		})
-	}), /* @__PURE__ */ s(p, {
+	}), /* @__PURE__ */ d(s, {
 		title: g("auth.passwordResetRequest.title"),
-		children: D
+		children: k
 	});
 };
 //#endregion

package/lib/esm/auth/pages/PasswordResetRequestScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordResetRequestScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetRequestScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport * as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\ntype Props = {\n  onStartPasswordReset: (input: {\n    email: string;\n    locale?: string;\n  }) => Promise<boolean>;\n};\n\nexport const PasswordResetRequestScreen = ({\n  onStartPasswordReset,\n}: Props): JSX.Element => {\n  const { i18n, t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState('');\n  const [status, setStatus] = useState<'idle' | 'sent'>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const locale = useMemo(() => {\n    const language = i18n.language.trim();\n    if (language !== '') {\n      return language;\n    }\n    if (typeof navigator === 'undefined') {\n      return undefined;\n    }\n    return navigator.language;\n  }, [i18n.language]);\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setError(null);\n\n      if (email.trim() === '') {\n        setError(t('auth.passwordResetRequest.errors.emailRequired'));\n        return;\n      }\n\n      setIsSubmitting(true);\n      onStartPasswordReset({\n        email: email.trim(),\n        locale,\n      })\n        .then((success) => {\n          if (success) {\n            setStatus('sent');\n          } else {\n            setError(t('auth.passwordResetRequest.errors.startFailed'));\n          }\n        })\n        .catch((mutationError) => {\n          setError(\n            mutationError instanceof Error\n              ? mutationError.message\n              : t('auth.passwordResetRequest.errors.startFailed'),\n          );\n        })\n        .finally(() => {\n          setIsSubmitting(false);\n        });\n    },\n    [email, locale, onStartPasswordReset, t],\n  );\n\n  let content: JSX.Element;\n  if (status === 'sent') {\n    content = (\n      <AuthPanel\n        title={t('auth.passwordResetRequest.sent.title')}\n        description={t('auth.passwordResetRequest.sent.description', { email })}\n        footer={\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => {\n              setStatus('idle');\n            }}\n          >\n            {t('auth.passwordResetRequest.sent.action')}\n          </Button>\n        }\n      >\n        <p className={styles.helper}>\n          {t('auth.passwordResetRequest.sent.helper')}\n        </p>\n      </AuthPanel>\n    );\n  } else {\n    content = (\n      <AuthPanel description={t('auth.passwordResetRequest.form.description')}>\n        <Form\n          className={styles.formSurface}\n          onSubmit={handleSubmit}\n          noValidate\n          initialFocus=\"first-form-control\"\n        >\n          {error != null ? <FormError>{error}</FormError> : null}\n          <FormField\n            label={t('auth.passwordResetRequest.form.emailLabel')}\n            name=\"email\"\n            type=\"email\"\n            value={email}\n            onChange={(event) => {\n              setEmail(event.target.value);\n              setError(null);\n            }}\n            placeholder={t('auth.passwordResetRequest.form.emailPlaceholder')}\n            autoComplete=\"email\"\n            required\n          />\n          <Button type=\"submit\" isLoading={isSubmitting}>\n            {t('auth.passwordResetRequest.form.submit')}\n          </Button>\n        </Form>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout title={t('auth.passwordResetRequest.title')}>\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,KAA8B,EACzC,8BACwB;CACxB,IAAM,EAAE,SAAM,SAAM,EAA8B,GAC5C,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAQ,KAAa,EAA0B,MAAM,GACtD,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAS,QAAc;EAC3B,IAAM,IAAW,EAAK,SAAS,KAAK;EACpC,IAAI,MAAa,IACf,OAAO;EAEL,aAAO,YAAc,MAGzB,OAAO,UAAU;CACnB,GAAG,CAAC,EAAK,QAAQ,CAAC,GAEZ,IAAe,GAClB,MAAsC;EAIrC,IAHA,EAAM,eAAe,GACrB,EAAS,IAAI,GAET,EAAM,KAAK,MAAM,IAAI;GACvB,EAAS,EAAE,gDAAgD,CAAC;GAC5D;EACF;EAGA,AADA,EAAgB,EAAI,GACpB,EAAqB;GACnB,OAAO,EAAM,KAAK;GAClB;EACF,CAAC,CAAC,CACC,MAAM,MAAY;GACjB,AAAI,IACF,EAAU,MAAM,IAEhB,EAAS,EAAE,8CAA8C,CAAC;EAE9D,CAAC,CAAC,CACD,OAAO,MAAkB;GACxB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,8CAA8C,CACtD;EACF,CAAC,CAAC,CACD,cAAc;GACb,EAAgB,EAAK;EACvB,CAAC;CACL,GACA;EAAC;EAAO;EAAQ;EAAsB;CAAC,CACzC,GAEI;CAsDJ,OArDA,AAuBE,IAvBE,MAAW,SAEX,kBAAC,GAAD;EACE,OAAO,EAAE,sCAAsC;EAC/C,aAAa,EAAE,8CAA8C,EAAE,SAAM,CAAC;EACtE,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAU,MAAM;GAClB;GAEC,UAAA,EAAE,uCAAuC;EACpC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,uCAAuC;EACzC,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EAAW,aAAa,EAAE,4CAA4C;EACpE,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA;IAC9C,kBAAC,GAAD;KACE,OAAO,EAAE,2CAA2C;KACpD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,EAAS,IAAI;KACf;KACA,aAAa,EAAE,iDAAiD;KAChE,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,WAAW;KAC9B,UAAA,EAAE,uCAAuC;IACpC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EAAY,OAAO,EAAE,iCAAiC;EACnD,UAAA;CACS,CAAA;AAEhB"}
+{"version":3,"file":"PasswordResetRequestScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetRequestScreen.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormError, FormField, Form, AuthLayout } from '@plumile/ui';\n\nimport * as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\ntype Props = {\n  onStartPasswordReset: (input: {\n    email: string;\n    locale?: string;\n  }) => Promise<boolean>;\n};\n\nexport const PasswordResetRequestScreen = ({\n  onStartPasswordReset,\n}: Props): JSX.Element => {\n  const { i18n, t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState('');\n  const [status, setStatus] = useState<'idle' | 'sent'>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [hasEmailError, setHasEmailError] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const locale = useMemo(() => {\n    const language = i18n.language.trim();\n    if (language !== '') {\n      return language;\n    }\n    if (typeof navigator === 'undefined') {\n      return undefined;\n    }\n    return navigator.language;\n  }, [i18n.language]);\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setError(null);\n      setHasEmailError(false);\n\n      if (email.trim() === '') {\n        setError(t('auth.passwordResetRequest.errors.emailRequired'));\n        setHasEmailError(true);\n        return;\n      }\n\n      const emailInput = event.currentTarget.elements.namedItem('email');\n      if (\n        emailInput instanceof HTMLInputElement &&\n        !emailInput.validity.valid\n      ) {\n        setError(t('auth.passwordResetRequest.errors.invalidEmail'));\n        setHasEmailError(true);\n        return;\n      }\n\n      setIsSubmitting(true);\n      onStartPasswordReset({\n        email: email.trim(),\n        locale,\n      })\n        .then((success) => {\n          if (success) {\n            setStatus('sent');\n          } else {\n            setError(t('auth.passwordResetRequest.errors.startFailed'));\n          }\n        })\n        .catch((mutationError) => {\n          setError(\n            mutationError instanceof Error\n              ? mutationError.message\n              : t('auth.passwordResetRequest.errors.startFailed'),\n          );\n        })\n        .finally(() => {\n          setIsSubmitting(false);\n        });\n    },\n    [email, locale, onStartPasswordReset, t],\n  );\n\n  let content: JSX.Element;\n  if (status === 'sent') {\n    content = (\n      <AuthPanel\n        title={t('auth.passwordResetRequest.sent.title')}\n        description={t('auth.passwordResetRequest.sent.description', { email })}\n        footer={\n          <Button\n            type=\"button\"\n            variant=\"soft\"\n            onClick={() => {\n              setStatus('idle');\n            }}\n            tone=\"neutral\"\n          >\n            {t('auth.passwordResetRequest.sent.action')}\n          </Button>\n        }\n      >\n        <p className={styles.helper}>\n          {t('auth.passwordResetRequest.sent.helper')}\n        </p>\n      </AuthPanel>\n    );\n  } else {\n    content = (\n      <AuthPanel description={t('auth.passwordResetRequest.form.description')}>\n        <Form\n          className={styles.formSurface}\n          onSubmit={handleSubmit}\n          noValidate\n          initialFocus=\"first-form-control\"\n        >\n          {error != null && !hasEmailError ? (\n            <FormError>{error}</FormError>\n          ) : null}\n          <FormField\n            label={t('auth.passwordResetRequest.form.emailLabel')}\n            error={hasEmailError ? error : null}\n            name=\"email\"\n            type=\"email\"\n            value={email}\n            onChange={(event) => {\n              setEmail(event.target.value);\n              setError(null);\n              setHasEmailError(false);\n            }}\n            placeholder={t('auth.passwordResetRequest.form.emailPlaceholder')}\n            autoComplete=\"email\"\n            required\n          />\n          <Button type=\"submit\" loading={isSubmitting}>\n            {t('auth.passwordResetRequest.form.submit')}\n          </Button>\n        </Form>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout title={t('auth.passwordResetRequest.title')}>\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":";;;;;;;;AAsBA,IAAa,KAA8B,EACzC,8BACwB;CACxB,IAAM,EAAE,SAAM,SAAM,EAA8B,GAC5C,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAQ,KAAa,EAA0B,MAAM,GACtD,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAe,KAAoB,EAAS,EAAK,GAClD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAS,QAAc;EAC3B,IAAM,IAAW,EAAK,SAAS,KAAK;EACpC,IAAI,MAAa,IACf,OAAO;EAEL,aAAO,YAAc,MAGzB,OAAO,UAAU;CACnB,GAAG,CAAC,EAAK,QAAQ,CAAC,GAEZ,IAAe,GAClB,MAAsC;EAKrC,IAJA,EAAM,eAAe,GACrB,EAAS,IAAI,GACb,EAAiB,EAAK,GAElB,EAAM,KAAK,MAAM,IAAI;GAEvB,AADA,EAAS,EAAE,gDAAgD,CAAC,GAC5D,EAAiB,EAAI;GACrB;EACF;EAEA,IAAM,IAAa,EAAM,cAAc,SAAS,UAAU,OAAO;EACjE,IACE,aAAsB,oBACtB,CAAC,EAAW,SAAS,OACrB;GAEA,AADA,EAAS,EAAE,+CAA+C,CAAC,GAC3D,EAAiB,EAAI;GACrB;EACF;EAGA,AADA,EAAgB,EAAI,GACpB,EAAqB;GACnB,OAAO,EAAM,KAAK;GAClB;EACF,CAAC,CAAC,CACC,MAAM,MAAY;GACjB,AAAI,IACF,EAAU,MAAM,IAEhB,EAAS,EAAE,8CAA8C,CAAC;EAE9D,CAAC,CAAC,CACD,OAAO,MAAkB;GACxB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,8CAA8C,CACtD;EACF,CAAC,CAAC,CACD,cAAc;GACb,EAAgB,EAAK;EACvB,CAAC;CACL,GACA;EAAC;EAAO;EAAQ;EAAsB;CAAC,CACzC,GAEI;CA2DJ,OA1DA,AAwBE,IAxBE,MAAW,SAEX,kBAAC,GAAD;EACE,OAAO,EAAE,sCAAsC;EAC/C,aAAa,EAAE,8CAA8C,EAAE,SAAM,CAAC;EACtE,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAU,MAAM;GAClB;GACA,MAAK;GAEJ,UAAA,EAAE,uCAAuC;EACpC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,uCAAuC;EACzC,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EAAW,aAAa,EAAE,4CAA4C;EACpE,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,QAAQ,CAAC,IACjB,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA,IAC3B;IACJ,kBAAC,GAAD;KACE,OAAO,EAAE,2CAA2C;KACpD,OAAO,IAAgB,IAAQ;KAC/B,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAGnB,AAFA,EAAS,EAAM,OAAO,KAAK,GAC3B,EAAS,IAAI,GACb,EAAiB,EAAK;KACxB;KACA,aAAa,EAAE,iDAAiD;KAChE,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAS;KAC5B,UAAA,EAAE,uCAAuC;IACpC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EAAY,OAAO,EAAE,iCAAiC;EACnD,UAAA;CACS,CAAA;AAEhB"}

package/lib/esm/auth/pages/VerifyEmailScreen.js

@@ -1,67 +1,69 @@
 import { helper as e, stack as t } from "../login/loginPage.css.js";
-import { useBackofficeReactTranslation as n } from "../../i18n/useBackofficeReactTranslation.js";
-import { useEffect as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Button as c } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as l } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { AuthLayout as u } from "@plumile/ui/atomic/templates/auth_layout/AuthLayout.js";
+import { AuthPanel as n } from "../login/AuthPanel.js";
+import { useBackofficeReactTranslation as r } from "../../i18n/useBackofficeReactTranslation.js";
+import { useEffect as i, useMemo as a, useState as o } from "react";
+import { AuthLayout as s, FormError as c } from "@plumile/ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Button as d } from "@plumile/ui/button";
 //#region src/auth/pages/VerifyEmailScreen.tsx
-var d = ({ onBackToLogin: d, onVerifyEmail: f, token: p }) => {
-	let { t: m } = n(), [h, g] = a("pending"), [_, v] = a(null), y = i(() => p ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [p]);
-	r(() => {
-		if (y === "") {
-			g("error"), v(m("auth.verifyEmail.errors.missingToken"));
+var f = ({ onBackToLogin: f, onVerifyEmail: p, token: m }) => {
+	let { t: h } = r(), [g, _] = o("pending"), [v, y] = o(null), b = a(() => m ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [m]);
+	i(() => {
+		if (b === "") {
+			_("error"), y(h("auth.verifyEmail.errors.missingToken"));
 			return;
 		}
 		(async () => {
 			try {
-				await f({ token: y }) ? g("success") : (g("error"), v(m("auth.verifyEmail.errors.invalid")));
+				await p({ token: b }) ? _("success") : (_("error"), y(h("auth.verifyEmail.errors.invalid")));
 			} catch (e) {
-				g("error"), v(e instanceof Error ? e.message : m("auth.verifyEmail.errors.invalid"));
+				_("error"), y(e instanceof Error ? e.message : h("auth.verifyEmail.errors.invalid"));
 			}
 		})().catch(() => {});
 	}, [
-		f,
-		y,
-		m
+		p,
+		b,
+		h
 	]);
-	let b;
-	return b = h === "success" ? /* @__PURE__ */ s("div", {
+	let x;
+	return x = g === "success" ? /* @__PURE__ */ l(n, { children: /* @__PURE__ */ u("div", {
 		className: t,
-		children: [/* @__PURE__ */ o("p", {
+		children: [/* @__PURE__ */ l("p", {
 			className: e,
-			children: m("auth.verifyEmail.status.success")
-		}), /* @__PURE__ */ o(c, {
+			children: h("auth.verifyEmail.status.success")
+		}), /* @__PURE__ */ l(d, {
 			type: "button",
-			variant: "secondary",
-			onClick: d,
-			children: m("auth.verifyEmail.actions.continue")
+			variant: "soft",
+			onClick: f,
+			tone: "neutral",
+			children: h("auth.verifyEmail.actions.continue")
 		})]
-	}) : h === "error" ? /* @__PURE__ */ s("div", {
+	}) }) : g === "error" ? /* @__PURE__ */ l(n, { children: /* @__PURE__ */ u("div", {
 		className: t,
-		children: [_ == null ? null : /* @__PURE__ */ o(l, { children: _ }), /* @__PURE__ */ o(c, {
+		children: [v == null ? null : /* @__PURE__ */ l(c, { children: v }), /* @__PURE__ */ l(d, {
 			type: "button",
-			variant: "secondary",
-			onClick: d,
-			children: m("auth.verifyEmail.actions.return")
+			variant: "soft",
+			onClick: f,
+			tone: "neutral",
+			children: h("auth.verifyEmail.actions.return")
 		})]
-	}) : /* @__PURE__ */ s("div", {
+	}) }) : /* @__PURE__ */ l(n, { children: /* @__PURE__ */ u("div", {
 		className: t,
-		children: [/* @__PURE__ */ o("p", {
+		children: [/* @__PURE__ */ l("p", {
 			className: e,
-			children: m("auth.verifyEmail.status.verifying")
-		}), /* @__PURE__ */ o(c, {
+			children: h("auth.verifyEmail.status.verifying")
+		}), /* @__PURE__ */ l(d, {
 			type: "button",
-			isLoading: !0,
-			children: m("auth.verifyEmail.status.verifyingButton")
+			loading: !0,
+			children: h("auth.verifyEmail.status.verifyingButton")
 		})]
-	}), /* @__PURE__ */ o(u, {
-		title: m("auth.verifyEmail.title"),
-		subtitle: m("auth.verifyEmail.subtitle"),
-		children: b
+	}) }), /* @__PURE__ */ l(s, {
+		title: h("auth.verifyEmail.title"),
+		subtitle: h("auth.verifyEmail.subtitle"),
+		children: x
 	});
 };
 //#endregion
-export { d as VerifyEmailScreen };
+export { f as VerifyEmailScreen };
 
 //# sourceMappingURL=VerifyEmailScreen.js.map

package/lib/esm/auth/pages/VerifyEmailScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerifyEmailScreen.js","names":[],"sources":["../../../../src/auth/pages/VerifyEmailScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { useEffect, useMemo, useState, type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport * as styles from '../login/loginPage.css.js';\n\ntype VerificationState = 'pending' | 'success' | 'error';\n\ntype Props = {\n  onBackToLogin: () => void;\n  onVerifyEmail: (input: { token: string }) => Promise<boolean>;\n  token?: string;\n};\n\nexport const VerifyEmailScreen = ({\n  onBackToLogin,\n  onVerifyEmail,\n  token,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [state, setState] = useState<VerificationState>('pending');\n  const [error, setError] = useState<string | null>(null);\n\n  const resolvedToken = useMemo(() => {\n    if (token != null) {\n      return token;\n    }\n    if (typeof window === 'undefined') {\n      return '';\n    }\n    const params = new URLSearchParams(window.location.search);\n    return params.get('token') ?? '';\n  }, [token]);\n\n  useEffect(() => {\n    if (resolvedToken === '') {\n      setState('error');\n      setError(t('auth.verifyEmail.errors.missingToken'));\n      return;\n    }\n\n    const verifyEmail = async (): Promise<void> => {\n      try {\n        const success = await onVerifyEmail({ token: resolvedToken });\n        if (success) {\n          setState('success');\n        } else {\n          setState('error');\n          setError(t('auth.verifyEmail.errors.invalid'));\n        }\n      } catch (mutationError) {\n        setState('error');\n        setError(\n          mutationError instanceof Error\n            ? mutationError.message\n            : t('auth.verifyEmail.errors.invalid'),\n        );\n      }\n    };\n\n    verifyEmail().catch(() => {\n      return undefined;\n    });\n  }, [onVerifyEmail, resolvedToken, t]);\n\n  let content: JSX.Element;\n  if (state === 'success') {\n    content = (\n      <div className={styles.stack}>\n        <p className={styles.helper}>{t('auth.verifyEmail.status.success')}</p>\n        <Button type=\"button\" variant=\"secondary\" onClick={onBackToLogin}>\n          {t('auth.verifyEmail.actions.continue')}\n        </Button>\n      </div>\n    );\n  } else if (state === 'error') {\n    content = (\n      <div className={styles.stack}>\n        {error != null ? <FormError>{error}</FormError> : null}\n        <Button type=\"button\" variant=\"secondary\" onClick={onBackToLogin}>\n          {t('auth.verifyEmail.actions.return')}\n        </Button>\n      </div>\n    );\n  } else {\n    content = (\n      <div className={styles.stack}>\n        <p className={styles.helper}>\n          {t('auth.verifyEmail.status.verifying')}\n        </p>\n        <Button type=\"button\" isLoading>\n          {t('auth.verifyEmail.status.verifyingButton')}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <AuthLayout\n      title={t('auth.verifyEmail.title')}\n      subtitle={t('auth.verifyEmail.subtitle')}\n    >\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,IAAa,KAAqB,EAChC,kBACA,kBACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAO,KAAY,EAA4B,SAAS,GACzD,CAAC,GAAO,KAAY,EAAwB,IAAI,GAEhD,IAAgB,QAChB,MAGA,OAAO,SAAW,MACb,KAGF,IADY,gBAAgB,OAAO,SAAS,MAC5C,CAAA,CAAO,IAAI,OAAO,KAAK,KAC7B,CAAC,CAAK,CAAC;CAEV,QAAgB;EACd,IAAI,MAAkB,IAAI;GAExB,AADA,EAAS,OAAO,GAChB,EAAS,EAAE,sCAAsC,CAAC;GAClD;EACF;EAqBA,aAnB+C;GAC7C,IAAI;IAEF,AAAI,MADkB,EAAc,EAAE,OAAO,EAAc,CAAC,IAE1D,EAAS,SAAS,KAElB,EAAS,OAAO,GAChB,EAAS,EAAE,iCAAiC,CAAC;GAEjD,SAAS,GAAe;IAEtB,AADA,EAAS,OAAO,GAChB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,iCAAiC,CACzC;GACF;EACF,EAEA,CAAY,CAAC,CAAC,YAAY,CAE1B,CAAC;CACH,GAAG;EAAC;EAAe;EAAe;CAAC,CAAC;CAEpC,IAAI;CAgCJ,OA/BA,AAmBE,IAnBE,MAAU,YAEV,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,kBAAC,KAAD;GAAG,WAAW;GAAgB,UAAA,EAAE,iCAAiC;EAAK,CAAA,GACtE,kBAAC,GAAD;GAAQ,MAAK;GAAS,SAAQ;GAAY,SAAS;GAChD,UAAA,EAAE,mCAAmC;EAChC,CAAA,CACL;MAEE,MAAU,UAEjB,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA,GAC9C,kBAAC,GAAD;GAAQ,MAAK;GAAS,SAAQ;GAAY,SAAS;GAChD,UAAA,EAAE,iCAAiC;EAC9B,CAAA,CACL;MAIL,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,mCAAmC;EACrC,CAAA,GACH,kBAAC,GAAD;GAAQ,MAAK;GAAS,WAAA;GACnB,UAAA,EAAE,yCAAyC;EACtC,CAAA,CACL;KAKP,kBAAC,GAAD;EACE,OAAO,EAAE,wBAAwB;EACjC,UAAU,EAAE,2BAA2B;EAEtC,UAAA;CACS,CAAA;AAEhB"}
+{"version":3,"file":"VerifyEmailScreen.js","names":[],"sources":["../../../../src/auth/pages/VerifyEmailScreen.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormError, AuthLayout } from '@plumile/ui';\n\nimport * as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\ntype VerificationState = 'pending' | 'success' | 'error';\n\ntype Props = {\n  onBackToLogin: () => void;\n  onVerifyEmail: (input: { token: string }) => Promise<boolean>;\n  token?: string;\n};\n\nexport const VerifyEmailScreen = ({\n  onBackToLogin,\n  onVerifyEmail,\n  token,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [state, setState] = useState<VerificationState>('pending');\n  const [error, setError] = useState<string | null>(null);\n\n  const resolvedToken = useMemo(() => {\n    if (token != null) {\n      return token;\n    }\n    if (typeof window === 'undefined') {\n      return '';\n    }\n    const params = new URLSearchParams(window.location.search);\n    return params.get('token') ?? '';\n  }, [token]);\n\n  useEffect(() => {\n    if (resolvedToken === '') {\n      setState('error');\n      setError(t('auth.verifyEmail.errors.missingToken'));\n      return;\n    }\n\n    const verifyEmail = async (): Promise<void> => {\n      try {\n        const success = await onVerifyEmail({ token: resolvedToken });\n        if (success) {\n          setState('success');\n        } else {\n          setState('error');\n          setError(t('auth.verifyEmail.errors.invalid'));\n        }\n      } catch (mutationError) {\n        setState('error');\n        setError(\n          mutationError instanceof Error\n            ? mutationError.message\n            : t('auth.verifyEmail.errors.invalid'),\n        );\n      }\n    };\n\n    verifyEmail().catch(() => {\n      return undefined;\n    });\n  }, [onVerifyEmail, resolvedToken, t]);\n\n  let content: JSX.Element;\n  if (state === 'success') {\n    content = (\n      <AuthPanel>\n        <div className={styles.stack}>\n          <p className={styles.helper}>\n            {t('auth.verifyEmail.status.success')}\n          </p>\n          <Button\n            type=\"button\"\n            variant=\"soft\"\n            onClick={onBackToLogin}\n            tone=\"neutral\"\n          >\n            {t('auth.verifyEmail.actions.continue')}\n          </Button>\n        </div>\n      </AuthPanel>\n    );\n  } else if (state === 'error') {\n    content = (\n      <AuthPanel>\n        <div className={styles.stack}>\n          {error != null ? <FormError>{error}</FormError> : null}\n          <Button\n            type=\"button\"\n            variant=\"soft\"\n            onClick={onBackToLogin}\n            tone=\"neutral\"\n          >\n            {t('auth.verifyEmail.actions.return')}\n          </Button>\n        </div>\n      </AuthPanel>\n    );\n  } else {\n    content = (\n      <AuthPanel>\n        <div className={styles.stack}>\n          <p className={styles.helper}>\n            {t('auth.verifyEmail.status.verifying')}\n          </p>\n          <Button type=\"button\" loading>\n            {t('auth.verifyEmail.status.verifyingButton')}\n          </Button>\n        </div>\n      </AuthPanel>\n    );\n  }\n\n  return (\n    <AuthLayout\n      title={t('auth.verifyEmail.title')}\n      subtitle={t('auth.verifyEmail.subtitle')}\n    >\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":";;;;;;;;AAiBA,IAAa,KAAqB,EAChC,kBACA,kBACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAO,KAAY,EAA4B,SAAS,GACzD,CAAC,GAAO,KAAY,EAAwB,IAAI,GAEhD,IAAgB,QAChB,MAGA,OAAO,SAAW,MACb,KAGF,IADY,gBAAgB,OAAO,SAAS,MAC5C,CAAA,CAAO,IAAI,OAAO,KAAK,KAC7B,CAAC,CAAK,CAAC;CAEV,QAAgB;EACd,IAAI,MAAkB,IAAI;GAExB,AADA,EAAS,OAAO,GAChB,EAAS,EAAE,sCAAsC,CAAC;GAClD;EACF;EAqBA,aAnB+C;GAC7C,IAAI;IAEF,AAAI,MADkB,EAAc,EAAE,OAAO,EAAc,CAAC,IAE1D,EAAS,SAAS,KAElB,EAAS,OAAO,GAChB,EAAS,EAAE,iCAAiC,CAAC;GAEjD,SAAS,GAAe;IAEtB,AADA,EAAS,OAAO,GAChB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,iCAAiC,CACzC;GACF;EACF,EAEA,CAAY,CAAC,CAAC,YAAY,CAE1B,CAAC;CACH,GAAG;EAAC;EAAe;EAAe;CAAC,CAAC;CAEpC,IAAI;CAkDJ,OAjDA,AAmCE,IAnCE,MAAU,YAEV,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,iCAAiC;EACnC,CAAA,GACH,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,SAAS;GACT,MAAK;GAEJ,UAAA,EAAE,mCAAmC;EAChC,CAAA,CACL;CACI,CAAA,EAAA,CAAA,IAEJ,MAAU,UAEjB,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA,GAC9C,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,SAAS;GACT,MAAK;GAEJ,UAAA,EAAE,iCAAiC;EAC9B,CAAA,CACL;CACI,CAAA,EAAA,CAAA,IAIX,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,mCAAmC;EACrC,CAAA,GACH,kBAAC,GAAD;GAAQ,MAAK;GAAS,SAAA;GACnB,UAAA,EAAE,yCAAyC;EACtC,CAAA,CACL;CACI,CAAA,EAAA,CAAA,GAKb,kBAAC,GAAD;EACE,OAAO,EAAE,wBAAwB;EACjC,UAAU,EAAE,2BAA2B;EAEtC,UAAA;CACS,CAAA;AAEhB"}