Make project invite notification dynamic and accept via ajax request

Needs translations:

  "joining": "Joining",
  "notification_project_invite_message": "<b>{{ userName }}</b> would like you to join <b>{{ projectName }}</b>",
  "notification_project_invite_accepted_message": "You've joined <b>{{ projectName }}</b>",
  "open_project": "Open Project"

services/web/app/coffee/Features/Collaborators/CollaboratorsInviteController.coffee

@@ -121,4 +121,7 @@ module.exports = CollaboratorsInviteController =
 				return next(err)
 			EditorRealTimeController.emitToRoom projectId, 'project:membership:changed', {invites: true, members: true}
 			AnalyticsManger.recordEvent(currentUser._id, "project-invite-accept", {inviteId:inviteId, projectId:projectId})
-			res.redirect "/project/#{projectId}"
+			if req.xhr
+				res.sendStatus 204 #  Done async via project page notification
+			else
+				res.redirect "/project/#{projectId}"

services/web/app/views/project/list/notifications.jade

@@ -4,14 +4,31 @@ span(ng-controller="NotificationsController").userNotifications
 		ng-cloak
 	)
 		li.notification_entry(
-			ng-repeat="unreadNotification in notifications",
+			ng-repeat="notification in notifications",
 		)
-			.row(ng-hide="unreadNotification.hide")
+			.row(ng-hide="notification.hide")
 				.col-xs-12
-					.alert.alert-info
+					.alert.alert-info(ng-if="notification.templateKey == 'notification_project_invite'", ng-controller="ProjectInviteNotificationController")
 						div.notification_inner
-							span(ng-bind-html="unreadNotification.html").notification_body
+							.notification_body(ng-show="!notification.accepted")
+								| !{translate("notification_project_invite_message")}
+								a.pull-right.btn.btn-sm.btn-info(href, ng-click="accept()", ng-disabled="notification.inflight")
+									span(ng-show="!notification.inflight") #{translate("join_project")}
+									span(ng-show="notification.inflight")
+										i.fa.fa-fw.fa-spinner.fa-spin
+										|  
+										| #{translate("joining")}...
+							.notification_body(ng-show="notification.accepted")
+								| !{translate("notification_project_invite_accepted_message")}
+								a.pull-right.btn.btn-sm.btn-info(href="/project/{{ notification.messageOpts.projectId }}") #{translate("open_project")}
 							span().notification_close
-								button(ng-click="dismiss(unreadNotification)").close.pull-right
+								button(ng-click="dismiss(notification)").close.pull-right
+									span(aria-hidden="true") ×
+									span.sr-only #{translate("close")}
+					.alert.alert-info(ng-if="notification.templateKey != 'notification_project_invite'")
+						div.notification_inner
+							span(ng-bind-html="notification.html").notification_body
+							span().notification_close
+								button(ng-click="dismiss(notification)").close.pull-right
 									span(aria-hidden="true") ×
 									span.sr-only #{translate("close")}

services/web/public/coffee/main/project-list/notifications-controller.coffee

@@ -15,3 +15,24 @@ define [
 			})
 				.success (data) ->
 					notification.hide = true
+					
+	App.controller "ProjectInviteNotificationController", ($scope, $http) ->
+		# Shortcuts for translation keys
+		$scope.projectName = $scope.notification.messageOpts.projectName
+		$scope.userName = $scope.notification.messageOpts.userName
+
+		$scope.accept = () ->
+			$scope.notification.inflight = true
+			$http({
+				url: "/project/#{$scope.notification.messageOpts.projectId}/invite/#{$scope.notification.messageOpts.token}/accept"
+				method: "POST"
+				headers:
+					"X-Csrf-Token": window.csrfToken
+					"X-Requested-With": "XMLHttpRequest"
+			})
+				.success () ->
+					$scope.notification.inflight = false
+					$scope.notification.accepted = true
+				.error () ->
+					$scope.notification.inflight = false
+					$scope.notification.error = true