Update affiliations UI to show specific errors for conflicting emails

services/web/app/views/user/settings/user-affiliations.pug

@@ -11,9 +11,7 @@ form.row(
 					th.affiliations-table-email  #{translate("email")}
 					th.affiliations-table-institution  #{translate("institution_and_role")}
 					th.affiliations-table-inline-actions
-			tbody(
-				ng-if="!ui.hasError"
-			)
+			tbody
 				tr(
 					ng-repeat="userEmail in userEmails"
 				)
@@ -59,7 +57,7 @@ form.row(
 								.affiliation-change-actions.small
 									a(
 										href
-										ng-click="saveAffiliationChange();"
+										ng-click="saveAffiliationChange(userEmail);"
 									) #{translate("save_or_cancel-save")}
 									|  #{translate("save_or_cancel-or" )} 
 									a(
@@ -71,30 +69,26 @@ form.row(
 						// so create a wrapper for the tooltip
 						div.affiliations-table-inline-action-disabled-wrapper(
 							tooltip=translate("please_confirm_your_email_before_making_it_default")
-							ng-if="!userEmail.default && !userEmail.confirmedAt"
+							tooltip-enable="!ui.isMakingRequest"
+							ng-if="!userEmail.default && (!userEmail.confirmedAt || ui.isMakingRequest)"
 						)
 							button.btn.btn-sm.btn-success.affiliations-table-inline-action(
 								disabled
 							) #{translate("make_default")}
 						button.btn.btn-sm.btn-success.affiliations-table-inline-action(
-							ng-if="!userEmail.default && userEmail.confirmedAt"
+							ng-if="!userEmail.default && (userEmail.confirmedAt && !ui.isMakingRequest)"
 							ng-click="setDefaultUserEmail(userEmail)"
 						) #{translate("make_default")}
 						|  
 						button.btn.btn-sm.btn-danger.affiliations-table-inline-action(
 							ng-if="!userEmail.default"
 							ng-click="removeUserEmail(userEmail)"
+							ng-disabled="ui.isMakingRequest"
 							tooltip=translate("remove")
 						)
 							i.fa.fa-fw.fa-trash
 				tr.affiliations-table-highlighted-row(
-					ng-if="ui.isLoadingEmails"
-				)
-					td.text-center(colspan="3") 
-						i.fa.fa-fw.fa-spin.fa-refresh
-						|  #{translate("loading")}...
-				tr.affiliations-table-highlighted-row(
-					ng-if="!ui.showAddEmailUI && !ui.isLoadingEmails"
+					ng-if="!ui.showAddEmailUI && !ui.isMakingRequest"
 				)
 					td(colspan="3")
 						a(
@@ -103,7 +97,7 @@ form.row(
 						) #{translate("add_another_email")}
 
 				tr.affiliations-table-highlighted-row(
-					ng-if="ui.showAddEmailUI"
+					ng-if="ui.showAddEmailUI && !ui.isLoadingEmails"
 				)
 					td
 						.affiliations-form-group
@@ -149,31 +143,30 @@ form.row(
 						)
 					td
 						button.btn.btn-sm.btn-primary(
-							ng-disabled="affiliationsForm.$invalid || ui.isAddingNewEmail"
+							ng-disabled="affiliationsForm.$invalid || ui.isMakingRequest"
 							ng-click="addNewEmail()"
 						)
-							span(
-								ng-if="!ui.isAddingNewEmail"
-							) #{translate("add_new_email")}
-							span(
-								ng-if="ui.isAddingNewEmail"
-							)
-								i.fa.fa-fw.fa-spin.fa-refresh
-								|  #{translate("adding")}...
-			tbody(
-				ng-if="ui.hasError"
-			)
+							| #{translate("add_new_email")}
+				tr.affiliations-table-highlighted-row(
+					ng-if="ui.isMakingRequest"
+				)
+					td.text-center(colspan="3", ng-if="ui.isLoadingEmails") 
+						i.fa.fa-fw.fa-spin.fa-refresh
+						|  #{translate("loading")}...
+					td.text-center(colspan="3", ng-if="ui.isResendingConfirmation") 
+						i.fa.fa-fw.fa-spin.fa-refresh
+						|  #{translate("sending")}...
+					td.text-center(colspan="3", ng-if="!ui.isLoadingEmails && !ui.isResendingConfirmation") 
+						i.fa.fa-fw.fa-spin.fa-refresh
+						|  #{translate("saving")}...
 				tr.affiliations-table-error-row(
-					ng-if="true"
+					ng-if="ui.hasError"
 				)
 					td.text-center(colspan="3") 
 						div
 							i.fa.fa-fw.fa-exclamation-triangle 
-							|  #{translate("error_performing_request")}
-						div
-							button.btn.btn-xs(
-								ng-click="acknowledgeError();"
-							) #{translate("reload_emails_and_affiliations")}
+							span(ng-if="!ui.errorMessage")  #{translate("error_performing_request")}
+							span(ng-if="ui.errorMessage")  {{ui.errorMessage}}
 				
 		hr
 

services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee

@@ -55,25 +55,23 @@ define [
 			$scope.affiliationToChange.role = userEmail.affiliation.role
 			$scope.affiliationToChange.department = userEmail.affiliation.department
 
-		$scope.saveAffiliationChange = () ->
-			$scope.ui.isLoadingEmails = true
-			UserAffiliationsDataService
-				.addRoleAndDepartment(
-					$scope.affiliationToChange.email,
-					$scope.affiliationToChange.role,
-					$scope.affiliationToChange.department
-				)
+		$scope.saveAffiliationChange = (userEmail) ->
+			userEmail.affiliation.role = $scope.affiliationToChange.role
+			userEmail.affiliation.department = $scope.affiliationToChange.department
+			_resetAffiliationToChange()
+			_monitorRequest(
+				UserAffiliationsDataService
+					.addRoleAndDepartment(
+						userEmail.email,
+						userEmail.affiliation.role,
+						userEmail.affiliation.department
+					)
+			)
 				.then () ->
-					_reset()
-					_getUserEmails()
-				.catch () ->
-					$scope.ui.hasError = true
+					setTimeout () -> _getUserEmails()
 
 		$scope.cancelAffiliationChange = (email) ->
-			$scope.affiliationToChange.email = ""
-			$scope.affiliationToChange.university = null
-			$scope.affiliationToChange.role = null
-			$scope.affiliationToChange.department = null
+			_resetAffiliationToChange()
 		
 		$scope.isChangingAffiliation = (email) ->
 			$scope.affiliationToChange.email == email
@@ -82,7 +80,6 @@ define [
 			$scope.ui.showAddEmailUI = true
 
 		$scope.addNewEmail = () ->
-			$scope.ui.isAddingNewEmail = true
 			if !$scope.newAffiliation.university?
 				addEmailPromise = UserAffiliationsDataService
 					.addUserEmail $scope.newAffiliation.email
@@ -104,75 +101,104 @@ define [
 							$scope.newAffiliation.role,
 							$scope.newAffiliation.department
 						)
-			addEmailPromise
-				.then () -> 
-					_reset()
-					_getUserEmails()
-				.catch () ->
-					$scope.ui.hasError = true
+
+			$scope.ui.isAddingNewEmail = true
+			$scope.ui.showAddEmailUI = false
+			_monitorRequest(addEmailPromise)
+				.then () ->
+					_resetNewAffiliation()
+					_resetAddingEmail()
+					setTimeout () -> _getUserEmails()
+				.finally () ->
+					$scope.ui.isAddingNewEmail = false
 
 		$scope.setDefaultUserEmail = (userEmail) ->
-			$scope.ui.isLoadingEmails = true
-			UserAffiliationsDataService
-				.setDefaultUserEmail userEmail.email
-				.then () -> _getUserEmails()
-				.catch () -> $scope.ui.hasError = true
+			_monitorRequest(
+				UserAffiliationsDataService
+					.setDefaultUserEmail userEmail.email
+			)
+				.then () ->
+					for email in $scope.userEmails or []
+						email.default = false
+					userEmail.default = true
 
 		$scope.removeUserEmail = (userEmail) ->
-			$scope.ui.isLoadingEmails = true
-			userEmailIdx = _.indexOf $scope.userEmails, userEmail
-			if userEmailIdx > -1
-				$scope.userEmails.splice userEmailIdx, 1
-			UserAffiliationsDataService
-				.removeUserEmail userEmail.email
-				.then () -> _getUserEmails()
-				.catch () -> $scope.ui.hasError = true
+			$scope.userEmails = $scope.userEmails.filter (ue) -> ue != userEmail
+			_monitorRequest(
+				UserAffiliationsDataService
+					.removeUserEmail userEmail.email
+			)
 
 		$scope.resendConfirmationEmail = (userEmail) ->
-			$scope.ui.isLoadingEmails = true
-			UserAffiliationsDataService
-				.resendConfirmationEmail userEmail.email
-				.then () -> _getUserEmails()
-				.catch () -> $scope.ui.hasError = true
+			$scope.ui.isResendingConfirmation = true
+			_monitorRequest(
+				UserAffiliationsDataService
+					.resendConfirmationEmail userEmail.email
+			)
+				.finally () ->
+					$scope.ui.isResendingConfirmation = false
 
 		$scope.acknowledgeError = () ->
 			_reset()
 			_getUserEmails()
 
-		_reset = () ->
+		_resetAffiliationToChange = () ->
+			$scope.affiliationToChange = 
+				email: ""
+				university: null
+				role: null
+				department: null
+
+		_resetNewAffiliation = () ->
 			$scope.newAffiliation =
 				email: ""
 				country: null
 				university: null
 				role: null
 				department: null
+
+		_resetAddingEmail = () ->
+			$scope.ui.showAddEmailUI = false
+			$scope.ui.isValidEmail = false
+			$scope.ui.isBlacklistedEmail = false
+			$scope.ui.showManualUniversitySelectionUI = false
+
+		_reset = () ->
 			$scope.ui = 
 				hasError: false
+				errorMessage: ""
 				showChangeAffiliationUI: false
-				showManualUniversitySelectionUI: false
+				isMakingRequest: false
 				isLoadingEmails: false
 				isAddingNewEmail: false
-				showAddEmailUI: false
-				isValidEmail: false
-				isBlacklistedEmail: false
-			$scope.affiliationToChange = 
-				email: ""
-				university: null
-				role: null
-				department: null
+				isResendingConfirmation: false
+			_resetAffiliationToChange()
+			_resetNewAffiliation()
+			_resetAddingEmail()
 		_reset()
 
+		_monitorRequest = (promise) ->
+			$scope.ui.hasError = false
+			$scope.ui.isMakingRequest = true
+			promise
+				.catch (response) ->
+					$scope.ui.hasError = true
+					$scope.ui.errorMessage = response?.data?.message
+				.finally () ->
+					$scope.ui.isMakingRequest = false
+			return promise
+
 		# Populates the emails table
 		_getUserEmails = () ->
 			$scope.ui.isLoadingEmails = true
-			UserAffiliationsDataService
-				.getUserEmails() 
+			_monitorRequest(
+				UserAffiliationsDataService
+					.getUserEmails()
+			)
 				.then (emails) -> 
 					$scope.userEmails = emails
+				.finally () ->
 					$scope.ui.isLoadingEmails = false
-				.catch () ->
-					$scope.ui.hasError = true
-
 		_getUserEmails()
 
 	]