Change the UI to gradually show needed fields for affiliations.

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

@@ -129,7 +129,6 @@ block content
 									li Others users will be able to find you under different email addresses when sharing projects
 									li If your e-mail is affiliated with an institution with a group license, your account will be associated with that institution (and you'll gain acess to any benefits the institution may have).
 
-								pre(style="font-size: 0.8em; position: fixed; left: 80px; top: 80px; color: black;") {{ newAffiliation | json }}
 								.affiliations-row
 									.affiliation-col-4
 										label(for="affiliations-email") #{translate("email")}
@@ -144,11 +143,9 @@ block content
 											input-type="email"
 											input-required="true"
 										)
-									.affiliation-col-8(
-										ng-show="newAffiliation.autoDetectMode"
-									)
+									.affiliation-col-8
 										p.affiliation-input-feedback(
-											ng-if="newAffiliation.university"
+											ng-if="newAffiliation.university && !showManualUniversitySelectionUI"
 										)
 											| {{ newAffiliation.university.name }} (
 											a(
@@ -157,12 +154,20 @@ block content
 											) change
 											| )
 										p.affiliation-input-feedback(
-											ng-if="!newAffiliation.university"
+											ng-if="!newAffiliation.university && !isValidEmail && !showManualUniversitySelectionUI"
 										) Start by adding your email address.
-								.affiliations-row
-									.affiliation-col-4(
-										ng-if="!newAffiliation.autoDetectMode"
-									)
+										p.affiliation-input-feedback(
+											ng-if="!newAffiliation.university && isValidEmail && !isBlacklistedEmail && !showManualUniversitySelectionUI"
+										)
+											| Is your email affiliated with an institution? 
+											a(
+												href
+												ng-click="selectUniversityManually();"
+											) Let us know
+								.affiliations-row(
+									ng-if="isValidEmail && showManualUniversitySelectionUI"
+								)
+									.affiliation-col-4
 										label Institution
 										ui-select(
 											ng-model="newAffiliation.country"
@@ -176,7 +181,7 @@ block content
 												span(
 													ng-bind="country.name"
 												)
-									.affiliation-col-4(ng-if="!newAffiliation.autoDetectMode")
+									.affiliation-col-4
 										ui-select(
 											ng-model="newAffiliation.university"
 											ng-disabled="!newAffiliation.country"
@@ -193,7 +198,7 @@ block content
 													ng-bind="university.name"
 												)
 								.affiliations-row(
-									ng-if="newAffiliation.university"
+									ng-if="isValidEmail && newAffiliation.university"
 								)
 									.affiliation-col-4
 										label(for="affiliations-role") Role
@@ -225,17 +230,17 @@ block content
 								table.table
 									thead
 										tr
+											th Email
 											th Institution and role
-											th Affiliated e-mail
 											th
 									tbody
 										tr
-											td Universidade de Aveiro
 											td paulojreis@ua.pt
+											td Universidade de Aveiro
 											td Remove
 										tr
-											td Universidade do Porto
 											td paulojreis@fe.up.pt
+											td Universidade do Porto
 											td Remove
 
 

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

@@ -10,7 +10,9 @@ define [
 			university: null
 			role: null
 			department: null
-			autoDetectMode: true
+		$scope.showManualUniversitySelectionUI = false
+		$scope.isValidEmail = false
+		$scope.isBlacklistedEmail = false
 
 		LOCAL_AND_DOMAIN_REGEX = /([^@]+)@(.+)/
 		EMAIL_REGEX = /^([A-Za-z0-9_\-\.]+)@([^\.]+)\.([A-Za-z]+)$/
@@ -29,10 +31,14 @@ define [
 
 		$scope.getEmailSuggestion = (userInput) ->
 			userInputLocalAndDomain = _matchLocalAndDomain(userInput)
+			$scope.isValidEmail = EMAIL_REGEX.test userInput  
+			$scope.isBlacklistedEmail = false
 			if userInputLocalAndDomain.domain?
+				$scope.isBlacklistedEmail = UserAffiliationsDataService.isDomainBlacklisted userInputLocalAndDomain.domain
+
 				UserAffiliationsDataService.getUniversityDomainFromPartialDomainInput(userInputLocalAndDomain.domain)
 					.then (universityDomain) -> 						
-						$scope.newAffiliation.autoDetectMode = true
+						$scope.showManualUniversitySelectionUI = false
 						if userInputLocalAndDomain.domain == universityDomain.hostname
 							$scope.newAffiliation.university = universityDomain.university
 							$scope.newAffiliation.department = universityDomain.department
@@ -43,10 +49,6 @@ define [
 					.catch () -> 
 						$scope.newAffiliation.university = null
 						$scope.newAffiliation.department = null
-						# If the input is already a full e-mail and we have no suggestions, then the user
-						# will need to manually select his institution.
-						if userInput.match EMAIL_REGEX
-							$scope.newAffiliation.autoDetectMode = false
 						$q.reject null
 			else
 				$scope.newAffiliation.university = null
@@ -54,21 +56,17 @@ define [
 				$q.resolve null
 
 		$scope.handleEmailInputBlur = () ->
-			if $scope.newAffiliation.autoDetectMode and !$scope.newAffiliation.university and $scope.newAffiliation.email?.match EMAIL_REGEX
-				$scope.newAffiliation.autoDetectMode = false
+			# if $scope.newAffiliation.autoDetectMode and !$scope.newAffiliation.university and $scope.newAffiliation.email?.match EMAIL_REGEX
+			# 	$scope.newAffiliation.autoDetectMode = false
 
 		$scope.selectUniversityManually = () ->
 			$scope.newAffiliation.university = null
 			$scope.newAffiliation.department = null
-			$scope.newAffiliation.autoDetectMode = false
+			$scope.showManualUniversitySelectionUI = true
 
 		$scope.handleAffiliationFormSubmit = () ->
 			if !$scope.newAffiliation.university?
-				UserAffiliationsDataService.addUserEmail(
-					$scope.newAffiliation.email,
-					$scope.newAffiliation.role,
-					$scope.newAffiliation.department
-				)
+				UserAffiliationsDataService.addUserEmail $scope.newAffiliation.email
 			else
 				if $scope.newAffiliation.university.isUserSuggested
 					UserAffiliationsDataService.addUserAffiliationWithUnknownUniversity(
@@ -86,10 +84,12 @@ define [
 						$scope.newAffiliation.department
 					)
 
+		# Populates the countries dropdown
 		UserAffiliationsDataService
 			.getCountries()
 			.then (countries) -> $scope.countries = countries
 
+		# Populates the universities dropdown (after selecting a country)
 		$scope.$watch "newAffiliation.country", (newSelectedCountry, prevSelectedCountry) ->
 			if newSelectedCountry? and newSelectedCountry != prevSelectedCountry
 				$scope.newAffiliation.university = null