Adding Cloudflare turnstile

.env.example

@@ -9,3 +9,5 @@ port=8080 # port to listen on
 google-client-id= # google client id
 facebook-app-id= # facebook app id
 recaptcha-site-key= # recaptcha site key
+turnstile-site-key= # turnstile key
+

app.js

@@ -36,6 +36,7 @@ app.use((req, res, next) => {
 	res.locals.googleClientId = process.env['google-client-id'];
 	res.locals.facebookAppId = process.env['facebook-app-id'];
 	res.locals.recaptchaSiteKey = process.env['recaptcha-site-key'];
+	res.locals.turnstileSiteKey = process.env['turnstile-site-key'];
 	res.locals.port = process.env.port;
 	res.locals.isPortPresent = req.get('host').includes(':');
 	res.locals.currentDomain = req.get( 'host' );
@@ -76,6 +77,7 @@ const scenarios = [
 	'social-media-comments',
 	'disqus-comments',
 	'google-recaptcha',
+	'cloudflare-turnstile',
 ];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./src/scenarios/${scenario}/routes`);

public/assets/styles/style.css

@@ -819,6 +819,10 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;

src/common/index.ejs

@@ -22,6 +22,7 @@
         <%= renderCard('Facebook Comments', '💬', '/social-media-comments') %>
         <%= renderCard('Disqus Comments', '✉️', '/disqus-comments') %>
         <%= renderCard('reCAPTCHA', '🤖', '/google-recaptcha') %>
+        <%= renderCard('Cloudflare captcha', '🤖', '/cloudflare-turnstile') %>
         <%= renderCard('CHIPS', '🍪', '/chips') %>
         <%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %>
     </div>

src/scenarios/cloudflare-turnstile/index.ejs

@@ -0,0 +1,44 @@
+<%- include(commonPath + '/header.ejs') %>
+
+<%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
+    <div id="status-message" class="text-center font-bold text-lg my-4"></div>  
+    <form action="?" method="POST" id="captcha-form" class="flex justify-between">
+        <div id="recaptcha-container"></div>
+        <input 
+            type="submit" 
+            value="Log in" 
+            disabled
+            class="px-4 py-2 bg-gray-100 text-white rounded transition duration-300 cursor-not-allowed" />
+    </form>
+<%- include(commonPath + '/internal-page/footer.ejs') %>
+<script type="text/javascript">
+    const statusMessage = document.getElementById('status-message');
+    const captchaForm = document.getElementById('captcha-form');
+    const sendButton = captchaForm.querySelector('input[type="submit"]')
+
+    const verifyCallback = (response) => {
+        if (response) {
+            statusMessage.textContent = `captcha verified`;
+            sendButton.removeAttribute('disabled');
+            sendButton.classList.remove('cursor-not-allowed');
+            sendButton.classList.remove('bg-gray-100');
+            sendButton.classList.add('bg-blue-500');
+        }
+    };
+
+    const errorCallback = (error) => {
+        if (error) {
+            statusMessage.textContent = `captcha error`;
+        }
+    };
+
+    window.onloadTurnstileCallback = function () {
+        turnstile.render('#recaptcha-container', {
+            sitekey: '<%= turnstileSiteKey %>',
+            callback: verifyCallback,
+            'error-callback': errorCallback
+        });
+    };
+</script>
+<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer></script>
+<%- include(commonPath + '/footer.ejs') %>

src/scenarios/cloudflare-turnstile/routes.js

@@ -0,0 +1,12 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+    // Send the default page
+    res.render(path.join(__dirname,'index'), {
+        title: 'Cloudflare CAPTCHA'
+    });
+});
+
+module.exports = router;