Overleaf/services/web/app/views/project/editor/share.jade

script(type='text/ng-template', id='shareProjectModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("share_project")}
	.modal-body.modal-body-share
		.container-fluid
			.row.public-access-level(ng-show="project.publicAccesLevel == 'private'")
				.col-xs-12.text-center
					| #{translate("this_project_is_private")}
					|   
					a(
						href
						ng-click="openMakePublicModal()"
					) #{translate("make_public")}
			.row.public-access-level(ng-show="project.publicAccesLevel != 'private'")
				.col-xs-12.text-center
					strong(ng-if="project.publicAccesLevel == 'readAndWrite'") #{translate("this_project_is_public")}
					strong(ng-if="project.publicAccesLevel == 'readOnly'") #{translate("this_project_is_public_read_only")}
					|   
					a(
						href
						ng-click="openMakePrivateModal()"
					) #{translate("make_private")}
			.row.project-member
				.col-xs-8 {{ project.owner.email }}
				.text-left(
					ng-class="{'col-xs-3': project.members.length > 0, 'col-xs-4': project.members.length == 0}"
				) #{translate("owner")}
			.row.project-member(ng-repeat="member in project.members")
				.col-xs-8 {{ member.email }}
				.col-xs-3.text-left
					span(ng-show="member.privileges == 'readAndWrite'") #{translate("can_edit")}
					span(ng-show="member.privileges == 'readOnly'") #{translate("read_only")}
				.col-xs-1
					a(
						href
						tooltip="#{translate('remove_collaborator')}"
						tooltip-placement="bottom"
						ng-click="removeMember(member)"
					)
						i.fa.fa-times
			.row.project-invite(ng-repeat="invite in state.invites")
				.col-xs-8 {{ invite.email }} 
					span.label.label-primary #{translate("pending")}
				.col-xs-3.text-left
					// todo: get invite privileges
					span(ng-show="invite.privileges == 'readAndWrite'") #{translate("can_edit")}
					span(ng-show="invite.privileges == 'readOnly'") #{translate("read_only")}
				.col-xs-1
					a(
						href
						tooltip="#{translate('revoke_invite')}"
						tooltip-placement="bottom"
						ng-click="revokeInvite(invite)"
					)
						i.fa.fa-times
			.row.invite-controls
				form(ng-show="canAddCollaborators")
					.small #{translate("share_with_your_collabs")}
					.form-group
						tags-input(
							template="shareTagTemplate"
							placeholder="#{settings.customisation.shareProjectPlaceholder || 'joe@example.com, sue@example.com, ...'}"
							ng-model="inputs.contacts"
							focus-on="open"
							display-property="display"
							add-on-paste="true"
							replace-spaces-with-dashes="false"
							type="email"
						)
							auto-complete(
								source="filterAutocompleteUsers($query)"
								template="shareAutocompleteTemplate"
								display-property="email"
								min-length="0"
							)
					.form-group
						.pull-right
							select.privileges.form-control(
								ng-model="inputs.privileges"
								name="privileges"
							)
								option(value="readAndWrite") #{translate("can_edit")}
								option(value="readOnly") #{translate("read_only")}
							|   
							//- We have to use mousedown here since click has issues with the
							//- blur handler in tags-input sometimes changing its height and
							//- moving this button, preventing the click registering.
							button.btn.btn-info(
								type="submit"
								ng-mousedown="addMembers()"
							) #{translate("share")}
				div(ng-hide="canAddCollaborators")
					p.text-center #{translate("need_to_upgrade_for_more_collabs")}. Also:
					.row
						.col-md-8.col-md-offset-2
							ul.list-unstyled
								li 
									i.fa.fa-check  
									| #{translate("unlimited_projects")}
								
								li
									i.fa.fa-check  
									| #{translate("collabs_per_proj", {collabcount:'Multiple'})}
								
								li 
									i.fa.fa-check  
									| #{translate("full_doc_history")}
								
								li 
									i.fa.fa-check  
									| #{translate("sync_to_dropbox")}

								li 
									i.fa.fa-check  
									| #{translate("sync_to_github")}

								li  
									i.fa.fa-check  
									|#{translate("compile_larger_projects")}

					p.text-center.row-spaced-thin(ng-controller="FreeTrialModalController")
						a.btn.btn-success(
							href
							ng-class="buttonClass"
							sixpack-convert="track_changes_feature_info"
							ng-click="startFreeTrial('projectMembers')"
						) #{translate("start_free_trial")}

					p.small(ng-show="startedFreeTrial")
						| #{translate("refresh_page_after_starting_free_trial")}.

	.modal-footer
		.modal-footer-left
			i.fa.fa-refresh.fa-spin(ng-show="state.inflight")
			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
		button.btn.btn-default(
			ng-click="done()"
		) #{translate("close")}

script(type="text/ng-template", id="makePublicModalTemplate")
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("make_project_public")}?
	.modal-body.modal-body-share
		p #{translate("make_project_public_consequences")}
		p
			select.form-control(
				ng-model="inputs.privileges"
				name="privileges"
			)
				option(value="readAndWrite") #{translate("allow_public_editing")}
				option(value="readOnly")     #{translate("allow_public_read_only")}
	.modal-footer
		button.btn.btn-default(
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-info(
			ng-click="makePublic()"
		) #{translate("make_public")}

script(type="text/ng-template", id="makePrivateModalTemplate")
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("make_project_private")}?
	.modal-body.modal-body-share
		p #{translate("make_project_private_consequences")}
	.modal-footer
		button.btn.btn-default(
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-info(
			ng-click="makePrivate()"
		) #{translate("make_private")}

script(type="text/ng-template", id="shareTagTemplate")
	.tag-template
		span(ng-if="data.type")
			i.fa.fa-fw(ng-class="{'fa-user': data.type != 'group', 'fa-group': data.type == 'group'}")
			| 
		span {{$getDisplayText()}}
		| 
		a(href, ng-click="$removeTag()").remove-button
			i.fa.fa-fw.fa-close

script(type="text/ng-template", id="shareAutocompleteTemplate")
	.autocomplete-template
		div(ng-if="data.type == 'user'")
			i.fa.fa-fw.fa-user
			| 
			span(ng-bind-html="$highlight(data.display)")
		div(ng-if="data.type == 'group'")
			i.fa.fa-fw.fa-group
			| 
			span(ng-bind-html="$highlight(data.name)")
			span.subdued.small(ng-show="data.member_count")  ({{ data.member_count }} members)