@burdenoff/microfe-auth 2026.518.4 → 2026.519.2

package/dist/auth/pages/MfaSetupPage.js

@@ -177,15 +177,20 @@ function m() {
 							]
 						}),
 						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "mfa-verification-code",
 							className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
 							children: h("auth.mfaSetup.enterCode", "Enter the 6-digit code from your app")
 						}), /* @__PURE__ */ f("input", {
+							id: "mfa-verification-code",
 							type: "text",
 							inputMode: "numeric",
 							maxLength: 6,
 							value: w,
 							onChange: (e) => T(e.target.value.replace(/\D/g, "")),
-							placeholder: "000000",
+							placeholder: h("auth.mfa.verificationCodePlaceholder", "000000"),
+							"aria-label": h("auth.mfaSetup.enterCode", "Enter the 6-digit code from your app"),
+							"aria-required": "true",
+							autoComplete: "one-time-code",
 							className: "block w-full px-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-center text-2xl tracking-widest font-mono focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300"
 						})] }),
 						/* @__PURE__ */ p("div", {
@@ -210,7 +215,7 @@ function m() {
 								},
 								disabled: y || w.length !== 6,
 								className: "auth-primary-button flex flex-1 items-center justify-center gap-2 px-4 py-3 font-medium",
-								children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: "Verifying..." })] }) : h("auth.mfaSetup.enable2fa", "Enable 2FA")
+								children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: h("auth.mfa.verifying", "Verifying...") })] }) : h("auth.mfaSetup.enable2fa", "Enable 2FA")
 							})]
 						})
 					]
@@ -253,7 +258,7 @@ function m() {
 						onClick: () => N(!0),
 						disabled: y,
 						className: "w-full py-3 px-4 rounded-xl border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] font-medium bg-[var(--color-bg-surface)] hover:bg-[var(--color-status-error-bg-subtle)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2",
-						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: "Disabling..." })] }) : h("auth.mfaSetup.disableTwoFactor", "Disable Two-Factor Authentication")
+						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: h("auth.mfa.disabling", "Disabling...") })] }) : h("auth.mfaSetup.disableTwoFactor", "Disable Two-Factor Authentication")
 					})
 				] }) : /* @__PURE__ */ p(d, { children: [
 					/* @__PURE__ */ p("div", {
@@ -298,7 +303,7 @@ function m() {
 						onClick: () => P("TOTP"),
 						disabled: y,
 						className: "auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-medium",
-						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: "Setting up..." })] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
+						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: h("auth.mfa.settingUp", "Setting up...") })] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
 							className: "w-5 h-5",
 							fill: "none",
 							viewBox: "0 0 24 24",

package/dist/auth/pages/MfaSetupPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MfaSetupPage.js","names":[],"sources":["../../../src/auth/pages/MfaSetupPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { QRCodeSVG } from \"qrcode.react\";\nimport { useMfaOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\nimport type { MFAMethod, MFASetupResult } from \"../types\";\nimport {\n  nativeCopyText,\n  nativeImpact,\n  nativeNotify,\n} from \"../../utils/nativeBridge\";\n\n/**\n * MFA setup and management page with professional UI\n */\nexport function MfaSetupPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const { setupMFA, enableMFA, disableMFA, isLoading } = useMfaOperations();\n  const user = useAuthStore((state) => state.user);\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const [setupData, setSetupData] = useState<MFASetupResult | null>(null);\n  const [verificationCode, setVerificationCode] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [backupCodesCopied, setBackupCodesCopied] = useState(false);\n  const [showDisableDialog, setShowDisableDialog] = useState(false);\n\n  const handleSetupMfa = async (method: MFAMethod) => {\n    try {\n      setError(null);\n      setSuccessMessage(null);\n      const data = await setupMFA(method);\n      setSetupData(data);\n    } catch (err) {\n      console.error(\"Failed to setup MFA:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Failed to setup MFA. Please try again.\",\n      );\n    }\n  };\n\n  const handleVerifyAndEnable = async () => {\n    if (verificationCode.length !== 6) {\n      setError(tr(\"auth.mfaSetup.enter6Digit\", \"Please enter a 6-digit code\"));\n      return;\n    }\n\n    try {\n      setError(null);\n      const success = await enableMFA(verificationCode);\n      if (success) {\n        setSetupData(null);\n        setVerificationCode(\"\");\n        setSuccessMessage(\n          tr(\n            \"auth.mfaSetup.enableSuccess\",\n            \"Two-factor authentication has been enabled successfully!\",\n          ),\n        );\n      }\n    } catch (err) {\n      console.error(\"Failed to verify MFA code:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Invalid verification code. Please try again.\",\n      );\n    }\n  };\n\n  const handleDisableMfa = async () => {\n    try {\n      setError(null);\n      setSuccessMessage(null);\n      await disableMFA();\n      setSuccessMessage(\n        tr(\n          \"auth.mfaSetup.disableSuccess\",\n          \"Two-factor authentication has been disabled.\",\n        ),\n      );\n      setShowDisableDialog(false);\n    } catch (err) {\n      console.error(\"Failed to disable MFA:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Failed to disable MFA. Please try again.\",\n      );\n    }\n  };\n\n  const copyBackupCodes = async () => {\n    if (setupData?.backupCodes) {\n      void nativeImpact(\"light\");\n      const ok = await nativeCopyText(setupData.backupCodes.join(\"\\n\"));\n      if (ok) {\n        setBackupCodesCopied(true);\n        void nativeNotify(\"success\");\n        setTimeout(() => setBackupCodesCopied(false), 2000);\n      } else {\n        void nativeNotify(\"error\");\n      }\n    }\n  };\n\n  const cancelSetup = () => {\n    setSetupData(null);\n    setVerificationCode(\"\");\n    setError(null);\n  };\n\n  // Authentication check\n  if (!isAuthenticated) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-default rounded-xl\">\n          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon className=\"w-8 h-8 text-status-warning-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.mfaSetup.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.mfaSetup.signInToManage\",\n              \"Please sign in to manage MFA settings\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-2xl mx-auto p-6\">\n      <ConfirmActionDialog\n        open={showDisableDialog}\n        onOpenChange={setShowDisableDialog}\n        title={tr(\n          \"auth.mfaSetup.disableTitle\",\n          \"Disable two-factor authentication?\",\n        )}\n        description={tr(\n          \"auth.mfaSetup.disableDesc\",\n          \"Your account will become less secure and future sign-ins will only require your password until MFA is re-enabled.\",\n        )}\n        confirmText={tr(\"auth.mfaSetup.disableConfirm\", \"Disable MFA\")}\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleDisableMfa}\n      />\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-3xl font-semibold text-[var(--color-text-primary)]\">\n          {tr(\"auth.mfaSetup.title\", \"Two-Factor Authentication\")}\n        </h1>\n        <p className=\"text-[var(--color-text-secondary)] mt-2\">\n          {tr(\n            \"auth.mfaSetup.subtitle\",\n            \"Add an extra layer of security to your account\",\n          )}\n        </p>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div className=\"mb-6 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n          <div className=\"flex items-center gap-3\">\n            <svg\n              className=\"w-5 h-5 text-[var(--color-status-success-text)]\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n            <p className=\"text-[var(--color-status-success-text)]\">\n              {successMessage}\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n          <AlertIcon className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n            <button\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200\"\n            >\n              {tr(\"auth.mfaSetup.dismiss\", \"Dismiss\")}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {setupData ? (\n        /* Setup Flow */\n        <div className=\"p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm\">\n          <div className=\"flex items-center gap-3 mb-6\">\n            <div className=\"w-10 h-10 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-text-link)]\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                />\n              </svg>\n            </div>\n            <div>\n              <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                {tr(\"auth.mfaSetup.setupAuthApp\", \"Setup Authenticator App\")}\n              </h2>\n              <p className=\"text-sm text-[var(--color-text-secondary)]\">\n                {tr(\n                  \"auth.mfaSetup.scanQr\",\n                  \"Scan the QR code with your authenticator app\",\n                )}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"space-y-6\">\n            {/* QR Code */}\n            {setupData.qrCode && (\n              <div className=\"flex justify-center\">\n                <div className=\"p-4 bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)]\">\n                  <QRCodeSVG\n                    value={setupData.qrCode}\n                    size={192}\n                    level=\"M\"\n                    includeMargin={false}\n                    className=\"w-48 h-48\"\n                  />\n                </div>\n              </div>\n            )}\n\n            {/* Manual Secret */}\n            {setupData.secret && (\n              <div>\n                <p className=\"text-sm text-[var(--color-text-secondary)] mb-2\">\n                  {tr(\n                    \"auth.mfaSetup.cantScan\",\n                    \"Can't scan the QR code? Enter this key manually:\",\n                  )}\n                </p>\n                <code className=\"block p-3 rounded-lg bg-[var(--color-bg-muted)] text-[var(--color-text-primary)] font-mono text-sm break-all select-all\">\n                  {setupData.secret}\n                </code>\n              </div>\n            )}\n\n            {/* Backup Codes */}\n            {setupData.backupCodes && setupData.backupCodes.length > 0 && (\n              <div className=\"p-4 rounded-xl bg-[var(--color-status-warning-bg-subtle)] border border-[var(--color-status-warning-border)]\">\n                <div className=\"flex items-start gap-3 mb-3\">\n                  <svg\n                    className=\"w-5 h-5 text-[var(--color-status-warning-text)] flex-shrink-0 mt-0.5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                    />\n                  </svg>\n                  <div>\n                    <h3 className=\"font-medium text-[var(--color-status-warning-text)]\">\n                      {tr(\n                        \"auth.mfaSetup.saveBackupCodes\",\n                        \"Save your backup codes\",\n                      )}\n                    </h3>\n                    <p className=\"text-sm text-[var(--color-status-warning-text)]\">\n                      {tr(\n                        \"auth.mfaSetup.storeCodesSafely\",\n                        \"Store these codes safely. You can use them to access your account if you lose your authenticator device.\",\n                      )}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"p-3 rounded-lg bg-[var(--color-bg-surface)] grid grid-cols-2 gap-2 mb-3\">\n                  {setupData.backupCodes.map((code, i) => (\n                    <code\n                      key={i}\n                      className=\"text-sm text-[var(--color-text-primary)] font-mono\"\n                    >\n                      {i + 1}. {code}\n                    </code>\n                  ))}\n                </div>\n                <button\n                  onClick={copyBackupCodes}\n                  className=\"text-sm font-medium text-[var(--color-status-warning-text)] hover:underline transition-colors duration-200\"\n                >\n                  {backupCodesCopied\n                    ? tr(\"auth.mfaSetup.copied\", \"Copied!\")\n                    : tr(\"auth.mfaSetup.copyBackupCodes\", \"Copy backup codes\")}\n                </button>\n              </div>\n            )}\n\n            {/* Verification Code Input */}\n            <div>\n              <label className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\">\n                {tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n              </label>\n              <input\n                type=\"text\"\n                inputMode=\"numeric\"\n                maxLength={6}\n                value={verificationCode}\n                onChange={(e) =>\n                  setVerificationCode(e.target.value.replace(/\\D/g, \"\"))\n                }\n                placeholder=\"000000\"\n                className=\"block w-full px-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-center text-2xl tracking-widest font-mono focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n              />\n            </div>\n\n            {/* Action Buttons */}\n            <div className=\"flex gap-3\">\n              <button\n                onClick={cancelSetup}\n                className=\"flex-1 py-3 px-4 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n              >\n                {tr(\"auth.mfaSetup.cancel\", \"Cancel\")}\n              </button>\n              <button\n                onClick={handleVerifyAndEnable}\n                disabled={isLoading || verificationCode.length !== 6}\n                className=\"auth-primary-button flex flex-1 items-center justify-center gap-2 px-4 py-3 font-medium\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>Verifying...</span>\n                  </>\n                ) : (\n                  tr(\"auth.mfaSetup.enable2fa\", \"Enable 2FA\")\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      ) : (\n        /* Status Display */\n        <div className=\"p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm\">\n          {!user?.mfaEnabled ? (\n            /* MFA Not Enabled */\n            <>\n              <div className=\"flex items-center gap-4 mb-6\">\n                <div className=\"w-12 h-12 rounded-full bg-[var(--color-bg-muted)] flex items-center justify-center\">\n                  <svg\n                    className=\"w-6 h-6 text-[var(--color-text-tertiary)]\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {tr(\n                      \"auth.mfaSetup.twoFactorOff\",\n                      \"Two-Factor Authentication is Off\",\n                    )}\n                  </h2>\n                  <p className=\"text-[var(--color-text-secondary)]\">\n                    {tr(\n                      \"auth.mfaSetup.notProtected\",\n                      \"Your account is not protected with 2FA\",\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mb-6 p-4 rounded-lg bg-[var(--color-bg-accent)] border border-[var(--color-border-default)]\">\n                <h3 className=\"font-medium text-[var(--color-text-link)] mb-2\">\n                  {tr(\"auth.mfaSetup.whyEnable\", \"Why enable 2FA?\")}\n                </h3>\n                <ul className=\"text-sm text-[var(--color-text-link)] space-y-1\">\n                  <li>\n                    • Protects your account even if your password is compromised\n                  </li>\n                  <li>• Adds a second verification step during sign-in</li>\n                  <li>\n                    • Works with popular authenticator apps (Google, Authy,\n                    etc.)\n                  </li>\n                </ul>\n              </div>\n\n              <button\n                onClick={() => handleSetupMfa(\"TOTP\")}\n                disabled={isLoading}\n                className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-medium\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>Setting up...</span>\n                  </>\n                ) : (\n                  <>\n                    <svg\n                      className=\"w-5 h-5\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                      />\n                    </svg>\n                    <span>\n                      {tr(\n                        \"auth.mfaSetup.enableTwoFactor\",\n                        \"Enable Two-Factor Authentication\",\n                      )}\n                    </span>\n                  </>\n                )}\n              </button>\n            </>\n          ) : (\n            /* MFA Enabled */\n            <>\n              <div className=\"flex items-center gap-4 mb-6\">\n                <div className=\"w-12 h-12 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center\">\n                  <svg\n                    className=\"w-6 h-6 text-[var(--color-status-success-text)]\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {tr(\n                      \"auth.mfaSetup.twoFactorOn\",\n                      \"Two-Factor Authentication is On\",\n                    )}\n                  </h2>\n                  <p className=\"text-[var(--color-text-secondary)]\">\n                    {tr(\n                      \"auth.mfaSetup.protected\",\n                      \"Your account is protected with an authenticator app\",\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mb-6 p-4 rounded-lg bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n                <p className=\"text-sm text-[var(--color-status-success-text)]\">\n                  {tr(\n                    \"auth.mfaSetup.verificationOnSignIn\",\n                    \"You'll be asked for a verification code from your authenticator app when signing in.\",\n                  )}\n                </p>\n              </div>\n\n              <button\n                onClick={() => setShowDisableDialog(true)}\n                disabled={isLoading}\n                className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] font-medium bg-[var(--color-bg-surface)] hover:bg-[var(--color-status-error-bg-subtle)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>Disabling...</span>\n                  </>\n                ) : (\n                  tr(\n                    \"auth.mfaSetup.disableTwoFactor\",\n                    \"Disable Two-Factor Authentication\",\n                  )\n                )}\n              </button>\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MfaSetupPage.js","names":[],"sources":["../../../src/auth/pages/MfaSetupPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { QRCodeSVG } from \"qrcode.react\";\nimport { useMfaOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\nimport type { MFAMethod, MFASetupResult } from \"../types\";\nimport {\n  nativeCopyText,\n  nativeImpact,\n  nativeNotify,\n} from \"../../utils/nativeBridge\";\n\n/**\n * MFA setup and management page with professional UI\n */\nexport function MfaSetupPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const { setupMFA, enableMFA, disableMFA, isLoading } = useMfaOperations();\n  const user = useAuthStore((state) => state.user);\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const [setupData, setSetupData] = useState<MFASetupResult | null>(null);\n  const [verificationCode, setVerificationCode] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [backupCodesCopied, setBackupCodesCopied] = useState(false);\n  const [showDisableDialog, setShowDisableDialog] = useState(false);\n\n  const handleSetupMfa = async (method: MFAMethod) => {\n    try {\n      setError(null);\n      setSuccessMessage(null);\n      const data = await setupMFA(method);\n      setSetupData(data);\n    } catch (err) {\n      console.error(\"Failed to setup MFA:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Failed to setup MFA. Please try again.\",\n      );\n    }\n  };\n\n  const handleVerifyAndEnable = async () => {\n    if (verificationCode.length !== 6) {\n      setError(tr(\"auth.mfaSetup.enter6Digit\", \"Please enter a 6-digit code\"));\n      return;\n    }\n\n    try {\n      setError(null);\n      const success = await enableMFA(verificationCode);\n      if (success) {\n        setSetupData(null);\n        setVerificationCode(\"\");\n        setSuccessMessage(\n          tr(\n            \"auth.mfaSetup.enableSuccess\",\n            \"Two-factor authentication has been enabled successfully!\",\n          ),\n        );\n      }\n    } catch (err) {\n      console.error(\"Failed to verify MFA code:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Invalid verification code. Please try again.\",\n      );\n    }\n  };\n\n  const handleDisableMfa = async () => {\n    try {\n      setError(null);\n      setSuccessMessage(null);\n      await disableMFA();\n      setSuccessMessage(\n        tr(\n          \"auth.mfaSetup.disableSuccess\",\n          \"Two-factor authentication has been disabled.\",\n        ),\n      );\n      setShowDisableDialog(false);\n    } catch (err) {\n      console.error(\"Failed to disable MFA:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Failed to disable MFA. Please try again.\",\n      );\n    }\n  };\n\n  const copyBackupCodes = async () => {\n    if (setupData?.backupCodes) {\n      void nativeImpact(\"light\");\n      const ok = await nativeCopyText(setupData.backupCodes.join(\"\\n\"));\n      if (ok) {\n        setBackupCodesCopied(true);\n        void nativeNotify(\"success\");\n        setTimeout(() => setBackupCodesCopied(false), 2000);\n      } else {\n        void nativeNotify(\"error\");\n      }\n    }\n  };\n\n  const cancelSetup = () => {\n    setSetupData(null);\n    setVerificationCode(\"\");\n    setError(null);\n  };\n\n  // Authentication check\n  if (!isAuthenticated) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-default rounded-xl\">\n          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon className=\"w-8 h-8 text-status-warning-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.mfaSetup.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.mfaSetup.signInToManage\",\n              \"Please sign in to manage MFA settings\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-2xl mx-auto p-6\">\n      <ConfirmActionDialog\n        open={showDisableDialog}\n        onOpenChange={setShowDisableDialog}\n        title={tr(\n          \"auth.mfaSetup.disableTitle\",\n          \"Disable two-factor authentication?\",\n        )}\n        description={tr(\n          \"auth.mfaSetup.disableDesc\",\n          \"Your account will become less secure and future sign-ins will only require your password until MFA is re-enabled.\",\n        )}\n        confirmText={tr(\"auth.mfaSetup.disableConfirm\", \"Disable MFA\")}\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleDisableMfa}\n      />\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-3xl font-semibold text-[var(--color-text-primary)]\">\n          {tr(\"auth.mfaSetup.title\", \"Two-Factor Authentication\")}\n        </h1>\n        <p className=\"text-[var(--color-text-secondary)] mt-2\">\n          {tr(\n            \"auth.mfaSetup.subtitle\",\n            \"Add an extra layer of security to your account\",\n          )}\n        </p>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div className=\"mb-6 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n          <div className=\"flex items-center gap-3\">\n            <svg\n              className=\"w-5 h-5 text-[var(--color-status-success-text)]\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n            <p className=\"text-[var(--color-status-success-text)]\">\n              {successMessage}\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n          <AlertIcon className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n            <button\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200\"\n            >\n              {tr(\"auth.mfaSetup.dismiss\", \"Dismiss\")}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {setupData ? (\n        /* Setup Flow */\n        <div className=\"p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm\">\n          <div className=\"flex items-center gap-3 mb-6\">\n            <div className=\"w-10 h-10 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-text-link)]\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                />\n              </svg>\n            </div>\n            <div>\n              <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                {tr(\"auth.mfaSetup.setupAuthApp\", \"Setup Authenticator App\")}\n              </h2>\n              <p className=\"text-sm text-[var(--color-text-secondary)]\">\n                {tr(\n                  \"auth.mfaSetup.scanQr\",\n                  \"Scan the QR code with your authenticator app\",\n                )}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"space-y-6\">\n            {/* QR Code */}\n            {setupData.qrCode && (\n              <div className=\"flex justify-center\">\n                <div className=\"p-4 bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)]\">\n                  <QRCodeSVG\n                    value={setupData.qrCode}\n                    size={192}\n                    level=\"M\"\n                    includeMargin={false}\n                    className=\"w-48 h-48\"\n                  />\n                </div>\n              </div>\n            )}\n\n            {/* Manual Secret */}\n            {setupData.secret && (\n              <div>\n                <p className=\"text-sm text-[var(--color-text-secondary)] mb-2\">\n                  {tr(\n                    \"auth.mfaSetup.cantScan\",\n                    \"Can't scan the QR code? Enter this key manually:\",\n                  )}\n                </p>\n                <code className=\"block p-3 rounded-lg bg-[var(--color-bg-muted)] text-[var(--color-text-primary)] font-mono text-sm break-all select-all\">\n                  {setupData.secret}\n                </code>\n              </div>\n            )}\n\n            {/* Backup Codes */}\n            {setupData.backupCodes && setupData.backupCodes.length > 0 && (\n              <div className=\"p-4 rounded-xl bg-[var(--color-status-warning-bg-subtle)] border border-[var(--color-status-warning-border)]\">\n                <div className=\"flex items-start gap-3 mb-3\">\n                  <svg\n                    className=\"w-5 h-5 text-[var(--color-status-warning-text)] flex-shrink-0 mt-0.5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                    />\n                  </svg>\n                  <div>\n                    <h3 className=\"font-medium text-[var(--color-status-warning-text)]\">\n                      {tr(\n                        \"auth.mfaSetup.saveBackupCodes\",\n                        \"Save your backup codes\",\n                      )}\n                    </h3>\n                    <p className=\"text-sm text-[var(--color-status-warning-text)]\">\n                      {tr(\n                        \"auth.mfaSetup.storeCodesSafely\",\n                        \"Store these codes safely. You can use them to access your account if you lose your authenticator device.\",\n                      )}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"p-3 rounded-lg bg-[var(--color-bg-surface)] grid grid-cols-2 gap-2 mb-3\">\n                  {setupData.backupCodes.map((code, i) => (\n                    <code\n                      key={i}\n                      className=\"text-sm text-[var(--color-text-primary)] font-mono\"\n                    >\n                      {i + 1}. {code}\n                    </code>\n                  ))}\n                </div>\n                <button\n                  onClick={copyBackupCodes}\n                  className=\"text-sm font-medium text-[var(--color-status-warning-text)] hover:underline transition-colors duration-200\"\n                >\n                  {backupCodesCopied\n                    ? tr(\"auth.mfaSetup.copied\", \"Copied!\")\n                    : tr(\"auth.mfaSetup.copyBackupCodes\", \"Copy backup codes\")}\n                </button>\n              </div>\n            )}\n\n            {/* Verification Code Input */}\n            <div>\n              <label\n                htmlFor=\"mfa-verification-code\"\n                className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n              >\n                {tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n              </label>\n              <input\n                id=\"mfa-verification-code\"\n                type=\"text\"\n                inputMode=\"numeric\"\n                maxLength={6}\n                value={verificationCode}\n                onChange={(e) =>\n                  setVerificationCode(e.target.value.replace(/\\D/g, \"\"))\n                }\n                placeholder={tr(\n                  \"auth.mfa.verificationCodePlaceholder\",\n                  \"000000\",\n                )}\n                aria-label={tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n                aria-required=\"true\"\n                autoComplete=\"one-time-code\"\n                className=\"block w-full px-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-center text-2xl tracking-widest font-mono focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n              />\n            </div>\n\n            {/* Action Buttons */}\n            <div className=\"flex gap-3\">\n              <button\n                onClick={cancelSetup}\n                className=\"flex-1 py-3 px-4 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n              >\n                {tr(\"auth.mfaSetup.cancel\", \"Cancel\")}\n              </button>\n              <button\n                onClick={handleVerifyAndEnable}\n                disabled={isLoading || verificationCode.length !== 6}\n                className=\"auth-primary-button flex flex-1 items-center justify-center gap-2 px-4 py-3 font-medium\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>{tr(\"auth.mfa.verifying\", \"Verifying...\")}</span>\n                  </>\n                ) : (\n                  tr(\"auth.mfaSetup.enable2fa\", \"Enable 2FA\")\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      ) : (\n        /* Status Display */\n        <div className=\"p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm\">\n          {!user?.mfaEnabled ? (\n            /* MFA Not Enabled */\n            <>\n              <div className=\"flex items-center gap-4 mb-6\">\n                <div className=\"w-12 h-12 rounded-full bg-[var(--color-bg-muted)] flex items-center justify-center\">\n                  <svg\n                    className=\"w-6 h-6 text-[var(--color-text-tertiary)]\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {tr(\n                      \"auth.mfaSetup.twoFactorOff\",\n                      \"Two-Factor Authentication is Off\",\n                    )}\n                  </h2>\n                  <p className=\"text-[var(--color-text-secondary)]\">\n                    {tr(\n                      \"auth.mfaSetup.notProtected\",\n                      \"Your account is not protected with 2FA\",\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mb-6 p-4 rounded-lg bg-[var(--color-bg-accent)] border border-[var(--color-border-default)]\">\n                <h3 className=\"font-medium text-[var(--color-text-link)] mb-2\">\n                  {tr(\"auth.mfaSetup.whyEnable\", \"Why enable 2FA?\")}\n                </h3>\n                <ul className=\"text-sm text-[var(--color-text-link)] space-y-1\">\n                  <li>\n                    • Protects your account even if your password is compromised\n                  </li>\n                  <li>• Adds a second verification step during sign-in</li>\n                  <li>\n                    • Works with popular authenticator apps (Google, Authy,\n                    etc.)\n                  </li>\n                </ul>\n              </div>\n\n              <button\n                onClick={() => handleSetupMfa(\"TOTP\")}\n                disabled={isLoading}\n                className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-medium\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>{tr(\"auth.mfa.settingUp\", \"Setting up...\")}</span>\n                  </>\n                ) : (\n                  <>\n                    <svg\n                      className=\"w-5 h-5\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                      />\n                    </svg>\n                    <span>\n                      {tr(\n                        \"auth.mfaSetup.enableTwoFactor\",\n                        \"Enable Two-Factor Authentication\",\n                      )}\n                    </span>\n                  </>\n                )}\n              </button>\n            </>\n          ) : (\n            /* MFA Enabled */\n            <>\n              <div className=\"flex items-center gap-4 mb-6\">\n                <div className=\"w-12 h-12 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center\">\n                  <svg\n                    className=\"w-6 h-6 text-[var(--color-status-success-text)]\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {tr(\n                      \"auth.mfaSetup.twoFactorOn\",\n                      \"Two-Factor Authentication is On\",\n                    )}\n                  </h2>\n                  <p className=\"text-[var(--color-text-secondary)]\">\n                    {tr(\n                      \"auth.mfaSetup.protected\",\n                      \"Your account is protected with an authenticator app\",\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mb-6 p-4 rounded-lg bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n                <p className=\"text-sm text-[var(--color-status-success-text)]\">\n                  {tr(\n                    \"auth.mfaSetup.verificationOnSignIn\",\n                    \"You'll be asked for a verification code from your authenticator app when signing in.\",\n                  )}\n                </p>\n              </div>\n\n              <button\n                onClick={() => setShowDisableDialog(true)}\n                disabled={isLoading}\n                className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] font-medium bg-[var(--color-bg-surface)] hover:bg-[var(--color-status-error-bg-subtle)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>{tr(\"auth.mfa.disabling\", \"Disabling...\")}</span>\n                  </>\n                ) : (\n                  tr(\n                    \"auth.mfaSetup.disableTwoFactor\",\n                    \"Disable Two-Factor Authentication\",\n                  )\n                )}\n              </button>\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/PasswordResetPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordResetPage.d.ts","sourceRoot":"","sources":["../../../src/auth/pages/PasswordResetPage.tsx"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,wBAAgB,iBAAiB,4CA0gBhC"}
+{"version":3,"file":"PasswordResetPage.d.ts","sourceRoot":"","sources":["../../../src/auth/pages/PasswordResetPage.tsx"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,wBAAgB,iBAAiB,4CAmiBhC"}

package/dist/auth/pages/PasswordResetPage.js

@@ -141,7 +141,8 @@ function y() {
 					try {
 						await E(C, j), B(!0);
 					} catch (e) {
-						H(x("auth.passwordReset.resetFailed", "Failed to reset password. The link may have expired.")), console.error("Failed to reset password:", e);
+						let t = e instanceof Error ? e.message : "";
+						H(t === "TOKEN_EXPIRED" ? x("auth.passwordReset.errorTokenExpired", "This password reset link has expired. Please request a new one.") : t === "INVALID_TOKEN" ? x("auth.passwordReset.errorInvalidToken", "This password reset link is invalid or has already been used.") : x("auth.passwordReset.errorGeneric", "Failed to reset password. Please try again."));
 					}
 				}
 			},
@@ -184,6 +185,8 @@ function y() {
 									id: "newPassword",
 									type: F ? "text" : "password",
 									required: !0,
+									"aria-required": "true",
+									autoComplete: "new-password",
 									value: j,
 									onChange: (e) => M(e.target.value),
 									className: "block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
@@ -248,6 +251,9 @@ function y() {
 									id: "confirmPassword",
 									type: L ? "text" : "password",
 									required: !0,
+									"aria-required": "true",
+									autoComplete: "new-password",
+									"aria-invalid": N.length > 0 && j !== N,
 									value: N,
 									onChange: (e) => P(e.target.value),
 									className: "block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
@@ -319,6 +325,8 @@ function y() {
 							id: "email",
 							type: "email",
 							required: !0,
+							"aria-required": "true",
+							autoComplete: "email",
 							value: k,
 							onChange: (e) => A(e.target.value),
 							className: "block w-full pl-[3.5rem] pr-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",

package/dist/auth/pages/PasswordResetPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordResetPage.js","names":[],"sources":["../../../src/auth/pages/PasswordResetPage.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { useSearchParams, useNavigate } from \"react-router-dom\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { usePasswordOperations } from \"../hooks\";\nimport { useCaptchaV3 } from \"../hooks/useCaptchaV3\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport {\n  EmailIcon,\n  LockIcon,\n  EyeIcon,\n  EyeOffIcon,\n  CheckIcon,\n  XIcon,\n  SpinnerIcon,\n} from \"../components/AuthIcons\";\n\nconst REDIRECT_DELAY = 5; // seconds\n\n/**\n * Password reset page with professional design\n * Handles both requesting reset and completing reset with token\n */\nexport function PasswordResetPage() {\n  const navigate = useNavigate();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  // Preserve returnTo so after reset→login the user ends up on the right product domain\n  const returnTo = searchParams.get(\"returnTo\");\n  const { requestPasswordReset, resetPassword, isLoading } =\n    usePasswordOperations();\n  const { executeRecaptcha: executeCaptchaV3 } = useCaptchaV3();\n  const [email, setEmail] = useState(\"\");\n  const [newPassword, setNewPassword] = useState(\"\");\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n  const [success, setSuccess] = useState(false);\n  const [error, setError] = useState(\"\");\n  const [countdown, setCountdown] = useState(REDIRECT_DELAY);\n\n  // Auto-redirect countdown after successful password reset (only for token flow)\n  useEffect(() => {\n    if (!success || !token) return;\n\n    const loginPath = returnTo\n      ? `/auth/login?returnTo=${encodeURIComponent(returnTo)}`\n      : \"/auth/login\";\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          navigate(loginPath);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [success, token, navigate, returnTo]);\n\n  // Password strength indicators\n  const passwordChecks = (() => {\n    const password = newPassword;\n    return [\n      {\n        label: tr(\"auth.passwordReset.pwMin8\", \"At least 12 characters\"),\n        met: password.length >= 12,\n      },\n      {\n        label: tr(\"auth.passwordReset.pwUppercase\", \"One uppercase letter\"),\n        met: /[A-Z]/.test(password),\n      },\n      {\n        label: tr(\"auth.passwordReset.pwLowercase\", \"One lowercase letter\"),\n        met: /[a-z]/.test(password),\n      },\n      {\n        label: tr(\"auth.passwordReset.pwNumber\", \"One number\"),\n        met: /\\d/.test(password),\n      },\n      {\n        label: tr(\"auth.passwordReset.pwSpecial\", \"One special character\"),\n        met: /[!@#$%^&*(),.?\":{}|<>]/.test(password),\n      },\n    ];\n  })();\n\n  const passwordStrength = (() => {\n    const metCount = passwordChecks.filter((c) => c.met).length;\n    if (metCount <= 2)\n      return {\n        level: tr(\"auth.passwordReset.passwordStrengthWeak\", \"weak\"),\n        color: \"bg-status-error-bg-subtle0\",\n        width: \"w-1/4\",\n      };\n    if (metCount <= 3)\n      return {\n        level: tr(\"auth.passwordReset.passwordStrengthFair\", \"fair\"),\n        color: \"bg-orange-500\",\n        width: \"w-2/4\",\n      };\n    if (metCount <= 4)\n      return {\n        level: tr(\"auth.passwordReset.passwordStrengthGood\", \"good\"),\n        color: \"bg-status-warning-bg-subtle0\",\n        width: \"w-3/4\",\n      };\n    return {\n      level: tr(\"auth.passwordReset.passwordStrengthStrong\", \"strong\"),\n      color: \"bg-status-success-bg-subtle0\",\n      width: \"w-full\",\n    };\n  })();\n\n  const handleRequestReset = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n    try {\n      // Get reCAPTCHA v3 token (no-op when captcha is disabled)\n      const recaptchaToken = await executeCaptchaV3(\"password_reset\");\n      await requestPasswordReset(email, recaptchaToken);\n      setSuccess(true);\n    } catch (err) {\n      setError(\n        tr(\n          \"auth.passwordReset.sendFailed\",\n          \"Failed to send reset email. Please try again.\",\n        ),\n      );\n      console.error(\"Failed to request password reset:\", err);\n    }\n  };\n\n  const handleResetPassword = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n\n    if (!token) return;\n\n    if (newPassword !== confirmPassword) {\n      setError(\n        tr(\"auth.passwordReset.passwordsNoMatch\", \"Passwords do not match\"),\n      );\n      return;\n    }\n\n    try {\n      await resetPassword(token, newPassword);\n      setSuccess(true);\n    } catch (err) {\n      setError(\n        tr(\n          \"auth.passwordReset.resetFailed\",\n          \"Failed to reset password. The link may have expired.\",\n        ),\n      );\n      console.error(\"Failed to reset password:\", err);\n    }\n  };\n\n  if (success) {\n    return (\n      <AuthLayout\n        title={\n          token\n            ? tr(\"auth.passwordReset.passwordUpdated\", \"Password updated\")\n            : tr(\"auth.passwordReset.checkEmail\", \"Check your email\")\n        }\n        subtitle={\n          token\n            ? tr(\n                \"auth.passwordReset.successSubtitle\",\n                \"Your password has been successfully reset\",\n              )\n            : tr(\n                \"auth.passwordReset.sentInstructions\",\n                \"We sent you instructions to reset your password\",\n              )\n        }\n      >\n        {/* Success Icon */}\n        <div className=\"flex justify-center mb-6\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center\">\n            <svg\n              className=\"w-8 h-8 text-[var(--color-status-success-text)]\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        <p className=\"text-center text-[var(--color-text-secondary)] mb-8\">\n          {token\n            ? tr(\n                \"auth.passwordReset.canNowSignIn\",\n                \"You can now use your new password to sign in to your account.\",\n              )\n            : tr(\n                \"auth.passwordReset.emailSentTo\",\n                \"We sent an email to {{email}}. Click the link in the email to reset your password.\",\n              ).replace(\"{{email}}\", email)}\n        </p>\n\n        {token ? (\n          <div className=\"space-y-4\">\n            <p className=\"text-center text-sm text-[var(--color-text-tertiary)]\">\n              {tr(\n                \"auth.passwordReset.redirectingIn\",\n                \"Redirecting to sign in in\",\n              )}{\" \"}\n              <span className=\"font-semibold text-[var(--color-text-primary)]\">\n                {countdown}\n              </span>{\" \"}\n              {tr(\"auth.passwordReset.seconds\", \"seconds...\")}\n            </p>\n            <button\n              onClick={() =>\n                navigate(\n                  returnTo\n                    ? `/auth/login?returnTo=${encodeURIComponent(returnTo)}`\n                    : \"/auth/login\",\n                )\n              }\n              className=\"auth-primary-button w-full px-4 py-3 font-semibold\"\n            >\n              {tr(\"auth.passwordReset.signInNow\", \"Sign in now\")}\n            </button>\n          </div>\n        ) : (\n          <div className=\"space-y-4\">\n            <button\n              onClick={() => setSuccess(false)}\n              className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all\"\n            >\n              {tr(\n                \"auth.passwordReset.didntReceive\",\n                \"Didn't receive the email? Try again\",\n              )}\n            </button>\n            <button\n              onClick={() => navigate(\"/auth/login\")}\n              className=\"w-full py-3 px-4 rounded-xl text-[var(--color-text-secondary)] font-medium hover:text-[var(--color-text-primary)] transition-colors\"\n            >\n              {tr(\"auth.passwordReset.backToSignIn\", \"Back to sign in\")}\n            </button>\n          </div>\n        )}\n      </AuthLayout>\n    );\n  }\n\n  return (\n    <AuthLayout\n      title={\n        token\n          ? tr(\"auth.passwordReset.createNewPassword\", \"Create new password\")\n          : tr(\"auth.passwordReset.resetTitle\", \"Reset your password\")\n      }\n      subtitle={\n        token\n          ? tr(\n              \"auth.passwordReset.enterNewPassword\",\n              \"Enter a new password for your account\",\n            )\n          : tr(\n              \"auth.passwordReset.enterEmail\",\n              \"Enter your email and we'll send you a reset link\",\n            )\n      }\n    >\n      {token ? (\n        <form onSubmit={handleResetPassword} className=\"space-y-5\">\n          {/* Error Alert */}\n          {error && (\n            <div className=\"flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n              <p className=\"text-sm text-[var(--color-status-error-text)]\">\n                {error}\n              </p>\n            </div>\n          )}\n\n          {/* New Password Input */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"newPassword\"\n              className=\"block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr(\"auth.passwordReset.newPasswordLabel\", \"New Password\")}\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                <LockIcon className=\"w-5 h-5 text-[var(--color-text-tertiary)]\" />\n              </div>\n              <input\n                id=\"newPassword\"\n                type={showPassword ? \"text\" : \"password\"}\n                required\n                value={newPassword}\n                onChange={(e) => setNewPassword(e.target.value)}\n                className=\"block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n                placeholder={tr(\n                  \"auth.passwordReset.newPasswordPlaceholder\",\n                  \"Enter new password\",\n                )}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowPassword(!showPassword)}\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n                className=\"absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors\"\n              >\n                {showPassword ? (\n                  <EyeOffIcon className=\"w-5 h-5\" />\n                ) : (\n                  <EyeIcon className=\"w-5 h-5\" />\n                )}\n              </button>\n            </div>\n\n            {/* Password Strength Indicator */}\n            {newPassword && (\n              <div className=\"space-y-3 pt-2\">\n                <div className=\"space-y-1\">\n                  <div className=\"h-1.5 bg-[var(--color-bg-sunken)] rounded-full overflow-hidden\">\n                    <div\n                      className={`h-full ${passwordStrength.color} ${passwordStrength.width} transition-all duration-300`}\n                    />\n                  </div>\n                  <p className=\"text-xs text-[var(--color-text-tertiary)] capitalize\">\n                    {tr(\n                      \"auth.passwordReset.passwordStrength\",\n                      \"Password strength:\",\n                    )}{\" \"}\n                    <span className=\"font-medium\">\n                      {passwordStrength.level}\n                    </span>\n                  </p>\n                </div>\n\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {passwordChecks.map((check, i) => (\n                    <div key={i} className=\"flex items-center gap-2\">\n                      {check.met ? (\n                        <CheckIcon className=\"w-4 h-4 text-status-success-text\" />\n                      ) : (\n                        <XIcon className=\"w-4 h-4 text-[var(--color-text-tertiary)]\" />\n                      )}\n                      <span\n                        className={`text-xs ${\n                          check.met\n                            ? \"text-[var(--color-status-success-text)]\"\n                            : \"text-[var(--color-text-tertiary)]\"\n                        }`}\n                      >\n                        {check.label}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Confirm Password Input */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"confirmPassword\"\n              className=\"block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr(\n                \"auth.passwordReset.confirmPasswordLabel\",\n                \"Confirm Password\",\n              )}\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                <LockIcon className=\"w-5 h-5 text-[var(--color-text-tertiary)]\" />\n              </div>\n              <input\n                id=\"confirmPassword\"\n                type={showConfirmPassword ? \"text\" : \"password\"}\n                required\n                value={confirmPassword}\n                onChange={(e) => setConfirmPassword(e.target.value)}\n                className=\"block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n                placeholder={tr(\n                  \"auth.passwordReset.confirmPasswordPlaceholder\",\n                  \"Confirm new password\",\n                )}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowConfirmPassword(!showConfirmPassword)}\n                aria-label={\n                  showConfirmPassword ? \"Hide password\" : \"Show password\"\n                }\n                className=\"absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors\"\n              >\n                {showConfirmPassword ? (\n                  <EyeOffIcon className=\"w-5 h-5\" />\n                ) : (\n                  <EyeIcon className=\"w-5 h-5\" />\n                )}\n              </button>\n            </div>\n            {confirmPassword && newPassword !== confirmPassword && (\n              <p className=\"text-xs text-[var(--color-status-error-text)]\">\n                {tr(\n                  \"auth.passwordReset.passwordsMismatch\",\n                  \"Passwords do not match\",\n                )}\n              </p>\n            )}\n          </div>\n\n          {/* Submit Button */}\n          <button\n            type=\"submit\"\n            disabled={\n              isLoading ||\n              (confirmPassword.length > 0 && newPassword !== confirmPassword)\n            }\n            className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n          >\n            {isLoading ? (\n              <>\n                <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                <span>\n                  {tr(\"auth.passwordReset.resetting\", \"Resetting password...\")}\n                </span>\n              </>\n            ) : (\n              tr(\"auth.passwordReset.resetButton\", \"Reset password\")\n            )}\n          </button>\n        </form>\n      ) : (\n        <form onSubmit={handleRequestReset} className=\"space-y-5\">\n          {/* Error Alert */}\n          {error && (\n            <div className=\"flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n              <p className=\"text-sm text-[var(--color-status-error-text)]\">\n                {error}\n              </p>\n            </div>\n          )}\n\n          {/* Email Input */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"email\"\n              className=\"block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr(\"auth.passwordReset.emailLabel\", \"Email address\")}\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                <EmailIcon className=\"w-5 h-5 text-[var(--color-text-tertiary)]\" />\n              </div>\n              <input\n                id=\"email\"\n                type=\"email\"\n                required\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                className=\"block w-full pl-[3.5rem] pr-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n                placeholder={tr(\n                  \"auth.passwordReset.emailPlaceholder\",\n                  \"you@example.com\",\n                )}\n              />\n            </div>\n          </div>\n\n          {/* Submit Button */}\n          <button\n            type=\"submit\"\n            disabled={isLoading}\n            className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n          >\n            {isLoading ? (\n              <>\n                <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                <span>{tr(\"auth.passwordReset.sending\", \"Sending...\")}</span>\n              </>\n            ) : (\n              tr(\"auth.passwordReset.sendResetLink\", \"Send reset link\")\n            )}\n          </button>\n        </form>\n      )}\n\n      {/* Back to Sign In */}\n      <p className=\"mt-8 text-center text-sm text-[var(--color-text-secondary)]\">\n        {tr(\"auth.passwordReset.rememberPassword\", \"Remember your password?\")}{\" \"}\n        <button\n          onClick={() => navigate(\"/auth/login\")}\n          className=\"font-semibold text-text-link hover:text-text-linkHover transition-colors\"\n        >\n          {tr(\"auth.passwordReset.signIn\", \"Sign in\")}\n        </button>\n      </p>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PasswordResetPage.js","names":[],"sources":["../../../src/auth/pages/PasswordResetPage.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { useSearchParams, useNavigate } from \"react-router-dom\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { usePasswordOperations } from \"../hooks\";\nimport { useCaptchaV3 } from \"../hooks/useCaptchaV3\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport {\n  EmailIcon,\n  LockIcon,\n  EyeIcon,\n  EyeOffIcon,\n  CheckIcon,\n  XIcon,\n  SpinnerIcon,\n} from \"../components/AuthIcons\";\n\nconst REDIRECT_DELAY = 5; // seconds\n\n/**\n * Password reset page with professional design\n * Handles both requesting reset and completing reset with token\n */\nexport function PasswordResetPage() {\n  const navigate = useNavigate();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  // Preserve returnTo so after reset→login the user ends up on the right product domain\n  const returnTo = searchParams.get(\"returnTo\");\n  const { requestPasswordReset, resetPassword, isLoading } =\n    usePasswordOperations();\n  const { executeRecaptcha: executeCaptchaV3 } = useCaptchaV3();\n  const [email, setEmail] = useState(\"\");\n  const [newPassword, setNewPassword] = useState(\"\");\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n  const [success, setSuccess] = useState(false);\n  const [error, setError] = useState(\"\");\n  const [countdown, setCountdown] = useState(REDIRECT_DELAY);\n\n  // Auto-redirect countdown after successful password reset (only for token flow)\n  useEffect(() => {\n    if (!success || !token) return;\n\n    const loginPath = returnTo\n      ? `/auth/login?returnTo=${encodeURIComponent(returnTo)}`\n      : \"/auth/login\";\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          navigate(loginPath);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [success, token, navigate, returnTo]);\n\n  // Password strength indicators\n  const passwordChecks = (() => {\n    const password = newPassword;\n    return [\n      {\n        label: tr(\"auth.passwordReset.pwMin8\", \"At least 12 characters\"),\n        met: password.length >= 12,\n      },\n      {\n        label: tr(\"auth.passwordReset.pwUppercase\", \"One uppercase letter\"),\n        met: /[A-Z]/.test(password),\n      },\n      {\n        label: tr(\"auth.passwordReset.pwLowercase\", \"One lowercase letter\"),\n        met: /[a-z]/.test(password),\n      },\n      {\n        label: tr(\"auth.passwordReset.pwNumber\", \"One number\"),\n        met: /\\d/.test(password),\n      },\n      {\n        label: tr(\"auth.passwordReset.pwSpecial\", \"One special character\"),\n        met: /[!@#$%^&*(),.?\":{}|<>]/.test(password),\n      },\n    ];\n  })();\n\n  const passwordStrength = (() => {\n    const metCount = passwordChecks.filter((c) => c.met).length;\n    if (metCount <= 2)\n      return {\n        level: tr(\"auth.passwordReset.passwordStrengthWeak\", \"weak\"),\n        color: \"bg-status-error-bg-subtle0\",\n        width: \"w-1/4\",\n      };\n    if (metCount <= 3)\n      return {\n        level: tr(\"auth.passwordReset.passwordStrengthFair\", \"fair\"),\n        color: \"bg-orange-500\",\n        width: \"w-2/4\",\n      };\n    if (metCount <= 4)\n      return {\n        level: tr(\"auth.passwordReset.passwordStrengthGood\", \"good\"),\n        color: \"bg-status-warning-bg-subtle0\",\n        width: \"w-3/4\",\n      };\n    return {\n      level: tr(\"auth.passwordReset.passwordStrengthStrong\", \"strong\"),\n      color: \"bg-status-success-bg-subtle0\",\n      width: \"w-full\",\n    };\n  })();\n\n  const handleRequestReset = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n    try {\n      // Get reCAPTCHA v3 token (no-op when captcha is disabled)\n      const recaptchaToken = await executeCaptchaV3(\"password_reset\");\n      await requestPasswordReset(email, recaptchaToken);\n      setSuccess(true);\n    } catch (err) {\n      setError(\n        tr(\n          \"auth.passwordReset.sendFailed\",\n          \"Failed to send reset email. Please try again.\",\n        ),\n      );\n      console.error(\"Failed to request password reset:\", err);\n    }\n  };\n\n  const handleResetPassword = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n\n    if (!token) return;\n\n    if (newPassword !== confirmPassword) {\n      setError(\n        tr(\"auth.passwordReset.passwordsNoMatch\", \"Passwords do not match\"),\n      );\n      return;\n    }\n\n    try {\n      await resetPassword(token, newPassword);\n      setSuccess(true);\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : \"\";\n      if (msg === \"TOKEN_EXPIRED\") {\n        setError(\n          tr(\n            \"auth.passwordReset.errorTokenExpired\",\n            \"This password reset link has expired. Please request a new one.\",\n          ),\n        );\n      } else if (msg === \"INVALID_TOKEN\") {\n        setError(\n          tr(\n            \"auth.passwordReset.errorInvalidToken\",\n            \"This password reset link is invalid or has already been used.\",\n          ),\n        );\n      } else {\n        setError(\n          tr(\n            \"auth.passwordReset.errorGeneric\",\n            \"Failed to reset password. Please try again.\",\n          ),\n        );\n      }\n    }\n  };\n\n  if (success) {\n    return (\n      <AuthLayout\n        title={\n          token\n            ? tr(\"auth.passwordReset.passwordUpdated\", \"Password updated\")\n            : tr(\"auth.passwordReset.checkEmail\", \"Check your email\")\n        }\n        subtitle={\n          token\n            ? tr(\n                \"auth.passwordReset.successSubtitle\",\n                \"Your password has been successfully reset\",\n              )\n            : tr(\n                \"auth.passwordReset.sentInstructions\",\n                \"We sent you instructions to reset your password\",\n              )\n        }\n      >\n        {/* Success Icon */}\n        <div className=\"flex justify-center mb-6\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center\">\n            <svg\n              className=\"w-8 h-8 text-[var(--color-status-success-text)]\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        <p className=\"text-center text-[var(--color-text-secondary)] mb-8\">\n          {token\n            ? tr(\n                \"auth.passwordReset.canNowSignIn\",\n                \"You can now use your new password to sign in to your account.\",\n              )\n            : tr(\n                \"auth.passwordReset.emailSentTo\",\n                \"We sent an email to {{email}}. Click the link in the email to reset your password.\",\n              ).replace(\"{{email}}\", email)}\n        </p>\n\n        {token ? (\n          <div className=\"space-y-4\">\n            <p className=\"text-center text-sm text-[var(--color-text-tertiary)]\">\n              {tr(\n                \"auth.passwordReset.redirectingIn\",\n                \"Redirecting to sign in in\",\n              )}{\" \"}\n              <span className=\"font-semibold text-[var(--color-text-primary)]\">\n                {countdown}\n              </span>{\" \"}\n              {tr(\"auth.passwordReset.seconds\", \"seconds...\")}\n            </p>\n            <button\n              onClick={() =>\n                navigate(\n                  returnTo\n                    ? `/auth/login?returnTo=${encodeURIComponent(returnTo)}`\n                    : \"/auth/login\",\n                )\n              }\n              className=\"auth-primary-button w-full px-4 py-3 font-semibold\"\n            >\n              {tr(\"auth.passwordReset.signInNow\", \"Sign in now\")}\n            </button>\n          </div>\n        ) : (\n          <div className=\"space-y-4\">\n            <button\n              onClick={() => setSuccess(false)}\n              className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all\"\n            >\n              {tr(\n                \"auth.passwordReset.didntReceive\",\n                \"Didn't receive the email? Try again\",\n              )}\n            </button>\n            <button\n              onClick={() => navigate(\"/auth/login\")}\n              className=\"w-full py-3 px-4 rounded-xl text-[var(--color-text-secondary)] font-medium hover:text-[var(--color-text-primary)] transition-colors\"\n            >\n              {tr(\"auth.passwordReset.backToSignIn\", \"Back to sign in\")}\n            </button>\n          </div>\n        )}\n      </AuthLayout>\n    );\n  }\n\n  return (\n    <AuthLayout\n      title={\n        token\n          ? tr(\"auth.passwordReset.createNewPassword\", \"Create new password\")\n          : tr(\"auth.passwordReset.resetTitle\", \"Reset your password\")\n      }\n      subtitle={\n        token\n          ? tr(\n              \"auth.passwordReset.enterNewPassword\",\n              \"Enter a new password for your account\",\n            )\n          : tr(\n              \"auth.passwordReset.enterEmail\",\n              \"Enter your email and we'll send you a reset link\",\n            )\n      }\n    >\n      {token ? (\n        <form onSubmit={handleResetPassword} className=\"space-y-5\">\n          {/* Error Alert */}\n          {error && (\n            <div className=\"flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n              <p className=\"text-sm text-[var(--color-status-error-text)]\">\n                {error}\n              </p>\n            </div>\n          )}\n\n          {/* New Password Input */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"newPassword\"\n              className=\"block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr(\"auth.passwordReset.newPasswordLabel\", \"New Password\")}\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                <LockIcon className=\"w-5 h-5 text-[var(--color-text-tertiary)]\" />\n              </div>\n              <input\n                id=\"newPassword\"\n                type={showPassword ? \"text\" : \"password\"}\n                required\n                aria-required=\"true\"\n                autoComplete=\"new-password\"\n                value={newPassword}\n                onChange={(e) => setNewPassword(e.target.value)}\n                className=\"block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n                placeholder={tr(\n                  \"auth.passwordReset.newPasswordPlaceholder\",\n                  \"Enter new password\",\n                )}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowPassword(!showPassword)}\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n                className=\"absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors\"\n              >\n                {showPassword ? (\n                  <EyeOffIcon className=\"w-5 h-5\" />\n                ) : (\n                  <EyeIcon className=\"w-5 h-5\" />\n                )}\n              </button>\n            </div>\n\n            {/* Password Strength Indicator */}\n            {newPassword && (\n              <div className=\"space-y-3 pt-2\">\n                <div className=\"space-y-1\">\n                  <div className=\"h-1.5 bg-[var(--color-bg-sunken)] rounded-full overflow-hidden\">\n                    <div\n                      className={`h-full ${passwordStrength.color} ${passwordStrength.width} transition-all duration-300`}\n                    />\n                  </div>\n                  <p className=\"text-xs text-[var(--color-text-tertiary)] capitalize\">\n                    {tr(\n                      \"auth.passwordReset.passwordStrength\",\n                      \"Password strength:\",\n                    )}{\" \"}\n                    <span className=\"font-medium\">\n                      {passwordStrength.level}\n                    </span>\n                  </p>\n                </div>\n\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {passwordChecks.map((check, i) => (\n                    <div key={i} className=\"flex items-center gap-2\">\n                      {check.met ? (\n                        <CheckIcon className=\"w-4 h-4 text-status-success-text\" />\n                      ) : (\n                        <XIcon className=\"w-4 h-4 text-[var(--color-text-tertiary)]\" />\n                      )}\n                      <span\n                        className={`text-xs ${\n                          check.met\n                            ? \"text-[var(--color-status-success-text)]\"\n                            : \"text-[var(--color-text-tertiary)]\"\n                        }`}\n                      >\n                        {check.label}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Confirm Password Input */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"confirmPassword\"\n              className=\"block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr(\n                \"auth.passwordReset.confirmPasswordLabel\",\n                \"Confirm Password\",\n              )}\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                <LockIcon className=\"w-5 h-5 text-[var(--color-text-tertiary)]\" />\n              </div>\n              <input\n                id=\"confirmPassword\"\n                type={showConfirmPassword ? \"text\" : \"password\"}\n                required\n                aria-required=\"true\"\n                autoComplete=\"new-password\"\n                aria-invalid={\n                  confirmPassword.length > 0 && newPassword !== confirmPassword\n                }\n                value={confirmPassword}\n                onChange={(e) => setConfirmPassword(e.target.value)}\n                className=\"block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n                placeholder={tr(\n                  \"auth.passwordReset.confirmPasswordPlaceholder\",\n                  \"Confirm new password\",\n                )}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowConfirmPassword(!showConfirmPassword)}\n                aria-label={\n                  showConfirmPassword ? \"Hide password\" : \"Show password\"\n                }\n                className=\"absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors\"\n              >\n                {showConfirmPassword ? (\n                  <EyeOffIcon className=\"w-5 h-5\" />\n                ) : (\n                  <EyeIcon className=\"w-5 h-5\" />\n                )}\n              </button>\n            </div>\n            {confirmPassword && newPassword !== confirmPassword && (\n              <p className=\"text-xs text-[var(--color-status-error-text)]\">\n                {tr(\n                  \"auth.passwordReset.passwordsMismatch\",\n                  \"Passwords do not match\",\n                )}\n              </p>\n            )}\n          </div>\n\n          {/* Submit Button */}\n          <button\n            type=\"submit\"\n            disabled={\n              isLoading ||\n              (confirmPassword.length > 0 && newPassword !== confirmPassword)\n            }\n            className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n          >\n            {isLoading ? (\n              <>\n                <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                <span>\n                  {tr(\"auth.passwordReset.resetting\", \"Resetting password...\")}\n                </span>\n              </>\n            ) : (\n              tr(\"auth.passwordReset.resetButton\", \"Reset password\")\n            )}\n          </button>\n        </form>\n      ) : (\n        <form onSubmit={handleRequestReset} className=\"space-y-5\">\n          {/* Error Alert */}\n          {error && (\n            <div className=\"flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n              <p className=\"text-sm text-[var(--color-status-error-text)]\">\n                {error}\n              </p>\n            </div>\n          )}\n\n          {/* Email Input */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"email\"\n              className=\"block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr(\"auth.passwordReset.emailLabel\", \"Email address\")}\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                <EmailIcon className=\"w-5 h-5 text-[var(--color-text-tertiary)]\" />\n              </div>\n              <input\n                id=\"email\"\n                type=\"email\"\n                required\n                aria-required=\"true\"\n                autoComplete=\"email\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                className=\"block w-full pl-[3.5rem] pr-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n                placeholder={tr(\n                  \"auth.passwordReset.emailPlaceholder\",\n                  \"you@example.com\",\n                )}\n              />\n            </div>\n          </div>\n\n          {/* Submit Button */}\n          <button\n            type=\"submit\"\n            disabled={isLoading}\n            className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n          >\n            {isLoading ? (\n              <>\n                <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                <span>{tr(\"auth.passwordReset.sending\", \"Sending...\")}</span>\n              </>\n            ) : (\n              tr(\"auth.passwordReset.sendResetLink\", \"Send reset link\")\n            )}\n          </button>\n        </form>\n      )}\n\n      {/* Back to Sign In */}\n      <p className=\"mt-8 text-center text-sm text-[var(--color-text-secondary)]\">\n        {tr(\"auth.passwordReset.rememberPassword\", \"Remember your password?\")}{\" \"}\n        <button\n          onClick={() => navigate(\"/auth/login\")}\n          className=\"font-semibold text-text-link hover:text-text-linkHover transition-colors\"\n        >\n          {tr(\"auth.passwordReset.signIn\", \"Sign in\")}\n        </button>\n      </p>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/RegisterPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegisterPage.d.ts","sourceRoot":"","sources":["../../../src/auth/pages/RegisterPage.tsx"],"names":[],"mappings":"AAyBA;;GAEG;AACH,wBAAgB,YAAY,4CAgoB3B"}
+{"version":3,"file":"RegisterPage.d.ts","sourceRoot":"","sources":["../../../src/auth/pages/RegisterPage.tsx"],"names":[],"mappings":"AAyBA;;GAEG;AACH,wBAAgB,YAAY,4CAwoB3B"}

package/dist/auth/pages/RegisterPage.js

@@ -226,6 +226,7 @@ function C() {
 								id: "firstName",
 								type: "text",
 								required: !0,
+								"aria-required": "true",
 								value: N.firstName,
 								onChange: (e) => P({
 									...N,
@@ -244,6 +245,7 @@ function C() {
 								id: "lastName",
 								type: "text",
 								required: !0,
+								"aria-required": "true",
 								value: N.lastName,
 								onChange: (e) => P({
 									...N,
@@ -269,6 +271,8 @@ function C() {
 								id: "username",
 								type: "text",
 								required: !0,
+								"aria-required": "true",
+								autoComplete: "username",
 								value: N.username,
 								onChange: (e) => P({
 									...N,
@@ -294,6 +298,8 @@ function C() {
 								id: "email",
 								type: "email",
 								required: !0,
+								"aria-required": "true",
+								autoComplete: "email",
 								value: N.email,
 								onChange: (e) => P({
 									...N,
@@ -323,6 +329,8 @@ function C() {
 										id: "password",
 										type: j ? "text" : "password",
 										required: !0,
+										"aria-required": "true",
+										autoComplete: "new-password",
 										value: N.password,
 										onChange: (e) => P({
 											...N,