2021-12-19 13:01:28 +00:00
{% extends "CHRISTMAS/settings.html" %}
2021-12-14 22:48:37 +00:00
{% 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 %}