Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add loading and success indicators for backend checks #9593

Conversation

rebecca-shoptaw
Copy link
Collaborator

@rebecca-shoptaw rebecca-shoptaw commented Jul 19, 2024

Closes #9590.

Feature. Adds loading and success indicator icons for API requests in registration form, i.e. to check if username/email is available. Avoids awkward pause as checks run and sudden error message appearance/disappearance when validating on key-up.

Technical

Very simple! Ended up just going with two images, both initially rendered display: none, and then conditionally shown/hidden via the script in realtime_account_validation.js.

Changed a few class names around to be able to apply the password icon styling to all three, and to be able to query the correct icons to show/hide.

Testing

  1. Go to /account/create
  2. Enter a non-taken username or email address and click onto the next input
  3. A spinner should appear right away, replaced by a checkmark when the check is complete
  4. Try the same process but this time with a taken username or email address
  5. A spinner should appear right away, and when the check is complete it should disappear and an error message should show as usual

Screenshot

Loading indicator in action Success indicator in action

Stakeholders

@cdrini

@codecov-commenter
Copy link

codecov-commenter commented Jul 19, 2024

Codecov Report

Attention: Patch coverage is 63.63636% with 4 lines in your changes missing coverage. Please review.

Project coverage is 17.12%. Comparing base (ce16a79) to head (ba3aa44).
Report is 461 commits behind head on master.

Files with missing lines Patch % Lines
openlibrary/plugins/openlibrary/js/signup.js 63.63% 4 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #9593      +/-   ##
==========================================
+ Coverage   16.06%   17.12%   +1.06%     
==========================================
  Files          90       89       -1     
  Lines        4769     4752      -17     
  Branches      832      831       -1     
==========================================
+ Hits          766      814      +48     
+ Misses       3480     3428      -52     
+ Partials      523      510      -13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@rebecca-shoptaw rebecca-shoptaw force-pushed the 9590/feature/add-loading-and-success-for-backend-checks branch from 21352b7 to f7becfc Compare July 19, 2024 14:54
@rebecca-shoptaw rebecca-shoptaw marked this pull request as ready for review July 19, 2024 14:59
@cdrini cdrini self-assigned this Jul 22, 2024
@rebecca-shoptaw rebecca-shoptaw force-pushed the 9590/feature/add-loading-and-success-for-backend-checks branch from f7becfc to 5dc6b3b Compare July 29, 2024 15:24
@rebecca-shoptaw rebecca-shoptaw force-pushed the 9590/feature/add-loading-and-success-for-backend-checks branch from 5dc6b3b to 2fc53b6 Compare August 7, 2024 20:09
@cdrini cdrini added the On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing label Aug 9, 2024
@rebecca-shoptaw rebecca-shoptaw force-pushed the 9590/feature/add-loading-and-success-for-backend-checks branch 2 times, most recently from c87944c to 1e35380 Compare August 9, 2024 20:28
@rebecca-shoptaw rebecca-shoptaw force-pushed the 9590/feature/add-loading-and-success-for-backend-checks branch from 1e35380 to e350230 Compare September 28, 2024 00:30
Copy link
Collaborator

@cdrini cdrini left a comment

Choose a reason for hiding this comment

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

Lgtm! On small accessibility feedback. Otherwise, ran through the page and the indicators appeared when expected, and completing the form correctly created the account!

openlibrary/templates/account/create.html Outdated Show resolved Hide resolved
@cdrini cdrini merged commit 7fe6b6f into internetarchive:master Sep 30, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add loading and success indicator for registration backend checks
3 participants