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

UI improvements and more robust flag checks & submission

Browse Source
This commit is contained in:
Matthew Grove
2026-01-05 22:36:31 +00:00
parent 43169288b1
commit db14e03f0e
2 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
assets/category_submit.js
View File

@@ -5,21 +5,21 @@
const enabledCategories = config.categories || [];
document.querySelectorAll('.category-header').forEach(header => {
const catName = header.textContent.trim();
if (enabledCategories.includes(catName) && !header.nextElementSibling.classList.contains('cat-sub-row')) {
// 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="form-row">
<div class="col-9">
<input type="text"
class="form-control form-control-lg bg-dark text-light border-secondary"
placeholder="Submit a flag for ${catName}..."
id="in-${catName.replace(/\s+/g, '-')}"
autocomplete="off">
</div>
<div class="col-3">
<button class="btn btn-success btn-lg btn-block" data-cat="${catName}">Submit</button>
<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>
@@ -27,13 +27,13 @@
`;
header.after(row);
row.querySelector('button').onclick = function() {
const btn = this;
const container = row.querySelector('.col-md-10');
const input = container.querySelector('input');
const msg = container.querySelector('.status-msg');
const input = row.querySelector('input');
const btn = row.querySelector('button');
const msg = row.querySelector('.status-msg');
const submitFlag = () => {
const val = input.value.trim();
if (!val) return;
if (!val || btn.disabled) return;
btn.disabled = true;
msg.innerHTML = '<span class="text-info">Checking...</span>';
@@ -50,14 +50,20 @@
if (data.success) {
msg.innerHTML = `<span class="text-success">✔ ${data.message}</span>`;
input.value = '';
// Delay reload slightly so the user sees the success message
setTimeout(() => { window.location.reload(); }, 1200);
setTimeout(() => { window.location.reload(); }, 1000);
} else {
msg.innerHTML = `<span class="text-danger">✘ ${data.message}</span>`;
btn.disabled = false;
}
})
.catch(() => {
msg.innerHTML = '<span class="text-danger">Submission error</span>';
btn.disabled = false;
});
};
btn.onclick = submitFlag;
input.onkeypress = (e) => { if (e.key === 'Enter') submitFlag(); };
}
});
}
@@ -71,4 +77,4 @@
});
observer.observe(document.body, { childList: true, subtree: true });
});
})();
})();