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

183 lines
7.4 KiB
HTML
Raw Normal View History

{% extends "default.html" %}
2020-02-10 17:17:05 +01:00
{% set active_page = "mailbox" %}
{% block title %}Mailboxes{% endblock %}
2020-02-10 17:17:05 +01:00
{% block default_content %}
2020-02-10 17:17:05 +01:00
<div class="row">
2020-04-05 19:59:48 +02:00
<div class="col">
<h1 class="h3">
Mailboxes
<a class="ml-3 text-info"
style="font-size: 12px"
data-toggle="collapse"
href="#howtouse"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
How to use <i class="fe fe-chevrons-down"></i>
</a>
</h1>
2020-02-10 17:17:05 +01:00
{% if not current_user.is_premium() %}
<div class="alert alert-danger" role="alert">This feature is only available in premium plan.</div>
{% endif %}
<div class="alert alert-primary collapse {% if mailboxes|length == 1 %} show{% endif %}"
id="howtouse"
role="alert">
A <em>mailbox</em> is just another personal email address. When creating a new alias, you could choose
the
mailbox that <em>owns</em> this alias, i.e:
<br/>
- all emails sent to this alias will be forwarded to this mailbox
<br/>
- from this mailbox, you can reply/send emails from the alias.
<br/>
<br/>
When you signed up, a mailbox is automatically created with your email <b>{{ current_user.email }}</b>
<br/>
<br/>
2020-02-10 17:17:05 +01:00
The mailbox doesn't have to be your email: it can be your friend's email
2020-02-23 08:08:55 +01:00
if you want to create aliases for your buddy.
2020-02-10 17:17:05 +01:00
</div>
<div class="row">
{% for mailbox in mailboxes %}
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">
{{ mailbox.email }}
{% if mailbox.verified %}
<span class="cursor"
data-toggle="tooltip"
data-original-title="Mailbox Verified">✅</span>
{% else %}
<span class="cursor"
data-toggle="tooltip"
data-original-title="Mailbox Not Verified">🚫</span>
{% endif %}
{% if mailbox.pgp_enabled() %}
2020-02-23 09:41:53 +01:00
<span class="cursor"
data-toggle="tooltip"
data-original-title="PGP Enabled">🗝</span>
{% endif %}
{% if mailbox.id == current_user.default_mailbox_id %}
<div class="badge badge-primary float-right"
data-toggle="tooltip"
title="When a new random alias is created, it belongs to the default mailbox">
Default Mailbox
</div>
{% endif %}
</h5>
<h6 class="card-subtitle mb-2 text-muted">
Created {{ mailbox.created_at | dt }}
<br/>
<span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases.
<br/>
</h6>
<a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit
</a>
</div>
<div class="card-footer p-0">
<div class="row">
{% if mailbox.verified %}
<div class="col">
<form method="post">
{{ csrf_form.csrf_token }}
<input type="hidden" name="form-name" value="set-default">
<input type="hidden" class="mailbox" value="{{ mailbox.email }}">
<input type="hidden" name="mailbox_id" value="{{ mailbox.id }}">
<button class="card-link btn btn-link {% if mailbox.id == current_user.default_mailbox_id %} disabled{% endif %}">
Set As Default Mailbox
</button>
</form>
</div>
{% endif %}
<div class="col">
<form method="post">
{{ delete_mailbox_form.csrf_token }}
<input type="hidden" name="form-name" value="delete">
<input type="hidden" class="mailbox" value="{{ mailbox.email }}">
<input type="hidden" name="mailbox_id" value="{{ mailbox.id }}">
<select hidden name="transfer_mailbox_id" value="">
<option value="-1">
Delete my aliases
</option>
{% for mailbox_opt in mailboxes %}
{% if mailbox_opt.verified and mailbox_opt.id != mailbox.id %}
<option value="{{ mailbox_opt.id }}">
{{ mailbox_opt.email }}
</option>
{% endif %}
{% endfor %}
</select>
<span class="card-link btn btn-link text-danger float-right delete-mailbox {% if mailbox.id == current_user.default_mailbox_id %} disabled{% endif %}">
Delete
</span>
</form>
</div>
</div>
2020-02-10 17:17:05 +01:00
</div>
</div>
2020-02-10 17:17:05 +01:00
</div>
{% endfor %}
</div>
<form method="post" class="mt-2">
2020-02-10 17:17:05 +01:00
{{ new_mailbox_form.csrf_token }}
<input type="hidden" name="form-name" value="create">
<h2 class="h4">New Mailbox</h2>
{{ new_mailbox_form.email(class="form-control", placeholder="email@example.com") }}
2020-02-10 17:17:05 +01:00
{{ render_field_errors(new_mailbox_form.email) }}
<div class="small-text">A mailbox can't be a disposable or forwarding email address.</div>
2021-05-25 18:30:14 +02:00
<button class="btn btn-primary mt-2">Create</button>
2020-02-10 17:17:05 +01:00
</form>
</div>
</div>
{% endblock %}
{% block script %}
2020-02-10 17:17:05 +01:00
<script>
$(".delete-mailbox").on("click", function (e) {
let mailbox = $(this).parent().find(".mailbox").val();
let new_mailboxes = $(this).parent().find("select[name='transfer_mailbox_id']").find("option")
let inputOptions = new_mailboxes.map((index, option) => { return {["value"]: option.value, ["text"]: option.text}}).toArray()
2020-04-30 22:37:39 +02:00
let that = $(this);
let message = `All aliases owned by the mailbox <b>${mailbox}</b> will be also deleted.<br>` +
"You can choose to transfer them to a different mailbox:<br><br>";
2020-04-30 22:37:39 +02:00
bootbox.prompt({
title: '<b>Delete Mailbox</b>',
message: message,
value: ["-1"],
inputType: 'select',
inputOptions: inputOptions,
buttons: {
confirm: {
label: 'Yes, delete it',
className: 'btn-danger'
},
cancel: {
label: 'Cancel',
className: 'btn-outline-primary mr-auto'
}
},
callback: function (result) {
if (result) {
that.closest("form").find("select[name='transfer_mailbox_id']").val(result)
that.closest("form").submit();
}
}
})
});
2020-02-10 17:17:05 +01:00
</script>
{% endblock %}