api_key_modal: Migrate modal to Micromodal.

frontend_tests/puppeteer_tests/settings.ts

@@ -69,7 +69,7 @@ async function test_get_api_key(page: Page): Promise<void> {
 
     const get_api_key_button_selector = "#get_api_key_button";
     await page.waitForSelector(get_api_key_button_selector, {visible: true});
-    await page.waitForFunction(() => $(":focus").attr("id") === "api_key_modal");
+    await common.wait_for_micromodal_to_open(page);
     await common.fill_form(page, "#api_key_form", {
         password: test_credentials.default_user.password,
     });
@@ -89,8 +89,8 @@ async function test_get_api_key(page: Page): Promise<void> {
     await page.click(download_zuliprc_selector);
     const zuliprc_decoded_url = await get_decoded_url_in_selector(page, download_zuliprc_selector);
     assert.match(zuliprc_decoded_url, zuliprc_regex, "Incorrect zuliprc file");
-    await page.click("#api_key_modal .close");
-    await common.wait_for_modal_to_close(page);
+    await page.click("#api_key_modal .modal__close");
+    await common.wait_for_micromodal_to_close(page);
 }
 
 async function test_webhook_bot_creation(page: Page): Promise<void> {

static/js/settings_account.js

@@ -1,5 +1,4 @@
 import $ from "jquery";
-import _ from "lodash";
 
 import render_confirm_deactivate_own_user from "../templates/confirm_dialog/confirm_deactivate_own_user.hbs";
 import render_dialog_change_password from "../templates/dialog_change_password.hbs";
@@ -289,7 +288,7 @@ export function set_up() {
     add_custom_profile_fields_to_settings();
     $("#account-settings-status").hide();
 
-    const setup_api_key_modal = _.once(() => {
+    const setup_api_key_modal = () => {
         function request_api_key(data) {
             channel.post({
                 url: "/json/fetch_api_key",
@@ -302,7 +301,9 @@ export function set_up() {
                     // remove it.
                     $("#api_key_status").remove();
                     $("#password_confirmation").hide();
+                    $("#get_api_key_button").hide();
                     $("#show_api_key").show();
+                    $("#api_key_buttons").show();
                 },
                 error(xhr) {
                     ui_report.error(
@@ -311,35 +312,45 @@ export function set_up() {
                         $("#api_key_status").expectOne(),
                     );
                     $("#show_api_key").hide();
-                    $("#api_key_modal").show();
                 },
             });
         }
 
-        $(".account-settings-form").append(render_settings_api_key_modal());
         $("#api_key_value").text("");
         $("#show_api_key").hide();
+        $("#api_key_buttons").hide();
         common.setup_password_visibility_toggle(
             "#get_api_key_password",
             "#get_api_key_password + .password_visibility_toggle",
             {tippy_tooltips: true},
         );
 
+        function do_get_api_key() {
+            $("#api_key_status").hide();
+            const data = {};
+            data.password = $("#get_api_key_password").val();
+            request_api_key(data);
+        }
+
         if (page_params.realm_password_auth_enabled === false) {
             // Skip the password prompt step, since the user doesn't have one.
             request_api_key({});
         } else {
             $("#get_api_key_button").on("click", (e) => {
-                const data = {};
                 e.preventDefault();
                 e.stopPropagation();
-
-                data.password = $("#get_api_key_password").val();
-                request_api_key(data);
+                do_get_api_key();
+            });
+            $("#get_api_key_password").on("keydown", (e) => {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    do_get_api_key();
+                }
             });
         }
 
-        $("#show_api_key").on("click", "button.regenerate_api_key", (e) => {
+        $("#regenerate_api_key").on("click", (e) => {
             channel.post({
                 url: "/json/users/me/api_key/regenerate",
                 success(data) {
@@ -363,17 +374,27 @@ export function set_up() {
             $(this).attr("href", settings_bots.encode_zuliprc_as_uri(data));
         });
 
-        $("#api_key_modal [data-dismiss=modal]").on("click", () => {
+        $("#api_key_modal [data-micromodal-close]").on("click", () => {
             common.reset_password_toggle_icons(
                 "#get_api_key_password",
                 "#get_api_key_password + .password_visibility_toggle",
             );
         });
-    });
+    };
 
     $("#api_key_button").on("click", (e) => {
+        $("body").append(render_settings_api_key_modal());
         setup_api_key_modal();
-        overlays.open_modal("#api_key_modal");
+        $("#api_key_status").hide();
+        overlays.open_modal("api_key_modal", {
+            autoremove: true,
+            micromodal: true,
+            micromodal_opts: {
+                onShow: () => {
+                    $("#get_api_key_password").trigger("focus");
+                },
+            },
+        });
         e.preventDefault();
         e.stopPropagation();
     });

static/styles/settings.css

@@ -990,6 +990,15 @@ input[type="checkbox"] {
     }
 }
 
+#api_key_status {
+    margin: 0;
+}
+
+#download_zuliprc {
+    color: hsl(0, 0%, 100%);
+    text-decoration: none;
+}
+
 #api_key_form,
 #change_password_modal {
     .password-div {
@@ -1526,8 +1535,7 @@ input[type="checkbox"] {
         width: 245px;
     }
 
-    #change_email_modal .change_email_info,
-    #api_key_modal #api_key_status {
+    #change_email_modal .change_email_info {
         margin-top: 3px;
     }
 }

static/templates/settings/api_key_modal.hbs

@@ -1,42 +1,43 @@
-<div id="api_key_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
-  aria-labelledby="api_key_modal_label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}">
-            <span aria-hidden="true">&times;</span>
-        </button>
-        <h3 class="inline-block" id="api_key_modal_label">{{t "Show API key" }}</h3>
-        <span class="alert-notification" id="api_key_status"></span>
-    </div>
-    <div class="modal-body">
+<div class="micromodal" id="api_key_modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="api_key_modal_label">
+            <header class="modal__header">
+                <h1 class="modal__title" id="api_key_modal_label">
+                    {{t "Show API key" }}
+                </h1>
+                <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
+            </header>
+            <main class="modal__content">
                 <div id="password_confirmation">
-            <form id="api_key_form">
+                    <div id="api_key_form">
                         <p>{{t "Please re-enter your password to confirm your identity." }}
                             <a href="/accounts/password/reset/" target="_blank" rel="noopener noreferrer">
                                 {{t "Never had one? Forgotten it?" }}
                             </a>
                         </p>
-                <div class="control-group password-div">
+                        <div class="password-div">
                             <label for="password" class="control-label">{{t "Current password" }}</label>
                             <input type="password" autocomplete="off" name="password" id="get_api_key_password" value="" />
                             <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
                         </div>
-                <button type="submit" name="view_api_key" id="get_api_key_button" class="button sea-green">
-                    {{t 'Get API key' }}
-                </button>
-            </form>
+                    </div>
+                    <span class="alert-notification" id="api_key_status"></span>
                 </div>
                 <div id="show_api_key">
                     <p>{{t "Your API key:" }}</p>
                     <p><b><span id="api_key_value"></span></b></p>
-            <div id="api_key_buttons">
-                <button type="submit" class="button white rounded regenerate_api_key">
-                    {{t "Generate new API key" }}
-                </button>
-                <a id="download_zuliprc" download="{{zuliprc}}" class="button sea-green">
-                    {{t "Download .zuliprc" }}
-                </a>
-            </div>
                     <div id="user_api_key_error" class="text-error"></div>
                 </div>
+            </main>
+            <footer class="modal__footer">
+                <button type="submit" name="view_api_key" id="get_api_key_button" class="modal__btn dialog_submit_button">
+                    {{t 'Get API key' }}
+                </button>
+                <div id="api_key_buttons">
+                    <button class="modal__btn dialog_submit_button" id="regenerate_api_key" aria-label="{{t 'Generate new API key' }}">{{t "Generate new API key" }}</button>
+                    <a class="modal__btn dialog_submit_button" id="download_zuliprc" download="{{zuliprc}}" tabindex="0">{{t "Download .zuliprc" }}</a>
+                </div>
+            </footer>
+        </div>
     </div>
 </div>