Feat: Update CAPTCHA service to ALTCHA self-hosted.

This commit is contained in:
2025-03-15 17:47:36 +00:00
parent b843849af9
commit bade1f11dd
10 changed files with 3823 additions and 153 deletions

View File

@@ -132,6 +132,7 @@
var flagTemporaryElement = "{{ model.FLAG_TEMPORARY_ELEMENT }}";
var flagUser = "{{ model.FLAG_USER }}";
var flagWebsite = "{{ model.FLAG_WEBSITE }}";
var hashALTCHACreateChallenge = "{{ model.HASH_ALTCHA_CREATE_CHALLENGE }}";
var hashApplyFiltersStoreProductPermutation = "{{ model.HASH_APPLY_FILTERS_STORE_PRODUCT_PERMUTATION }}";
var hashPageAccessibilityReport = "{{ model.HASH_PAGE_ACCESSIBILITY_REPORT }}";
var hashPageAccessibilityStatement = "{{ model.HASH_PAGE_ACCESSIBILITY_STATEMENT }}";

View File

@@ -5,7 +5,22 @@
{#
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@altcha/browser@latest/dist/index.js" defer></script>
#}
{# with CDN
<script src="https://cdn.jsdelivr.net/npm/@altcha/browser@1.1.0/dist/altcha.min.js"></script>
<style>
.altcha-widget {
margin: 15px 0;
}
</style>
#}
{# with locally stored vendor project - this is imported into contact.js
<script type="module" src="{{ url_for('static', filename='js/vendor/altcha.js')}}"></script>
#}
<style>
.altcha-widget {
margin: 15px 0;
}
</style>
{% endblock %}
{% block page_nav_links %}
@@ -35,6 +50,16 @@
<h1>Contact Us</h1>
<p>Please fill in the form below and we'll get back to you as soon as possible.</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flashes">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<form id="{{ model.ID_CONTACT_FORM }}" method="POST" action="{{ url_for('routes_core.contact') }}">
{{ form.csrf_token }}
@@ -66,10 +91,26 @@
</div>
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_CAPTCHA }}">
{# {{ model.form_contact.recaptcha() }} #}
{#
<altcha-widget
challengeurl="https://eu.altcha.org/api/v1/challenge?apiKey={{ model.app.app_config.ALTCHA_API_KEY }}"
spamfilter
></altcha-widget>
#}
<div>
{{ form.altcha.label }}
{#
{{ form.altcha }}
{{ form.altcha.hidden() }}
#}
<altcha-widget
class="altcha-widget"
challengeurl="{{ url_for('routes_core.create_altcha_challenge') }}"
auto="onload"
id="{{ form.altcha.id }}"
name="{{ form.altcha.name }}"
></altcha-widget>
</div>
</div>
<div class="{{ model.FLAG_CONTAINER_INPUT }}">
{{ model.form_contact.submit() }}
@@ -109,7 +150,45 @@
</section>
#}
{# with CDN
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize ALTCHA widget
ALTCHA.init({
selector: '.altcha-widget',
challenge: {
url: '/get-challenge',
onSuccess: function(result, element) {
// Store the result in the hidden input field
const hiddenInput = element.parentNode.querySelector('input[type="hidden"]');
hiddenInput.value = JSON.stringify(result);
}
}
});
});
</script>
#}
{# with locally stored vendor project - this is now in contact.js
<script type="module">
import { Altcha } from "{{ url_for('static', filename='js/vendor/altcha.js') }}";
window.ALTCHA = { init: (config) => {
document.querySelectorAll(config.selector).forEach(el => {
new Altcha({
target: el,
props: {
challengeurl: config.challenge.url,
auto: 'onload'
}
}).$on('verified', (e) => {
config.challenge.onSuccess(e.detail.payload, el);
});
});
}};
</script>
#}
<script>
var flagALTCHAWidget = "{{ model.FLAG_ALTCHA_WIDGET }}";
var idContactForm = "#{{ model.ID_CONTACT_FORM }}";
var idEmail = "#{{ model.ID_EMAIL }}";
var idMessage = "#{{ model.ID_MESSAGE }}";