refactor(index.html): simplify domain status rendering by extracting logic into a separate function

This commit is contained in:
pacnpal
2025-01-29 12:47:46 -05:00
parent 79e6bc3f9a
commit d9f2308808

View File

@@ -8,14 +8,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.4/purify.min.js" integrity="sha384-KGmzmwrs7oAU2sG5qfETslFsscVcCaxQrX2d7PW7I9bTrsuTD/eSMFr9jaMS9i+b" crossorigin="anonymous"></script>
<script>
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
return unsafe.replace(/[&<"']/g, function (m) {
return unsafe.replace(/[&<>"']/g, function(m) {
switch (m) {
case '&': return '&amp;';
case '<': return '&lt;';
@@ -26,28 +19,7 @@
}
});
}
async function checkDomain(event) {
event.preventDefault();
const domain = DOMPurify.sanitize(document.getElementById('domain').value);
const resultDiv = document.getElementById('result');
const unblockDiv = document.getElementById('unblock-action');
const submitBtn = document.getElementById('submit-btn');
try {
// Show loading state
submitBtn.disabled = true;
submitBtn.innerHTML = '<span class="inline-flex items-center">Checking... <svg class="animate-spin ml-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>';
const response = await fetch(`/control/filtering/check_host?name=${encodeURIComponent(domain)}`, {
method: 'GET',
headers: {
'Accept': 'application/json',
}
});
const data = await response.json();
if (response.ok) {
function renderDomainStatus(resultDiv, unblockDiv, domain, data) {
const isBlocked = data.reason.startsWith('Filtered');
if (isBlocked) {
resultDiv.innerHTML = `
@@ -72,6 +44,30 @@
</div>`;
unblockDiv.innerHTML = '';
}
}
async function checkDomain(event) {
event.preventDefault();
const domain = DOMPurify.sanitize(document.getElementById('domain').value);
const resultDiv = document.getElementById('result');
const unblockDiv = document.getElementById('unblock-action');
const submitBtn = document.getElementById('submit-btn');
try {
submitBtn.disabled = true;
submitBtn.innerHTML = '<span class="inline-flex items-center">Checking... <svg class="animate-spin ml-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>';
const response = await fetch(`/control/filtering/check_host?name=${encodeURIComponent(domain)}`, {
method: 'GET',
headers: {
'Accept': 'application/json',
}
});
const data = await response.json();
if (response.ok) {
renderDomainStatus(resultDiv, unblockDiv, domain, data);
} else {
let errorMsg = data.message || 'Unknown error occurred';
let errorType = response.status === 400 ? 'warning' : 'error';