4.21.3
This commit is contained in:
286
app/templates/dashboard/alias_contact_manager.html
Normal file
286
app/templates/dashboard/alias_contact_manager.html
Normal file
@ -0,0 +1,286 @@
|
||||
{% extends "default.html" %}
|
||||
|
||||
{% set active_page = "dashboard" %}
|
||||
{% block title %}Alias Contact Manager{% endblock %}
|
||||
{% block default_content %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3">
|
||||
{{ alias.email }} contacts
|
||||
<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>
|
||||
<div class="alert alert-primary collapse" id="howtouse" role="alert">
|
||||
<p>
|
||||
To send an email from your alias to a contact, you need to create a <em>reverse-alias</em>,
|
||||
a special email address.
|
||||
<br />
|
||||
When you send an email to the reverse-alias, the email will be sent <b>from your alias</b> to the contact.
|
||||
<br />
|
||||
<img src="/static/images/reverse-alias.svg"
|
||||
style="border: 1px solid"
|
||||
class="my-2 img-fluid"/>
|
||||
</p>
|
||||
<p>This might seem like "magic" but trust us, only the first time is a bit awkward.</p>
|
||||
<p>
|
||||
{% if alias.mailbox_id %}
|
||||
{% if alias.mailboxes | length == 1 %}
|
||||
|
||||
Make sure you send the email from your mailbox <b>{{ alias.mailbox.email }}</b>.
|
||||
{% else %}
|
||||
Make sure you send the email from one of the following mailboxes:
|
||||
<br />
|
||||
{% for mailbox in alias.mailboxes %}
|
||||
|
||||
- <b>{{ mailbox.email }}</b>
|
||||
<br />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Make sure you send the email from your personal email address ({{ current_user.email }}).
|
||||
{% endif %}
|
||||
</p>
|
||||
<p>
|
||||
This Youtube video can also quickly walk you through the steps:
|
||||
<a href="https://www.youtube.com/watch?v=VsypF-DBaow" target="_blank">
|
||||
How to send emails from an alias <i class="fe fe-external-link"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5">
|
||||
<div class="col-12 col-lg-6 pt-1">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="create" />
|
||||
{{ new_contact_form.csrf_token }}
|
||||
{{ new_contact_form.email(class="form-control", placeholder="First Last <email@example.com>", autofocus=True) }}
|
||||
{{ render_field_errors(new_contact_form.email) }}
|
||||
<div class="small-text">Where do you want to send the email?</div>
|
||||
{% if can_create_contacts %}
|
||||
|
||||
<button class="btn btn-primary mt-2">Create reverse-alias</button>
|
||||
{% else %}
|
||||
<button disabled
|
||||
title="Upgrade to premium to create reverse-aliases"
|
||||
class="btn btn-primary mt-2">
|
||||
Create reverse-alias
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 pt-1">
|
||||
<div class="float-right d-flex">
|
||||
<form method="post">
|
||||
{{ csrf_form.csrf_token }}
|
||||
<input type="hidden" name="form-name" value="search">
|
||||
<input type="search"
|
||||
name="query"
|
||||
value="{{ query }}"
|
||||
placeholder="Enter to search for contacts"
|
||||
class="form-control shadow mr-2"
|
||||
style="max-width: 20em">
|
||||
</form>
|
||||
{% if query %}
|
||||
{% if highlight_contact_id %}
|
||||
|
||||
<a href="{{ url_for("dashboard.alias_contact_manager", alias_id=alias.id, highlight_contact_id=highlight_contact_id) }}"
|
||||
class="btn btn-light">
|
||||
Reset
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for("dashboard.alias_contact_manager", alias_id=alias.id) }}"
|
||||
class="btn btn-light">Reset</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% for contact_info in contact_infos %}
|
||||
|
||||
{% set contact = contact_info.contact %}
|
||||
<div class="col-md-6">
|
||||
<div class="my-2 p-2 card {% if contact.id == highlight_contact_id %} highlight-row{% endif %}">
|
||||
<div class="mb-2 row">
|
||||
<div class="col">
|
||||
<span class="font-weight-bold">{{ contact.website_email }}</span>
|
||||
{% if contact.pgp_finger_print %}
|
||||
|
||||
<span class="cursor"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="PGP Enabled">🗝</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<label class="custom-switch cursor" data-toggle="tooltip" {% if contact.block_forward %}
|
||||
title="Unblock sender - start receiving emails from this sender" {% else %} title="Block sender - stop receiving emails from this sender" {% endif %} style="padding-left: 0px">
|
||||
<input type="checkbox" class="enable-disable-contact custom-switch-input" data-contact="{{ contact.id }}" data-contact-email="{{ contact.website_email }}" {{ "checked" if not contact.block_forward else "" }}>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<a href="{{ 'mailto:' + contact.website_send_to() }}"
|
||||
data-toggle="tooltip"
|
||||
title="You can click on this to open your email client. Or use the copy button 👉"
|
||||
class="font-weight-bold">
|
||||
*************************
|
||||
</a>
|
||||
<span class="clipboard btn btn-sm btn-success copy-btn"
|
||||
data-toggle="tooltip"
|
||||
title="Copy the reverse-alias to clipboard"
|
||||
data-clipboard-text="{{ contact.website_send_to() }}">
|
||||
Copy reverse-alias
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-2 text-muted small-text">
|
||||
{% if contact_info.latest_email_log != None %}
|
||||
|
||||
{% set email_log = contact_info.latest_email_log %}
|
||||
{% if email_log.is_reply %}
|
||||
|
||||
<i class="fa fa-reply mr-2"
|
||||
data-toggle="tooltip"
|
||||
title="Email reply/sent from alias"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% elif email_log.bounced %}
|
||||
<span class="text-danger">
|
||||
<i class="fa fa-warning mr-2"
|
||||
data-toggle="tooltip"
|
||||
title="Email bounced and cannot be forwarded to your mailbox"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
</span>
|
||||
{% elif email_log.blocked %}
|
||||
<i class="fa fa-ban mr-2 text-danger"
|
||||
data-toggle="tooltip"
|
||||
title="Email blocked"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% else %}
|
||||
<i class="fa fa-paper-plane mr-2"
|
||||
data-toggle="tooltip"
|
||||
title="Email sent to alias"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% endif %}
|
||||
<br />
|
||||
Contact created {{ contact.created_at | dt }}
|
||||
{% else %}
|
||||
No Activity in the last 14 days. Contact created {{ contact.created_at | dt }}
|
||||
{% endif %}
|
||||
<div>
|
||||
<span class="alias-activity">{{ contact_info.nb_forward }}</span> forwarded,
|
||||
<span class="alias-activity">{{ contact_info.nb_reply }}</span> sent
|
||||
in the last 14 days.
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ url_for('dashboard.contact_detail_route', contact_id=contact.id) }}">Edit ➡</a>
|
||||
<form method="post">
|
||||
{{ csrf_form.csrf_token }}
|
||||
<input type="hidden" name="form-name" value="delete">
|
||||
<input type="hidden" name="contact-id" value="{{ contact.id }}">
|
||||
<span class="card-link btn btn-link float-right delete-forward-email text-danger">Delete</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if nb_contact > PAGE_LIMIT or page > 0 %}
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
<nav aria-label="Contact navigation">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="btn btn-outline-secondary {% if page == 0 %}disabled{% endif %}"
|
||||
href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id, page=page-1) }}">
|
||||
Previous
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="btn btn-outline-secondary {% if last_page %}disabled{% endif %}"
|
||||
href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id, page=page+1) }}">
|
||||
Next
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
|
||||
<script>
|
||||
$(".delete-forward-email").on("click", function (e) {
|
||||
let that = $(this);
|
||||
|
||||
bootbox.confirm({
|
||||
message: "All activities associated with this contact will also be deleted, please confirm.",
|
||||
buttons: {
|
||||
confirm: {
|
||||
label: 'Yes, delete it',
|
||||
className: 'btn-danger'
|
||||
},
|
||||
cancel: {
|
||||
label: 'Cancel',
|
||||
className: 'btn-outline-primary'
|
||||
}
|
||||
},
|
||||
callback: function (result) {
|
||||
if (result) {
|
||||
that.closest("form").submit();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$(".enable-disable-contact").change(async function () {
|
||||
let contactID = $(this).data("contact");
|
||||
let contactEmail = $(this).data("contact-email");
|
||||
|
||||
await blockContact(contactID, contactEmail);
|
||||
})
|
||||
|
||||
async function blockContact(contactID, contactEmail) {
|
||||
let oldValue;
|
||||
try {
|
||||
let res = await fetch(`/api/contacts/${contactID}/toggle`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
let json = await res.json();
|
||||
|
||||
if (json.block_forward) {
|
||||
toastr.success(`${contactEmail} is blocked`);
|
||||
} else {
|
||||
toastr.success(`${contactEmail} is unblocked`);
|
||||
}
|
||||
} else {
|
||||
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
|
||||
// reset to the original value
|
||||
oldValue = !$(this).prop("checked");
|
||||
$(this).prop("checked", oldValue);
|
||||
}
|
||||
} catch (e) {
|
||||
toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
|
||||
// reset to the original value
|
||||
oldValue = !$(this).prop("checked");
|
||||
$(this).prop("checked", oldValue);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user