From 8a147e36a77e81b0c23cae506b2ffc699ed1a6c2 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Sun, 3 May 2020 10:47:29 +0200
Subject: [PATCH] create how-to-use section for api key, domain, directory,
 mailbox

---
 app/dashboard/templates/dashboard/api_key.html      |  9 +++++++--
 .../templates/dashboard/custom_domain.html          |  9 +++++++--
 app/dashboard/templates/dashboard/directory.html    | 13 ++++++++++---
 app/dashboard/templates/dashboard/mailbox.html      |  9 +++++++--
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/app/dashboard/templates/dashboard/api_key.html b/app/dashboard/templates/dashboard/api_key.html
index 6d93fccc..f16e22e9 100644
--- a/app/dashboard/templates/dashboard/api_key.html
+++ b/app/dashboard/templates/dashboard/api_key.html
@@ -12,9 +12,14 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> API Key </h1>
+      <h1 class="h3"> API Key
+        <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>
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         The API Key is used on the SimpleLogin Chrome/Firefox/Safari extension. <br>
         You can install the Chrome extension on
         <a href="https://chrome.google.com/webstore/detail/simplelogin-extension/dphilobhebphkdjbpfohgikllaljmgbn"
diff --git a/app/dashboard/templates/dashboard/custom_domain.html b/app/dashboard/templates/dashboard/custom_domain.html
index 702d2dee..a03047db 100644
--- a/app/dashboard/templates/dashboard/custom_domain.html
+++ b/app/dashboard/templates/dashboard/custom_domain.html
@@ -11,7 +11,12 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Custom Domains </h1>
+      <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() %}
         <div class="alert alert-danger" role="alert">
@@ -19,7 +24,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for
         example
         contact@example.com, help@example.com, etc with SimpleLogin. <br>
diff --git a/app/dashboard/templates/dashboard/directory.html b/app/dashboard/templates/dashboard/directory.html
index 02ba129e..8f7ed8fe 100644
--- a/app/dashboard/templates/dashboard/directory.html
+++ b/app/dashboard/templates/dashboard/directory.html
@@ -8,7 +8,13 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Directories </h1>
+      <h1 class="h3"> Directories
+        <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() %}
         <div class="alert alert-danger" role="alert">
@@ -16,14 +22,15 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         <div>
           Directory allows you to create aliases <b>on the fly</b>.
         </div>
         <div class="mt-2 pb-2">
           1️⃣ Pick a name for your directory, says <em>my_dir</em> <br>
 
-          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias beforehand</b>
+          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias
+          beforehand</b>
         </div>
         <div class="pl-3 py-2 bg-white">
           <em>my_dir/<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> or <br>
diff --git a/app/dashboard/templates/dashboard/mailbox.html b/app/dashboard/templates/dashboard/mailbox.html
index 67850458..99075f25 100644
--- a/app/dashboard/templates/dashboard/mailbox.html
+++ b/app/dashboard/templates/dashboard/mailbox.html
@@ -8,7 +8,12 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Mailboxes </h1>
+      <h1 class="h3"> Mailboxes
+        <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() %}
         <div class="alert alert-danger" role="alert">
@@ -16,7 +21,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" 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>