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

245 lines
8.1 KiB
HTML

{% extends 'default.html' %}
{% set active_page = "dashboard" %}
{% block title %}
Dashboard
{% endblock %}
{% block default_content %}
<div class="page-header row">
<h3 class="page-title col"
data-intro="Here, you find the list of all <b>email alias</b> created. <br><br>
Emails sent to an <b>alias</b> will be forwarded to your personal email. <br><br>
Please note that email alias is <b>NOT</b> temporary, meaning an alias works forever! <br><br>
Email alias is a great way to hide your personal email so feel free to
use it whenever possible, for ex on untrusted websites.">
Email Alias
</h3>
<form method="post" class="col text-right">
<input type="hidden" name="form-name" value="create-new-email">
<button class="btn btn-success">Create email alias</button>
</form>
</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>Email</th>
<th>
Used On
<i class="fe fe-help-circle" data-toggle="tooltip"
title="List of app/website that has received this email"></i>
</th>
<th>Actions</th>
<th>
Enable/Disable Email Forwarding
</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
{% for gen_email in gen_emails %}
<tr>
<td>
<div>
<a href="mailto: {{ gen_email.email }}">{{ gen_email.email }}</a>
</div>
</td>
<td>
{% for client_user in gen_email.client_users %}
{{ client_user.client.name }} <br>
{% endfor %}
</td>
<td>
<div class="btn-group">
<button class="clipboard btn btn-secondary btn-sm"
data-clipboard-text="{{ gen_email.email }}">
Copy
</button>
<form method="post">
<input type="hidden" name="form-name" value="trigger-email">
<input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
{% if gen_email.enabled %}
<button class="btn btn-secondary btn-sm"
{% if loop.index ==1 %}
data-intro="By triggering the test email,
SimpleLogin server will send an email to this alias
and this email should arrive to your personal email"
{% endif %}
>Trigger Test Email
</button>
{% endif %}
</form>
</div>
</td>
<td>
<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"
{% if loop.index ==1 %}
data-intro="By turning off an alias, emails sent to this alias will <b>NOT</b>
be forwarded to your personal email. <br><br>
This should only be used with care as others might
not be able to reach you after ...
"
{% endif %}
>
<input type="checkbox" class="custom-switch-input"
{{ "checked" if gen_email.enabled else "" }}>
<span class="custom-switch-indicator"></span>
</label>
</form>
</td>
<td>
{{ gen_email.created_at | dt }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<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>
Information
<i class="fe fe-help-circle" data-toggle="tooltip"
title="Information 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>
{% endblock %}
{% block script %}
<script>
require(['clipboard', 'notie', 'jquery', 'intro'], function (Clipboard, notie, $, intro) {
var clipboard = new Clipboard('.clipboard');
var introShown = localStorage.getItem("introShown");
console.log(introShown);
if ("yes" !== introShown) {
intro().start();
localStorage.setItem("introShown", "yes")
}
clipboard.on('success', function (e) {
notie.alert({
type: "success",
text: "Copied to clipboard",
time: 1,
});
e.clearSelection();
});
// the modal does not get close when user clicks outside of modal
// necessary for obligatory modal such as the one displayed when user enable/display email forwarding
notie.setOptions({
overlayClickDismiss: false,
});
$(".custom-switch-input").change(function (e) {
var message = "";
if (e.target.checked) {
message = `After this, you will start receiving email sent to this email address, please confirm`;
} else {
message = `After this, you will stop receiving email sent to this email address, 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 %}