From cc4a6d08e7e7dc701b3e54e4c9adcb2beca20188 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 28 Sep 2023 16:42:05 +0530
Subject: [PATCH] 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 | 80 +++++++++++----------
 web/src/portico/email_log.js                |  8 ++-
 web/styles/portico/email_log.css            | 12 ++++
 web/webpack.dev-assets.json                 |  1 +
 4 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/templates/zerver/development/email_log.html b/templates/zerver/development/email_log.html
index 121d6c7866..cd29c54b32 100644
--- a/templates/zerver/development/email_log.html
+++ b/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 class="modal-body">
-            <div class="input-group">
-                <form id="smtp_form">
-                    {{ csrf_input }}
-                    <div class="alert alert-info"
-                      id="smtp_form_status">
-                        Updated successfully.
+    <div id="forward_email_modal" class="micromodal" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1">
+            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
+                <header class="modal__header">
+                    <h1 class="modal__title dialog_heading">
+                        {{ _('Forward emails to an email account') }}
+                    </h1>
+                    <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">
-                        <strong>Forwards all emails sent in the
-                            development environment to an external
-                            mail account.
-                        </strong>
-                    </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>
+                </main>
+                <footer class="modal__footer">
+                    <button class="modal__btn dialog_exit_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Close') }}</button>
+                    <button class="modal__btn dialog_submit_button">
+                        <span>{{ _('Update') }}</span>
+                    </button>
+                </footer>
             </div>
         </div>
-        <div class="modal-footer">
-            <button id='save_smptp_details'>Update</button>
-            <button data-dismiss="modal">Close</button>
-        </div>
     </div>
 </div>
 {% endblock %}
diff --git a/web/src/portico/email_log.js b/web/src/portico/email_log.js
index 40c956d0b7..230ce66dbc 100644
--- a/web/src/portico/email_log.js
+++ b/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");
+    });
 });
diff --git a/web/styles/portico/email_log.css b/web/styles/portico/email_log.css
index f5604d23d4..0527494398 100644
--- a/web/styles/portico/email_log.css
+++ b/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;
         }
diff --git a/web/webpack.dev-assets.json b/web/webpack.dev-assets.json
index 534539d657..376599af98 100644
--- a/web/webpack.dev-assets.json
+++ b/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"