Show unconfirmed email status in UI and add link to resend confirmation

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

@@ -17,27 +17,37 @@ form.row(
 				tr(
 					ng-repeat="userEmail in userEmails"
 				)
-					td {{ userEmail.email + (userEmail.default ? ' (default)' : '') }}
+					td
+						| {{ userEmail.email + (userEmail.default ? ' (default)' : '') }}
+						div(ng-show="!userEmail.confirmedAt").small
+							strong #{translate('unconfirmed')}.
+							|
+							| #{translate('please_check_your_inbox')}.
+							br
+							a(
+								href,
+								ng-click="resendConfirmationEmail(userEmail)"
+							) #{translate('resend_confirmation_email')}
 					td 
 						div(ng-if="userEmail.affiliation.institution") 
 							div {{ userEmail.affiliation.institution.name }}
-							a(
-								href
-								ng-if="!isChangingAffiliation(userEmail.email) && !userEmail.affiliation.role && !userEmail.affiliation.department"
-								ng-click="changeAffiliation(userEmail);"
-							)  #{translate("add_role_and_department")}
-							div(
+							span.small
+								a(
+									href
+									ng-if="!isChangingAffiliation(userEmail.email) && !userEmail.affiliation.role && !userEmail.affiliation.department"
+									ng-click="changeAffiliation(userEmail);"
+								)  #{translate("add_role_and_department")}
+							div.small(
 								ng-if="!isChangingAffiliation(userEmail.email) && (userEmail.affiliation.role || userEmail.affiliation.department)"
 							)
 								span(ng-if="userEmail.affiliation.role") {{ userEmail.affiliation.role }}
 								span(ng-if="userEmail.affiliation.role && userEmail.affiliation.department") , 
 								span(ng-if="userEmail.affiliation.department") {{ userEmail.affiliation.department }}
-								|  (
+								br
 								a(
 									href
 									ng-click="changeAffiliation(userEmail);"
 								) #{translate("change")}
-								| )
 							.affiliation-change-container(
 								ng-if="isChangingAffiliation(userEmail.email)"
 							)
@@ -46,7 +56,7 @@ form.row(
 									show-university-and-country="false"
 									show-role-and-department="true"
 								)
-								.affiliation-change-actions
+								.affiliation-change-actions.small
 									a(
 										href
 										ng-click="saveAffiliationChange();"
@@ -56,18 +66,28 @@ form.row(
 										href
 										ng-click="cancelAffiliationChange();"
 									) #{translate("save_or_cancel-cancel")}
-					td 
-						a.affiliations-table-inline-action(
-							href
-							ng-if="!userEmail.default"
+					td.affiliations-table-inline-actions
+						// Disabled buttons don't work with tooltips, due to pointer-events: none,
+						// so create a wrapper for the tooltip
+						div(
+							style="display: inline-block"
+							tooltip=translate("please_confirm_your_email_before_making_it_default")
+							ng-if="!userEmail.default && !userEmail.confirmedAt"
+						)
+							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-click="setDefaultUserEmail(userEmail)"
-						)  #{translate("make_default")}
-						br
-						a.affiliations-table-inline-action(
-							href
+						) #{translate("make_default")}
+						|  
+						button.btn.btn-sm.btn-danger.affiliations-table-inline-action(
 							ng-if="!userEmail.default"
 							ng-click="removeUserEmail(userEmail)"
-						) #{translate("remove")}
+							tooltip=translate("remove")
+						)
+							i.fa.fa-fw.fa-trash
 				tr.affiliations-table-highlighted-row(
 					ng-if="ui.isLoadingEmails"
 				)
@@ -100,15 +120,17 @@ form.row(
 								input-required="true"
 							)
 					td
-						.affiliations-table-label(
+						p.affiliations-table-label(
 							ng-if="newAffiliation.university && !ui.showManualUniversitySelectionUI"
 						)
-							| {{ newAffiliation.university.name }} (
-							a(
-								href
-								ng-click="selectUniversityManually();"
-							) #{translate("change")}
-							| )
+							| {{ newAffiliation.university.name }}
+							span.small
+								|  (
+								a(
+									href
+									ng-click="selectUniversityManually();"
+								) #{translate("change")}
+								| )
 						.affiliations-table-label(
 							ng-if="!newAffiliation.university && !ui.isValidEmail && !ui.showManualUniversitySelectionUI"
 						) #{translate("start_by_adding_your_email")}
@@ -127,7 +149,7 @@ form.row(
 							show-role-and-department="ui.isValidEmail && newAffiliation.university"
 						)
 					td
-						button.btn.btn-primary(
+						button.btn.btn-sm.btn-primary(
 							ng-disabled="affiliationsForm.$invalid || ui.isAddingNewEmail"
 							ng-click="addNewEmail()"
 						)

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

@@ -128,6 +128,13 @@ define [
 				.then () -> _getUserEmails()
 				.catch () -> $scope.ui.hasError = true
 
+		$scope.resendConfirmationEmail = (userEmail) ->
+			$scope.ui.isLoadingEmails = true
+			UserAffiliationsDataService
+				.resendConfirmationEmail userEmail.email
+				.then () -> _getUserEmails()
+				.catch () -> $scope.ui.hasError = true
+
 		$scope.acknowledgeError = () ->
 			_reset()
 			_getUserEmails()

services/web/public/coffee/main/affiliations/factories/UserAffiliationsDataService.coffee

@@ -104,6 +104,12 @@ define [
 				_csrf: window.csrfToken
 			}
 
+		resendConfirmationEmail = (email) ->
+			$http.post "/user/emails/resend_confirmation", {
+				email,
+				_csrf: window.csrfToken
+			}
+
 		isDomainBlacklisted = (domain) ->
 			domain.toLowerCase() of domainsBlackList
 
@@ -121,6 +127,7 @@ define [
 			addRoleAndDepartment
 			setDefaultUserEmail
 			removeUserEmail
+			resendConfirmationEmail
 			isDomainBlacklisted
 		}
 	]

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

@@ -24,7 +24,7 @@
 		width: 40%;
 	}
 	.affiliations-table-inline-actions {
-		width: 20%;
+		text-align: right;
 	}
 		.affiliations-table-inline-action {
 			text-transform: capitalize;