development: Update modal in emails page to use micromodal.

We now use micromodal in the modal on dev server emails page to
make it consistent with other modals in the app and this is
preparatory work for moving away from bootstrap as well.

templates/zerver/development/email_log.html

@@ -18,7 +18,7 @@
                 <input type="checkbox" autocomplete="off" id="toggle"/>
                 <strong>Show text only version</strong>
             </label>
-            <a href="#" data-toggle="modal" data-target="#forward_email_modal">
+            <a href="#" class="open-forward-email-modal">
                 <strong>Forward emails to an email account</strong>
             </a>
         </div>
@@ -26,44 +26,52 @@
     <div class="emails">
         {{ log |safe }}
     </div>
-    <div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
+    <div id="forward_email_modal" class="micromodal" aria-hidden="true">
-        <div class="modal-body">
+        <div class="modal__overlay" tabindex="-1">
-            <div class="input-group">
+            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
-                <form id="smtp_form">
+                <header class="modal__header">
-                    {{ csrf_input }}
+                    <h1 class="modal__title dialog_heading">
-                    <div class="alert alert-info"
+                        {{ _('Forward emails to an email account') }}
-                      id="smtp_form_status">
+                    </h1>
-                        Updated successfully.
+                    <button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
+                </header>
+                <main class="modal__content">
+                    <div class="input-group">
+                        <form id="smtp_form">
+                            {{ csrf_input }}
+                            <div class="alert alert-info" id="smtp_form_status">
+                                Updated successfully.
+                            </div>
+                            <label for="forward">
+                                Forwards all emails sent in the development environment to an external mail account.
+                            </label>
+                            <label class="radio">
+                                <input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
+                            </label>
+                            <label class="radio">
+                                <input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
+                            </label>
+                            <div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
+                                <label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
+                                <input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
+                            </div>
+                            <br />
+                            <div class="alert alert-info">
+                                You must set up SMTP as described
+                                <a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
+                                first before enabling this.
+                            </div>
+                        </form>
                     </div>
-                    <label for="forward">
+                </main>
-                        <strong>Forwards all emails sent in the
+                <footer class="modal__footer">
-                            development environment to an external
+                    <button class="modal__btn dialog_exit_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Close') }}</button>
-                            mail account.
+                    <button class="modal__btn dialog_submit_button">
-                        </strong>
+                        <span>{{ _('Update') }}</span>
-                    </label>
+                    </button>
-                    <label class="radio">
+                </footer>
-                        <input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
-                    </label>
-                    <label class="radio">
-                        <input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
-                    </label>
-                    <div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
-                        <label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
-                        <input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
-                    </div>
-                    <br />
-                    <div class="alert alert-info">
-                        You must set up SMTP as described
-                        <a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
-                        first before enabling this.
-                    </div>
-                </form>
             </div>
         </div>
-        <div class="modal-footer">
-            <button id='save_smptp_details'>Update</button>
-            <button data-dismiss="modal">Close</button>
-        </div>
     </div>
 </div>
 {% endblock %}

web/src/portico/email_log.js

@@ -2,6 +2,8 @@ import $ from "jquery";
 
 import * as channel from "../channel";
 
+import * as portico_modals from "./portico_modals";
+
 $(() => {
     // This code will be executed when the user visits /emails in
     // development mode and email_log.html is rendered.
@@ -29,7 +31,7 @@ $(() => {
             $("#forward_address_sections").hide();
         }
     });
-    $("#save_smptp_details").on("click", () => {
+    $("#forward_email_modal .dialog_submit_button").on("click", () => {
         const address =
             $("input[name=forward]:checked").val() === "enabled" ? $("#address").val() : "";
         const csrf_token = $('input[name="csrfmiddlewaretoken"]').attr("value");
@@ -46,4 +48,8 @@ $(() => {
             },
         });
     });
+    $(".open-forward-email-modal").on("click", (e) => {
+        e.preventDefault();
+        portico_modals.open_modal("forward_email_modal");
+    });
 });

web/styles/portico/email_log.css

@@ -1,3 +1,7 @@
+:root {
+    --color-background-modal: hsl(0deg 0% 98%);
+}
+
 #dev-emails-container {
     .header {
         position: fixed;
@@ -17,6 +21,14 @@
     }
 
     #forward_email_modal {
+        .modal__content label {
+            font-size: 1rem;
+        }
+
+        #forward_address_sections {
+            margin-top: 20px;
+        }
+
         & label.radio {
             padding-left: 20px;
         }

web/webpack.dev-assets.json

@@ -10,6 +10,7 @@
     "dev-email-log": [
         "./src/bundles/common",
         "./src/portico/email_log",
+        "./src/portico/portico_modals",
         "./styles/portico/email_log.css",
         "./src/reload_state",
         "./src/channel"