openlibrary icon indicating copy to clipboard operation
openlibrary copied to clipboard

Move registration formatting checks to frontend

Open rebecca-shoptaw opened this issue 8 months ago • 2 comments

Closes #9467.

Feature. Improves registration form performance by ensuring lightweight formatting checks (i.e. username field length, email format) all take place on the frontend before the backend query runs.

Technical

In realtime_account_validation.js a set of formatting checks run first, and if any of them fail the appropriate error is rendered.

If they all pass, any errors are cleared and the query to the API endpoint in account.py runs, to check whether the username/email address is taken. This meant I could remove the error-clearing else condition from the ajax call, as the errors will be auto-cleared before the call happens.

It also allowed me to remove the formatting checks from the API endpoint entirely, as they are now duplicated by the js validation -- but duplicative formatting checks do still run on the backend on submission (via forms.py) so all bad inputs will be caught even if the user has turned off JavaScript.

Testing

  1. Log out (if logged in)
  2. Go to /account/create
  3. Try to enter a badly formatted email/username
  4. You should see realtime errors appear on click/tab away as previously -- and they should appear/disappear much more quickly :)

Screenshot

Stakeholders

@cdrini @mekarpeles

rebecca-shoptaw avatar Jun 25 '24 15:06 rebecca-shoptaw