Make UI more consistent
This commit is contained in:
parent
b19dfc6ef4
commit
cfdaf659f9
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
{% block default_content %}
|
{% block default_content %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 offset-md-2">
|
<div class="col">
|
||||||
<h1 class="h3"> API Key </h1>
|
<h1 class="h3"> API Key </h1>
|
||||||
|
|
||||||
<div class="alert alert-primary" role="alert">
|
<div class="alert alert-primary" role="alert">
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% for api_key in api_keys %}
|
{% for api_key in api_keys %}
|
||||||
<div class="card" style="max-width: 50rem">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">{{ api_key.name }}</h5>
|
<h5 class="card-title">{{ api_key.name }}</h5>
|
||||||
<h6 class="card-subtitle mb-2 text-muted">
|
<h6 class="card-subtitle mb-2 text-muted">
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
{% block default_content %}
|
{% block default_content %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 offset-md-2">
|
<div class="col">
|
||||||
<h1 class="h3"> Custom Domains </h1>
|
<h1 class="h3"> Custom Domains </h1>
|
||||||
|
|
||||||
{% if not current_user.is_premium() %}
|
{% if not current_user.is_premium() %}
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% for custom_domain in custom_domains %}
|
{% for custom_domain in custom_domains %}
|
||||||
<div class="card" style="max-width: 50rem">
|
<div class="card" style="">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">
|
<h5 class="card-title">
|
||||||
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
|
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
{% block default_content %}
|
{% block default_content %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 offset-md-2">
|
<div class="col">
|
||||||
<h1 class="h3"> Directories </h1>
|
<h1 class="h3"> Directories </h1>
|
||||||
|
|
||||||
{% if not current_user.is_premium() %}
|
{% if not current_user.is_premium() %}
|
||||||
|
@ -39,7 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% for dir in dirs %}
|
{% for dir in dirs %}
|
||||||
<div class="card" style="max-width: 50rem">
|
<div class="card" style="">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">
|
<h5 class="card-title">
|
||||||
{{ dir.name }}
|
{{ dir.name }}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
{% block default_content %}
|
{% block default_content %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 offset-md-2">
|
<div class="col">
|
||||||
<h1 class="h3"> Mailboxes </h1>
|
<h1 class="h3"> Mailboxes </h1>
|
||||||
|
|
||||||
{% if not current_user.is_premium() %}
|
{% if not current_user.is_premium() %}
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% for mailbox in mailboxes %}
|
{% for mailbox in mailboxes %}
|
||||||
<div class="card" style="max-width: 50rem">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">
|
<h5 class="card-title">
|
||||||
{{ mailbox.email }}
|
{{ mailbox.email }}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
{% set active_page = "setting" %}
|
{% set active_page = "setting" %}
|
||||||
|
|
||||||
{% block default_content %}
|
{% block default_content %}
|
||||||
<div style="max-width: 60em; margin: auto">
|
<div class="col">
|
||||||
<h1 class="h3 mb-5"> Quarantine </h1>
|
<h1 class="h3 mb-5"> Quarantine </h1>
|
||||||
|
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
|
|
|
@ -6,9 +6,19 @@
|
||||||
Settings
|
Settings
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
<style>
|
||||||
|
.card-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block default_content %}
|
{% block default_content %}
|
||||||
|
|
||||||
<div class="col-md-8 offset-md-2 pb-3">
|
<div class="col pb-3">
|
||||||
<!-- Change email -->
|
<!-- Change email -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<form method="post" enctype="multipart/form-data">
|
<form method="post" enctype="multipart/form-data">
|
||||||
|
@ -75,12 +85,11 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">Multi-Factor Authentication (MFA)
|
<div class="card-title">Multi-Factor Authentication (MFA)</div>
|
||||||
<div class="small-text mt-1 mb-3">
|
<div class="mb-3">
|
||||||
Secure your account with Multi-Factor Authentication. <br>
|
Secure your account with Multi-Factor Authentication. <br>
|
||||||
This requires having applications like Google Authenticator, Authy, FreeOTP, etc.
|
This requires having applications like Google Authenticator, Authy, FreeOTP, etc.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{% if not current_user.enable_otp %}
|
{% if not current_user.enable_otp %}
|
||||||
<a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Enable</a>
|
<a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Enable</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
@ -93,9 +102,9 @@
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">
|
<div class="card-title">
|
||||||
Change password
|
Change password
|
||||||
<div class="small-text mt-1 mb-3">
|
|
||||||
You will receive an email containing instructions on how to change password.
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
You will receive an email containing instructions on how to change password.
|
||||||
</div>
|
</div>
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<input type="hidden" name="form-name" value="change-password">
|
<input type="hidden" name="form-name" value="change-password">
|
||||||
|
@ -106,9 +115,8 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">Random Alias
|
<div class="card-title">Random Alias</div>
|
||||||
<div class="small-text mt-1 mb-3">Choose how to create your email alias by default</div>
|
<div class="mb-3">Choose how to create your email alias by default</div>
|
||||||
</div>
|
|
||||||
<form method="post" class="form-inline">
|
<form method="post" class="form-inline">
|
||||||
<input type="hidden" name="form-name" value="change-alias-generator">
|
<input type="hidden" name="form-name" value="change-alias-generator">
|
||||||
<select class="custom-select mr-sm-2" name="alias-generator-scheme">
|
<select class="custom-select mr-sm-2" name="alias-generator-scheme">
|
||||||
|
@ -126,12 +134,11 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title" id="notification">Newsletters
|
<div class="card-title" id="notification">Newsletters</div>
|
||||||
<div class="small-text mt-1 mb-3">
|
<div class="mb-3">
|
||||||
Every now and then we can send you an email
|
Every now and then we can send you an email
|
||||||
to let you know about a new feature that might be useful to you.
|
to let you know about a new feature that might be useful to you.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<input type="hidden" name="form-name" value="notification-preference">
|
<input type="hidden" name="form-name" value="notification-preference">
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
|
@ -204,14 +211,14 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">Deleted Aliases
|
<div class="card-title">Deleted Aliases</div>
|
||||||
<div class="small-text mt-1 mb-3" style="max-width: 40rem">
|
<div class="mb-3" style="">
|
||||||
When an alias is deleted, all its activities are deleted and no emails can be sent to it. <br>
|
When an alias is deleted, all its activities are deleted and no emails can be sent to it.
|
||||||
It is moved to another location and only used to check when new alias is created. <br>
|
The deleted alias is moved to another location and only used to check when new alias is created. <br>
|
||||||
This check is necessary to avoid someone else accidentally taking this alias. <br>
|
This check is necessary to avoid someone else accidentally taking this alias.
|
||||||
Because in this case, the other person might receive inadvertently information that belong to you. <br>
|
Otherwise the other person might receive inadvertently information that belong to you. <br>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="{{ url_for('dashboard.deleted_alias_route') }}" class="btn btn-outline-primary">
|
<a href="{{ url_for('dashboard.deleted_alias_route') }}" class="btn btn-outline-primary">
|
||||||
See deleted aliases
|
See deleted aliases
|
||||||
</a>
|
</a>
|
||||||
|
@ -220,17 +227,16 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">Quarantine
|
<div class="card-title">Quarantine</div>
|
||||||
<div class="small-text mt-1 mb-3" style="max-width: 40rem">
|
<div class="mb-3">
|
||||||
When an email sent to your alias is classified as spam or refused by your email provider,
|
When an email sent to your alias is classified as spam or refused by your email provider,
|
||||||
it usually means your alias has been leaked to a spammer. <br>
|
it usually means your alias has been leaked to a spammer. <br>
|
||||||
In this case SimpleLogin will keep a copy of this email (so it isn't lost)
|
In this case SimpleLogin will <b>keep</b> a copy of this email (so it isn't lost)
|
||||||
and notify you so you can take a look at its content and take appropriate actions. <br>
|
and notify you so you can take a look at its content and take appropriate actions. <br>
|
||||||
|
|
||||||
The emails are deleted in 7 days.
|
The emails are deleted in 7 days.
|
||||||
This is an exceptional case where SimpleLogin stores the email.
|
This is an exceptional case where SimpleLogin stores the email.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<a href="{{ url_for('dashboard.refused_email_route') }}" class="btn btn-outline-primary">
|
<a href="{{ url_for('dashboard.refused_email_route') }}" class="btn btn-outline-primary">
|
||||||
See refused emails
|
See refused emails
|
||||||
</a>
|
</a>
|
||||||
|
@ -239,11 +245,10 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">Export Data
|
<div class="card-title">Export Data</div>
|
||||||
<div class="small-text mt-1 mb-3">
|
<div class="mb-3">
|
||||||
You can download all aliases you have created on SimpleLogin along with other data.
|
You can download all aliases you have created on SimpleLogin along with other data.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<input type="hidden" name="form-name" value="export-data">
|
<input type="hidden" name="form-name" value="export-data">
|
||||||
<button class="btn btn-outline-info">Export Data</button>
|
<button class="btn btn-outline-info">Export Data</button>
|
||||||
|
@ -254,11 +259,10 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-title">Delete Account
|
<div class="card-title">Delete Account</div>
|
||||||
<div class="small-text mt-1 mb-3">Please note that this operation is irreversible.
|
<div class="mb-3">Please note that this operation is irreversible.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<input type="hidden" name="form-name" value="delete-account">
|
<input type="hidden" name="form-name" value="delete-account">
|
||||||
<span class="delete-account btn btn-outline-danger">Delete account</span>
|
<span class="delete-account btn btn-outline-danger">Delete account</span>
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
|
|
||||||
<div class="row row-cards row-deck mt-4">
|
<div class="row row-cards row-deck mt-4">
|
||||||
{% for client in clients %}
|
{% for client in clients %}
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="card-title d-flex align-items-center">
|
<div class="card-title d-flex align-items-center">
|
||||||
|
|
Loading…
Reference in a new issue