diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index 7d2f3fb6e1e..983574af205 100644 --- 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 index 782f801d3cb..0e7f1aed26d 100644 --- 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 index 29828a0f954..2912d4763a4 100644 --- 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 @@
$:_('Already have an account? Log in')