captcha adicional para la newsletter

Author: Alexia Michelle

i18n/es/code.json

@@ -422,5 +422,8 @@
   },
   "newsletter.list.security.uuid": {
     "message": "8a189f90-84b7-4f2c-8784-49509c895c54"
+  },
+  "newsletter.error.captcha": {
+    "message": "Respuesta incorrecta. Por favor, inténtalo de nuevo."
   }
 }

src/components/NewsletterForm/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './styles.module.css';
 import Translate, { translate } from '@docusaurus/Translate';
 
@@ -11,6 +11,21 @@ export default function NewsletterForm() {
     const [status, setStatus] = useState('idle'); // idle, loading, success, error
     const [message, setMessage] = useState('');
 
+    // Bot Protection State
+    const [honeypot, setHoneypot] = useState('');
+    const [captcha, setCaptcha] = useState({ a: 0, b: 0, answer: '' });
+
+    // Generate a new math challenge
+    const generateCaptcha = () => {
+        const a = Math.floor(Math.random() * 10) + 1;
+        const b = Math.floor(Math.random() * 10) + 1;
+        setCaptcha({ a, b, answer: '' });
+    };
+
+    useEffect(() => {
+        generateCaptcha();
+    }, []);
+
     const lists = {
         news: {
             uuid: translate({
@@ -38,6 +53,26 @@ export default function NewsletterForm() {
     const handleSubmit = async (e) => {
         e.preventDefault();
 
+        // 1. Honeypot check (Bots fill hidden fields)
+        if (honeypot) {
+            console.warn('Bot detected via honeypot');
+            setStatus('success'); // Fake success for bots
+            return;
+        }
+
+        // 2. CAPTCHA check
+        if (parseInt(captcha.answer) !== captcha.a + captcha.b) {
+            setStatus('error');
+            setMessage(
+                translate({
+                    id: 'newsletter.error.captcha',
+                    message: 'Incorrect answer. Please try again.',
+                })
+            );
+            generateCaptcha();
+            return;
+        }
+
         const uuids = Object.keys(selectedLists)
             .filter((key) => selectedLists[key])
             .map((key) => lists[key].uuid);
@@ -88,6 +123,7 @@ export default function NewsletterForm() {
                         message: 'Something went wrong. Please try again.',
                     })
                 );
+                generateCaptcha();
             }
         } catch (err) {
             setStatus('error');
@@ -97,6 +133,7 @@ export default function NewsletterForm() {
                     message: 'Failed to connect to the subscription service. Please check your connection or CORS settings.',
                 })
             );
+            generateCaptcha();
         }
     };
 
@@ -112,6 +149,18 @@ export default function NewsletterForm() {
                     </Translate>
                 </p>
                 <form onSubmit={handleSubmit} className={styles.form}>
+                    {/* Honeypot Field (Hidden) */}
+                    <div className={styles.hidden} aria-hidden="true">
+                        <input
+                            type="text"
+                            name="website"
+                            tabIndex="-1"
+                            autoComplete="off"
+                            value={honeypot}
+                            onChange={(e) => setHoneypot(e.target.value)}
+                        />
+                    </div>
+
                     <div className={styles.inputGroup}>
                         <input
                             type="email"
@@ -125,6 +174,23 @@ export default function NewsletterForm() {
                             className={styles.input}
                             disabled={status === 'loading' || status === 'success'}
                         />
+
+                        {/* Inline CAPTCHA for desktop/tablet */}
+                        <div className={styles.captchaGroup}>
+                            <span className={styles.captchaQuestion}>
+                                {captcha.a} + {captcha.b} =
+                            </span>
+                            <input
+                                type="number"
+                                placeholder="..."
+                                value={captcha.answer}
+                                onChange={(e) => setCaptcha({ ...captcha, answer: e.target.value })}
+                                required
+                                className={styles.captchaInput}
+                                disabled={status === 'loading' || status === 'success'}
+                            />
+                        </div>
+
                         <button
                             type="submit"
                             className={styles.button}

src/components/NewsletterForm/styles.module.css

@@ -11,7 +11,7 @@
     border-radius: 12px;
     padding: 2rem;
     width: 100%;
-    max-width: 500px;
+    max-width: 600px;
     text-align: center;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 }
@@ -37,10 +37,11 @@
 .inputGroup {
     display: flex;
     gap: 0.5rem;
+    align-items: center;
 }
 
 .input {
-    flex: 1;
+    flex: 2;
     padding: 0.75rem 1rem;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.2);
@@ -49,21 +50,61 @@
     font-size: 1rem;
     outline: none;
     transition: border-color 0.2s;
+    min-width: 0;
 }
 
 .input:focus {
     border-color: var(--ifm-color-primary);
 }
 
+.captchaGroup {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.45rem 0.75rem;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    white-space: nowrap;
+}
+
+.captchaQuestion {
+    font-family: monospace;
+    font-weight: bold;
+    font-size: 0.95rem;
+    color: var(--ifm-color-primary-light);
+}
+
+.captchaInput {
+    width: 45px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid var(--ifm-color-primary);
+    color: white;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1rem;
+    outline: none;
+    padding: 0;
+}
+
+/* Remove arrows from number input */
+.captchaInput::-webkit-outer-spin-button,
+.captchaInput::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
 .button {
-    padding: 0.75rem 1.5rem;
+    padding: 0.75rem 1.25rem;
     border-radius: 8px;
     border: none;
     background: var(--ifm-color-primary);
     color: white;
     font-weight: bold;
     cursor: pointer;
     transition: filter 0.2s, transform 0.1s;
+    flex: 1;
 }
 
 .button:hover:not(:disabled) {
@@ -84,6 +125,7 @@
     justify-content: center;
     gap: 1.5rem;
     flex-wrap: wrap;
+    margin-top: 0.5rem;
 }
 
 .checkboxLabel {
@@ -117,8 +159,21 @@
     font-weight: 500;
 }
 
-@media (max-width: 600px) {
+.hidden {
+    display: none !important;
+}
+
+@media (max-width: 768px) {
     .inputGroup {
         flex-direction: column;
+        align-items: stretch;
+    }
+
+    .captchaGroup {
+        justify-content: center;
+    }
+
+    .button {
+        width: 100%;
     }
 }