From 0e696559a827d315e035b06caff948cd2d27ee86 Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Tue, 12 Mar 2024 17:56:07 +0000
Subject: [PATCH 1/4] adding reCAPTCHA DEMO

---
 app.js               | 2 ++
 src/common/index.ejs | 1 +
 2 files changed, 3 insertions(+)

diff --git a/app.js b/app.js
index 19181e4..b322eeb 100644
--- a/app.js
+++ b/app.js
@@ -35,6 +35,7 @@ app.use((req, res, next) => {
 	res.locals.domainC = process.env['domain-c'];
 	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.port = process.env.port;
 	res.locals.isPortPresent = req.get('host').includes(':');
 	res.locals.currentDomain = req.get( 'host' );
@@ -74,6 +75,7 @@ const scenarios = [
 	'social-media',
 	'social-media-comments',
 	'disqus-comments',
+	'google-recaptcha',
 ];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./src/scenarios/${scenario}/routes`);
diff --git a/src/common/index.ejs b/src/common/index.ejs
index 188eb3a..db81944 100644
--- a/src/common/index.ejs
+++ b/src/common/index.ejs
@@ -21,6 +21,7 @@
         <%= renderCard('Facebook Like', '👍', '/social-media') %>
         <%= renderCard('Facebook Comments', '💬', '/social-media-comments') %>
         <%= renderCard('Disqus Comments', '✉️', '/disqus-comments') %>
+        <%= renderCard('reCAPTCHA', '🤖', '/google-recaptcha') %>
         <%= renderCard('CHIPS', '🍪', '/chips') %>
         <%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %>
     </div>

From ca4e160feded6403491af3302883a12baed61dcf Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Tue, 12 Mar 2024 17:56:32 +0000
Subject: [PATCH 2/4] adding reCAPTCHA script

---
 src/scenarios/google-recaptcha/index.ejs | 53 ++++++++++++++++++++++++
 src/scenarios/google-recaptcha/routes.js | 12 ++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/scenarios/google-recaptcha/index.ejs
 create mode 100644 src/scenarios/google-recaptcha/routes.js

diff --git a/src/scenarios/google-recaptcha/index.ejs b/src/scenarios/google-recaptcha/index.ejs
new file mode 100644
index 0000000..67de97a
--- /dev/null
+++ b/src/scenarios/google-recaptcha/index.ejs
@@ -0,0 +1,53 @@
+<%- 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="html_element"></div>
+        <input 
+            type="submit" 
+            value="Send" 
+            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 verifyCallback = (response) => {
+        console.log(response);
+        if (response) {
+            statusMessage.textContent = `captcha verified`;
+            captchaForm.querySelector('input[type="submit"]').removeAttribute('disabled');
+            captchaForm.querySelector('input[type="submit"]').classList.remove('cursor-not-allowed');
+            captchaForm.querySelector('input[type="submit"]').classList.remove('bg-gray-100');
+            captchaForm.querySelector('input[type="submit"]').classList.add('bg-blue-500');
+        }
+    };
+
+    const errorCallback = (error) => {
+        console.log('error');
+        if (error) {
+            statusMessage.textContent = `captcha error`;
+        }
+    };
+    
+    captchaForm.onsubmit = (event) => {
+        event.preventDefault();
+        const token = grecaptcha.getResponse();
+        statusMessage.textContent = `form submitted, captcha token ${token}`;
+    }
+
+    window.onloadCallback = function() {
+        grecaptcha.render('html_element', {
+          'sitekey' : '<%= recaptchaSiteKey %>',
+          'callback' : verifyCallback,
+          'error-callback' : errorCallback
+        });
+      };
+</script>
+<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
+    async defer>
+</script>
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/google-recaptcha/routes.js b/src/scenarios/google-recaptcha/routes.js
new file mode 100644
index 0000000..f86e9a3
--- /dev/null
+++ b/src/scenarios/google-recaptcha/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: 'Google reCAPTCHA'
+    });
+});
+
+module.exports = router;

From 9ab45535086d194a44381cb36107d6188cdfa817 Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Tue, 12 Mar 2024 18:00:54 +0000
Subject: [PATCH 3/4] adding new env property

---
 .env.example | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.env.example b/.env.example
index 9eff04f..16c34aa 100644
--- a/.env.example
+++ b/.env.example
@@ -8,3 +8,4 @@ domain-c-background=bg-red-100
 port=8080 # port to listen on
 google-client-id= # google client id
 facebook-app-id= # facebook app id
+recaptcha-site-key= # recaptcha site key

From 0510eba69a1196f8e568fb43f21eada68963370f Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Tue, 12 Mar 2024 18:05:10 +0000
Subject: [PATCH 4/4] save send button in a constant

---
 src/scenarios/google-recaptcha/index.ejs | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/scenarios/google-recaptcha/index.ejs b/src/scenarios/google-recaptcha/index.ejs
index 67de97a..5ccbf83 100644
--- a/src/scenarios/google-recaptcha/index.ejs
+++ b/src/scenarios/google-recaptcha/index.ejs
@@ -14,15 +14,16 @@
 <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) => {
         console.log(response);
         if (response) {
             statusMessage.textContent = `captcha verified`;
-            captchaForm.querySelector('input[type="submit"]').removeAttribute('disabled');
-            captchaForm.querySelector('input[type="submit"]').classList.remove('cursor-not-allowed');
-            captchaForm.querySelector('input[type="submit"]').classList.remove('bg-gray-100');
-            captchaForm.querySelector('input[type="submit"]').classList.add('bg-blue-500');
+            sendButton.removeAttribute('disabled');
+            sendButton.classList.remove('cursor-not-allowed');
+            sendButton.classList.remove('bg-gray-100');
+            sendButton.classList.add('bg-blue-500');
         }
     };