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

294 lines
9.8 KiB
HTML

{% extends 'default.html' %}
{% set active_page = "dashboard" %}
{% block head %}
<style>
.alias-activity {
font-weight: 600;
font-size: 14px;
}
</style>
{% endblock %}
{% block title %}
Alias
{% endblock %}
{% block default_content %}
<div class="page-header row">
<div class="col-lg-3 col-sm-12 p-0 mt-1">
<form method="get">
<input type="search" name="query" autofocus placeholder="Enter to search for alias" class="form-control"
value="{{ query }}">
</form>
</div>
<div class="col-lg-3 offset-lg-6 pr-0 mt-1">
<div class="btn-group float-right" role="group">
<form method="post" style="margin-right: 10px">
<input type="hidden" name="form-name" value="create-random-email">
<button class="btn btn-success">Random alias</button>
</form>
<form method="post">
<input type="hidden" name="form-name" value="create-custom-email">
<button class="btn btn-primary">Custom alias</button>
</form>
</div>
</div>
</div>
<div class="row">
{% for alias_info in aliases %}
{% set gen_email = alias_info.gen_email %}
<div class="col-md-6"
{% if loop.index ==1 %}
data-intro="This is an <b>alias</b>. <br><br>
<b>All</b> emails sent to an alias will be forwarded 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 on untrusted websites 😎"
{% endif %}
>
<div class="card p-3 {% if alias_info.highlight %} highlight-row {% endif %}">
<div>
<span class="clipboard mb-0"
{% if gen_email.enabled %}
data-toggle="tooltip"
title="Copy to clipboard"
data-clipboard-text="{{ gen_email.email }}"
{% endif %}
>
<span class="font-weight-bold">{{ gen_email.email }}</span>
{% if gen_email.enabled %}
<span class="btn btn-sm btn-success copy-btn">
Copy
</span>
{% endif %}
</span>
</div>
<p class="small-text">
Created {{ gen_email.created_at | dt }}
{% if gen_email.custom %}
- <span class="font-weight-bold small-text">Custom</span>
{% endif %}
{% if alias_info.highlight %}
- <span class="font-weight-bold text-success small-text">New</span>
{% endif %}
</p>
<div class="" style="font-size: 12px">
<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=gen_email.email) }}"
class="btn btn-secondary btn-sm">
Activity &nbsp; &nbsp; <i class="dropdown-icon fe fe-activity"></i>
</a>
</div>
<div>
<form method="post">
<input type="hidden" name="form-name" value="switch-email-forwarding">
<input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
<label class="custom-switch mt-2"
data-toggle="tooltip"
{% if gen_email.enabled %}
title="Block Alias"
{% else %}
title="Unblock Alias"
{% endif %}
{% if loop.index ==1 %}
data-intro="By turning off an alias, emails sent to this alias will <b>NOT</b>
be forwarded to your inbox. <br><br>
This should be used with care as others might
not be able to reach you after ...
"
{% endif %}
style="padding-left: 0px"
>
<input type="checkbox" class="custom-switch-input"
{{ "checked" if gen_email.enabled else "" }}>
<span class="custom-switch-indicator"></span>
</label>
</form>
</div>
<div class="btn-group mt-3" role="group">
{% if gen_email.enabled %}
<form method="post">
<input type="hidden" name="form-name" value="trigger-email">
<input type="hidden" name="gen-email-id"
value="{{ gen_email.id }}">
<span class="trigger-email btn btn-secondary btn-sm"
{% if alias_info.show_intro_test_send_email %}
data-intro="Send a test email to this alias, the email will arrive at your inbox."
{% endif %}
>
Test alias &nbsp; &nbsp;
<i class="dropdown-icon fe fe-send"></i>
</span>
</form>
{% endif %}
<form method="post">
<input type="hidden" name="form-name" value="delete-email">
<input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
<span class="delete-email btn btn-link btn-sm "> Delete
&nbsp; &nbsp;
<i class="dropdown-icon fe fe-trash-2"></i>
</span>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
{% if client_users %}
<div class="page-header row">
<h3 class="page-title col" data-intro="Here you can find the list of website/app on which
you have used the <b>Connect with SimpleLogin</b> button <br><br>
You also see what information that SimpleLogin has communicated to these website/app when you sign in.
">
Apps
</h3>
</div>
<div class="row row-cards row-deck mt-4">
<div class="col-12">
<div class="card">
<div class="table-responsive">
<table class="table table-hover table-outline table-vcenter text-nowrap card-table">
<thead>
<tr>
<th>
App
</th>
<th>
Info
<i class="fe fe-help-circle" data-toggle="tooltip"
title="Info sent to this app/website"></i>
</th>
<th class="text-center">
First used
<i class="fe fe-help-circle" data-toggle="tooltip"
title="The first time you have used the SimpleLogin on this app/website"></i>
</th>
<!--<th class="text-center">Last used</th>-->
</tr>
</thead>
<tbody>
{% for client_user in client_users %}
<tr>
<td>
{{ client_user.client.name }}
</td>
<td>
{% for scope, val in client_user.get_user_info().items() %}
<div>
{% if scope == "email" %}
Email: <a href="mailto:{{ val }}">{{ val }}</a>
{% elif scope == "name" %}
Name: {{ val }}
{% endif %}
</div>
{% endfor %}
</td>
<td class="text-center">
{{ client_user.created_at | dt }}
</td>
{# TODO: add last_used#}
<!--
<td class="text-center">
<div>4 minutes ago</div>
</td>
-->
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block script %}
<script>
var clipboard = new ClipboardJS('.clipboard');
var introShown = localStorage.getItem("introShown");
if ("yes" !== introShown) {
// only show intro when screen is big enough to show "developer" tab
if (window.innerWidth >= 1024) {
introJs().start();
localStorage.setItem("introShown", "yes")
}
}
$(".delete-email").on("click", function (e) {
notie.confirm({
text: "Once an alias is deleted, people/apps " +
"who used to contact you via this email address cannot reach you any more," +
" please confirm",
cancelCallback: () => {
// nothing to do
},
submitCallback: () => {
$(this).closest("form").submit();
}
});
});
$(".trigger-email").on("click", function (e) {
notie.confirm({
text: "SimpleLogin server will send an email to this alias and it will arrive to your inbox, please confirm",
cancelCallback: () => {
// nothing to do
},
submitCallback: () => {
$(this).closest("form").submit();
}
});
});
$(".custom-switch-input").change(function (e) {
var message = "";
if (e.target.checked) {
message = `After this, you will start receiving email sent to this alias, please confirm`;
} else {
message = `After this, you will stop receiving email sent to this alias, please confirm`;
}
notie.confirm({
text: message,
cancelCallback: () => {
// reset to the original value
var oldValue = !$(this).prop("checked");
$(this).prop("checked", oldValue);
},
submitCallback: () => {
$(this).closest("form").submit();
}
});
})
</script>
{% endblock %}