distinguish between bounce and quarantine (#1167)

* distinguish between bounce and quarantine

- improve wording
- show bounce or quarantine badge

* prettify

templates/dashboard/refused_email.html

@@ -1,22 +1,41 @@
 {% extends "default.html" %}
 
 {% block title %}Quarantine{% endblock %}
+{% block head %}
+
+  <style>
+  li {
+      margin-top: 8px;
+  }
+  </style>
+{% endblock %}
 {% set active_page = "setting" %}
 {% block default_content %}
 
   <div class="col">
-    <h1 class="h3 mb-5">Quarantine</h1>
+    <h1 class="h3 mb-5">Quarantine & Bounce</h1>
     <div class="alert alert-info">
-      This page shows all emails that are potentially spams or malicious.
+      This page shows all emails that are either refused by your mailbox (bounced) or detected as spams/phishing (quarantine) via our
-      Usually these emails have been <b>refused</b> (or bounced) by your mailbox.
+      <a href="https://simplelogin.io/docs/getting-started/anti-phishing/"
-      <br />
+         target="_blank">anti-phishing program ↗</a>
-      - If an email is indeed spam, this means the alias is now in the hands of a spammer,
+      <ul class="p-4 mb-0">
-      in this case you should <b>disable</b> this alias.
+        <li>
-      <br />
+          If the email is indeed spam, this means the alias is now in the hands of a spammer,
-      - Otherwise, you should create a <b>filter</b> to avoid your email provider from blocking these emails.
+          you should probably <b>disable</b> the alias.
-      <br />
+        </li>
-      <a href="mailto:hi@simplelogin.io">Contact us↗</a>
+        <li>
-      if you need any help.
+          If the email isn't spam and your mailbox refuses the email, we recommend to create a <b>filter</b> to avoid your mailbox provider from blocking legitimate emails. Please refer to
+          <a href="https://simplelogin.io/docs/getting-started/troubleshooting/#emails-end-up-in-spam"
+             target="_blank">Setting up filter for SimpleLogin emails ↗</a>
+        </li>
+        <li>
+          If the email is flagged as spams/phishing, this means that the sender explicitly states their emails should respect
+          <b>DMARC</b> (an email authentication protocol)
+          and any email that violates this should either be quarantined or rejected. If possible, please contact the sender
+          so they can update their DMARC setting or fix their SPF/DKIM that cause the DMARC failure.
+          Their emails are probably being rejected or end up in spam at other email providers as well.
+        </li>
+      </ul>
     </div>
     {% if email_logs|length == 0 %}<div class="my-4 p-4 card">You don't have any emails in Quarantine.</div>{% endif %}
     {% for email_log in email_logs %}
@@ -25,7 +44,15 @@
       {% set contact = email_log.contact %}
       {% set alias = contact.alias %}
       <div class="card p-4 shadow-sm {% if email_log.id == highlight_id %} highlight-row{% endif %}">
-        <div class="small-text">Sent {{ refused_email.created_at | dt }}</div>
+        <div class="small-text">
+          Sent {{ refused_email.created_at | dt }}
+          {% if email_log.bounced %}
+
+            <span class="badge badge-info">Bounce</span>
+          {% else %}
+            <span class="badge badge-warning">Quarantine</span>
+          {% endif %}
+        </div>
         {% if email_log.is_reply %}
 
           From: {{ alias.email }}
@@ -37,16 +64,20 @@
           <span>
             To: {{ alias.email }}
             <a href='{{ url_for("dashboard.index", highlight_alias_id=alias.id) }}'
-               class="btn btn-sm btn-outline-danger">
+               class="text-danger small-text"
+               style="text-decoration: underline">
               Disable Alias
             </a>
           </span>
         {% endif %}
         {% if refused_email.deleted %}
 
-          <div>Email deleted {{ refused_email.delete_at | dt }}</div>
+          <div class="mt-6" style="font-weight: 600">Email deleted {{ refused_email.delete_at | dt }}</div>
         {% else %}
-          <a href="{{ refused_email.get_url() }}" download class="mt-4">Download →</a>
+          <a href="{{ refused_email.get_url() }}"
+             download
+             class="btn btn-outline-primary mt-4"
+             style="max-width: 20em">Download →</a>
           <div class="small-text">This will download a ".eml" file that you can open in your email client</div>
         {% endif %}
       </div>

templates/dashboard/setting.html

@@ -587,21 +587,20 @@
         <div class="card">
           <div class="card-body">
             <div class="card-title">
-              Quarantine
+              Quarantine & Bounces
             </div>
             <div class="mb-3">
-              When an email sent to your alias is classified as spam or refused by your email provider,
+              When an email is refused (or bounced) by your mailbox provider or flagged by
-              it usually means your alias has been leaked to a spammer.
+              <a href="https://simplelogin.io/docs/getting-started/anti-phishing/">SimpleLogin anti-phishing program</a>,
-              <br />
+              SimpleLogin keeps a copy of this email for 7 days so you can take a look at its content and take appropriate actions.
-              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 />
               The emails are deleted in 7 days.
-              This is an exceptional case where SimpleLogin stores the email.
+              <br />
+              This is an exceptional case where SimpleLogin temporarily stores the email.
             </div>
             <a href="{{ url_for('dashboard.refused_email_route') }}"
                class="btn btn-outline-primary">
-              See refused emails
+              See quarantine & bounce emails
             </a>
           </div>
         </div>