Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

api_key_modal: Migrate modal to Micromodal.

This commit is contained in:
Ganesh Pawar 2021-07-20 18:22:50 +05:30 committed by Tim Abbott
parent f5fbf5f0e0
commit a7badd726f
4 changed files with 83 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_tests/puppeteer_tests/settings.ts
View File

@ -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> {

45
static/js/settings_account.js
View File

@ -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();
});

12
static/styles/settings.css
View File

@ -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;
}
}

73
static/templates/settings/api_key_modal.hbs
View File

@ -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 id="password_confirmation">
<form 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">
<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 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">
<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="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>
</div>
<span class="alert-notification" id="api_key_status"></span>
</div>
<button type="submit" name="view_api_key" id="get_api_key_button" class="button sea-green">
<div id="show_api_key">
<p>{{t "Your API key:" }}</p>
<p><b><span id="api_key_value"></span></b></p>
<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>
</form>
</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 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>