app-MAIL-temp/app/dashboard/templates/dashboard/setting.html

343 lines
13 KiB
HTML

{% extends 'default.html' %}
{% set active_page = "setting" %}
{% block title %}
Settings
{% endblock %}
{% block head %}
<style>
.card-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 3px;
}
</style>
{% endblock %}
{% block default_content %}
<div class="col pb-3">
<!-- Change email -->
<div class="card">
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="form-name" value="update-email">
{{ change_email_form.csrf_token }}
<div class="card-body">
<div class="card-title">
Email Address
</div>
<div class="form-group">
<label class="form-label">Email</label>
<!-- Not allow user to change email if there's a pending change -->
{{ change_email_form.email(class="form-control", value=current_user.email, readonly=pending_email != None) }}
{{ render_field_errors(change_email_form.email) }}
{% if pending_email %}
<div class="mt-2">
<span class="text-danger">Pending email change: {{ pending_email }}</span>
<a href="{{ url_for('dashboard.resend_email_change') }}" class="btn btn-secondary btn-sm">Resend
confirmation email</a>
<a href="{{ url_for('dashboard.cancel_email_change') }}" class="btn btn-secondary btn-sm">Cancel email
change</a>
</div>
{% endif %}
</div>
<button class="btn btn-outline-primary">Change Email</button>
</div>
</form>
</div>
<!-- END Change email -->
<!-- Change name & profile picture -->
<div class="card">
<form method="post" enctype="multipart/form-data">
{{ form.csrf_token }}
<input type="hidden" name="form-name" value="update-profile">
<div class="card-body">
<div class="card-title">
Profile
</div>
<div>
This information will be filled in automatically when you use "Sign in with SimpleLogin" button.
</div>
<div class="form-group mt-3">
<label class="form-label">Name</label>
{{ form.name(class="form-control", value=current_user.name) }}
{{ render_field_errors(form.name) }}
</div>
<div class="form-group">
<div class="form-label">Profile picture</div>
{{ form.profile_picture(class="form-control-file") }}
{{ render_field_errors(form.profile_picture) }}
{% if current_user.profile_picture_id %}
<img src="{{ current_user.profile_picture_url() }}" class="profile-picture">
{% endif %}
</div>
<button class="btn btn-outline-primary">Update</button>
</div>
</form>
</div>
<!-- END change name & profile picture -->
{% if current_user.can_use_fido %}
<div class="card">
<div class="card-body">
<div class="card-title">Security Key (WebAuthn)</div>
<div class="mb-3">
You can secure your account by linking either your FIDO-supported physical key such as Yubikey, Google
Titan,
or a device with appropriate hardware to your account.
</div>
{% if current_user.fido_uuid is none %}
<a href="{{ url_for('dashboard.fido_setup') }}" class="btn btn-outline-primary">Setup WebAuthn</a>
{% else %}
<a href="{{ url_for('dashboard.fido_manage') }}" class="btn btn-outline-info">Manage WebAuthn</a>
<a href="{{ url_for('dashboard.recovery_code_route') }}" class="btn btn-outline-secondary">Recovery Codes</a>
{% endif %}
</div>
</div>
{% endif %}
<div class="card" id="totp">
<div class="card-body">
<div class="card-title">One-Time Password (TOTP)</div>
<div class="mb-3">
Secure your account with One-Time Password. <br>
This requires having applications like Google Authenticator, Authy, MyDigiPassword, etc.
</div>
{% if not current_user.enable_otp %}
<a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Setup TOTP</a>
{% else %}
<a href="{{ url_for('dashboard.mfa_cancel') }}" class="btn btn-outline-danger">Disable TOTP</a>
<a href="{{ url_for('dashboard.recovery_code_route') }}" class="btn btn-outline-secondary">Recovery Codes</a>
{% endif %}
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">
Change password
</div>
<div class="mb-3">
You will receive an email containing instructions on how to change password.
</div>
<form method="post">
<input type="hidden" name="form-name" value="change-password">
<button class="btn btn-outline-primary">Change password</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">Random Alias</div>
<div class="mb-3">Choose how to create your email alias by default</div>
<form method="post" class="form-inline">
<input type="hidden" name="form-name" value="change-alias-generator">
<select class="form-control mr-sm-2" name="alias-generator-scheme">
<option value="{{ AliasGeneratorEnum.word.value }}"
{% if current_user.alias_generator == AliasGeneratorEnum.word.value %} selected {% endif %} >Based on
Random {{ AliasGeneratorEnum.word.name.capitalize() }}</option>
<option value="{{ AliasGeneratorEnum.uuid.value }}"
{% if current_user.alias_generator == AliasGeneratorEnum.uuid.value %} selected {% endif %} >Based
on {{ AliasGeneratorEnum.uuid.name.upper() }}</option>
</select>
<button class="btn btn-outline-primary">Update Preference</button>
</form>
</div>
</div>
<div class="card" id="notification">
<div class="card-body">
<div class="card-title">Newsletters</div>
<div class="mb-3">
Every now and then we can send you an email
to let you know about a new feature that might be useful to you.
</div>
<form method="post">
<input type="hidden" name="form-name" value="notification-preference">
<div class="form-check">
<input type="checkbox" id="notification" name="notification" {% if current_user.notification %}
checked {% endif %} class="form-check-input">
<label for="notification">I want to be informed of new features</label>
</div>
<button type="submit" class="btn btn-outline-primary">Submit</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title mb-3">Current Plan</div>
{% if current_user.get_subscription() %}
You are on the {{ current_user.get_subscription().plan_name() }} plan. <br>
<a href="{{ url_for('dashboard.billing') }}" class="btn btn-outline-primary">
Manage Subscription
</a>
{% elif manual_sub %}
You are on the Premium plan. The plan ends {{ manual_sub.end_at | dt }}
({{ manual_sub.end_at.format("YYYY-MM-DD") }}).
{% if manual_sub.is_giveaway %}
<br>
To support SimpleLogin it's possible to change to a paid plan. <br>
<a href="{{ url_for('dashboard.pricing') }}" class="btn btn-sm btn-outline-primary">Upgrade</a>
{% endif %}
{% elif current_user.lifetime %}
You have the lifetime licence.
<br>
To support SimpleLogin it's possible to change to a paid plan. <br>
<a href="{{ url_for('dashboard.pricing') }}" class="btn btn-sm btn-outline-primary">Upgrade</a>
{% elif current_user.in_trial() %}
You are in the trial period. The trial ends {{ current_user.trial_end | dt }}.
{% else %}
You are on the Free plan.
{% endif %}
</div>
</div>
<div class="card" id="sender-format">
<div class="card-body">
<div class="card-title">Sender address format</div>
<div class="mt-1 mb-3">
When your alias receives an email, says from: <b>John Wick &lt;john@wick.com&gt;</b>,
SimpleLogin forwards it to your mailbox. <br>
Due to some email constraints, SimpleLogin cannot keep the sender email address
in the original form and needs to <b>transform</b> it to one of the formats below.
</div>
<form method="post" action="#sender-format">
<input type="hidden" name="form-name" value="change-sender-format">
<select class="form-control mr-sm-2" name="sender-format">
<option value="{{ SenderFormatEnum.VIA.value }}"
{% if current_user.sender_format == SenderFormatEnum.VIA.value %} selected {% endif %}>
john@wick.com via SimpleLogin
</option>
<option value="{{ SenderFormatEnum.AT.value }}"
{% if current_user.sender_format == SenderFormatEnum.AT.value %} selected {% endif %}>
John Wick - john at wick.com
</option>
<option value="{{ SenderFormatEnum.A.value }}"
{% if current_user.sender_format == SenderFormatEnum.A.value %} selected {% endif %}>
John Wick - john(a)wick.com
</option>
<option value="{{ SenderFormatEnum.FULL.value }}"
{% if current_user.sender_format == SenderFormatEnum.FULL.value %} selected {% endif %}>
John Wick - john@wick.com
</option>
</select>
<button class="btn btn-outline-primary mt-3">Update</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">Replace reverse alias</div>
<div class="mb-3">
When replying to a forwarded email, the <b>reverse-alias</b> is usually included in the attached message.
You can turn on this option to <b>replace</b> the reverse-alias by the alias. However this breaks PGP-signed emails
so please only enable it if you know what you're doing :).
</div>
<form method="post">
<input type="hidden" name="form-name" value="replace-ra">
<div class="form-check">
<input type="checkbox" id="replace-ra" name="replace-ra"
{% if current_user.replace_reverse_alias %} checked {% endif %} class="form-check-input">
<label for="replace-ra">Enable replacing reverse alias</label>
</div>
<button type="submit" class="btn btn-outline-primary">Update</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">Quarantine</div>
<div class="mb-3">
When an email sent to your alias is classified as spam or refused by your email provider,
it usually means your alias has been leaked to a spammer. <br>
In this case SimpleLogin will <b>keep</b> a copy of this email (so it isn't lost)
and notify you so you can take a look at its content and take appropriate actions. <br>
The emails are deleted in 7 days.
This is an exceptional case where SimpleLogin stores the email.
</div>
<a href="{{ url_for('dashboard.refused_email_route') }}" class="btn btn-outline-primary">
See refused emails
</a>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">Export Data</div>
<div class="mb-3">
You can download all aliases you have created on SimpleLogin along with other data.
</div>
<form method="post">
<input type="hidden" name="form-name" value="export-data">
<button class="btn btn-outline-info">Export Data</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">Delete Account</div>
<div class="mb-3">Please note that this operation is irreversible.
</div>
<form method="post">
<input type="hidden" name="form-name" value="delete-account">
<span class="delete-account btn btn-outline-danger">Delete account</span>
</form>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
$(".delete-account").on("click", function (e) {
let that = $(this);
bootbox.confirm({
message: "All your data including your aliases will be deleted, " +
"other people might not be able to reach you after, " +
" please confirm.",
buttons: {
confirm: {
label: 'Yes, delete my account',
className: 'btn-danger'
},
cancel: {
label: 'Cancel',
className: 'btn-outline-primary'
}
},
callback: function (result) {
if (result) {
that.closest("form").submit();
}
}
})
});
</script>
{% endblock %}