mirror of
https://github.com/csd4ni3l/grass_touching_captcha.git
synced 2026-01-01 04:23:45 +01:00
Add grass touching bans (which dont work yet), grass touching submit page which if used, increments the grass touching count and last grass touching, make it so only one error shows up if it fails and multiple errors cant.
This commit is contained in:
csd4ni3l
177
templates/submit_grass_touching.jinja2
Normal file
177
templates/submit_grass_touching.jinja2
Normal file
@@ -0,0 +1,177 @@
|
||||
{% extends "base.jinja2" %}
|
||||
{% block title %}Grass Touching Register{% endblock %}
|
||||
{% block body %}
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid d-flex justify-content-center">
|
||||
<a class="navbar-brand" href="/">Grass Touching Captcha</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/info">Information</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/leaderboard">Leaderboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/submit_grass_touching">Submit Grass Touching</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 75vh;">
|
||||
<div class="bg-white rounded rounded-5 border border-5 border-white p-4">
|
||||
<form action="/grass_touching_submit" method="post">
|
||||
<h2>Grass touching submit</h2>
|
||||
<div class="form-group" style="margin-top: 4%;">
|
||||
<div hidden id="grass-touching-form" class="mb-3">
|
||||
<label class="form-label" for="file_input">Grass touching proof</label>
|
||||
<div id="challengehelp">To complete this challenge, you need to submit a picture of you touching grass next to a paper containing the following text: Loading...</div>
|
||||
<input accept="image/png, image/jpeg" name="file" type="file" class="form-control" id="file_input">
|
||||
<div hidden id="error-label" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
<small id="proofhelp" class="form-text text-muted">Dont worry! We wont tell your friends.</small>
|
||||
</div>
|
||||
<button id="submit" type="button" class="btn btn-primary mx-auto d-block" style="width: 100%; margin-top: 4%;">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function upload_success(image_url) {
|
||||
document.getElementById("submit").disabled = false;
|
||||
document.getElementById("submit").innerHTML = "Submit"
|
||||
document.getElementById("submit").type = "submit"
|
||||
|
||||
document.getElementById("error-label").textContent = "";
|
||||
document.getElementById("error-label").hidden = true;
|
||||
|
||||
document.getElementById("grass-touching-form").innerHTML += `<img class="preview-img" src="${image_url}">`;
|
||||
}
|
||||
|
||||
function upload_error(error_message) {
|
||||
console.error(error_message)
|
||||
|
||||
file_input = document.getElementById("file_input");
|
||||
file_input.value = ''
|
||||
|
||||
document.getElementById("submit").innerHTML = "Submit"
|
||||
document.getElementById("submit").disabled = false;
|
||||
|
||||
document.getElementById("error-label").textContent = error_message;
|
||||
document.getElementById("error-label").hidden = false;
|
||||
|
||||
}
|
||||
|
||||
function upload_file(file_type, file_content) {
|
||||
username_input = document.getElementById("usernameinput")
|
||||
fetch('{{ url_for("submit_challenge") }}', {
|
||||
method: "POST",
|
||||
body: JSON.stringify({image_data: file_content, image_type: file_type, username: username_input.value}),
|
||||
headers: {
|
||||
"Content-type": "application/json"
|
||||
}
|
||||
}
|
||||
).then(response => {
|
||||
if (response.status == 401 || response.status == 400) {
|
||||
response.text().then(text => {
|
||||
if (text) {
|
||||
upload_error(text);
|
||||
|
||||
}
|
||||
}
|
||||
)
|
||||
return;
|
||||
}
|
||||
|
||||
return response.text();
|
||||
})
|
||||
.then(image_url => {
|
||||
if (image_url) {
|
||||
upload_success(image_url);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
}
|
||||
|
||||
function read_file () {
|
||||
file_input = document.getElementById("file_input");
|
||||
var filereader = new FileReader();
|
||||
|
||||
filereader.onload = function () {
|
||||
document.getElementById("submit").innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden">Loading...</span>';
|
||||
document.getElementById("submit").disabled = true;
|
||||
|
||||
const file = file_input.files[0];
|
||||
let file_type;
|
||||
|
||||
if (file.type.match("image/jpeg")) {
|
||||
file_type = "jpeg";
|
||||
}
|
||||
else if (file.type.match("image/png")) {
|
||||
file_type = "png";
|
||||
}
|
||||
else {
|
||||
document.getElementById("error-label").textContent = "Only JPEG and PNG is supported."
|
||||
document.getElementById("error-label").hidden = false;
|
||||
return;
|
||||
}
|
||||
|
||||
upload_file(file_type, filereader.result);
|
||||
};
|
||||
|
||||
filereader.readAsDataURL(file_input.files[0]);
|
||||
}
|
||||
|
||||
|
||||
function get_challenge() {
|
||||
username_input = document.getElementById("usernameinput")
|
||||
fetch('{{ url_for("generate_challenge_route") }}', {
|
||||
method: "POST",
|
||||
body: JSON.stringify({username: username_input.value}),
|
||||
headers: {
|
||||
"Content-type": "application/json"
|
||||
}
|
||||
}).then(response => {
|
||||
response.text().then(challenge_text => {
|
||||
if (challenge_text) {
|
||||
document.getElementById("challengehelp").innerHTML = `To complete this challenge, you need to submit a picture of you touching grass next to a paper containing the following text: ${challenge_text}`
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function submit () {
|
||||
username_input = document.getElementById("usernameinput")
|
||||
grass_touching_form = document.getElementById("grass-touching-form")
|
||||
|
||||
if (grass_touching_form.hidden) {
|
||||
if (username_input.value) {
|
||||
grass_touching_form.hidden = false;
|
||||
get_challenge();
|
||||
}
|
||||
}
|
||||
else {
|
||||
read_file();
|
||||
}
|
||||
}
|
||||
|
||||
submit_button = document.getElementById("submit")
|
||||
submit_button.addEventListener("click", submit)
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user