Add loading and success indicator for registration backend checks

[rebecca-shoptaw]

Dependency to epic #7694. Subtask of #9315.

Problem

With all the new realtime validation in the registration form, one thing we are missing is a loading/success indicator for the backend checks (i.e. taken username/email address) -- this is particularly noticeable now that these checks sometimes happen on (debounced) key-up.

Current behavior:

• The user enters a taken username then moves on to the next field
• After an awkward pause, an error appears saying that the username is unavailable
• The user returns to the field and sees the error briefly appear and disappear as they type, ultimately disappearing for good when they enter a non-taken username

Preferred behavior:

• The user enters a taken username and then moves on to the next field
• As soon as they click away, a loading spinner appears in the previous input field to indicate that the check is in progress
• The spinner disappears and an error message shows
• The user returns to the field and sees the loading spinner appear again each time they make a change to the username, followed by a fresh error message if it is still taken
• When they enter a non-taken username, the loading spinner briefly appears, then is replaced by a green checkmark

Proposal & Constraints

What is the proposed solution / implementation?

The idea is to use a similar implementation to the password toggle already in the form, rendering a single image in the right side of the email and username inputs and programmatically changing its source (for spinner vs. checkmark) and display properties (to show/hide it). Specifically:

• The image will initially be display: none, likely via inline styles
• In the relevant validation functions, we can insert a line that shows the image and sets its source to the spinner URL just before the validation checks run:
  

  openlibrary/openlibrary/plugins/openlibrary/js/realtime_account_validation.js

  Lines 75 to 78 in 44a46e2

  	clearError('#username', '#usernameMessage');
  	$.ajax({
  	url: '/account/validate',

• We can then add a line that hides the image in the event of a failed backend check here:
  

  openlibrary/openlibrary/plugins/openlibrary/js/realtime_account_validation.js

  Lines 82 to 83 in 44a46e2

  	if (errors.username) {
  	renderError('#username', '#usernameMessage', errors.username);

• And a line that switches the image source to the checkmark icon in an else clause just below

Which suggestions or requirements should be considered for how feature needs to appear or be implemented?

• We may also need to set an HTML max-length for the username field (and the email field??) to prevent the text from overlapping the image, which should be no problem because the username does have a max length of 20 characters

Related files

create.html
realtime_account_validation.js

Stakeholders

@cdrini

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.