catask/templates/admin/categories/antispam.html

{% extends 'admin/base.html' %}
{% block _title %}{{ _('Anti-spam') }}{% endblock %}
{% set antispam_link = 'active' %}
{% block _content %}
	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
		<h2 id="antispam" class="mb-2 fw-normal">{{ _('Anti-spam') }}</h2>
		<p class="fs-5 h3 text-body-secondary mb-3">{{ _('Protect your {} instance from spammers').format(const.appName) }}</p>
		<div class="form-check form-switch mb-3">
			<input
			class="form-check-input"
			type="checkbox"
			name="_antispam.enabled"
			id="_antispam.enabled"
			value="{{ cfg.antispam.enabled }}"
			role="switch"
			{% if cfg.antispam.enabled %}checked{% endif %}>
			<input type="hidden" id="antispam.enabled" name="antispam.enabled" value="{{ cfg.antispam.enabled }}">
			<label for="_antispam.enabled" class="form-check-label">{{ _('Enabled') }}</label>
		</div>
		{% if not cfg.antispam.enabled %}
		<div class="alert alert-warning border-0 small" role="alert">
			<p class="m-0 d-flex align-items-center gap-2 fw-medium"><i class="bi bi-exclamation-circle fs-5"></i> {{ _('Warning') }}</p>
			<p class="m-0">
				{{ _("It's highly encouraged to keep anti-spam enabled, otherwise you could become a target of a spam attack.") }}<br><br>
				{#- i hate quotes and their issues #}
				{{ _("If you don't want your visitors to worry about completing a CAPTCHA, some providers have 'non-interactive' and 'invisible' CAPTCHA variants.") }}
			</p>
		</div>
		{% endif %}
		<div class="form-group mb-3{% if not cfg.antispam.enabled %}d-none{% endif %}">
			<label class="form-label" for="antispam.type">{{ _('Anti-spam type') }}</label>
			<select id="antispam.type" name="antispam.type" class="form-select" onchange="checkForRecaptcha(this)">
				<option value="basic"{% if cfg.antispam.type == 'basic' %} selected{% endif %}>{{ _('Basic') }}</option>
				<option value="turnstile"{% if cfg.antispam.type == 'turnstile' %} selected{% endif %}>Cloudflare Turnstile</option>
				<option value="frc"{% if cfg.antispam.type == 'frc' %} selected{% endif %}>Friendly Captcha</option>
				<option value="recaptcha"{% if cfg.antispam.type == 'recaptcha' %} selected{% endif %}>reCAPTCHA v2</option>
			</select>
			<p class="form-text">{{ _('Anti-spam type to use') }}</p>
		</div>
		<div id="recaptcha-options"{% if cfg.antispam.type != 'recaptcha' %} class="d-none"{% endif %}>
			<h3 id="recaptcha" class="mb-3 fw-light">{{ _('reCAPTCHA options') }}</h3>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.recaptcha.sitekey">{{ _('Site key') }}</label>
				<input type="text" id="antispam.recaptcha.sitekey" name="antispam.recaptcha.sitekey" value="{{ cfg.antispam.recaptcha.sitekey }}" class="form-control">
				<p class="form-text">{{ _('reCAPTCHA site key') }}</p>
			</div>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.recaptcha.secretkey">{{ _('Secret key') }}</label>
				<input type="password" id="antispam.recaptcha.secretkey" name="antispam.recaptcha.secretkey" value="{{ cfg.antispam.recaptcha.secretkey }}" class="form-control">
				<p class="form-text">{{ _('reCAPTCHA secret key') }}</p>
			</div>
		</div>
		<div id="turnstile-options"{% if cfg.antispam.type != 'turnstile' %} class="d-none"{% endif %}>
			<h3 id="turnstile" class="mb-3 fw-light">{{ _('Turnstile options') }}</h3>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.turnstile.sitekey">{{ _('Site key') }}</label>
				<input type="text" id="antispam.turnstile.sitekey" name="antispam.turnstile.sitekey" value="{{ cfg.antispam.turnstile.sitekey }}" class="form-control">
				<p class="form-text">{{ _('Turnstile site key') }}</p>
			</div>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.turnstile.secretkey">{{ _('Secret key') }}</label>
				<input type="password" id="antispam.turnstile.secretkey" name="antispam.turnstile.secretkey" value="{{ cfg.antispam.turnstile.secretkey }}" class="form-control">
				<p class="form-text">{{ _('Turnstile secret key') }}</p>
			</div>
		</div>
		<div id="frc-options"{% if cfg.antispam.type != 'frc' %} class="d-none"{% endif %}>
			<h3 id="frc" class="mb-3 fw-light">{{ _('Friendly Captcha options') }}</h3>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.frc.sitekey">{{ _('Site key') }}</label>
				<input type="text" id="antispam.frc.sitekey" name="antispam.frc.sitekey" value="{{ cfg.antispam.frc.sitekey }}" class="form-control">
				<p class="form-text">{{ _('Friendly Captcha site key') }}</p>
			</div>
			<div class="form-group mb-3">
				<label class="form-label" for="antispam.frc.apikey">{{ _('API key') }}</label>
				<input type="password" id="antispam.frc.apikey" name="antispam.frc.apikey" value="{{ cfg.antispam.frc.apikey }}" class="form-control">
				<p class="form-text">{{ _('Friendly Captcha API key') }}</p>
			</div>
		</div>
		{% include 'snippets/admin/saveBtn.html' %}
	</form>
{% endblock %}
{% block _scripts %}
<script>
	let recaptchaDiv = document.getElementById("recaptcha-options");
	let turnstileDiv = document.getElementById("turnstile-options");
	let frcDiv = document.getElementById("frc-options");
	const typeSelect = document.getElementById('antispam.type');
	function checkForRecaptcha(element) {
		console.log(element);
			if (element.value === 'recaptcha') {
				recaptchaDiv.classList.remove('d-none');
				turnstileDiv.classList.add('d-none');
				frcDiv.classList.add('d-none');
			} else if (element.value === 'turnstile') {
				turnstileDiv.classList.remove('d-none');
				recaptchaDiv.classList.add('d-none');
				frcDiv.classList.add('d-none');
			} else if (element.value === 'frc') {
				turnstileDiv.classList.add('d-none');
				recaptchaDiv.classList.add('d-none');
				frcDiv.classList.remove('d-none');
			} else {
				recaptchaDiv.classList.add('d-none');
				turnstileDiv.classList.add('d-none');
				frcDiv.classList.add('d-none');
			}
	}
</script>
<script>
	// fix handling checkboxes
	document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
		checkbox.addEventListener('change', function() {
			checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
		});
	});
</script>
{% endblock %}