Add basic affiliations styles, data services and controller.

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

@@ -0,0 +1,53 @@
+define [
+	"base"
+], (App) ->
+	App.controller "UserAffiliationsController", ["$scope", "UserAffiliationsDataService", "$q", ($scope, UserAffiliationsDataService, $q) ->
+		$scope.countries = []
+		$scope.universities = []
+		$scope.newAffiliation =
+			email: ""
+			country: null
+			university: null
+			role: null
+			department: null
+			autoDetectMode: true
+
+		EMAIL_REGEXP = /([^@]+)@(.+)/
+
+		_matchEmail = (email) ->
+			match = email.match EMAIL_REGEXP
+			if match?
+				{ local: match[1], domain: match[2] }
+			else
+				{ local: null, domain: null }
+
+
+		$scope.addUniversityToSelection = (universityName) -> 
+			{ name: universityName, country_code: $scope.newAffiliation.country.code }
+
+		$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}"
+					.catch () -> 
+						$scope.newAffiliation.university = null
+						$scope.newAffiliation.department = null
+						$q.reject null
+			else 
+				$q.resolve null
+
+		UserAffiliationsDataService
+			.getCountries()
+			.then (countries) -> $scope.countries = countries
+
+		$scope.$watch "newAffiliation.country", (newSelectedCountry, prevSelectedCountry) ->
+			if newSelectedCountry? and newSelectedCountry != prevSelectedCountry
+				$scope.newAffiliation.university = null
+				UserAffiliationsDataService
+					.getUniversitiesFromCountry(newSelectedCountry)
+					.then (universities) -> $scope.universities = universities
+	]

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

@@ -10,3 +10,40 @@
 		margin-bottom: 4px;
 	}
 }
+
+
+.affiliations-form-row {
+	display: flex;
+	flex-wrap: wrap;
+	margin-left: -(@grid-gutter-width / 2);
+	margin-right: -(@grid-gutter-width / 2);
+	@media (min-width: @screen-sm-min) {
+		align-items: flex-end;
+	}
+}
+	.affiliation-col-4,
+	.affiliation-col-8 {
+		flex: 0 0 100%;
+		padding-left: (@grid-gutter-width / 2);
+		padding-right: (@grid-gutter-width / 2);
+		margin-bottom: (@grid-gutter-width / 2);
+	}
+
+	.affiliation-col-4 {
+		@media (min-width: @screen-sm-min) {
+			flex-basis: (4 / 12) * 100%;;
+		}
+	}
+	
+	.affiliation-col-8 {
+		@media (min-width: @screen-sm-min) {
+			flex-basis: (8 / 12) * 100%;
+		}
+	}
+
+	.affiliation-col-align-right {
+		@media (min-width: @screen-sm-min) {
+			display: flex;
+			justify-content: flex-end;
+		}
+	}