From ea5281de952d48da2e70d4141eecb608f661e43b Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Tue, 6 Apr 2021 18:10:32 +0200
Subject: [PATCH] automatically show how-to-use

---
 app/dashboard/templates/dashboard/custom_domain.html | 12 ++++++++++++
 app/dashboard/templates/dashboard/directory.html     |  2 +-
 app/dashboard/templates/dashboard/mailbox.html       |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/dashboard/templates/dashboard/custom_domain.html b/app/dashboard/templates/dashboard/custom_domain.html
index 9ce13981..931c22bc 100644
--- a/app/dashboard/templates/dashboard/custom_domain.html
+++ b/app/dashboard/templates/dashboard/custom_domain.html
@@ -12,6 +12,10 @@
   <div class="row">
     <div class="col">
       <h1 class="h3"> Custom Domains
+        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
+           aria-expanded="false" aria-controls="collapseExample">
+          How to use <i class="fe fe-chevrons-down"></i>
+        </a>
       </h1>
 
       {% if not current_user.is_premium() %}
@@ -23,6 +27,14 @@
         </div>
       {% endif %}
 
+      <div class="alert alert-primary collapse {% if not custom_domains %} show {% endif %}" id="howtouse" role="alert">
+        By adding your domain, you can create aliases like <b>hi@my-domain.com</b> <br>
+
+        You can also enable <b>catch-all</b> to create aliases on-the-fly:
+        simply use <b>anything@my-domain.com</b> and it'll be created when
+        it receives an email.
+      </div>
+
       <div class="row">
         {% for custom_domain in custom_domains %}
           <div class="col-12 col-lg-6">
diff --git a/app/dashboard/templates/dashboard/directory.html b/app/dashboard/templates/dashboard/directory.html
index 5c577382..9558cbdc 100644
--- a/app/dashboard/templates/dashboard/directory.html
+++ b/app/dashboard/templates/dashboard/directory.html
@@ -22,7 +22,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary collapse" id="howtouse" role="alert">
+      <div class="alert alert-primary collapse {% if not dirs %} show {% endif %}" id="howtouse" role="alert">
         <div>
           Directory allows you to create aliases <b>on the fly</b>.
         </div>
diff --git a/app/dashboard/templates/dashboard/mailbox.html b/app/dashboard/templates/dashboard/mailbox.html
index cca2e078..af627118 100644
--- a/app/dashboard/templates/dashboard/mailbox.html
+++ b/app/dashboard/templates/dashboard/mailbox.html
@@ -21,7 +21,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary collapse" id="howtouse" role="alert">
+      <div class="alert alert-primary collapse {% if mailboxes|length == 1 %} show {% endif %}" id="howtouse" role="alert">
         A <em>mailbox</em> is just another personal email address. When creating a new alias, you could choose the
         mailbox that <em>owns</em> this alias, i.e: <br>
         - all emails sent to this alias will be forwarded to this mailbox <br>