Registration form username validator race conditions

Summary

Asynchronous username validator used in registration form manifests race conditions occasionally resulting in invalid UI states. Poor networking conditions amplify the issue.

Steps to reproduce

• Go to /users/sign_up route
• Start typing username, just slightly faster than one character per 1 second

Example Project

Issue occurrs on https://gitlab.com/users/sign_up

What is the current bug behavior?

UI does not always reflect the state of the browser, e.g. pending message is not visible, but the request is still pending.

Unwanted states are also possible (see screnshot below).

What is the expected correct behavior?

UI correctly reflects the state of the browser.

There are only four possible states: empty, pending, valid, invalid (empty state is when asynchronous validation is not triggered due to synchronous validation errors).

Relevant logs and/or screenshots

Output of checks

This bug happens on GitLab.com

Results of GitLab environment info

Most likely affects only environments with open registration enabled.

Results of GitLab application Check

Possible fixes

Validator is implemented in app/assets/javascripts/pages/sessions/new/username_validator.js. axios CancelToken can be used to prevent the issue.

I am looking in to it as a part of my GitLab Hackathon participation (/cc @cbacharakis).