diff options
Diffstat (limited to 'api/static')
| -rw-r--r-- | api/static/index.css | 113 | ||||
| -rw-r--r-- | api/static/index.js | 114 | ||||
| -rw-r--r-- | api/static/server_auth.js | 100 |
3 files changed, 0 insertions, 327 deletions
diff --git a/api/static/index.css b/api/static/index.css deleted file mode 100644 index 6499589..0000000 --- a/api/static/index.css +++ /dev/null @@ -1,113 +0,0 @@ -#recaptcha-container { - border-radius: 5px; - border: 1px solid #ccc; - padding: 20px; - width: 440px; - margin: 50px auto; - background-color: #f4f4f4; - } - - .recaptcha-header { - background-color: #0079c1; - color: #fff; - padding: 10px 15px; - border-radius: 5px; - font-weight: bold; - margin-bottom: 20px; - text-align: center; - } - - .recaptcha-row { - display: flex; - justify-content: space-between; - margin-bottom: 5px; - } - - .submit-btn { - display: block; - margin: 10px auto 20px; - /* This will center the button horizontally and give it a margin at the bottom */ - padding: 10px 15px; - background-color: #0079c1; - color: #fff; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; - } - - .submit-btn:hover { - background-color: #005a91; - } - - .recaptcha-image { - width: 90px; - height: 90px; - margin: 2px; - border: 1px solid transparent; - cursor: pointer; - transition: transform 0.3s ease, border-color 0.3s ease; - background-size: cover; - background-position: center; - /* Ensure the image is centered */ - position: relative; - overflow: hidden; - } - - .regenerate-btn { - display: block; - margin: 10px auto; - /* This will center the button horizontally */ - } - - .recaptcha-image > svg { - display: none; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 30px; - height: 30px; - } - - .selected { - border-color: blue; - transform: scale(0.8); - } - - .selected > svg { - display: block; - } - - #answer-table-container { - margin-top: 20px; - border: 1px solid #ddd; - width: 100%; - max-width: 800px; - margin-left: auto; - margin-right: auto; -} - -#answer-table { - width: 100%; - border-collapse: collapse; -} - -#answer-table th, #answer-table td { - border: 1px solid #ddd; - padding: 8px 12px; - text-align: left; -} - -#answer-table th { - background-color: #f2f2f2; -} - -#answer-table tbody tr:hover { - background-color: #eaeaea; -} - -#answer-table td img { - max-width: 100%; - height: auto; -} diff --git a/api/static/index.js b/api/static/index.js deleted file mode 100644 index 1b5e85e..0000000 --- a/api/static/index.js +++ /dev/null @@ -1,114 +0,0 @@ -let captchaData; - -document.addEventListener("DOMContentLoaded", function () { - fetchCaptchaImages(); -}); - -function toggleSelection(element) { - element.classList.toggle("selected"); -} - -function populateCaptcha(data) { - const container = document.getElementById("recaptcha-container"); - const title = document.getElementById("recaptcha-title"); - title.innerHTML = data.title; - const oldRows = container.getElementsByClassName("recaptcha-row"); - while (oldRows.length > 0) { - oldRows[0].parentNode.removeChild(oldRows[0]); - } - - const images = data.questions; - - let rows = Math.ceil(images.length / 4); - let htmlContent = ""; - for (let r = 0; r < rows; r++) { - htmlContent += '<div class="recaptcha-row">'; - for (let i = 0; i < 4; i++) { - const index = r * 4 + i; - if (images[index]) { - htmlContent += ` - <div class="recaptcha-image" style="background-image: url('${images[index].image}');" onclick="toggleSelection(this)"> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> - <path d="M20.285 2l-1.272.02L6.72 15.466l-5.644-5.58L0 12.352l7.218 7.15L24 2.083z"/> - </svg> - </div> - `; - } - } - htmlContent += "</div>"; - } - - title.insertAdjacentHTML("afterend", htmlContent); - captchaData = data; -} - -async function verifyCaptcha() { - const selectedImages = document.querySelectorAll(".recaptcha-image.selected"); - const answers = []; - const answerTableBody = document.querySelector("#answer-table tbody"); - const endMessageDiv = document.querySelector("#end-message"); - answerTableBody.innerHTML = ""; - - selectedImages.forEach((img) => { - const backgroundImageURL = img.style.backgroundImage; - const imageURL = backgroundImageURL.slice(5, backgroundImageURL.length - 2); - const question = captchaData.questions.find((q) => q.image === imageURL); - answers.push(question.id); - const row = document.createElement("tr"); - const imgCell = document.createElement("td"); - const idCell = document.createElement("td"); - const nameCell = document.createElement("td"); - imgCell.innerHTML = `<img src="${question.image}" alt="Selected Image" width="50">`; - idCell.textContent = question.answer; - nameCell.textContent = question.name; - row.appendChild(imgCell); - row.appendChild(nameCell); - row.appendChild(idCell); - answerTableBody.appendChild(row); - }); - num_correct = 0 - for (let i = 0; i < captchaData.questions.length; i++) { - if (captchaData.questions[i].answer == true) { - num_correct += 1 - } - } - endMessageDiv.textContent = `You selected ${selectedImages.length} image(s). There are ${num_correct} correct image(s).`; - - const captchaAnswer = { - session: captchaData.session, - answer: answers.join(","), - }; - try { - const response = await fetch("/api/verify", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams(captchaAnswer).toString() // Convert JSON object to form-urlencoded data - }); - const data = await response.json(); - - if (data.success) { - endMessageDiv.textContent = "You have successfully completed the captcha!"; - } else { - fetchCaptchaImages(); - } - } catch (error) { - console.error("Error verifying captcha:", error); - } -} - - -const submitButton = document.querySelector(".submit-btn"); -submitButton.addEventListener("click", verifyCaptcha); - -function fetchCaptchaImages() { - fetch("/api/affiliation/Hololive") - .then((response) => response.json()) - .then((data) => { - populateCaptcha(data); - }) - .catch((error) => { - console.error("There was an error fetching the captcha:", error); - }); -}
\ No newline at end of file diff --git a/api/static/server_auth.js b/api/static/server_auth.js deleted file mode 100644 index 34fd4fd..0000000 --- a/api/static/server_auth.js +++ /dev/null @@ -1,100 +0,0 @@ -let captchaData; - -document.addEventListener("DOMContentLoaded", function () { - fetchCaptchaImages(); -}); - -function toggleSelection(element) { - element.classList.toggle("selected"); -} - -function populateCaptcha(data) { - const container = document.getElementById("recaptcha-container"); - const title = document.getElementById("recaptcha-title"); - title.innerHTML = data.title; - const oldRows = container.getElementsByClassName("recaptcha-row"); - while (oldRows.length > 0) { - oldRows[0].parentNode.removeChild(oldRows[0]); - } - - const images = data.questions; - - let rows = Math.ceil(images.length / 4); - let htmlContent = ""; - for (let r = 0; r < rows; r++) { - htmlContent += '<div class="recaptcha-row">'; - for (let i = 0; i < 4; i++) { - const index = r * 4 + i; - if (images[index]) { - htmlContent += ` - <div class="recaptcha-image" style="background-image: url('${images[index].image}');" onclick="toggleSelection(this)"> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> - <path d="M20.285 2l-1.272.02L6.72 15.466l-5.644-5.58L0 12.352l7.218 7.15L24 2.083z"/> - </svg> - </div> - `; - } - } - htmlContent += "</div>"; - } - - title.insertAdjacentHTML("afterend", htmlContent); - captchaData = data; - session_id = data.session_id; -} - -async function verifyCaptcha() { - const selectedImages = document.querySelectorAll( - ".recaptcha-image.selected", - ); - const answers = []; - selectedImages.forEach((img) => { - const backgroundImageURL = img.style.backgroundImage; - const imageURL = backgroundImageURL.slice( - 5, - backgroundImageURL.length - 2, - ); - answers.push( - captchaData.questions.find( - (question) => question.image === imageURL, - ).id, - ); - }); - const captchaAnswer = { - session: captchaData.session, - answer: answers.join(","), - }; - try { - const response = await fetch("/api/verify", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams(captchaAnswer).toString(), // Convert JSON object to form-urlencoded data - }); - const data = await response.json(); - - if (data.success) { - alert("Captcha verification successful!"); - } else { - alert("Sorry you got some wrong. Please try again."); - fetchCaptchaImages(); - } - } catch (error) { - console.error("Error verifying captcha:", error); - } -} - -const submitButton = document.querySelector(".submit-btn"); -submitButton.addEventListener("click", verifyCaptcha); - -function fetchCaptchaImages() { - fetch("/api/affiliation/Phase%20Connect?auth=server") - .then((response) => response.json()) - .then((data) => { - populateCaptcha(data); - }) - .catch((error) => { - console.error("There was an error fetching the captcha:", error); - }); -} |
