Overleaf/services/web/modules/user-activate/app/views/user/activate.pug

extends ../../../../../app/views/layout-marketing

block content
	main.content.content-alt#main-content
		.container
			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					.alert.alert-success #{translate("nearly_activated")}
			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					.card
						.page-header
							h1 #{translate("please_set_a_password")}
						form(
							data-ol-async-form
							name="activationForm",
							action="/user/password/set",
							method="POST",
						)
							div(data-ol-form-messages)

							div.alert.alert-danger(
								hidden
								role="alert"
								aria-live="assertive"
								data-ol-custom-form-message='token-expired'
							)
								| #{translate("activation_token_expired")}

							div.alert.alert-danger(
								hidden
								role="alert"
								aria-live="assertive"
								data-ol-custom-form-message='invalid-password'
							)
								| #{translate('invalid_password')}

							input(name='_csrf', type='hidden', value=csrfToken)
							input(
								type="hidden",
								name="passwordResetToken",
								value=token
							)

							.form-group
								label(for='email') #{translate("email")}
								input.form-control(
									aria-label="email",
									type='email',
									name='email',
									placeholder="email@example.com",
									value=email
									required,
									disabled
								)
							.form-group
								label(for='password') #{translate("password")}
								input.form-control#passwordField(
									type='password',
									name='password',
									placeholder="********",
									autocomplete="new-password",
									autofocus,
									required,
									minlength=settings.passwordStrengthOptions.length.min,
									maxlength=settings.passwordStrengthOptions.length.max
								)
							.actions
								button.btn.btn-primary(
									type='submit',
									data-ol-disabled-inflight
									aria-label=translate('activate')
								)
									span(data-ol-inflight="idle")
										| #{translate('activate')}
									span(hidden data-ol-inflight="pending")
										| #{translate('activating')}…