{% extends "CHRISTMAS/settings.html" %}

{% block pagetitle %}Security Settings - {{'SITE_NAME' | app_config}}{% endblock %}

{% block content %}
<div class="row">

	<div class="col col-lg-8">

		<div class="settings">

			<h2 class="h5">Email</h2>

			<p class="text-sm text-gray-500">Change the email address used to sign in to your account.</p>
			<div class="settings-section rounded">
				<form	action="/settings/security" method="post">
					<input type="hidden" name="formkey" value="{{v.formkey}}">
					<div class="body">
						<div class="d-lg-flex">
							<label for="new-email" class="w-lg-25">Email</label>
							<div class="w-lg-100">
								<input class="form-input" id="new_email" {% if v.email %}placeholder="{{v.email}}"{% else %}placeholder="Your email"{% endif %}
								aria-describedby="new_email" type="email" name="new_email" required>
								{% if v.email and not v.is_activated %}
								<div class="text-danger text-xs mt-1" id="email-verify-text">Email not verified. You will not be able to recover your account with this email until you verify it. <u><a href="javascript:void(0)" onclick="post_toast('/verify_email');emailVerifyText();" class="text-danger">Verify now.</a></u></div>
								{% elif not v.email %}
								<div class="text-danger text-xs mt-1" id="email-verify-text">Add an email to secure your account in case you forget your password.</div>
								{% endif %}
							</div>
						</div>
						<div class="d-lg-flex mt-3">
							<label for="email-password" class="w-lg-25 hidden" id="email-password-label">Password</label>
							<div class="w-lg-100">
								<input autocomplete="new-password" type="password" class="form-input mb-2 hidden" id="email-password" name="password" autocomplete="off" required>
								<small id="emailpasswordRequired" class="form-text font-bold text-danger hidden mt-1">Password required to update your email.</small>
							</div>
						</div>
						<small id="emailpasswordRequired" class="form-text font-bold text-danger hidden mt-1">Password required to update your email.</small>
					</div>
					<div class="footer">
						<div class="flex">
							<a class="btn btn-gray" href="javascript:void(0)" onclick="post_toast('/settings/gumroad')">Claim paypig rewards</a>
							{% if v.email %}
							<input class="btn btn-green ml-auto"
							type="submit" value="Update email">
							{% else %}
							<input class="btn btn-green ml-auto"
							type="submit" value="Add email">
							{% endif %}
						</div>
						<span class="text-xs text-gray-500 pl-1">Must be same email as gumroad</span>
					</div>
				</form>
			</div>



			<h2 class="h5">Password</h2>

			<p class="text-sm text-gray-500">Change your account password.</p>

			<div class="settings-section rounded">

				<form action="/settings/security" method="post">

					<div class="body">

						<div class="d-lg-flex">

							<label for="new_password" class="mb-0 w-lg-25">New Password</label>

							<input class="form-input w-lg-100" id="new_password"
							aria-describedby="new_password" type="password" name="new_password" autocomplete="off"
							required>
							<small id="passwordHelpChange"
							class="form-text font-bold text-gray-500 hidden mt-1 w-lg-100">Minimum of 8
							characters
						required.</small>
						<small id="passwordHelpChangeSuccess"
						class="form-text font-bold text-success hidden mt-1 w-lg-100">Your password
						meets the
						requirements.
					</small>

				</div>

				<div class="d-lg-flex mt-3">

					<label for="cnf_password" class="mb-0 w-lg-25">Confirm New Password</label>

					<input class="form-input w-lg-100" id="cnf_password"
					aria-describedby="cnf_password" type="password" name="cnf_password" autocomplete="off"
					required>

					<small id="passwordHelpCnf"
					class="form-text font-bold text-gray-500 hidden mt-1 w-lg-100">Passwords do not
				match.</small>
				<small id="passwordHelpCnfSuccess"
				class="form-text font-bold text-success hidden mt-1 w-lg-100">Passwords match.
			</small>

		</div>

		<div class="d-lg-flex mt-5">

			<label for="old_password" class="mb-0 w-lg-25">Old Password</label>

			<input class="form-input mb-2 w-lg-100" id="old_password" autocomplete="off"
			aria-describedby="old_password" type="password" name="old_password"
			required>

		</div>

	</div>

	<div class="footer">

		<input type="hidden" name="formkey" value="{{v.formkey}}">
		<input type="hidden" name="now" value="1563891643">

		<div class="flex">

			<input class="btn btn-green ml-auto"
			type="submit" value="Change Password">

		</div>

	</div>

</form>

</div>


<h2 class="h5">Two-Factor Authentication</h2>

<p class="text-sm text-gray-500">Change the two-factor settings for your account.</p>

<div class="settings-section rounded">

	<div class="d-lg-flex">

		<div class="title w-lg-25">
			<label for="2faToggle">Use 2-step login</label>
		</div>

		<div class="body w-lg-100">

			<div>
				<input type="checkbox" id="2faToggle" name="2faToggle" onchange="twoStepModal.show()" {% if not mfa_secret %}checked=""{% endif %}>
				<label class="label" for="2faToggle"></label>
			</div>

			<span class="text-xs text-gray-500">
				This requires entering a randomly-generated, 6-digit code and your password to login. See <a href="javascript:void(0)">Google Authenticator</a> or <a href="javascript:void(0)">Authy</a> for more details.
			</span>

		</div>

	</div>

</div>

<h2 class="h5">Log Out Everywhere</h2>

<p class="text-sm text-gray-500">Log all other devices out of your {{'SITE_NAME' | app_config}} account.</p>

<div class="settings-section rounded">

	<form	action="/settings/log_out_all_others" method="post">
		<input type="hidden" name="formkey" value="{{v.formkey}}">

		<div class="body">

			<div class="d-lg-flex">

				<label for="forcelog-password" class="w-lg-25" id="email-password-label">Password</label>

				<div class="w-lg-100">

					<input autocomplete="new-password" type="password" class="form-input mb-2" id="forcelog-password" name="password" autocomplete="off" required>

				</div>

			</div>

			<small id="emailpasswordRequired" class="form-text mt-1">This will also invalidate any existing recovery links associated with this account.</small>

		</div>

		<div class="footer">

			<div class="flex">

				<input class="btn btn-green ml-auto"
				type="submit" value="Log out everywhere">

			</div>

		</div>

	</form>

</div>

</div>

</div>

</div>

<div class="modal fade" id="deleteAccountModal" tabindex="-1" role="dialog" aria-labelledby="deleteAccountModal" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Delete your {{'SITE_NAME' | app_config}} account</h5>
				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div class="" id="deleteFormContainer">
				<form id="deleteAccountForm" method="post" action="/settings/delete_account">
					<input type="hidden" name="formkey" value="{{v.formkey}}">
					<div class="modal-body body">

						<div class="d-lg-flex">

							<label for="delete-password" class="w-lg-25" id="email-password-label">Password</label>

							<div class="w-lg-100">

								<input autocomplete="new-password" type="password" class="form-input mb-2" id="delete-password" name="password" required>

							</div>

						</div>

						{% if v.mfa_secret %}
						<div class="d-lg-flex mt-3">

							<label for="delete-mfa" class="w-lg-25" id="email-password-label">Two-Factor Code</label>

							<div class="w-lg-100">

								<input autocomplete="new-password" type="text" class="form-input mb-2" id="delete-mfa" name="twofactor" required>

							</div>

						</div>
						{% endif %}

					</div>
				</form>
			</div>
		</div>
	</div>
</div>

{% endblock %}

{% block scripts %}
<script>
	window.addEventListener("load",function(event) {
		document.getElementById('new_email').addEventListener('input', function () {
			document.getElementById("email-password").classList.remove("hidden");
			document.getElementById("email-password-label").classList.remove("hidden");
			document.getElementById("emailpasswordRequired").classList.remove("hidden");
		});
	});
</script>
{% endblock %}
