Replace captcha system

This commit is contained in:
2026-01-18 18:37:08 +01:00
parent e5ef197ed6
commit ccfd5b996b
15 changed files with 242 additions and 200 deletions

View File

@@ -69,6 +69,11 @@
</label>
</div>
<div class="block">
<altcha-widget id="captcha" floating challengeurl="/altcha-challenge"></altcha-widget>
<x-input-error :messages="$errors->get('altcha')" class="mt-2" />
</div>
<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 dark:focus:ring-offset-neutral-800" href="{{ route('password.request') }}">
@@ -127,6 +132,11 @@
<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
</div>
<div class="block">
<altcha-widget id="captcha" floating challengeurl="/altcha-challenge"></altcha-widget>
<x-input-error :messages="$errors->get('altcha')" class="mt-2" />
</div>
<div class="flex items-center justify-end mt-4">
<x-primary-button class="ms-4">
{{ __('Register') }}

View File

@@ -33,19 +33,7 @@
<x-input-error class="mt-2" :messages="$errors->get('message')" />
</div>
<div>
<x-input-label for="message" :value="__('Captcha')" />
<div class="flex pt-2">
<div id="captchaImg">
{!! captcha_img() !!}
</div>
<button type="button" class="inline-flex items-center ml-2 px-2 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150" id="reloadcaptcha">
<i class="fa-solid fa-rotate-right"></i>
</button>
</div>
<br>
<x-text-input id="captcha" class="block " type="text" name="captcha" required />
</div>
<altcha-widget id="captcha" floating challengeurl="/altcha-challenge"></altcha-widget>
<div class="flex items-center gap-4">
<x-primary-button>{{ __('Submit') }}</x-primary-button>
@@ -65,18 +53,4 @@
@endif
</div>
</form>
<script>
function reloadCaptcha() {
window.axios.get('/reload-captcha').then(function(response) {
if (response.status == 200) {
document.querySelector("#captchaImg").innerHTML = response.data.captcha;
}
}).catch(function(error) {
console.log(error);
});
}
document.querySelector("#reloadcaptcha").addEventListener("click", reloadCaptcha);
</script>
</section>

View File

@@ -8,18 +8,7 @@
<p id="message" class="text-red-600">
</p>
<div class="flex pt-2">
<div id="captchaImg">
{!! captcha_img() !!}
</div>
<button type="button" class="inline-flex items-center ml-2 px-2 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150" id="reloadcaptcha" >
<i class="fa-solid fa-rotate-right"></i>
</button>
</div>
<div class="flex pt-2 mt-1">
<x-text-input id="captcha_text" class="block " type="text" name="captcha_text"/>
<button type="button" class="inline-flex items-center ml-2 px-2 -pt-1 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150" id="submitcaptcha" >
Submit
</button>
<altcha-widget id="altcha" challengeurl="/altcha-challenge"></altcha-widget>
</div>
<br>
<p class="text-gray-800 dark:text-gray-200 text-sm">
@@ -51,21 +40,12 @@
<script>
var downloadCounter = 0;
function reloadCaptcha() {
window.axios.get('/reload-captcha').then(function (response) {
if (response.status == 200) {
document.querySelector("#captchaImg").innerHTML = response.data.captcha;
}
}).catch(function (error) {
console.log(error);
});
}
function submitCaptcha() {
function submitCaptcha(captchaToken) {
document.querySelector("#message").innerHTML = '';
window.axios.post('/get-download', {
captcha: document.getElementById('captcha_text').value,
episode_id: document.getElementById('e_id').value
episode_id: document.getElementById('e_id').value,
captcha: captchaToken,
}).then(function (response) {
document.querySelector("#captcharequired").style.display = "none";
document.querySelector("#captchsolved").style.display = "block";
@@ -89,6 +69,16 @@
document.querySelector("#downloadEpisode").addEventListener("click", increaseDownloadCounter);
document.querySelector("#reloadcaptcha").addEventListener("click", reloadCaptcha);
document.querySelector("#submitcaptcha").addEventListener("click", submitCaptcha);
document.addEventListener("DOMContentLoaded", () => {
const altcha = document.querySelector("#altcha");
altcha.addEventListener("statechange", (ev) => {
if (ev.detail.state === "verified") {
submitCaptcha(ev.detail.payload);
// Remove captcha from DOM
altcha.remove();
}
});
});
</script>