Skip to content

fix(settings): disable confirm-code buttons while throttled#20692

Merged
vbudhram merged 1 commit into
mainfrom
fxa-13742
Jun 11, 2026
Merged

fix(settings): disable confirm-code buttons while throttled#20692
vbudhram merged 1 commit into
mainfrom
fxa-13742

Conversation

@vbudhram

@vbudhram vbudhram commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Because

  • On a THROTTLED (errno 114) response from confirm-code pages, Submit and "Email new code" stayed clickable. Users clicked 10-12 times, which inflated error-rate metrics.
  • The lockout window was not announced to screen readers.

This pull request

  • Adds a useThrottleCountdown hook that counts down retryAfter seconds, or stays throttled when only retryAfterLocalized is present.
  • Adds throttleSecondsRemaining and throttleLocalizedFallback props to FormVerifyCode. The submit button is disabled while throttled, and an aria-live="polite" region shows "Try again in N seconds".
  • Hooks the throttle state into SigninTokenCode, SigninPasswordlessCode, and ConfirmSignupCode on their THROTTLED branches, and disables each page's "Email new code" button for the same window.
  • Adds FTL strings form-verify-code-throttled-countdown and form-verify-code-throttled-generic.
  • Adds unit tests for the hook and for the disabled-state assertions on each consumer page.

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-13742

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

@vbudhram vbudhram self-assigned this Jun 4, 2026
@vbudhram vbudhram force-pushed the fxa-13742 branch 4 times, most recently from 44d0ecd to ee40cce Compare June 8, 2026 16:52
@vbudhram vbudhram marked this pull request as ready for review June 8, 2026 17:13
@vbudhram vbudhram requested a review from a team as a code owner June 8, 2026 17:13
const timerRef = useRef<ReturnType<typeof setTimeout>>();

const startThrottle = useCallback((error: ThrottleErrorInput) => {
const retryAfterMs = error?.retryAfter ?? 0;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why error?, shouldn't this be error. An undefined or null value isn't allowed.

clearTimeout(timerRef.current);
setIsThrottled(true);
timerRef.current = setTimeout(() => setIsThrottled(false), retryAfterMs);
}, []);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this really be empty?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, the values inside are either passed in params or stable, so there's nothing reactive.

@vbudhram vbudhram merged commit fe9fbcc into main Jun 11, 2026
18 of 20 checks passed
@vbudhram vbudhram deleted the fxa-13742 branch June 11, 2026 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants