From ee1a555b6ab464b61e9ebeff2ab4604f63674104 Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Wed, 25 Dec 2024 15:38:17 -0800 Subject: [PATCH] Custom modals for inline confirm on submit buttons --- web/static/js/alert-modal.js | 31 ++++++++++++++++++++- web/templates/account/dashboard.html | 12 ++++---- web/templates/account/my_user_notes.html | 4 +-- web/templates/account/profile.html | 4 +-- web/templates/account/two_factor_setup.html | 4 +-- web/templates/admin/certification.html | 4 +-- web/templates/admin/maintenance.html | 8 +++--- web/templates/admin/scopes.html | 4 +-- web/templates/forum/board_index.html | 8 +++--- web/templates/forum/thread.html | 16 ++++++----- web/templates/friend/friends.html | 4 +-- web/templates/inbox/inbox.html | 11 ++++---- web/templates/photo/certification.html | 4 +-- web/templates/photo/permalink.html | 4 ++- web/templates/photo/private.html | 12 ++++---- 15 files changed, 81 insertions(+), 49 deletions(-) diff --git a/web/static/js/alert-modal.js b/web/static/js/alert-modal.js index e729665..804eac7 100644 --- a/web/static/js/alert-modal.js +++ b/web/static/js/alert-modal.js @@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', () => { $cancel = $modal.querySelector("button.nonshy-alert-cancel-button"), $title = $modal.querySelector("#nonshy-alert-modal-title"), $body = $modal.querySelector("#nonshy-alert-modal-body"), + alertIcon = ``, + confirmIcon = ``, cls = 'is-active'; // Current caller's promise. @@ -55,12 +57,18 @@ document.addEventListener('DOMContentLoaded', () => { message = message.replace(/>/g, ">"); message = message.replace(/\n/g, "
"); - $title.innerHTML = title; + $title.innerHTML = (isConfirm ? confirmIcon : alertIcon) + title; $body.innerHTML = message; // Show the modal. $modal.classList.add(cls); + // Focus the OK button, e.g. so hitting Enter doesn't accidentally (re)click the same + // link/button which prompted the alert box in the first place. + window.requestAnimationFrame(() => { + $ok.focus(); + }); + // Return as a promise. return new Promise((resolve, reject) => { currentPromise = resolve; @@ -89,6 +97,27 @@ document.addEventListener('DOMContentLoaded', () => { } }); + // Inline submit button confirmation prompts, e.g.: many submit buttons have name="intent" + // and want the user to confirm before submitting, and had inline onclick handlers. + (document.querySelectorAll('.nonshy-confirm-submit') || []).forEach(button => { + const message = button.dataset.confirm; + if (!message) return; + + const onclick = (e) => { + e.preventDefault(); + modalConfirm({ + message: message.replace(/\\n/g, '\n'), + }).then(() => { + button.removeEventListener('click', onclick); + window.requestAnimationFrame(() => { + button.click(); + }); + }); + } + + button.addEventListener('click', onclick); + }); + // Exported global functions to invoke the modal. window.modalAlert = async ({ message, title="Alert" }) => { return showModal({ diff --git a/web/templates/account/dashboard.html b/web/templates/account/dashboard.html index 2b6a9be..18d2aaa 100644 --- a/web/templates/account/dashboard.html +++ b/web/templates/account/dashboard.html @@ -283,8 +283,8 @@
@@ -649,8 +649,8 @@ {{if and ($Root.CurrentUser.IsAdmin) (not $Body.Photo.Explicit)}}
+ class="has-text-danger is-size-7 nonshy-confirm-submit" + data-confirm="Do you want to mark this photo as Explicit?"> Mark photo as Explicit diff --git a/web/templates/account/my_user_notes.html b/web/templates/account/my_user_notes.html index 5faad67..d25517d 100644 --- a/web/templates/account/my_user_notes.html +++ b/web/templates/account/my_user_notes.html @@ -152,8 +152,8 @@ {{if eq $Root.CurrentUser.ID .UserID}} - diff --git a/web/templates/account/profile.html b/web/templates/account/profile.html index 3e305ce..6a71ebd 100644 --- a/web/templates/account/profile.html +++ b/web/templates/account/profile.html @@ -158,9 +158,9 @@ {{end}} - diff --git a/web/templates/admin/certification.html b/web/templates/admin/certification.html index 812dbe9..51f86b4 100644 --- a/web/templates/admin/certification.html +++ b/web/templates/admin/certification.html @@ -213,8 +213,8 @@ {{end}} {{if not (eq .Status "approved")}} - diff --git a/web/templates/admin/maintenance.html b/web/templates/admin/maintenance.html index 20eaa5c..37297c8 100644 --- a/web/templates/admin/maintenance.html +++ b/web/templates/admin/maintenance.html @@ -24,15 +24,15 @@

- -

diff --git a/web/templates/admin/scopes.html b/web/templates/admin/scopes.html index 0209758..d28263b 100644 --- a/web/templates/admin/scopes.html +++ b/web/templates/admin/scopes.html @@ -72,10 +72,10 @@ {{if .EditGroupID}} - diff --git a/web/templates/forum/board_index.html b/web/templates/forum/board_index.html index e7ba2df..4c61fac 100644 --- a/web/templates/forum/board_index.html +++ b/web/templates/forum/board_index.html @@ -20,9 +20,9 @@ {{if .IsForumSubscribed}} - @@ -220,9 +220,9 @@ {{if .IsForumSubscribed}} - diff --git a/web/templates/forum/thread.html b/web/templates/forum/thread.html index f5cdd91..2332a78 100644 --- a/web/templates/forum/thread.html +++ b/web/templates/forum/thread.html @@ -20,9 +20,9 @@ {{if .IsForumSubscribed}} - @@ -349,7 +349,9 @@ {{if or $Root.CanModerate ($Root.CurrentUser.HasAdminScope "social.moderator.forum") (eq $Root.CurrentUser.ID .User.ID)}}
- + Delete @@ -414,10 +416,10 @@ {{if or (eq .Forum.OwnerID .CurrentUser.ID) (.CurrentUser.HasAdminScope "admin.forum.manage")}}

- diff --git a/web/templates/inbox/inbox.html b/web/templates/inbox/inbox.html index 29637fb..03edce4 100644 --- a/web/templates/inbox/inbox.html +++ b/web/templates/inbox/inbox.html @@ -140,8 +140,8 @@ {{if eq $Root.CurrentUser.ID $SourceUser.ID}} - + {{InputCSRF}} @@ -172,14 +172,13 @@

- + {{InputCSRF}} - diff --git a/web/templates/photo/certification.html b/web/templates/photo/certification.html index ae792bb..846f014 100644 --- a/web/templates/photo/certification.html +++ b/web/templates/photo/certification.html @@ -180,9 +180,9 @@ re-approved with a new Certification Photo to be recertified.

- {{else}}