feat: distinct, non-dismissible UI state for TOTP lockout

src/components/AuthorizerVerifyOtp.tsx

@@ -35,6 +35,7 @@ export const AuthorizerVerifyOtp: FC<{
   const [loading, setLoading] = useState(false);
   const [totpData, setTotpData] = useState<TotpDataType>({ ...initTotpData });
   const [sendingOtp, setSendingOtp] = useState(false);
+  const [isLockedOut, setIsLockedOut] = useState(false);
   const [formData, setFormData] = useState<InputDataType>({
     otp: null,
   });
@@ -68,6 +69,19 @@ export const AuthorizerVerifyOtp: FC<{
       data.is_totp = !!is_totp;
       const { data: res, errors } = await authorizerRef.verifyOtp(data);
       if (errors && errors.length) {
+        if (errors[0]?.code === 'TOO_MANY_REQUESTS') {
+          setIsLockedOut(true);
+          // Fall back to a fixed message if the server ever sends an empty
+          // one: the form is about to go fully disabled (input + submit),
+          // so this is the user's only explanation for why - an empty
+          // string here would mean no message renders at all (Message
+          // returns null for blank text) and the form goes silently dead.
+          setError(
+            errors[0]?.message ||
+              `Too many attempts. Please wait a while before trying again.`,
+          );
+          return;
+        }
         setError(errors[0]?.message || ``);
         return;
       }
@@ -184,7 +198,11 @@ export const AuthorizerVerifyOtp: FC<{
         />
       )}
       {error && (
-        <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
+        <Message
+          type={MessageType.Error}
+          text={error}
+          onClose={isLockedOut ? undefined : onErrorClose}
+        />
       )}
       <p style={{ textAlign: 'center', margin: '10px 0px' }}>
         Please enter the OTP sent to your email or phone number or authenticator
@@ -203,8 +221,10 @@ export const AuthorizerVerifyOtp: FC<{
             }`}
             placeholder="e.g.- AB123C"
             type="password"
+            autoComplete="one-time-code"
             value={formData.otp || ''}
             onChange={(e) => onInputChange('otp', e.target.value)}
+            disabled={isLockedOut}
           />
           {errorData.otp && (
             <div className="form-input-error">{errorData.otp}</div>
@@ -222,21 +242,22 @@ export const AuthorizerVerifyOtp: FC<{
         <br />
         <StyledButton
           type="submit"
-          disabled={loading || !formData.otp || !!errorData.otp}
+          disabled={loading || !formData.otp || !!errorData.otp || isLockedOut}
           appearance={ButtonAppearance.Primary}
         >
           {loading ? `Processing ...` : `Submit`}
         </StyledButton>
       </form>
       {setView && (
         <StyledFooter>
-          {sendingOtp ? (
-            <div style={{ marginBottom: '10px' }}>Sending ...</div>
-          ) : (
-            <StyledLink onClick={resendOtp} marginBottom="10px">
-              Resend OTP
-            </StyledLink>
-          )}
+          {!is_totp &&
+            (sendingOtp ? (
+              <div style={{ marginBottom: '10px' }}>Sending ...</div>
+            ) : (
+              <StyledLink onClick={resendOtp} marginBottom="10px">
+                Resend OTP
+              </StyledLink>
+            ))}
           {config.is_sign_up_enabled && (
             <div>
               Don't have an account?{' '}