From 2705aea54cb3e2b9c43974851a9e995196762bf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= <timothee.alby@gmail.com>
Date: Thu, 5 Dec 2019 19:28:08 +0530
Subject: [PATCH] Merge pull request #2435 from
 overleaf/ta-group-invite-form-fix

Add UI Feedback To Group Invite Form

GitOrigin-RevId: aec05d586c4ccfc7739b6b94d1f49763ea229c6e
---
 services/web/app/views/user_membership/index.pug |  4 +++-
 services/web/frontend/js/main/user-membership.js | 13 +++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/services/web/app/views/user_membership/index.pug b/services/web/app/views/user_membership/index.pug
index 5a4a726b40..a940e7f1f7 100644
--- a/services/web/app/views/user_membership/index.pug
+++ b/services/web/app/views/user_membership/index.pug
@@ -89,7 +89,9 @@ block content
 											aria-describedby="add-members-description"
 										)
 									.col-xs-4
-										button.btn.btn-primary(ng-click="addMembers()") #{translate("add")}
+										button.btn.btn-primary(ng-click="addMembers()", ng-disabled="inputs.addMembers.inflightCount > 0")
+											span(ng-show="inputs.addMembers.inflightCount === 0") #{translate("add")}
+											span(ng-show="inputs.addMembers.inflightCount > 0") #{translate("adding")}...
 									.col-xs-2(ng-if="paths.exportMembers", ng-cloak)
 										a(href=paths.exportMembers) #{translate('export_csv')}
 								.row
diff --git a/services/web/frontend/js/main/user-membership.js b/services/web/frontend/js/main/user-membership.js
index cdf78286b1..309c1c7116 100644
--- a/services/web/frontend/js/main/user-membership.js
+++ b/services/web/frontend/js/main/user-membership.js
@@ -23,7 +23,8 @@ define(['base'], function(App) {
       addMembers: {
         content: '',
         error: false,
-        errorMessage: null
+        errorMessage: null,
+        inflightCount: 0
       },
       removeMembers: {
         error: false,
@@ -42,14 +43,17 @@ define(['base'], function(App) {
     $scope.addMembers = function() {
       $scope.inputs.addMembers.error = false
       $scope.inputs.addMembers.errorMessage = null
+      $scope.inputs.addMembers.inflightCount = 0
       const emails = parseEmails($scope.inputs.addMembers.content)
-      return Array.from(emails).map(email =>
-        queuedHttp
+      return Array.from(emails).map(email => {
+        $scope.inputs.addMembers.inflightCount += 1
+        return queuedHttp
           .post(paths.addMember, {
             email,
             _csrf: window.csrfToken
           })
           .then(function(response) {
+            $scope.inputs.addMembers.inflightCount -= 1
             const { data } = response
             if (data.user != null) {
               $scope.users.push(data.user)
@@ -57,12 +61,13 @@ define(['base'], function(App) {
             return ($scope.inputs.addMembers.content = '')
           })
           .catch(function(response) {
+            $scope.inputs.addMembers.inflightCount -= 1
             const { data } = response
             $scope.inputs.addMembers.error = true
             return ($scope.inputs.addMembers.errorMessage =
               data.error != null ? data.error.message : undefined)
           })
-      )
+      })
     }
 
     $scope.removeMembers = function() {