Prettify alias page: use collapsible layout
This commit is contained in:
Son NK
Son NK
parent
c61213fae9
commit
f34b9f6ca6
|
|
@ -76,30 +76,25 @@
|
|||
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card p-4 shadow-sm {% if alias_info.highlight %} highlight-row {% endif %} ">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<span class="clipboard cursor mb-0"
|
||||
{% if loop.index ==1 %}
|
||||
data-intro="This is an <em>alias</em>. <br><br>
|
||||
<b>All</b> emails sent to an alias will be <em>forwarded</em> to your inbox. <br><br>
|
||||
Alias is a great way to hide your personal email address so feel free to
|
||||
use it whenever possible, for example when signing up for a newsletter or creating a new account on a suspicious website 😎"
|
||||
data-step="2"
|
||||
{% endif %}
|
||||
{% if alias.enabled %}
|
||||
data-toggle="tooltip"
|
||||
title="Copy to clipboard"
|
||||
data-clipboard-text="{{ alias.email }}"
|
||||
{% endif %}
|
||||
>
|
||||
<span class="font-weight-bold">{{ alias.email }}</span>
|
||||
{% if alias.enabled %}
|
||||
<span class="btn btn-sm btn-success copy-btn">
|
||||
Copy
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
</span>
|
||||
<span class="clipboard cursor mb-0"
|
||||
{% if loop.index ==1 %}
|
||||
data-intro="This is an <em>alias</em>. <br><br>
|
||||
<b>All</b> emails sent to an alias will be <em>forwarded</em> to your inbox. <br><br>
|
||||
Alias is a great way to hide your personal email address so feel free to
|
||||
use it whenever possible, for example when signing up for a newsletter or creating a new account on a suspicious website 😎"
|
||||
data-step="2"
|
||||
{% endif %}
|
||||
{% if alias.enabled %}
|
||||
data-toggle="tooltip"
|
||||
title="Click to copy"
|
||||
data-clipboard-text="{{ alias.email }}"
|
||||
{% endif %}
|
||||
>
|
||||
<span class="font-weight-bold">{{ alias.email }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<form method="post">
|
||||
|
|
@ -133,134 +128,148 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-2">
|
||||
<!-- Email Activity -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="font-size: 12px">
|
||||
{% if alias_info.latest_email_log != None %}
|
||||
{% set email_log = alias_info.latest_email_log %}
|
||||
{% set contact = alias_info.latest_contact %}
|
||||
|
||||
|
||||
<div class="" style="font-size: 12px">
|
||||
{% if alias_info.latest_email_log != None %}
|
||||
{% set email_log = alias_info.latest_email_log %}
|
||||
{% set contact = alias_info.latest_contact %}
|
||||
|
||||
{% if email_log.is_reply %}
|
||||
{{ contact.website_email }}
|
||||
<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">
|
||||
{% if email_log.is_reply %}
|
||||
{{ contact.website_email }}
|
||||
<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">
|
||||
{{ contact.website_email }}
|
||||
<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 %}
|
||||
{{ contact.website_email }}
|
||||
<i class="fa fa-ban mr-2 text-danger" data-toggle="tooltip" title="Email blocked"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% else %}
|
||||
{{ contact.website_email }}
|
||||
<i class="fa fa-paper-plane mr-2" data-toggle="tooltip" title="Email forwarded to alias"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
No Activity. Alias created {{ alias.created_at | dt }}
|
||||
{% endif %}
|
||||
<br>
|
||||
{% elif email_log.blocked %}
|
||||
{{ contact.website_email }}
|
||||
<i class="fa fa-ban mr-2 text-danger" data-toggle="tooltip" title="Email blocked"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% else %}
|
||||
{{ contact.website_email }}
|
||||
<i class="fa fa-paper-plane mr-2" data-toggle="tooltip" title="Email forwarded to alias"></i>
|
||||
{{ email_log.created_at | dt }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
No Activity. Alias created {{ alias.created_at | dt }}
|
||||
{% endif %}
|
||||
<br>
|
||||
|
||||
<span class="alias-activity">{{ alias_info.nb_forward }}</span> forwards,
|
||||
<span class="alias-activity">{{ alias_info.nb_blocked }}</span> blocks,
|
||||
<span class="alias-activity">{{ alias_info.nb_reply }}</span> replies
|
||||
<a href="{{ url_for('dashboard.alias_log', alias_id=alias.id) }}"
|
||||
class="btn btn-sm btn-link">
|
||||
See All →
|
||||
</a>
|
||||
<span class="alias-activity">{{ alias_info.nb_forward }}</span> forwards,
|
||||
<span class="alias-activity">{{ alias_info.nb_blocked }}</span> blocks,
|
||||
<span class="alias-activity">{{ alias_info.nb_reply }}</span> replies
|
||||
<a href="{{ url_for('dashboard.alias_log', alias_id=alias.id) }}"
|
||||
class="btn btn-sm btn-link">
|
||||
See All →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END Email Activity -->
|
||||
|
||||
<!-- Send Email && More button -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id) }}"
|
||||
{% if alias_info.show_intro_test_send_email %}
|
||||
data-intro="Not only alias can receive emails, it can <em>send</em> emails too! <br><br>
|
||||
You can add a new <em>contact</em> to for your alias here. <br><br>
|
||||
To send an email to your contact, SimpleLogin will create a <em>special</em> email address. <br><br>
|
||||
Sending an email to this email address will <em>forward</em> the email to your contact"
|
||||
data-step="4"
|
||||
{% endif %}
|
||||
class="btn btn-sm btn-outline-primary {% if not alias.enabled %} disabled {% endif %}"
|
||||
data-toggle="tooltip"
|
||||
title="Not only an alias can receive emails, it can send emails too"
|
||||
>
|
||||
Send Email <i class="fe fe-send"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<a class="btn btn-sm" data-toggle="collapse" href="#alias-{{ alias.id }}" role="button"
|
||||
aria-expanded="false">
|
||||
More <i class="fe fe-chevron-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END Send Email && More button -->
|
||||
|
||||
<!-- Collapse section -->
|
||||
<div class="collapse" id="alias-{{ alias.id }}">
|
||||
|
||||
{% if mailboxes|length > 1 %}
|
||||
<form method="post">
|
||||
<div class="small-text mt-2">Current mailbox</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 mr-2">
|
||||
<select class="form-control form-control-sm custom-select" name="mailbox">
|
||||
{% for mailbox in mailboxes %}
|
||||
<option value="{{ mailbox }}" {% if mailbox == alias_info.mailbox.email %} selected {% endif %}>
|
||||
{{ mailbox }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<input type="hidden" name="form-name" value="set-mailbox">
|
||||
<input type="hidden" name="alias-id" value="{{ alias.id }}">
|
||||
|
||||
<button class="btn btn-sm btn-outline-info w-100">
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
{% elif alias_info.mailbox != None and alias_info.mailbox.email != current_user.email %}
|
||||
<div class="small-text">
|
||||
Owned by <b>{{ alias_info.mailbox.email }}</b> mailbox
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if mailboxes|length > 1 %}
|
||||
<form method="post">
|
||||
<div class="small-text mt-2">Current mailbox</div>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex mt-2">
|
||||
|
||||
<div class="flex-grow-1 mr-2">
|
||||
<select class="form-control form-control-sm custom-select" name="mailbox">
|
||||
{% for mailbox in mailboxes %}
|
||||
<option value="{{ mailbox }}" {% if mailbox == alias_info.mailbox.email %} selected {% endif %}>
|
||||
{{ mailbox }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<textarea
|
||||
name="note"
|
||||
class="form-control"
|
||||
rows="2"
|
||||
placeholder="Alias Note.">{{ alias.note or "" }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<input type="hidden" name="form-name" value="set-mailbox">
|
||||
<input type="hidden" name="form-name" value="set-note">
|
||||
<input type="hidden" name="alias-id" value="{{ alias.id }}">
|
||||
|
||||
<button class="btn btn-sm btn-outline-info w-100">
|
||||
Update
|
||||
<button class="btn btn-sm btn-outline-success w-100">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
{% elif alias_info.mailbox != None and alias_info.mailbox.email != current_user.email %}
|
||||
<div class="small-text">
|
||||
Owned by <b>{{ alias_info.mailbox.email }}</b> mailbox
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete-email">
|
||||
<input type="hidden" name="alias-id" value="{{ alias.id }}">
|
||||
<input type="hidden" name="alias" class="alias" value="{{ alias.email }}">
|
||||
|
||||
<form method="post">
|
||||
<div class="d-flex mt-2">
|
||||
|
||||
<div class="flex-grow-1 mr-2">
|
||||
<textarea
|
||||
name="note"
|
||||
class="form-control"
|
||||
rows="2"
|
||||
placeholder="Alias Note.">{{ alias.note or "" }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<input type="hidden" name="form-name" value="set-note">
|
||||
<input type="hidden" name="alias-id" value="{{ alias.id }}">
|
||||
|
||||
<button class="btn btn-sm btn-outline-success w-100">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
{% if alias.enabled %}
|
||||
<a href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id) }}"
|
||||
{% if alias_info.show_intro_test_send_email %}
|
||||
data-intro="Not only alias can receive emails, it can <em>send</em> emails too! <br><br>
|
||||
You can add a new <em>contact</em> to for your alias here. <br><br>
|
||||
To send an email to your contact, SimpleLogin will create a <em>special</em> email address. <br><br>
|
||||
Sending an email to this email address will <em>forward</em> the email to your contact"
|
||||
data-step="4"
|
||||
{% endif %}
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
data-toggle="tooltip"
|
||||
title="Not only an alias can receive emails, it can send emails too"
|
||||
>
|
||||
Send Email <i class="fe fe-send"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<form method="post">
|
||||
<input type="hidden" name="form-name" value="delete-email">
|
||||
<input type="hidden" name="alias-id" value="{{ alias.id }}">
|
||||
<input type="hidden" name="alias" class="alias" value="{{ alias.email }}">
|
||||
|
||||
<span class="delete-email btn btn-link btn-sm float-right text-danger">
|
||||
<span class="delete-email btn btn-link btn-sm float-right text-danger">
|
||||
Delete <i class="dropdown-icon fe fe-trash-2 text-danger"></i>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue