Skip to content
This repository was archived by the owner on Jul 28, 2026. It is now read-only.

Commit 68b039c

Browse files
ddraykoddrayko
committed
refactor: move notification form to modal
1 parent 9ca4a0b commit 68b039c

1 file changed

Lines changed: 69 additions & 51 deletions

File tree

‎public/js/admin.js‎

Lines changed: 69 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -709,6 +709,72 @@ function showSuspendModal(serverId) {
709709
});
710710
}
711711

712+
// ─── Send Notification Modal ───────────────────────────
713+
function showNotifyModal(userId) {
714+
const content = $a('#admin-modal-content');
715+
const overlay = $a('#admin-modal-overlay');
716+
if (!content || !overlay) return;
717+
718+
content.innerHTML = ahtml`
719+
<div>
720+
<h3 style="margin:0 0 16px 0;color:var(--text-primary)">Send Notification</h3>
721+
<form id="admin-notify-modal-form">
722+
<div class="form-group" style="margin-bottom:12px">
723+
<label for="admin-notify-title">Title</label>
724+
<input type="text" id="admin-notify-title" placeholder="e.g. Account Update" style="width:100%" required />
725+
</div>
726+
<div class="form-group" style="margin-bottom:12px">
727+
<label for="admin-notify-message">Message</label>
728+
<textarea id="admin-notify-message" rows="3" placeholder="Write your message..." style="resize:vertical;width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:0.88rem;margin-top:6px;box-sizing:border-box" required></textarea>
729+
</div>
730+
<div class="form-group" style="margin-bottom:16px">
731+
<label for="admin-notify-type">Type</label>
732+
<select id="admin-notify-type" style="width:100%">
733+
<option value="info">Info</option>
734+
<option value="success">Success</option>
735+
<option value="warning">Warning</option>
736+
<option value="error">Error</option>
737+
</select>
738+
</div>
739+
<div style="display:flex;gap:8px">
740+
<button type="submit" class="btn btn-primary btn-full" id="admin-btn-send-notification" style="justify-content:center">Send</button>
741+
<button type="button" class="btn btn-ghost btn-full" onclick="closeAdminModal()" style="justify-content:center">Cancel</button>
742+
</div>
743+
<div id="admin-notify-modal-msg" style="margin-top:12px;display:none"></div>
744+
</form>
745+
</div>
746+
`;
747+
overlay.style.display = 'flex';
748+
749+
$a('#admin-notify-modal-form')?.addEventListener('submit', async (e) => {
750+
e.preventDefault();
751+
const btn = $a('#admin-btn-send-notification');
752+
const msgEl = $a('#admin-notify-modal-msg');
753+
const titleEl = $a('#admin-notify-title');
754+
const messageEl = $a('#admin-notify-message');
755+
const typeEl = $a('#admin-notify-type');
756+
btn.disabled = true;
757+
btn.innerHTML = '<span class="spinner"></span> Sending...';
758+
if (msgEl) msgEl.style.display = 'none';
759+
try {
760+
await adminApi(`/users/${userId}/notify`, {
761+
method: 'POST',
762+
body: JSON.stringify({
763+
title: titleEl.value.trim(),
764+
message: messageEl.value.trim(),
765+
type: typeEl.value,
766+
}),
767+
});
768+
if (msgEl) { msgEl.textContent = 'Notification sent successfully'; msgEl.style.display = 'block'; msgEl.style.color = 'var(--accent-green)'; }
769+
setTimeout(() => { closeAdminModal(); }, 1200);
770+
} catch (err) {
771+
if (msgEl) { msgEl.textContent = err.message; msgEl.style.display = 'block'; msgEl.style.color = 'var(--accent-red)'; }
772+
btn.disabled = false;
773+
btn.innerHTML = 'Send';
774+
}
775+
});
776+
}
777+
712778
// ─── Dashboard ──────────────────────────────────────────
713779
async function renderAdminDashboard() {
714780
document.querySelectorAll('.admin-page').forEach(p => p.classList.remove('active'));
@@ -916,27 +982,7 @@ async function renderAdminUserDetail(userId) {
916982
<p style="color:var(--text-secondary);font-size:0.88rem;margin-bottom:12px">
917983
Send a message to this user's notification inbox.
918984
</p>
919-
<form id="admin-notify-form">
920-
<div class="form-group" style="margin-bottom:12px">
921-
<label for="admin-notify-title">Title</label>
922-
<input type="text" id="admin-notify-title" placeholder="e.g. Account Update" style="width:100%" required />
923-
</div>
924-
<div class="form-group" style="margin-bottom:12px">
925-
<label for="admin-notify-message">Message</label>
926-
<textarea id="admin-notify-message" rows="3" placeholder="Write your message..." style="resize:vertical;width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:0.88rem;margin-top:6px;box-sizing:border-box" required></textarea>
927-
</div>
928-
<div class="form-group" style="margin-bottom:12px">
929-
<label for="admin-notify-type">Type</label>
930-
<select id="admin-notify-type" style="width:100%">
931-
<option value="info">Info</option>
932-
<option value="success">Success</option>
933-
<option value="warning">Warning</option>
934-
<option value="error">Error</option>
935-
</select>
936-
</div>
937-
<button type="submit" class="btn btn-primary" id="admin-btn-send-notification" style="width:auto">Send</button>
938-
<div id="admin-notify-msg" style="margin-top:8px;display:none"></div>
939-
</form>
985+
<button class="btn btn-primary" id="admin-btn-show-notify-modal" style="width:auto">Send a Notification</button>
940986
</div>
941987
</div>
942988
</div>
@@ -1061,36 +1107,8 @@ function initUserActions(userId) {
10611107
}
10621108
});
10631109

1064-
$a('#admin-notify-form')?.addEventListener('submit', async (e) => {
1065-
e.preventDefault();
1066-
const btn = $a('#admin-btn-send-notification');
1067-
const msgEl = $a('#admin-notify-msg');
1068-
const titleEl = $a('#admin-notify-title');
1069-
const messageEl = $a('#admin-notify-message');
1070-
const typeEl = $a('#admin-notify-type');
1071-
btn.disabled = true;
1072-
btn.innerHTML = '<span class="spinner"></span> Sending...';
1073-
if (msgEl) msgEl.style.display = 'none';
1074-
try {
1075-
await adminApi(`/users/${userId}/notify`, {
1076-
method: 'POST',
1077-
body: JSON.stringify({
1078-
title: titleEl.value.trim(),
1079-
message: messageEl.value.trim(),
1080-
type: typeEl.value,
1081-
}),
1082-
});
1083-
if (msgEl) { msgEl.textContent = 'Notification sent successfully'; msgEl.style.display = 'block'; msgEl.style.color = 'var(--accent-green)'; }
1084-
titleEl.value = '';
1085-
messageEl.value = '';
1086-
typeEl.value = 'info';
1087-
btn.disabled = false;
1088-
btn.innerHTML = 'Send';
1089-
} catch (err) {
1090-
if (msgEl) { msgEl.textContent = err.message; msgEl.style.display = 'block'; msgEl.style.color = 'var(--accent-red)'; }
1091-
btn.disabled = false;
1092-
btn.innerHTML = 'Send';
1093-
}
1110+
$a('#admin-btn-show-notify-modal')?.addEventListener('click', () => {
1111+
showNotifyModal(userId);
10941112
});
10951113

10961114
$a('#admin-btn-delete-user')?.addEventListener('click', async () => {

0 commit comments

Comments
 (0)