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)
							if locals.showAffiliationsUI
								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 
														div(ng-if="userEmail.affiliation.institution") {{ userEmail.affiliation.institution.name }}
														div(ng-if="userEmail.affiliation.role || userEmail.affiliation.department") 
															span(ng-if="userEmail.affiliation.role") {{ userEmail.affiliation.role + ", " }}
															span(ng-if="userEmail.affiliation.department") {{ userEmail.affiliation.department }}
													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.affiliations-table-highlighted-row(
													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
														.affiliations-table-label(
															ng-if="newAffiliation.university && !ui.showManualUniversitySelectionUI"
														)
															| {{ newAffiliation.university.name }} (
															a(
																href
																ng-click="selectUniversityManually();"
															) change
															| )
														.affiliations-table-label(
															ng-if="!newAffiliation.university && !ui.isValidEmail && !ui.showManualUniversitySelectionUI"
														) Start by adding your email address.
														.affiliations-table-label(
															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
														.affiliations-form-group(
															ng-if="ui.showManualUniversitySelectionUI"
														)
															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(
															ng-if="ui.showManualUniversitySelectionUI"
														)
															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"
															)
														.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
							form-messages(for="settingsForm")
								.alert.alert-success(ng-show="settingsForm.response.success")
									|  #{translate("thanks_settings_updated")}
							form-messages(for="changePasswordForm")

							.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 || {})}