@ciromaciel/auth-react 1.1.0 → 1.2.0

package/dist/index.js

@@ -2520,6 +2520,102 @@ function TermsNotice({
   });
 }
 
+/**
+ * What a failed `verify` means for the person, read from the worker's answer.
+ *
+ * The HTTP status carries the case — `code` is `VALIDATION_ERROR` for both a
+ * wrong and an expired code, so it cannot tell them apart:
+ *   - 400 with `details.attemptsLeft`: wrong code, the request is still open;
+ *   - 400 without it: no open request for this email (already replaced);
+ *   - 429: the fifth wrong try destroyed the request;
+ *   - 410: the code outlived its minutes, and was destroyed too.
+ *
+ * Anything else — the network, a 500 — is not about the code, and must not
+ * lock the field.
+ */
+function describeCodeFailure(error) {
+  if (error?.status === 429) return {
+    kind: 'exhausted',
+    isLocked: true
+  };
+  if (error?.status === 410) return {
+    kind: 'expired',
+    isLocked: true
+  };
+  if (error?.status === 400) {
+    const attemptsLeft = error?.details?.attemptsLeft;
+    return {
+      kind: 'wrong',
+      isLocked: false,
+      attemptsLeft: Number.isInteger(attemptsLeft) ? attemptsLeft : null
+    };
+  }
+  return {
+    kind: 'other',
+    isLocked: false,
+    message: error?.message || null
+  };
+}
+
+/**
+ * The notice above the code field.
+ *
+ * It sits ABOVE the field, not under it, and says what to do next — not only
+ * that something failed. The field's own error line was 12px of red under a
+ * cleared input, next to a greyed-out button: it read as a frozen screen.
+ *
+ * The most common cause gets named: a new code invalidates the previous one,
+ * and the person is often reading an older email.
+ */
+function CodeFailureNotice({
+  failure,
+  labels
+}) {
+  if (!failure) return null;
+  const texts = {
+    wrong: {
+      title: labels.wrongCodeTitle || 'Código incorreto',
+      body: [labels.wrongCodeHint || 'Confira o e-mail mais recente: um código novo invalida o anterior.', failure.attemptsLeft === 1 ? labels.lastAttempt || 'Esta é a última tentativa.' : failure.attemptsLeft > 1 ? labels.attemptsLeft ? labels.attemptsLeft(failure.attemptsLeft) : `Restam ${failure.attemptsLeft} tentativas.` : null].filter(Boolean).join(' ')
+    },
+    exhausted: {
+      title: labels.attemptsExhaustedTitle || 'Tentativas esgotadas',
+      body: labels.attemptsExhausted || 'Por segurança, este código foi cancelado. Peça um novo para continuar.'
+    },
+    expired: {
+      title: labels.codeExpiredTitle || 'Código expirado',
+      body: labels.codeExpired || 'O código vale por poucos minutos. Peça um novo para continuar.'
+    },
+    other: {
+      title: labels.codeFailedTitle || 'Não foi possível entrar',
+      body: failure.message || labels.invalidCode || 'Tente de novo em instantes.'
+    }
+  }[failure.kind];
+  return /*#__PURE__*/jsxRuntime.jsx(core.Alert, {
+    color: "red",
+    variant: "light",
+    radius: 0,
+    icon: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconAlertCircle, {
+      size: 18
+    }),
+    title: texts.title
+    /*
+     * `role="alert"` is Mantine's default and is what makes a screen
+     * reader announce the failure without the person moving focus away
+     * from the field they are about to retype in.
+     */,
+    styles: {
+      root: {
+        border: '1px solid var(--mantine-color-red-2)'
+      }
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      size: "sm",
+      lh: 1.45,
+      children: texts.body
+    })
+  });
+}
+
 // The OAuth flow's pass-through screen.
 //
 // The panel is not the destination here: the user is authorizing an MCP client
@@ -2632,7 +2728,9 @@ function SignIn({
   // present it again: it is the (email, code) pair the server validates.
   const [sentTo, setSentTo] = react.useState(null);
   const [code, setCode] = react.useState('');
-  const [codeError, setCodeError] = react.useState(null);
+  const [codeFailure, setCodeFailure] = react.useState(null);
+  const [isCodeResent, setIsCodeResent] = react.useState(false);
+  const codeInputRef = react.useRef(null);
 
   // Read once, on mount: the list only changes through this screen, and
   // every change below writes the new list back into state.
@@ -2641,6 +2739,7 @@ function SignIn({
   const [isManaging, setIsManaging] = react.useState(false);
   const [pickingEmail, setPickingEmail] = react.useState(null);
   const isShowingAccounts = recentAccounts && accounts.length > 0 && !isChoosingOther;
+  const isCodeLocked = !!codeFailure?.isLocked;
 
   // Hook that fetches the application's logo
   const applicationLogo = useApplicationLogo();
@@ -2687,18 +2786,36 @@ function SignIn({
 
   // Step 1 — ask for the code.
   const handleRequest = async values => {
-    if (sending) return;
+    if (sending) return false;
     try {
       await requestCode(values.email);
       setSentTo(values.email);
       setCode('');
-      setCodeError(null);
+      setCodeFailure(null);
       onCodeSent?.(values.email);
+      return true;
     } catch (error) {
-      onError?.(error);
+      // Nothing on the card shows this one: the app's notification is
+      // the only place the person learns the code was not sent.
+      onError?.(error, {
+        step: 'request',
+        isShownOnCard: false
+      });
+      return false;
     }
   };
 
+  // A new code, from the code step. The worker replaces the request, so the
+  // attempts start over and the previous code stops working — the notice
+  // says so, or the person keeps typing the one from the older email.
+  const handleResend = async () => {
+    const isSent = await handleRequest({
+      email: sentTo
+    });
+    setIsCodeResent(isSent);
+    if (isSent) codeInputRef.current?.focus();
+  };
+
   // Step 1, from the list — the click on a saved account IS the request.
   //
   // An account that came in through a provider goes back to that provider,
@@ -2746,7 +2863,8 @@ function SignIn({
   // signals that navigation was taken over — now as information, not as a
   // trap.
   const handleVerify = async value => {
-    setCodeError(null);
+    setCodeFailure(null);
+    setIsCodeResent(false);
     try {
       const result = await verifyCode(sentTo, value);
 
@@ -2761,12 +2879,19 @@ function SignIn({
         redirectHandled: !!target
       });
     } catch (error) {
-      // The code error belongs to the field, not to the global
-      // notification: the person is looking at the eight characters they
-      // just typed.
-      setCodeError(error?.message || labels.invalidCode || 'Código inválido.');
+      // The failure belongs to this card, not to the global notification:
+      // the person is looking at the eight characters they just typed.
+      // The field goes back empty and focused, ready for the next try.
+      setCodeFailure(describeCodeFailure(error));
       setCode('');
-      onError?.(error);
+      codeInputRef.current?.focus();
+      // Still reported — an app may log it — but flagged: the card
+      // already explains it, and a notification repeating "Código
+      // inválido" in the corner would say it twice.
+      onError?.(error, {
+        step: 'verify',
+        isShownOnCard: true
+      });
     }
   };
 
@@ -2876,7 +3001,27 @@ function SignIn({
       })
     }) : /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
       gap: "md",
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+      children: [isCodeResent && /*#__PURE__*/jsxRuntime.jsx(core.Alert, {
+        color: "gray",
+        variant: "light",
+        radius: 0,
+        p: "xs",
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+          size: "xs",
+          lh: 1.4,
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            span: true,
+            inherit: true,
+            fw: 700,
+            c: "gray.9",
+            children: labels.codeResentTitle || 'Novo código enviado.'
+          }), ' ', labels.codeResent || 'O anterior deixou de valer.']
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(CodeFailureNotice, {
+        failure: codeFailure,
+        labels: labels
+      }), /*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+        ref: codeInputRef,
         label: labels.codeLabel || 'Código de acesso'
         /*
          * The email is the field's description, not the subtitle:
@@ -2896,26 +3041,56 @@ function SignIn({
         value: code,
         onChange: event => {
           setCode(event.currentTarget.value);
-          if (codeError) setCodeError(null);
+          // Typing again is the correction: the notice has
+          // done its job. A locked field cannot be typed in,
+          // so an exhausted or expired notice stays.
+          if (codeFailure) setCodeFailure(null);
         },
         onKeyDown: event => {
           if (event.key === 'Enter' && code.trim()) handleVerify(code);
         },
         autoFocus: true,
         autoComplete: "one-time-code",
-        readOnly: verifying,
-        error: codeError
-      }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        readOnly: verifying
+        /*
+         * No `error` on the field: the notice above carries the
+         * failure, and a red border around an empty field turned
+         * the PLACEHOLDER red — "ABCD-EFGH" read as the code the
+         * person had typed. With the request gone there is
+         * nothing left to type into.
+         */,
+        disabled: isCodeLocked
+      }), isCodeLocked ?
+      /*#__PURE__*/
+      /*
+       * The request is gone: confirming can only fail again, so
+       * the one action that works takes the button's place.
+       */
+      jsxRuntime.jsx(core.Button, {
+        type: "button",
+        fullWidth: true,
+        "aria-disabled": sending,
+        onClick: sending ? undefined : handleResend,
+        leftSection: sending ? /*#__PURE__*/jsxRuntime.jsx(core.Loader, {
+          size: 14,
+          color: "gray.0"
+        }) : /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconRefresh, {
+          size: 16
+        }),
+        children: sending ? labels.sendingCode || 'Enviando…' : labels.sendNewCode || 'Enviar novo código'
+      }) : /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         type: "button",
         fullWidth: true
-        // Same reason as the previous step: `disabled` would fade
-        // the button exactly while signing in happens. With no
-        // code typed it stays genuinely disabled — there is no
-        // action in progress to hide there.
+        // Same reason as the previous step: `disabled` would
+        // fade the button exactly while signing in happens.
+        //
+        // Never disabled for an empty field either. Right
+        // after a failure the field is empty on purpose, and
+        // a grey button there read as a frozen screen; the
+        // click sends the cursor to the field instead.
         ,
         "aria-disabled": verifying,
-        disabled: !code.trim(),
-        onClick: verifying ? undefined : () => handleVerify(code),
+        onClick: verifying ? undefined : () => code.trim() ? handleVerify(code) : codeInputRef.current?.focus(),
         leftSection: verifying ? /*#__PURE__*/jsxRuntime.jsx(core.Loader, {
           size: 14,
           color: "gray.0"
@@ -2933,18 +3108,17 @@ function SignIn({
           onClick: () => {
             setSentTo(null);
             setCode('');
-            setCodeError(null);
+            setCodeFailure(null);
+            setIsCodeResent(false);
             // The label promises another email: the form,
             // not the list the person may have come from.
             setIsChoosingOther(true);
           },
           children: labels.changeEmail || 'Usar outro e-mail'
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
+        }), !isCodeLocked && /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
           size: "sm",
           c: "dimmed",
-          onClick: sending ? undefined : () => handleRequest({
-            email: sentTo
-          }),
+          onClick: sending ? undefined : handleResend,
           children: sending ? labels.sendingCode || 'Enviando…' : labels.resendCode || 'Reenviar código'
         })]
       })]