w33b/hstream
1
0
Fork 1
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace captcha system

Browse Source
This commit is contained in:
w33b
2026-01-18 18:37:08 +01:00
parent e5ef197ed6
commit ccfd5b996b
15 changed files with 242 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/css/app.css
View File

@@ -122,4 +122,33 @@ input:checked~.dot {
font-display: swap;
src: url(https://fonts.bunny.net/figtree/files/figtree-latin-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/figtree/files/figtree-latin-ext-600-normal.woff) format('woff');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Captcha */
:root {
--altcha-border-width: 1px;
--altcha-border-radius: 0.375rem;
--altcha-color-base: #333;
--altcha-color-border: #a0a0a0;
--altcha-color-text: #fff;
--altcha-color-border-focus: currentColor;
--altcha-color-error-text: #f23939;
--altcha-color-footer-bg: #141414;
--altcha-max-width: 260px;
}
.altcha-footer {
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
input[type="checkbox"] {
background-color: #ffffff;
border-color: #a0a0a0;
color: rgb(225,29,72);
}
input[type="checkbox"]:checked {
background-color: rgb(225,29,72);
box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgba(246, 59, 118, 0.5), 0 0 #0000;
}

3
resources/js/app.js
View File

@@ -12,6 +12,9 @@ import {
initTE,
} from "tw-elements";
// Captcha
import 'altcha';
// import Alpine from 'alpinejs';
// window.Alpine = Alpine;

10
resources/views/auth/login.blade.php
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') }}

28
resources/views/contact/partials/submit-contact-form.blade.php
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>

42
resources/views/modals/partials/download-captcha.blade.php
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>