Reorganize JS for registration form and add loading indicator (#9604)

internetarchive · Sep 30, 2024 · e36e0a0 · e36e0a0
1 parent 59bf298
commit e36e0a0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
@@ -429,7 +429,8 @@ msgstr ""
 msgid "Library Explorer"
 msgstr ""
 
-#: books/custom_carousel.html login.html search/work_search_facets.html
+#: account/create.html books/custom_carousel.html login.html
+#: search/work_search_facets.html
 msgid "Loading..."
 msgstr ""
 

diff --git a/openlibrary/plugins/openlibrary/js/signup.js b/openlibrary/plugins/openlibrary/js/signup.js
@@ -2,6 +2,7 @@ import { debounce } from './nonjquery_utils.js';
 
 export function initSignupForm() {
     const signupForm = document.querySelector('form[name=signup]');
+    const submitBtn = document.querySelector('button[name=signup]')
     const i18nStrings = JSON.parse(signupForm.dataset.i18n);
 
     // Keep the same with openlibrary/plugins/upstream/forms.py
@@ -14,19 +15,24 @@ export function initSignupForm() {
 
     if (window.grecaptcha) {
         // Callback that is called when grecaptcha.execute() is successful
-        // Checks whether reportValidity exists for cross-browser compatibility
-        // Includes invalid input count to account for checks not covered by reportValidity
         function submitCreateAccountForm() {
-            const numInvalidInputs = signupForm.querySelectorAll('input.invalid').length;
-            const isFormattingValid = !signupForm.reportValidity || signupForm.reportValidity()
-
-            if (numInvalidInputs === 0 && isFormattingValid) {
-                signupForm.submit();
-            }
+            signupForm.submit();
         }
         window.submitCreateAccountForm = submitCreateAccountForm
     }
 
+    // Checks whether reportValidity exists for cross-browser compatibility
+    // Includes invalid input count to account for checks not covered by reportValidity
+    $(signupForm).on('submit', function(e) {
+        e.preventDefault();
+        const numInvalidInputs = signupForm.querySelectorAll('input.invalid').length;
+        const isFormattingValid = !signupForm.reportValidity || signupForm.reportValidity();
+        if (numInvalidInputs === 0 && isFormattingValid && window.grecaptcha) {
+            $(submitBtn).prop('disabled', true).text(i18nStrings['loading_text']);
+            window.grecaptcha.execute();
+        }
+    });
+
     $('#username').on('keyup', function(){
         const value = $(this).val();
         $('#userUrl').addClass('darkgreen').text(value).css('font-weight','700');

diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
@@ -6,7 +6,8 @@
     $ "invalid_email_format": _("Must be a valid email address"),
     $ "username_length_err": _("Must be between 3 and 20 characters"),
     $ "username_char_err": _("Username may only contain numbers, letters, - or _"),
-    $ "password_length_err": _("Must be between 3 and 20 characters")
+    $ "password_length_err": _("Must be between 3 and 20 characters"),
+    $ "loading_text": _("Loading...")
     $ }
 
 $# :param openlibrary.plugins.upstream.forms.RegisterForm form:
@@ -74,7 +75,8 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
                     $ classes = 'g-recaptcha'
                     $ sitekey = "data-sitekey=%s" % form['recaptcha'].public_key
                     $:render_template("recaptcha", form['recaptcha'].public_key, error=None, invisible=True)
-                <button type="submit" name="signup" id="signup" class="$classes cta-btn cta-btn--primary" $sitekey $callback>$_("Sign Up with Email")</button>
+                    <div class="$classes" $sitekey $callback data-size="invisible"></div>
+                <button type="submit" name="signup" id="signup" class="cta-btn cta-btn--primary">$_("Sign Up with Email")</button>
                 <small class="ol-signup-form__tos">$:_('By signing up, you agree to the Internet Archive\'s <a class="ol-signup-form__link" href="//archive.org/about/terms.php" target="_blank">Terms of Service</a>.')</small>
                 <p class="ol-signup-form__login-hint">$:_('Already have an account? <a href="/account/login">Log in</a>')</p>
             </div>