Overleaf/services/web/app/views/user/settings.jade

extends ../layout

block content
	.content.content-alt
		.container
			.row
				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
					.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
								.row
									.col-md-5
										h3  #{translate("update_account_info")}
										form(async-form="settings", name="settingsForm", action="/user/settings", novalidate)
											input(type="hidden", name="_csrf", value=csrfToken)
											.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")}
											.form-group
												label(for='firstName').control-label #{translate("first_name")}
												input.form-control(
													type='text',
													name='first_name',
													value=user.first_name
												)
											.form-group
												label(for='lastName').control-label #{translate("last_name")}
												input.form-control(
													type='text',
													name='last_name',
													value=user.last_name
												)
											.actions
												button.btn.btn-primary(
													type='submit',
													ng-disabled="settingsForm.$invalid"
												)  #{translate("update")}

									.col-md-5.col-md-offset-1
										h3  #{translate("change_password")}
										form(async-form="changepassword", name="changePasswordForm", action="/user/password/update", 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='newPassword1',
													type='password',
													name='newPassword1',
													placeholder='*********',
													ng-model="newPassword1",
													required
												)
												span.small.text-primary(ng-show="changePasswordForm.newPassword1.$invalid && changePasswordForm.newPassword1.$dirty")
													| #{translate("required")}
											.form-group
												label(for='newPassword2') #{translate("confirm_new_password")}
												input.form-control(
													type='password',
													name='newPassword2',
													placeholder='*********',
													ng-model="newPassword2",
													equals="newPassword1"
												)
												span.small.text-primary(ng-show="changePasswordForm.newPassword2.$invalid && changePasswordForm.newPassword2.$dirty")
													| #{translate("doesnt_match")}
											.actions
												button.btn.btn-primary(
													type='submit',
													ng-disabled="changePasswordForm.$invalid"
												) #{translate("change")}

							hr.soften

							h3 #{translate("dropbox_integration")} 
								span.small
									a(href='/help/kb/dropbox-2') (#{translate("learn_more")})
							- if(!userHasDropboxFeature)
										.alert.alert-info #{translate("dropbox_is_premium")}    
											a.btn.btn-info(href='/user/subscription/plans') #{translate("upgrade")}
									- else if(userIsRegisteredWithDropbox)
										.alert.alert-success #{translate("account_is_linked")}
										row
											a(href='/dropbox/unlink').btn #{translate("unlink_dropbox")}
									- else
										a.btn.btn-info(href='/dropbox/beginAuth') #{translate("link_to_dropbox")}

							hr.soften

							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")}
		.modal-body
			p !{translate("delete_account_warning_message")}
			form(novalidate, name="deleteAccountForm")
				input.form-control(
					type="text",
					placeholder="",
					ng-model="state.deleteText",
					focus-on="open",
					ng-keyup="checkValidation()"
				)
		.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")}...