me/ctfd-category-submit-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI updates and caching fixes on submission

Browse Source
This commit is contained in:
Matthew Grove
2026-01-05 22:52:20 +00:00
parent db14e03f0e
commit 96714c2b60
2 changed files with 89 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
assets/category_submit.js
View File

@@ -1,44 +1,74 @@
(function() {
if (window.location.pathname !== '/challenges') return;
// LocalStorage to bypass server-side cache delays
const getLocalSolves = () => JSON.parse(localStorage.getItem('temp_solves') || "[]");
const addLocalSolve = (id) => {
const solves = getLocalSolves();
if (!solves.includes(id)) {
solves.push(id);
localStorage.setItem('temp_solves', JSON.stringify(solves));
}
};
function injectBoxes(config) {
// Highlight locally solved challenges
getLocalSolves().forEach(id => {
const el = document.querySelector(`[data-id="${id}"]`);
if (el && !el.classList.contains('solved')) el.classList.add('solved');
});
const enabledCategories = config.categories || [];
// We look for category headers
document.querySelectorAll('.category-header').forEach(header => {
const catName = header.textContent.trim();
// Check if already injected to prevent duplicates
if (enabledCategories.includes(catName) && !header.nextElementSibling?.classList.contains('cat-sub-row')) {
const row = document.createElement('div');
row.className = "cat-sub-row row mb-4 justify-content-center";
row.innerHTML = `
<div class="col-md-10">
<div class="input-group input-group-lg">
<input type="text"
class="form-control bg-dark text-light border-secondary"
placeholder="Submit ${catName} flag..."
id="in-${catName.replace(/\s+/g, '-')}"
autocomplete="off">
<div class="input-group-append">
<button class="btn btn-success px-4" type="button">Submit</button>
</div>
</div>
<div class="status-msg mt-2" style="min-height: 24px; font-weight: bold;"></div>
</div>
`;
header.after(row);
// Prevent duplicate injections
if (enabledCategories.includes(catName) && !header.parentElement.querySelector('.cat-sub-container')) {
const container = document.createElement('div');
container.className = "cat-sub-container mb-4";
// Style to match the alignment of the text exactly
container.style.maxWidth = "700px";
container.style.marginTop = "10px";
const input = row.querySelector('input');
const btn = row.querySelector('button');
const msg = row.querySelector('.status-msg');
container.innerHTML = `
<div class="input-group" style="display: flex; width: 100%;">
<input type="text"
class="form-control bg-dark text-light"
placeholder="Submit ${catName} flag..."
id="in-${catName.replace(/\s+/g, '-')}"
autocomplete="off"
style="border-color: #495057; border-top-right-radius: 0; border-bottom-right-radius: 0; height: 45px;">
<div class="input-group-append" style="margin-left: -1px;">
<button class="btn btn-success btn-sub"
type="button"
style="border-top-left-radius: 0; border-bottom-left-radius: 0; height: 45px; font-weight: 600; padding: 0 25px;">
Submit
</button>
</div>
</div>
<div class="status-msg mt-2" style="min-height: 24px; font-size: 0.9rem; font-weight: 500;"></div>
`;
header.after(container);
const input = container.querySelector('input');
const btn = container.querySelector('button');
const msg = container.querySelector('.status-msg');
const submitFlag = () => {
const val = input.value.trim();
if (!val || btn.disabled) return;
btn.disabled = true;
msg.innerHTML = '<span class="text-info">Checking...</span>';
msg.innerHTML = '<span class="text-info">Checking flag...</span>';
const params = new URLSearchParams({ submission: val, category: catName, nonce: init.csrfNonce });
const params = new URLSearchParams({
submission: val,
category: catName,
nonce: init.csrfNonce
});
fetch('/category_submit', {
method: 'POST',
@@ -48,9 +78,15 @@
.then(r => r.json())
.then(data => {
if (data.success) {
addLocalSolve(data.challenge_id);
msg.innerHTML = `<span class="text-success">✔ ${data.message}</span>`;
input.value = '';
setTimeout(() => { window.location.reload(); }, 1000);
// Visual feedback on the challenge card
const card = document.querySelector(`[data-id="${data.challenge_id}"]`);
if (card) card.classList.add('solved');
setTimeout(() => { window.location.reload(); }, 1200);
} else {
msg.innerHTML = `<span class="text-danger">✘ ${data.message}</span>`;
btn.disabled = false;
@@ -68,7 +104,9 @@
});
}
fetch('/category_submit/config').then(r => r.json()).then(config => {
fetch('/category_submit/config')
.then(r => r.json())
.then(config => {
injectBoxes(config);
const observer = new MutationObserver(() => {
observer.disconnect();
@@ -77,4 +115,4 @@
});
observer.observe(document.body, { childList: true, subtree: true });
});
})();
})();