From 1beec55bace00d59ef55c17137334f893b1618a9 Mon Sep 17 00:00:00 2001
From: mst <oivan2401@gmail.com>
Date: Tue, 26 Nov 2024 15:25:33 +0300
Subject: [PATCH] add anti-spam page template

---
 templates/admin/categories/antispam.html | 121 +++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 templates/admin/categories/antispam.html

diff --git a/templates/admin/categories/antispam.html b/templates/admin/categories/antispam.html
new file mode 100644
index 0000000..9e0af43
--- /dev/null
+++ b/templates/admin/categories/antispam.html
@@ -0,0 +1,121 @@
+{% 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-3 fw-normal">Anti-spam</h2>
+		<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>
+				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>
+		<div class="form-group">
+			<button type="submit" class="btn btn-primary mt-3" id="saveConfig">
+				<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
+				<span class="visually-hidden" role="status">Loading...</span>
+				Save
+			</button>
+		</div>
+	</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 %}