simple-login/app
1
1
Fork 0
mirror of https://github.com/simple-login/app.git synced 2024-11-17 14:16:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

use 2-column layout for api key, domain, directory, mailbox

Browse source
This commit is contained in:
Son NK 2020-05-03 10:48:21 +02:00
parent 8a147e36a7
commit 625def2367
4 changed files with 165 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
app/dashboard/templates/dashboard/api_key.html
View file

@ -37,66 +37,68 @@
</span> </span>
</div> </div>
{% for api_key in api_keys %} <div class="row">
<div class="card"> {% for api_key in api_keys %}
<div class="card-body"> <div class="col-12 col-lg-6">
<h5 class="card-title">{{ api_key.name }}</h5> <div class="card">
<h6 class="card-subtitle mb-2 text-muted"> <div class="card-body">
{% if api_key.last_used %} <h5 class="card-title">{{ api_key.name }}</h5>
Last used: {{ api_key.last_used | dt }} <br> <h6 class="card-subtitle mb-2 text-muted">
Used: {{ api_key.times }} times. {% if api_key.last_used %}
{% else %} Last used: {{ api_key.last_used | dt }} <br>
Never used Used: {{ api_key.times }} times.
{% endif %} {% else %}
</h6> Never used
{% endif %}
</h6>
<div class="input-group"> <div class="input-group">
<input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********"> <input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text"> <span class="input-group-text">
<i class="fe fe-eye toggle-api-key" data-show="off" data-secret="{{ api_key.code }}" <i class="fe fe-eye toggle-api-key" data-show="off" data-secret="{{ api_key.code }}"
></i> ></i>
</span> </span>
</div> </div>
</div> </div>
<br> <br>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<button class="clipboard btn btn-primary" data-clipboard-action="copy" <button class="clipboard btn btn-primary" data-clipboard-action="copy"
data-clipboard-text="{{ api_key.code }}" data-clipboard-text="{{ api_key.code }}"
data-clipboard-target="#apikey-{{ api_key.id }}"> data-clipboard-target="#apikey-{{ api_key.id }}">
Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i> Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i>
</button> </button>
</div> </div>
<div class="col"> <div class="col">
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="delete"> <input type="hidden" name="form-name" value="delete">
<input type="hidden" name="api-key-id" value="{{ api_key.id }}"> <input type="hidden" name="api-key-id" value="{{ api_key.id }}">
<span class="card-link btn btn-link float-right text-danger delete-api-key"> <span class="card-link btn btn-link float-right text-danger delete-api-key">
Delete Delete
</span> </span>
</form> </form>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> {% endfor %}
{% endfor %} </div>
<hr>
<form method="post"> <form method="post">
{{ new_api_key_form.csrf_token }} {{ new_api_key_form.csrf_token }}
<input type="hidden" name="form-name" value="create"> <input type="hidden" name="form-name" value="create">
<h2 class="h4">New Api Key</h2>
<label class="form-label">Api Key Name</label>
<small>Name of the api key, e.g. where it will be used.</small>
{{ new_api_key_form.name(class="form-control", placeholder="Chrome, Firefox") }} {{ new_api_key_form.name(class="form-control", placeholder="Chrome, Firefox") }}
{{ render_field_errors(new_api_key_form.name) }} {{ render_field_errors(new_api_key_form.name) }}
<div class="small-text">Name of the api key, e.g. where it will be used.</div>
<button class="btn btn-lg btn-success mt-2">Create</button> <button class="btn btn-lg btn-success mt-2">Create</button>
</form> </form>

47
app/dashboard/templates/dashboard/custom_domain.html
View file

@ -31,42 +31,45 @@
You could also enable <b>catch-all</b> feature that allows you to create aliases on-the-fly. You could also enable <b>catch-all</b> feature that allows you to create aliases on-the-fly.
</div> </div>
{% for custom_domain in custom_domains %} <div class="row">
<div class="card" style=""> {% for custom_domain in custom_domains %}
<div class="card-body"> <div class="col-12 col-lg-6">
<h5 class="card-title"> <div class="card" style="">
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a> <div class="card-body">
{% if custom_domain.verified %} <h5 class="card-title">
<span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span> <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
{% else %} {% if custom_domain.verified %}
<span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed"> <span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
{% else %}
<span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
<a href="{{ url_for('dashboard.domain_detail_dns', custom_domain_id=custom_domain.id) }}" <a href="{{ url_for('dashboard.domain_detail_dns', custom_domain_id=custom_domain.id) }}"
class="text-decoration-none">🚫 class="text-decoration-none">🚫
</a> </a>
</span> </span>
{% endif %} {% endif %}
</h5> </h5>
<h6 class="card-subtitle mb-2 text-muted"> <h6 class="card-subtitle mb-2 text-muted">
Created {{ custom_domain.created_at | dt }} <br> Created {{ custom_domain.created_at | dt }} <br>
<span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases. <span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
</h6> </h6>
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a> <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a>
</div>
</div>
</div> </div>
</div> {% endfor %}
{% endfor %} </div>
<hr>
<form method="post"> <form method="post">
{{ new_custom_domain_form.csrf_token }} {{ new_custom_domain_form.csrf_token }}
<input type="hidden" name="form-name" value="create"> <input type="hidden" name="form-name" value="create">
<label class="form-label">Domain</label> <h2 class="h4">New Domain</h2>
<small>Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></small>
{{ new_custom_domain_form.domain(class="form-control", placeholder="my-domain.com") }} {{ new_custom_domain_form.domain(class="form-control", placeholder="my-domain.com") }}
{{ render_field_errors(new_custom_domain_form.domain) }} {{ render_field_errors(new_custom_domain_form.domain) }}
<div class="small-text">Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></div>
<button class="btn btn-lg btn-success mt-2">Create</button> <button class="btn btn-lg btn-success mt-2">Create</button>
</form> </form>

71
app/dashboard/templates/dashboard/directory.html
View file

@ -53,55 +53,56 @@
</div> </div>
{% for dir in dirs %} <div class="row">
<div class="card" style=""> {% for dir in dirs %}
<div class="card-body"> <div class="col-12 col-lg-6">
<h5 class="card-title"> <div class="card" style="">
{{ dir.name }} <div class="card-body">
</h5> <h5 class="card-title">
<h6 class="card-subtitle mb-2 text-muted"> {{ dir.name }}
Created {{ dir.created_at | dt }} <br> </h5>
<span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases. <h6 class="card-subtitle mb-2 text-muted">
</h6> Created {{ dir.created_at | dt }} <br>
</div> <span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases.
</h6>
</div>
<div class="card-footer p-0"> <div class="card-footer p-0">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="delete"> <input type="hidden" name="form-name" value="delete">
<input type="hidden" class="dir-name" value="{{ dir.name }}"> <input type="hidden" class="dir-name" value="{{ dir.name }}">
<input type="hidden" name="dir-id" value="{{ dir.id }}"> <input type="hidden" name="dir-id" value="{{ dir.id }}">
<span class="card-link btn btn-link float-right text-danger delete-dir"> <span class="card-link btn btn-link float-right text-danger delete-dir">
Delete Delete
</span> </span>
</form> </form>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
{% endfor %}
</div>
</div> <form method="post" class="mt-2">
{% endfor %}
{% if dirs|length > 0 %}
<hr>
{% endif %}
<form method="post" class="mt-6">
{{ new_dir_form.csrf_token }} {{ new_dir_form.csrf_token }}
<input type="hidden" name="form-name" value="create"> <input type="hidden" name="form-name" value="create">
<div class="font-weight-bold">Directory Name</div> <h2 class="h4">New Directory</h2>
<div class="small-text">
Directory name must be at least 3 characters.
Only lowercase letter, number, dash (-), underscore (_) can be used.
</div>
{{ new_dir_form.name(class="form-control", placeholder="my-directory", {{ new_dir_form.name(class="form-control", placeholder="my-directory",
pattern="[0-9a-z-_]{3,}", pattern="[0-9a-z-_]{3,}",
title="Only letter, number, dash (-), underscore (_) can be used. Directory name must be at least 3 characters.") }} title="Only letter, number, dash (-), underscore (_) can be used. Directory name must be at least 3 characters.") }}
{{ render_field_errors(new_dir_form.name) }} {{ render_field_errors(new_dir_form.name) }}
<div class="small-text">
Directory name must be at least 3 characters.
Only lowercase letter, number, dash (-), underscore (_) can be used.
</div>
<button class="btn btn-lg btn-success mt-2">Create</button> <button class="btn btn-lg btn-success mt-2">Create</button>
</form> </form>
@ -117,7 +118,7 @@
let that = $(this); let that = $(this);
let message = `All aliases associated with <b>${directory}</b> directory will also be deleted, ` + let message = `All aliases associated with <b>${directory}</b> directory will also be deleted, ` +
" please confirm."; " please confirm.";
bootbox.confirm({ bootbox.confirm({
message: message, message: message,

123
app/dashboard/templates/dashboard/mailbox.html
View file

@ -34,88 +34,89 @@
if you want to create aliases for your buddy. if you want to create aliases for your buddy.
</div> </div>
{% for mailbox in mailboxes %} <div class="row">
<div class="card"> {% for mailbox in mailboxes %}
<div class="card-body"> <div class="col-12 col-lg-6">
<h5 class="card-title"> <div class="card">
{{ mailbox.email }} <div class="card-body">
{% if mailbox.verified %} <h5 class="card-title">
<span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Verified">✅</span> {{ mailbox.email }}
{% else %} {% if mailbox.verified %}
<span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Not 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> </span>
{% endif %} {% endif %}
{% if mailbox.pgp_finger_print %} {% if mailbox.pgp_finger_print %}
<span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span> <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
{% endif %} {% endif %}
{% if mailbox.id == current_user.default_mailbox_id %} {% if mailbox.id == current_user.default_mailbox_id %}
<div class="badge badge-primary float-right" data-toggle="tooltip" <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 title="When a new random alias is created, it belongs to the default mailbox">Default Mailbox
</div> </div>
{% endif %} {% endif %}
</h5> </h5>
<h6 class="card-subtitle mb-2 text-muted"> <h6 class="card-subtitle mb-2 text-muted">
Created {{ mailbox.created_at | dt }} <br> Created {{ mailbox.created_at | dt }} <br>
<span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases. <br> <span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases. <br>
</h6> </h6>
<a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit ➡</a> <a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit ➡</a>
</div> </div>
<div class="card-footer p-0"> <div class="card-footer p-0">
<div class="row"> <div class="row">
{% if mailbox.verified %} {% if mailbox.verified %}
<div class="col"> <div class="col">
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="set-default"> <input type="hidden" name="form-name" value="set-default">
<input type="hidden" class="mailbox" value="{{ mailbox.email }}"> <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
<input type="hidden" name="mailbox-id" value="{{ mailbox.id }}"> <input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
<button class="card-link btn btn-link <button class="card-link btn btn-link
{% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}" {% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}"
> >
Set As Default Mailbox Set As Default Mailbox
</button> </button>
</form> </form>
</div> </div>
{% endif %} {% endif %}
<div class="col"> <div class="col">
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="delete"> <input type="hidden" name="form-name" value="delete">
<input type="hidden" class="mailbox" value="{{ mailbox.email }}"> <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
<input type="hidden" name="mailbox-id" value="{{ mailbox.id }}"> <input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
<span class="card-link btn btn-link text-danger float-right delete-mailbox <span class="card-link btn btn-link text-danger float-right delete-mailbox
{% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}"> {% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}">
Delete Delete
</span> </span>
</form> </form>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
{% endfor %}
</div>
</div> <form method="post" class="mt-2">
{% endfor %}
{% if mailboxs|length > 0 %}
<hr>
{% endif %}
<form method="post" class="mt-6">
{{ new_mailbox_form.csrf_token }} {{ new_mailbox_form.csrf_token }}
<input type="hidden" name="form-name" value="create"> <input type="hidden" name="form-name" value="create">
<div class="font-weight-bold">Email</div> <h2 class="h4">New Mailbox</h2>
<div class="small-text">
A verification email will be sent to this email to make sure you have access to this email.
</div>
{{ new_mailbox_form.email(class="form-control", placeholder="email@example.com") }} {{ new_mailbox_form.email(class="form-control", placeholder="email@example.com") }}
{{ render_field_errors(new_mailbox_form.email) }} {{ render_field_errors(new_mailbox_form.email) }}
<div class="small-text">
A verification email will be sent to this email address.
</div>
<button class="btn btn-lg btn-success mt-2">Create</button> <button class="btn btn-lg btn-success mt-2">Create</button>
</form> </form>
@ -131,7 +132,7 @@
let that = $(this); let that = $(this);
let message = `All aliases owned by this mailbox <b>${mailbox}</b> will be also deleted, ` + let message = `All aliases owned by this mailbox <b>${mailbox}</b> will be also deleted, ` +
" please confirm."; " please confirm.";
bootbox.confirm({ bootbox.confirm({
message: message, message: message,