aboutsummaryrefslogtreecommitdiffstats
path: root/api/static
diff options
context:
space:
mode:
Diffstat (limited to 'api/static')
-rw-r--r--api/static/index.css113
-rw-r--r--api/static/index.js114
-rw-r--r--api/static/server_auth.js93
3 files changed, 320 insertions, 0 deletions
diff --git a/api/static/index.css b/api/static/index.css
new file mode 100644
index 0000000..6499589
--- /dev/null
+++ b/api/static/index.css
@@ -0,0 +1,113 @@
+#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
new file mode 100644
index 0000000..1b5e85e
--- /dev/null
+++ b/api/static/index.js
@@ -0,0 +1,114 @@
+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
new file mode 100644
index 0000000..ead24a7
--- /dev/null
+++ b/api/static/server_auth.js
@@ -0,0 +1,93 @@
+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/Nijisanji?auth=server")
+ .then((response) => response.json())
+ .then((data) => {
+ populateCaptcha(data);
+ })
+ .catch((error) => {
+ console.error("There was an error fetching the captcha:", error);
+ });
+}
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage