diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 3b021d448..65eb237dd 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -295,8 +295,8 @@ async function linkAction(e) {
return;
}
- const isRisky = el.classList.contains('red') || el.classList.contains('yellow') || el.classList.contains('orange') || el.classList.contains('negative');
- if (await confirmModal({content: modalConfirmContent, buttonColor: isRisky ? 'orange' : 'primary'})) {
+ const isRisky = el.classList.contains('red') || el.classList.contains('negative');
+ if (await confirmModal(modalConfirmContent, {confirmButtonColor: isRisky ? 'red' : 'primary'})) {
await doRequest();
}
}
diff --git a/web_src/js/features/comp/ConfirmModal.js b/web_src/js/features/comp/ConfirmModal.js
index e64996a35..f9ad5c39c 100644
--- a/web_src/js/features/comp/ConfirmModal.js
+++ b/web_src/js/features/comp/ConfirmModal.js
@@ -1,22 +1,23 @@
import $ from 'jquery';
import {svg} from '../../svg.js';
import {htmlEscape} from 'escape-goat';
+import {createElementFromHTML} from '../../utils/dom.js';
const {i18n} = window.config;
-export async function confirmModal(opts = {content: '', buttonColor: 'primary'}) {
+export function confirmModal(content, {confirmButtonColor = 'primary'} = {}) {
return new Promise((resolve) => {
- const $modal = $(`
-
-
${htmlEscape(opts.content)}
-
-
-
-
-
-`);
-
- $modal.appendTo(document.body);
+ const modal = createElementFromHTML(`
+
+
${htmlEscape(content)}
+
+
+
+
+
+ `);
+ document.body.append(modal);
+ const $modal = $(modal);
$modal.modal({
onApprove() {
resolve(true);
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 92f058c4d..5d18a7ff8 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -76,7 +76,7 @@ function initRepoIssueListCheckboxes() {
// for delete
if (action === 'delete') {
const confirmText = e.target.getAttribute('data-action-delete-confirm');
- if (!await confirmModal({content: confirmText, buttonColor: 'orange'})) {
+ if (!await confirmModal(confirmText, {confirmButtonColor: 'red'})) {
return;
}
}
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index a48510b19..7289f19cb 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -297,3 +297,10 @@ export function replaceTextareaSelection(textarea, text) {
textarea.dispatchEvent(new CustomEvent('change', {bubbles: true, cancelable: true}));
}
}
+
+// Warning: Do not enter any unsanitized variables here
+export function createElementFromHTML(htmlString) {
+ const div = document.createElement('div');
+ div.innerHTML = htmlString.trim();
+ return div.firstChild;
+}
diff --git a/web_src/js/utils/dom.test.js b/web_src/js/utils/dom.test.js
new file mode 100644
index 000000000..fd7d97cad
--- /dev/null
+++ b/web_src/js/utils/dom.test.js
@@ -0,0 +1,5 @@
+import {createElementFromHTML} from './dom.js';
+
+test('createElementFromHTML', () => {
+ expect(createElementFromHTML('foobar').outerHTML).toEqual('foobar');
+});