From f691e22c19d6f7a0053121a01d778b754e04c295 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Thu, 15 Jul 2021 10:18:42 +0100
Subject: [PATCH] Merge pull request #4233 from overleaf/hb-double-click-login

Ensure inflight is set before recaptcha is called

GitOrigin-RevId: fb2195c46089ddd4e0239a04d98c2650e05ad1c6
---
 services/web/frontend/js/directives/asyncForm.js | 9 ++++++---
 services/web/frontend/stylesheets/app/base.less  | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

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 {