From 7fe6b6f0e3443decb3329a5df00fc01124e4bfa4 Mon Sep 17 00:00:00 2001 From: rebecca shoptaw Date: Mon, 30 Sep 2024 15:08:18 -0400 Subject: [PATCH] Add loading and success indicators for backend checks (#9593) * Add loading and success indicators for backend checks * Adjust email input class name to match HTML * Persist error until after API validation checks pass * Make icons not tabbable * Switch out loading indicator and check mark for new SVGs * Use alt text targetted for screen readers --- openlibrary/i18n/messages.pot | 8 +++---- openlibrary/plugins/openlibrary/js/signup.js | 22 ++++++++++++++++++-- openlibrary/templates/account/create.html | 9 ++++++-- static/css/page-signup.less | 4 ++-- static/images/bubble-loader.svg | 1 + static/images/icons/icon_check-circle.svg | 1 + 6 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 static/images/bubble-loader.svg create mode 100644 static/images/icons/icon_check-circle.svg diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index 983574af205..4d67d3b642c 100644 --- a/openlibrary/i18n/messages.pot +++ b/openlibrary/i18n/messages.pot @@ -1034,6 +1034,10 @@ msgid "" "nonprofit Internet Archive" msgstr "" +#: account/create.html type/author/view.html +msgid "Success!" +msgstr "" + #: account/create.html msgid "Your URL" msgstr "" @@ -6476,10 +6480,6 @@ msgstr "" msgid "Refresh the page?" msgstr "" -#: type/author/view.html -msgid "Success!" -msgstr "" - #: type/author/view.html msgid "" "OK. The merge is in motion. It will take a few minutes to " diff --git a/openlibrary/plugins/openlibrary/js/signup.js b/openlibrary/plugins/openlibrary/js/signup.js index 0e7f1aed26d..dc089a5117c 100644 --- a/openlibrary/plugins/openlibrary/js/signup.js +++ b/openlibrary/plugins/openlibrary/js/signup.js @@ -4,6 +4,10 @@ export function initSignupForm() { const signupForm = document.querySelector('form[name=signup]'); const submitBtn = document.querySelector('button[name=signup]') const i18nStrings = JSON.parse(signupForm.dataset.i18n); + const emailLoadingIcon = $('.ol-signup-form__input--emailAddr .ol-signup-form__icon--loading'); + const usernameLoadingIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--loading'); + const emailSuccessIcon = $('.ol-signup-form__input--emailAddr .ol-signup-form__icon--success'); + const usernameSuccessIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--success'); // Keep the same with openlibrary/plugins/upstream/forms.py const VALID_EMAIL_RE = /^.*@.*\..*$/; @@ -66,6 +70,8 @@ export function initSignupForm() { function validateUsername() { const value_username = $('#username').val(); + usernameSuccessIcon.hide(); + if (value_username === '') { clearError('#username', '#usernameMessage'); return; @@ -81,15 +87,20 @@ export function initSignupForm() { return; } - clearError('#username', '#usernameMessage'); + usernameLoadingIcon.show(); $.ajax({ url: '/account/validate', data: { username: value_username }, type: 'GET', success: function(errors) { + usernameLoadingIcon.hide(); + if (errors.username) { renderError('#username', '#usernameMessage', errors.username); + } else { + clearError('#username', '#usernameMessage'); + usernameSuccessIcon.show(); } } }); @@ -98,6 +109,8 @@ export function initSignupForm() { function validateEmail() { const value_email = $('#emailAddr').val(); + emailSuccessIcon.hide(); + if (value_email === '') { clearError('#emailAddr', '#emailAddrMessage'); return; @@ -108,15 +121,20 @@ export function initSignupForm() { return; } - clearError('#emailAddr', '#emailAddrMessage'); + emailLoadingIcon.show(); $.ajax({ url: '/account/validate', data: { email: value_email }, type: 'GET', success: function(errors) { + emailLoadingIcon.hide(); + if (errors.email) { renderError('#emailAddr', '#emailAddrMessage', errors.email); + } else { + clearError('#emailAddr', '#emailAddrMessage'); + emailSuccessIcon.show(); } } }); diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html index 2912d4763a4..d8502146f45 100644 --- a/openlibrary/templates/account/create.html +++ b/openlibrary/templates/account/create.html @@ -30,7 +30,7 @@

$_("Sign Up")

$# :param openlibrary.utils.form.Input input: $# :param str suffix: HTML to put at bottom of input -