Rewrite service and controller code to send the correct payload according to use case (no uni; known uni; new uni).

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

@@ -117,36 +117,51 @@ block content
 													) #{translate("change")}
 
 							hr
-							div(
+							form(
 								ng-controller="UserAffiliationsController"
+								novalidate
+								name="affiliationsForm"
 							)
-								h3 Affiliations
+								h3 Emails and affiliations
+								p Do you use multiple e-mail addresses? If so, add those here.
+								ul
+									li You'll retain access to your account even if you lose access to one of your emails
+									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).
 
-								//- p Do you use multiple e-mail addresses? If so, add those here.
-
-								//- p Why should I do this? 
-
-								//- p Others users will be able to find you under different e-mail address when sharing projects.
-
-								//- p If your e-mail is an institutional e-mail, your account will be associated with that institution (and gain acess to any benefits the institution may have).
-
-								.affiliations-form-row
+								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")}
 										input-suggestions(
 											ng-model="newAffiliation.email"
+											ng-model-options="{ allowInvalid: true }"
 											get-suggestion="getEmailSuggestion(userInput)"
+											on-blur="handleEmailInputBlur()"
 											input-id="affilitations-email"
+											input-name="affilitationsEmail"
 											input-placeholder="e.g. johndoe@mit.edu"
+											input-type="email"
+											input-required="true"
 										)
 									.affiliation-col-8(
-										ng-if="newAffiliation.autoDetected"
+										ng-show="newAffiliation.autoDetectMode"
 									)
-										p(ng-if="newAffiliation.university") {{ newAffiliation.university }}
-										p(ng-if="!newAffiliation.university") Start by adding your institutional email address.
-
+										p.affiliation-input-feedback(
+											ng-if="newAffiliation.university"
+										)
+											| {{ newAffiliation.university.name }} (
+											a(
+												href
+												ng-click="selectUniversityManually();"
+											) change
+											| )
+										p.affiliation-input-feedback(
+											ng-if="!newAffiliation.university"
+										) Start by adding your email address.
+								.affiliations-row
 									.affiliation-col-4(
-										ng-if="!newAffiliation.autoDetected"
+										ng-if="!newAffiliation.autoDetectMode"
 									)
 										label Institution
 										ui-select(
@@ -161,7 +176,7 @@ block content
 												span(
 													ng-bind="country.name"
 												)
-									.affiliation-col-4(ng-if="!newAffiliation.autoDetected")
+									.affiliation-col-4(ng-if="!newAffiliation.autoDetectMode")
 										ui-select(
 											ng-model="newAffiliation.university"
 											ng-disabled="!newAffiliation.country"
@@ -177,6 +192,9 @@ block content
 												span(
 													ng-bind="university.name"
 												)
+								.affiliations-row(
+									ng-if="newAffiliation.university"
+								)
 									.affiliation-col-4
 										label(for="affiliations-role") Role
 										input.form-control(
@@ -193,9 +211,14 @@ block content
 											placeholder="e.g. Mathematics"
 											ng-model="newAffiliation.department"
 										)
-									.affiliation-col-4.affiliation-col-align-right
-										button.btn.btn-primary(
-										) Add new affiliation
+								.affiliations-row
+									.affiliation-col-4
+										input.btn.btn-primary(
+											type="submit"
+											ng-disabled="affiliationsForm.$invalid"
+											ng-click="handleAffiliationFormSubmit()"
+											value="Add new email"
+										)
 
 								//- p Your current affiliations
 

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

@@ -12,34 +12,80 @@ define [
 			department: null
 			autoDetectMode: true
 
-		EMAIL_REGEXP = /([^@]+)@(.+)/
+		LOCAL_AND_DOMAIN_REGEX = /([^@]+)@(.+)/
+		EMAIL_REGEX = /^([A-Za-z0-9_\-\.]+)@([^\.]+)\.([A-Za-z]+)$/
 
-		_matchEmail = (email) ->
-			match = email.match EMAIL_REGEXP
+		_matchLocalAndDomain = (userEmailInput) ->
+			match = userEmailInput?.match LOCAL_AND_DOMAIN_REGEX
 			if match?
 				{ local: match[1], domain: match[2] }
 			else
 				{ local: null, domain: null }
 
+		UserAffiliationsDataService.getUserEmails()
 
 		$scope.addUniversityToSelection = (universityName) -> 
-			{ name: universityName, country_code: $scope.newAffiliation.country.code }
+			{ name: universityName, isUserSuggested: true }
 
 		$scope.getEmailSuggestion = (userInput) ->
-			matchedEmail = _matchEmail(userInput)
-			if matchedEmail.domain?
-				UserAffiliationsDataService.getUniversityDomainFromPartialDomainInput(matchedEmail.domain)
-					.then (universityDomain) -> 
-						$scope.newAffiliation.university = universityDomain.university.name
-						$scope.newAffiliation.department = universityDomain.department
-						$q.resolve "#{matchedEmail.local}@#{universityDomain.hostname}"
+			userInputLocalAndDomain = _matchLocalAndDomain(userInput)
+			if userInputLocalAndDomain.domain?
+				UserAffiliationsDataService.getUniversityDomainFromPartialDomainInput(userInputLocalAndDomain.domain)
+					.then (universityDomain) -> 						
+						$scope.newAffiliation.autoDetectMode = true
+						if userInputLocalAndDomain.domain == universityDomain.hostname
+							$scope.newAffiliation.university = universityDomain.university
+							$scope.newAffiliation.department = universityDomain.department
+						else 
+							$scope.newAffiliation.university = null
+							$scope.newAffiliation.department = null
+						$q.resolve "#{userInputLocalAndDomain.local}@#{universityDomain.hostname}"
 					.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 
+			else
+				$scope.newAffiliation.university = null
+				$scope.newAffiliation.department = null
 				$q.resolve null
 
+		$scope.handleEmailInputBlur = () ->
+			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.handleAffiliationFormSubmit = () ->
+			if !$scope.newAffiliation.university?
+				UserAffiliationsDataService.addUserEmail(
+					$scope.newAffiliation.email,
+					$scope.newAffiliation.role,
+					$scope.newAffiliation.department
+				)
+			else
+				if $scope.newAffiliation.university.isUserSuggested
+					UserAffiliationsDataService.addUserAffiliationWithUnknownUniversity(
+						$scope.newAffiliation.email,
+						$scope.newAffiliation.university.name, 
+						$scope.newAffiliation.country.code,
+						$scope.newAffiliation.role,
+						$scope.newAffiliation.department
+					)
+				else
+					UserAffiliationsDataService.addUserAffiliation(
+						$scope.newAffiliation.email,
+						$scope.newAffiliation.university.id
+						$scope.newAffiliation.role,
+						$scope.newAffiliation.department
+					)
+
 		UserAffiliationsDataService
 			.getCountries()
 			.then (countries) -> $scope.countries = countries

services/web/public/stylesheets/app/account-settings.less

@@ -12,9 +12,8 @@
 }
 
 
-.affiliations-form-row {
+.affiliations-row {
 	display: flex;
-	flex-wrap: wrap;
 	margin-left: -(@grid-gutter-width / 2);
 	margin-right: -(@grid-gutter-width / 2);
 	@media (min-width: @screen-sm-min) {
@@ -23,7 +22,9 @@
 }
 	.affiliation-col-4,
 	.affiliation-col-8 {
-		flex: 0 0 100%;
+		width: 100%;
+		flex-grow: 0;
+		flex-shrink: 0;
 		padding-left: (@grid-gutter-width / 2);
 		padding-right: (@grid-gutter-width / 2);
 		margin-bottom: (@grid-gutter-width / 2);
@@ -31,13 +32,13 @@
 
 	.affiliation-col-4 {
 		@media (min-width: @screen-sm-min) {
-			flex-basis: (4 / 12) * 100%;;
+			width: (4 / 12) * 100%;
 		}
 	}
 	
 	.affiliation-col-8 {
 		@media (min-width: @screen-sm-min) {
-			flex-basis: (8 / 12) * 100%;
+			width: (8 / 12) * 100%;
 		}
 	}
 
@@ -47,3 +48,9 @@
 			justify-content: flex-end;
 		}
 	}
+
+	.affiliation-input-feedback {
+		height: @input-height-base;
+		padding: @padding-base-vertical;
+		margin: 0;
+	}