diff --git a/services/web/frontend/js/directives/asyncForm.js b/services/web/frontend/js/directives/asyncForm.js index a50b09abf3..43f6419307 100644 --- a/services/web/frontend/js/directives/asyncForm.js +++ b/services/web/frontend/js/directives/asyncForm.js @@ -24,6 +24,10 @@ App.directive('asyncForm', ($http, validateCaptcha, validateCaptchaV3) => ({ attrs.newEmail const validateCaptchaIfEnabled = function (callback) { + scope.$applyAsync(() => { + scope[attrs.name].inflight = true + }) + if (attrs.captchaActionName) { validateCaptchaV3(attrs.captchaActionName) } @@ -34,7 +38,7 @@ App.directive('asyncForm', ($http, validateCaptcha, validateCaptchaV3) => ({ } } - const submitRequest = function (grecaptchaResponse) { + const _submitRequest = function (grecaptchaResponse) { const formData = {} for (const data of Array.from(element.serializeArray())) { formData[data.name] = data.value @@ -46,7 +50,6 @@ App.directive('asyncForm', ($http, validateCaptcha, validateCaptchaV3) => ({ // clear the response object which may be referenced downstream Object.keys(response).forEach(field => delete response[field]) - scope[attrs.name].inflight = true // for asyncForm prevent automatic redirect to /login if // authentication fails, we will handle it ourselves @@ -143,7 +146,7 @@ App.directive('asyncForm', ($http, validateCaptcha, validateCaptchaV3) => ({ } const submit = () => - validateCaptchaIfEnabled(response => submitRequest(response)) + validateCaptchaIfEnabled(response => _submitRequest(response)) const _httpRequestFn = (method = 'post') => { const $HTTP_FNS = { diff --git a/services/web/frontend/stylesheets/app/base.less b/services/web/frontend/stylesheets/app/base.less index 9d94533e8e..b590bb2381 100644 --- a/services/web/frontend/stylesheets/app/base.less +++ b/services/web/frontend/stylesheets/app/base.less @@ -144,6 +144,7 @@ .grecaptcha-badge { visibility: hidden; + height: 0 !important; // Prevent layout shift } .tos-agreement-notice {