273 lines
8.5 KiB
HTML
273 lines
8.5 KiB
HTML
{% extends "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");
|
|
});
|
|
});
|
|
const twoStepModal = new bootstrap.Modal(document.getElementById('2faModal'))
|
|
</script>
|
|
{% endblock %}
|