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

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

			if isRestrictedTokenMember
				//- Token-based access
				.row.public-access-level
					.col-xs-12.access-token-display-area
						div.access-token-wrapper
							strong #{translate('anyone_with_link_can_view')}
							pre.access-token {{ readOnlyTokenLink }}

			if !isRestrictedTokenMember
				//- Private (with token-access available)
				.row.public-access-level(ng-show="isAdmin && project.publicAccesLevel == 'private'")
					.col-xs-12.text-center
						| #{translate('link_sharing_is_off')}
						|   
						a(
							href
							ng-click="makeTokenBased()"
						) #{translate('turn_on_link_sharing')}
						span   
						a(
							href="/learn/how-to/What_is_Link_Sharing%3F"
							target="_blank"
						)
							i.fa.fa-question-circle(
								tooltip=translate('learn_more_about_link_sharing')
							)

				//- Token-based access
				.row.public-access-level(ng-show="isAdmin && project.publicAccesLevel == 'tokenBased'")
					.col-xs-12.text-center
						strong
							| #{translate('link_sharing_is_on')}.
							|   
						a(
							href
							ng-click="makePrivate()"
						) #{translate('turn_off_link_sharing')}
						span   
						a(
							href="/learn/how-to/What_is_Link_Sharing%3F"
							target="_blank"
						)
							i.fa.fa-question-circle(
								tooltip=translate('learn_more_about_link_sharing')
							)

					.col-xs-12.access-token-display-area
						div.access-token-wrapper
							strong #{translate('anyone_with_link_can_edit')}
							pre.access-token(ng-show="readAndWriteTokenLink") {{ readAndWriteTokenLink }}
							pre.access-token(ng-hide="readAndWriteTokenLink") #{translate('loading')}...
						div.access-token-wrapper
							strong #{translate('anyone_with_link_can_view')}
							pre.access-token(ng-show="readOnlyTokenLink") {{ readOnlyTokenLink }}
							pre.access-token(ng-hide="readOnlyTokenLink") #{translate('loading')}...

				//- legacy public-access
				.row.public-access-level(ng-show="isAdmin && (project.publicAccesLevel == 'readAndWrite' || project.publicAccesLevel == 'readOnly')")
					.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="makePrivate()"
						) #{translate("make_private")}

				.row.project-member
					.col-xs-7 {{ project.owner.email }}
					.text-left.col-xs-3 #{translate("owner")}
				form.form-horizontal(
					ng-if="isAdmin"
					ng-repeat="member in project.members"
					ng-controller="ShareProjectModalMemberRowController"
				)
					.row.form-group.project-member
						.col-xs-7.form-control-static {{ member.email }}
						.col-xs-3
							select.privileges.form-control.input-sm(name="privileges" ng-model="form.privileges")
								option(value="readAndWrite") #{translate("can_edit")}
								option(value="readOnly") #{translate("read_only")}
						.col-xs-2.form-control-static.text-center(ng-hide="form.isModified()")
							a(
								href
								tooltip=translate('remove_collaborator')
								tooltip-placement="bottom"
								ng-click="removeMember(member)"
								aria-label=translate('remove_collaborator')
							)
								i.fa.fa-times
						.col-xs-2.text-center(ng-show="form.isModified()")
							button.btn.btn-sm.btn-success(
								type="submit"
								ng-click="form.submit()"
							) #{translate("change")}
							.text-sm
								| #{translate("or")}
								|
								button.btn.btn-inline-link(ng-click="form.reset()") #{translate("cancel").toLowerCase()}

				.row.project-member(ng-if="!isAdmin" ng-repeat="member in project.members")
					.col-xs-7 {{ member.email }}
					.col-xs-3
						span(ng-if="member.privileges == 'readAndWrite'") #{translate("can_edit")}
						span(ng-if="member.privileges == 'readOnly'") #{translate("read_only")}
				.row.project-invite(ng-repeat="invite in project.invites")
					.col-xs-7 {{ invite.email }} 
						div.small
							| #{translate("invite_not_accepted")}. 
							button.btn.btn-inline-link(
								ng-show="isAdmin",
								ng-click="resendInvite(invite, $event)"
							) #{translate("resend")}
					.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-2.text-center(ng-if="isAdmin")
						a(
							href
							tooltip=translate('revoke_invite')
							tooltip-placement="bottom"
							ng-click="revokeInvite(invite)"
						)
							i.fa.fa-times
				.row.invite-controls(ng-show="isAdmin")
					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"
								add-on-enter="false"
								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()"
									ng-keyup="$event.keyCode == 13 ? addMembers() : null"
								) #{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"
								ng-click="startFreeTrial('projectMembers')"
							) #{translate("start_free_trial")}

						p.small(ng-show="startedFreeTrial")
							| #{translate("refresh_page_after_starting_free_trial")}
				.row.public-access-level.public-access-level--notice(ng-show="!isAdmin")
					.col-xs-12.text-center(ng-show="project.publicAccesLevel == 'private'") #{translate("to_add_more_collaborators")}
					.col-xs-12.text-center(ng-show="project.publicAccesLevel == 'tokenBased'") #{translate("to_change_access_permissions")}
	.modal-footer.modal-footer-share
		.modal-footer-left
			i.fa.fa-refresh.fa-spin(ng-show="state.inflight")
			span.text-danger.error(ng-show="state.error")
				span(ng-switch="state.errorReason")
					span(ng-switch-when="cannot_invite_non_user")
						| #{translate("cannot_invite_non_user")}
					span(ng-switch-when="cannot_verify_user_not_robot")
						| #{translate("cannot_verify_user_not_robot")}
					span(ng-switch-when="cannot_invite_self")
						| #{translate("cannot_invite_self")}
					span(ng-switch-when="invalid_email")
						| #{translate("invalid_email")}
					span(ng-switch-default)
						| #{translate("generic_something_went_wrong")}
		.modal-footer-right
			button.btn.btn-default(
				ng-click="done()"
			) #{translate("close")}

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)