Add loading and success indicators for backend checks

internetarchive · Jul 29, 2024 · 5dc6b3b · 5dc6b3b
1 parent 4f1cb87
commit 5dc6b3b
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
@@ -1139,6 +1139,23 @@ msgstr ""
 msgid "Toggle Password Visibility"
 msgstr ""
 
+#: account/create.html books/custom_carousel.html
+#: search/work_search_facets.html
+msgid "Loading..."
+msgstr ""
+
+#: account/create.html
+msgid "Loading spinner"
+msgstr ""
+
+#: account/create.html type/author/view.html
+msgid "Success!"
+msgstr ""
+
+#: account/create.html
+msgid "Checkmark"
+msgstr ""
+
 #: account/create.html
 msgid "Your URL"
 msgstr ""
@@ -3487,10 +3504,6 @@ msgstr ""
 msgid "Not in Library"
 msgstr ""
 
-#: books/custom_carousel.html search/work_search_facets.html
-msgid "Loading..."
-msgstr ""
-
 #: books/custom_carousel.html type/author/view.html
 msgid "name missing"
 msgstr ""
@@ -6481,10 +6494,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 "

diff --git a/openlibrary/plugins/openlibrary/js/realtime_account_validation.js b/openlibrary/plugins/openlibrary/js/realtime_account_validation.js
@@ -3,6 +3,10 @@ import { debounce } from './nonjquery_utils.js';
 export function initRealTimeValidation() {
     const signupForm = document.querySelector('form[name=signup]');
     const i18nStrings = JSON.parse(signupForm.dataset.i18n);
+    const emailLoadingIcon = $('.ol-signup-form__input--email .ol-signup-form__icon--loading');
+    const usernameLoadingIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--loading');
+    const emailSuccessIcon = $('.ol-signup-form__input--email .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 = /^.*@.*\..*$/;
@@ -60,6 +64,8 @@ export function initRealTimeValidation() {
     function validateUsername() {
         const value_username = $('#username').val();
 
+        usernameSuccessIcon.hide();
+
         if (value_username === '') {
             clearError('#username', '#usernameMessage');
             return;
@@ -76,14 +82,19 @@ export function initRealTimeValidation() {
         }
 
         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 {
+                    usernameSuccessIcon.show();
                 }
             }
         });
@@ -92,6 +103,8 @@ export function initRealTimeValidation() {
     function validateEmail() {
         const value_email = $('#emailAddr').val();
 
+        emailSuccessIcon.hide();
+
         if (value_email === '') {
             clearError('#emailAddr', '#emailAddrMessage');
             return;
@@ -103,14 +116,19 @@ export function initRealTimeValidation() {
         }
 
         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 {
+                    emailSuccessIcon.show();
                 }
             }
         });

diff --git a/openlibrary/plugins/upstream/forms.py b/openlibrary/plugins/upstream/forms.py
@@ -97,6 +97,7 @@ class RegisterForm(Form):
             help=_("Public and cannot be changed later."),
             autocapitalize="off",
             validators=[vlogin, username_validator],
+            maxlength="20",
             pattern=vlogin.rexp.pattern,
             title=vlogin.msg,
             required="true",

diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
@@ -29,7 +29,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:
@@ -39,9 +39,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:
+                    <a href="javascript:;" class="ol-signup-form__icon-wrap">
+                        <img src="https://github.com/internetarchive/bookreader/blob/master/BookReader/images/loading.gif" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check.png" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
+                    </a>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
         </div>

diff --git a/static/css/page-signup.less b/static/css/page-signup.less
@@ -157,13 +157,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;
   }