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

@@ -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. <i>It will take <u>a few minutes to "

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();
                 }
             }
         });

openlibrary/templates/account/create.html

@@ -30,7 +30,7 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
         $# :param openlibrary.utils.form.Input input:
         $# :param str suffix: HTML to put at bottom of input
 
-        <div class="formElement ol-signup-form__input">
+        <div class="formElement ol-signup-form__input ol-signup-form__input--$(input.id)">
             <div class="label">
                 <label for="$input.id">$input.description</label>
                 $if input.help:
@@ -40,9 +40,14 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
             <div class="input">
                 $:input.render()
                 $if input.name == 'password':
-                    <a href="javascript:;" class="password-visibility-toggle">
+                    <a href="javascript:;" class="password-visibility-toggle ol-signup-form__icon-wrap">
                         <img src="/static/images/icons/icon_eye-closed.svg" title="$_('Toggle Password Visibility')" alt="$_('Toggle Password Visibility')"/>
                     </a>
+                $else:
+                    <div class="ol-signup-form__icon-wrap">
+                        <img src="/static/images/bubble-loader.svg" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading...')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check-circle.svg" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Success!')" style="display:none" />
+                    </div>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
         </div>

static/css/page-signup.less

@@ -167,13 +167,13 @@
     position: relative;
   }
 
-  .password-visibility-toggle {
+  .ol-signup-form__icon-wrap {
     position: absolute;
     right: 5px;
     top: 5px;
   }
 
-  .password-visibility-toggle > img {
+  .ol-signup-form__icon-wrap > img {
     width: 22px;
     height: 22px;
   }