Adding flow to add new emails to an account

src/project/static/css/dark-style.css

@@ -54,3 +54,14 @@ html.dark article table tbody tr:nth-child(2n+1) td {
 html.dark article table tbody tr:last-child td {
   border-bottom: var(--half-space) solid var(--twilight);
 }
+
+html.dark form>div>input[type="text"],
+html.dark form>div>input[type="password"],
+html.dark input[type="email"] {
+  border: 2px solid var(--twilight);
+  border-radius: 6px;
+  padding: 8px;
+  background: var(--dark-dark);
+  width: 100%;
+  color: var(--light-dust);
+}

src/project/static/css/style.css

@@ -244,7 +244,7 @@ article {
   padding: var(--double-space) var(--outer-space);
 }
 
-article>div.content-view {
+article div.content-view {
   background: var(--dust);
   padding: var(--double-space);
   margin-bottom: var(--space);
@@ -320,6 +320,10 @@ button:disabled {
   cursor: default;
 }
 
+button.secondary {
+  background: var(--twilight);
+}
+
 article table {
   width: 100%;
   border-spacing: 0;
@@ -387,7 +391,7 @@ input[type="email"] {
   padding: 8px;
   background: var(--light-dust);
   width: 100%;
-  color : var(--dark);
+  color: var(--dark);
 }
 
 form fieldset {
@@ -400,6 +404,28 @@ form div.buttonHolder button {
   display: inline-block;
 }
 
+#email-add-overlay {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+#email-add-overlay .content-view {
+  width: 600px;
+  padding: var(--double-space);
+}
+
+#email-add-overlay .content-view p {
+  margin: var(--double-space) 0;
+}
+
 #login {
   height: 100%;
   display: flex;

src/project/templates/account/email.html

@@ -16,7 +16,7 @@
                 {% csrf_token %}
                 <fieldset class="blockLabels">
                     <div class="buttonHolder">
-                        <button class="small" name="action_add" style="float:right">Add Email …</button>
+                        <button class="small" name="action_add_open" style="float:right">Add Email …</button>
                         <button class="small" disabled type="submit" id="action_primary" name="action_primary">Make Primary</button>
                         <button class="small" type="submit" name="action_send">Re-send Verification</button>
                         <button class="small" type="submit" name="action_remove">Remove</button>
@@ -76,21 +76,22 @@
                 {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
             </p>
         {% endif %}
-        <!--
-        <hr />
-
-        <h3>{% trans "Add E-mail" %}</h3>
-        <div class="panel-body">
-            <form method="post" action="{% url 'account_email' %}"
-                  class="add_email">
-                {% csrf_token %}
-                {{ form.as_p }}
-                <button name="action_add" class="btn btn-success" type="submit">
-                    {% trans "Add E-mail" %}
-                </button>
-            </form>
+    </div>
+    <div id="email-add-overlay">
+        <div class="content-view">
+            <h3>{% trans "Add E-mail" %}</h3>
+            <div class="panel-body">
+                <form method="post" action="{% url 'account_email' %}"
+                      class="add_email">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button name="action_add" style="float:right" type="submit">
+                        {% trans "Add E-mail" %}
+                    </button>
+                    <button id="overlay-close-button" class="secondary">Cancel</button>
+                </form>
+            </div>
         </div>
-        -->
     </div>
 
     <script type="text/javascript">
@@ -105,6 +106,24 @@
                 });
             }
 
+            let addEmail = document.getElementsByName('action_add_open')[0];
+
+            addEmail.addEventListener('click', function(e) {
+                e.preventDefault();
+                let overlay = document.getElementById('email-add-overlay')    
+                overlay.style.display = 'flex'
+
+                window.addEventListener('keydown', function(e) {
+                    if (e.key == 'Escape') {
+                        overlay.style.display = 'none'
+                    }
+                })
+
+                document.getElementById('overlay-close-button').addEventListener('click', function() {
+                    overlay.style.display = 'none'
+                })
+            })
+
             let radio_actions = document.getElementsByName('email');
             if (radio_actions.length) {
                 for (radio of radio_actions) {