Refactor captcha validation

src/components/Captcha/Captcha.astro

@@ -1,15 +0,0 @@
----
----
-
-<script src='./captcha.js'></script>
-
-<script
-  src='https://www.google.com/recaptcha/api.js?onload=onCaptchaLoad&render=explicit'
-  async
-  defer
-></script>
-
-<!-- Captcha form start -->
-<div class='recaptcha-field mb-2'></div>
-<input type='hidden' name='g-recaptcha-response' class='recaptcha-response' />
-<!-- Catpcha form end -->

src/components/Captcha/CaptchaFields.astro

@@ -0,0 +1,5 @@
+---
+---
+
+<div class='recaptcha-field mb-2'></div>
+<input type='hidden' name='g-recaptcha-response' class='recaptcha-response' />

src/components/Captcha/CaptchaScripts.astro

@@ -0,0 +1,36 @@
+---
+
+---
+
+<script src='./captcha.js'></script>
+
+<script is:inline>
+  window.onCaptchaLoad = function () {
+    if (!window.grecaptcha) {
+      console.warn('window.grecaptcha is not defined');
+      return;
+    }
+
+    const recaptchaFields = document.querySelectorAll('.recaptcha-field');
+
+    // render recaptcha on fields
+    recaptchaFields.forEach((field) => {
+      // If captcha already rendered for this field
+      if (field.hasAttribute('data-recaptcha-id')) {
+        return;
+      }
+
+      const renderedId = window.grecaptcha.render(field, {
+        sitekey: '6Ldn2YsjAAAAABlUxNxukAuDAUIuZIhO0hRVxzJW',
+      });
+
+      field.setAttribute('data-recaptcha-id', renderedId);
+    });
+  };
+</script>
+
+<script
+  src='https://www.google.com/recaptcha/api.js?onload=onCaptchaLoad&render=explicit'
+  async
+  defer
+></script>

src/components/Captcha/captcha.js

@@ -4,7 +4,6 @@ class Captcha {
     this.bindValidation = this.bindValidation.bind(this);
     this.validateCaptchaBeforeSubmit =
       this.validateCaptchaBeforeSubmit.bind(this);
-    this.onCaptchaLoad = this.onCaptchaLoad.bind(this);
   }
 
   validateCaptchaBeforeSubmit(e) {
@@ -30,36 +29,13 @@ class Captcha {
   }
 
   bindValidation() {
-    const forms = document.querySelectorAll('.validate-captcha-form');
+    const forms = document.querySelectorAll('[captcha-form]');
 
     forms.forEach((form) => {
       form.addEventListener('submit', this.validateCaptchaBeforeSubmit);
     });
   }
 
-  onCaptchaLoad() {
-    if (!window.grecaptcha) {
-      console.warn('window.grecaptcha is not defined');
-      return;
-    }
-
-    const recaptchaFields = document.querySelectorAll('.recaptcha-field');
-
-    // render recaptcha on fields
-    recaptchaFields.forEach((field) => {
-      // If captcha already rendered for this field
-      if (field.hasAttribute('data-recaptcha-id')) {
-        return;
-      }
-
-      const renderedId = window.grecaptcha.render(field, {
-        sitekey: '6Ldn2YsjAAAAABlUxNxukAuDAUIuZIhO0hRVxzJW',
-      });
-
-      field.setAttribute('data-recaptcha-id', renderedId);
-    });
-  }
-
   onDOMLoaded() {
     this.bindValidation();
   }
@@ -71,5 +47,3 @@ class Captcha {
 
 const captcha = new Captcha();
 captcha.init();
-
-window.onCaptchaLoad = captcha.onCaptchaLoad;

src/components/DownloadPopup.astro

@@ -1,6 +1,6 @@
 ---
 import Popup from './Popup/Popup.astro';
-import Captcha from './Captcha/Captcha.astro';
+import CaptchaFields from './Captcha/CaptchaFields.astro';
 ---
 
 <Popup
@@ -13,7 +13,7 @@ import Captcha from './Captcha/Captcha.astro';
     method='POST'
     accept-charset='utf-8'
     target='_blank'
-    class='validate-captcha-form'
+    captcha-form
   >
     <input
       type='email'
@@ -25,7 +25,7 @@ import Captcha from './Captcha/Captcha.astro';
       placeholder='Enter your Email'
     />
 
-    <Captcha />
+    <CaptchaFields />
 
     <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
     <input type='hidden' name='subform' value='yes' />

src/components/SubscribePopup.astro

@@ -1,6 +1,6 @@
 ---
 import Popup from './Popup/Popup.astro';
-import Captcha from './Captcha/Captcha.astro';
+import CaptchaFields from './Captcha/CaptchaFields.astro';
 ---
 
 <Popup
@@ -13,7 +13,7 @@ import Captcha from './Captcha/Captcha.astro';
     method='POST'
     accept-charset='utf-8'
     target='_blank'
-    class='validate-captcha-form'
+    captcha-form
   >
     <input
       type='email'
@@ -24,7 +24,7 @@ import Captcha from './Captcha/Captcha.astro';
       placeholder='Enter your Email'
     />
 
-    <Captcha />
+    <CaptchaFields />
 
     <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
     <input type='hidden' name='subform' value='yes' />

src/pages/[roadmapId]/index.astro

@@ -1,4 +1,5 @@
 ---
+import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import InteractiveRoadamp from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
 import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
@@ -55,4 +56,6 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
       </MarkdownRoadmap>
     )
   }
+
+  <CaptchaScripts slot="after-footer" />
 </BaseLayout>

src/pages/signup.astro

@@ -1,5 +1,6 @@
 ---
-import Captcha from '../components/Captcha/Captcha.astro';
+import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
+import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
@@ -27,7 +28,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         action='https://newsletter.roadmap.sh/subscribe'
         method='POST'
         accept-charset='utf-8'
-        class='w-full validate-captcha-form'
+        class='w-full'
+        captcha-form
       >
         <input
           type='email'
@@ -39,7 +41,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           placeholder='Enter your email'
         />
 
-        <Captcha />
+        <CaptchaFields />
 
         <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
         <input type='hidden' name='subform' value='yes' />
@@ -54,4 +56,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </form>
     </div>
   </div>
+
+  <CaptchaScripts slot='after-footer' />
 </BaseLayout>