overleaf/services/web/app/views/user/settings.pug

extends ../layout

block content
	.content.content-alt
		.container
			.row
				.col-md-12.col-lg-10.col-lg-offset-1
					.card
						.page-header
							h1  #{translate("account_settings")}
						.account-settings(ng-controller="AccountSettingsController", ng-cloak)
							form-messages(for="settingsForm")
								.alert.alert-success(ng-show="settingsForm.response.success")
									|  #{translate("thanks_settings_updated")}
							form-messages(for="changePasswordForm")
							.container-fluid
								form.row(
									ng-controller="UserAffiliationsController"
									name="affiliationsForm"
								)
									.col-md-12
										h3 Emails and Affiliations
										p.small Add additional email addresses to your account to access any upgrades your university or institution has, to make it easier for collaborators to find you, and to make sure you can recover your account.

										table.table.affiliations-table
											thead
												tr
													th.affiliations-table-email Email
													th.affiliations-table-institution Institution and role
													th.affiliations-table-inline-actions
											tbody
												tr(
													ng-repeat="userEmail in userEmails"
												)
													td {{ userEmail.email + (userEmail.default ? ' (default)' : '') }}
													td {{ userEmail.institution }}
													td 
														a(
															href
															ng-if="!userEmail.default"
															ng-click="setDefaultUserEmail(userEmail.email)"
														) Make default
														br
														a(
															href
															ng-if="!userEmail.default"
															ng-click="removeUserEmail(userEmail.email)"
														) Remove
												tr.affiliations-table-highlighted-row(
													ng-if="ui.isLoadingEmails"
												)
													td.text-center(colspan="3") 
														i.fa.fa-fw.fa-spin.fa-refresh
														|  Loading...
												
												tr(
													ng-if="!ui.showAddEmailUI && !ui.isLoadingEmails"
												)
													td(colspan="3")
														a(
															href
															ng-click="showAddEmailForm()"
														) Add another email

												tr.affiliations-table-highlighted-row(
													ng-if="ui.showAddEmailUI"
												)
													td
														.affiliations-form-group
															input-suggestions(
																ng-model="newAffiliation.email"
																ng-model-options="{ allowInvalid: true }"
																get-suggestion="getEmailSuggestion(userInput)"
																on-blur="handleEmailInputBlur()"
																input-id="affilitations-email"
																input-name="affilitationsEmail"
																input-placeholder="e.g. johndoe@mit.edu"
																input-type="email"
																input-required="true"
															)
													td
														div(
															ng-if="newAffiliation.university && !ui.showManualUniversitySelectionUI"
														)
															| {{ newAffiliation.university.name }} (
															a(
																href
																ng-click="selectUniversityManually();"
															) change
															| )
														div(
															ng-if="!newAffiliation.university && !ui.isValidEmail && !ui.showManualUniversitySelectionUI"
														) Start by adding your email address.
														div(
															ng-if="!newAffiliation.university && ui.isValidEmail && !ui.isBlacklistedEmail && !ui.showManualUniversitySelectionUI"
														)
															| Is your email affiliated with an institution? 
															br
															a(
																href
																ng-click="selectUniversityManually();"
															) Let us know
														div(
															ng-if="ui.showManualUniversitySelectionUI"
														ss)
															.affiliations-form-group
																ui-select(
																	ng-model="newAffiliation.country"
																)
																	ui-select-match(
																		placeholder="Country"
																	) {{ $select.selected.name }}
																	ui-select-choices(
																		repeat="country in countries | filter: $select.search"
																	)
																		span(
																			ng-bind="country.name"
																		s)
															.affiliations-form-group
																ui-select(
																	ng-model="newAffiliation.university"
																	ng-disabled="!newAffiliation.country"
																	tagging="addUniversityToSelection"
																	tagging-label="false"
																)
																	ui-select-match(
																		placeholder="Institution"
																	) {{ $select.selected.name }}
																	ui-select-choices(
																		repeat="university in universities | filter: $select.search"
																	)
																		span(
																			ng-bind="university.name"
																		)
															.affiliations-form-group(
																ng-if="ui.isValidEmail && newAffiliation.university"
															)
																input.form-control(
																	type="text"
																	id="affiliations-role"
																	placeholder="Role"
																	ng-model="newAffiliation.role"
																s)
															.affiliations-form-group(
																ng-if="ui.isValidEmail && newAffiliation.university"
															)
																input.form-control(
																	type="text"
																	id="affiliations-department"
																	placeholder="Department"
																	ng-model="newAffiliation.department"
																	ng-if="!newAffiliation.university.departments || newAffiliation.university.departments.length === 0"
																)
																ui-select(
																	ng-model="newAffiliation.department"
																	ng-if="newAffiliation.university.departments.length > 0"
																	tagging
																	tagging-label="false"
																)
																	ui-select-match(
																		placeholder="Department"
																	) {{ $select.selected }}
																	ui-select-choices(
																		repeat="department in getUniqueUniversityDepartments() | filter: $select.search"
																	)
																		span(
																			ng-bind="department"
																		)
													td
														button.btn.btn-primary(
															ng-disabled="affiliationsForm.$invalid || ui.isAddingNewEmail"
															ng-click="addNewEmail()"
														)
															span(
																ng-if="!ui.isAddingNewEmail"
															) Add new email
															span(
																ng-if="ui.isAddingNewEmail"
															)
																i.fa.fa-fw.fa-spin.fa-refresh
																|  Adding...
										hr

								.row
									.col-md-5
										h3  #{translate("update_account_info")}
										form(async-form="settings", name="settingsForm", method="POST", action="/user/settings", novalidate)
											input(type="hidden", name="_csrf", value=csrfToken)
											if !externalAuthenticationSystemUsed()
												.form-group
													label(for='email')  #{translate("email")}
													input.form-control(
														type='email',
														name='email',
														placeholder="email@example.com"
														required,
														ng-model="email",
														ng-init="email = "+JSON.stringify(user.email),
														ng-model-options="{ updateOn: 'blur' }"
													)
													span.small.text-primary(ng-show="settingsForm.email.$invalid && settingsForm.email.$dirty")
														|  #{translate("must_be_email_address")}
											else
												// show the email, non-editable
												.form-group
													label.control-label #{translate("email")}
													div.form-control(readonly="true") #{user.email}

											if shouldAllowEditingDetails
												.form-group
													label(for='firstName').control-label #{translate("first_name")}
													input.form-control(
														type='text',
														name='first_name',
														value=user.first_name
														ng-non-bindable
													)
												.form-group
													label(for='lastName').control-label #{translate("last_name")}
													input.form-control(
														type='text',
														name='last_name',
														value=user.last_name
														ng-non-bindable
													)
												.actions
													button.btn.btn-primary(
														type='submit',
														ng-disabled="settingsForm.$invalid"
													)  #{translate("update")}
											else
												.form-group
													label.control-label #{translate("first_name")}
													div.form-control(readonly="true") #{user.first_name}
												.form-group
													label.control-label #{translate("last_name")}
													div.form-control(readonly="true") #{user.last_name}

									if !externalAuthenticationSystemUsed()
										.col-md-5.col-md-offset-1
											h3  #{translate("change_password")}
											form(async-form="changepassword", name="changePasswordForm", action="/user/password/update", method="POST", novalidate)
												input(type="hidden", name="_csrf", value=csrfToken)
												.form-group
													label(for='currentPassword') #{translate("current_password")}
													input.form-control(
														type='password',
														name='currentPassword',
														placeholder='*********',
														ng-model="currentPassword",
														required
													)
													span.small.text-primary(ng-show="changePasswordForm.currentPassword.$invalid && changePasswordForm.currentPassword.$dirty")
														| #{translate("required")}
												.form-group
													label(for='newPassword1') #{translate("new_password")}
													input.form-control(
														id='passwordField',
														type='password',
														name='newPassword1',
														placeholder='*********',
														ng-model="newPassword1",
														required,
														complex-password
													)
													span.small.text-primary(ng-show="changePasswordForm.newPassword1.$error.complexPassword && changePasswordForm.newPassword1.$dirty", ng-bind-html="complexPasswordErrorMessage") 
												.form-group
													label(for='newPassword2') #{translate("confirm_new_password")}
													input.form-control(
														type='password',
														name='newPassword2',
														placeholder='*********',
														ng-model="newPassword2",
														equals="passwordField"
													) 
													span.small.text-primary(ng-show="changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$dirty")
														| #{translate("doesnt_match")} 
													span.small.text-primary(ng-show="!changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$invalid && changePasswordForm.newPassword2.$dirty")
														| #{translate("invalid_password")} 
												.actions
													button.btn.btn-primary(
														type='submit',
														ng-disabled="changePasswordForm.$invalid"
													) #{translate("change")}

							

							| !{moduleIncludes("userSettings", locals)}

							//- The beta program doesn't make much sense to include while v2 is going
							//- but we may want to add it back in later
							//- hr
							//-
							//- h3
							//- 	| #{translate("sharelatex_beta_program")}
							//-
							//- if (user.betaProgram)
							//- 	p.small
							//- 		| #{translate("beta_program_already_participating")}
							//-
							//- div
							//- 	a(id="beta-program-participate-link" href="/beta/participate") #{translate("manage_beta_program_membership")}

							hr
	
							h3
								| #{translate("sessions")}

							div
								a(id="sessions-link", href="/user/sessions") #{translate("manage_sessions")}

							hr

							if !externalAuthenticationSystemUsed()

								p.small
									| #{translate("newsletter_info_and_unsubscribe")} 
									a(
										href,
										ng-click="unsubscribe()",
										ng-show="subscribed && !unsubscribing"
									) #{translate("unsubscribe")}
									span(
										ng-show="unsubscribing"
									)
										i.fa.fa-spin.fa-refresh
										| #{translate("unsubscribing")}
									span.text-success(
										ng-show="!subscribed"
									)
										i.fa.fa-check
										| #{translate("unsubscribed")}
				
									p #{translate("need_to_leave")} 
										a(href, ng-click="deleteAccount()")  #{translate("delete_your_account")}


	script(type='text/ng-template', id='deleteAccountModalTemplate')
		.modal-header
			h3 #{translate("delete_account")}
		div.modal-body#delete-account-modal
			p !{translate("delete_account_warning_message_3")}
			form(novalidate, name="deleteAccountForm")
				label #{translate('email')}
				input.form-control(
					type="text",
					autocomplete="off",
					placeholder="",
					ng-model="state.deleteText",
					focus-on="open",
					ng-keyup="checkValidation()"
				)
				label #{translate('password')}
				input.form-control(
					type="password",
					autocomplete="off",
					placeholder="",
					ng-model="state.password",
					ng-keyup="checkValidation()"
				)
			div(ng-if="state.error")
				div.alert.alert-danger
					| #{translate('generic_something_went_wrong')}
			div(ng-if="state.invalidCredentials")
				div.alert.alert-danger
					| #{translate('email_or_password_wrong_try_again')}
		.modal-footer
			button.btn.btn-default(
				ng-click="cancel()"
			) #{translate("cancel")}
			button.btn.btn-danger(
				ng-disabled="!state.isValid || state.inflight"
				ng-click="delete()"
			)
				span(ng-hide="state.inflight") #{translate("delete")}
				span(ng-show="state.inflight") #{translate("deleting")}...
	
	script(type='text/javascript').
		window.passwordStrengthOptions = !{JSON.stringify(settings.passwordStrengthOptions || {})}