Enable captcha and refactor popup

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "astro dev",
+    "dev:verbose": "astro dev --verbose",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",

src/components/Captcha/captcha.js

@@ -25,7 +25,7 @@ class Captcha {
       target.querySelector('.recaptcha-response').value = captchaResponse;
     }
 
-    target.closest('.modal').classList.add('hidden');
+    target.closest('.popup').classList.add('hidden');
     return true;
   }
 

src/components/DownloadPopup.astro

@@ -25,7 +25,7 @@ import Captcha from './Captcha/Captcha.astro';
       placeholder='Enter your Email'
     />
 
-    <!-- <Captcha /> -->
+    <Captcha />
 
     <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
     <input type='hidden' name='subform' value='yes' />

src/components/Popup/Popup.astro

@@ -15,17 +15,17 @@ const { id, title, subtitle } = Astro.props;
 <div
   id={id}
   tabindex='-1'
-  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full flex items-center justify-center modal'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full items-center justify-center popup'
 >
   <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
-    <div class='relative bg-white rounded-lg shadow modal-body'>
+    <div class='relative bg-white rounded-lg shadow popup-body'>
       <button
         type='button'
         class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center'
-        onclick='this.closest(".modal").classList.add("hidden")'
+        onclick='this.closest(".popup").classList.add("hidden")'
       >
         <Icon icon='close' />
-        <span class='sr-only'>Close modal</span>
+        <span class='sr-only'>Close popup</span>
       </button>
       <div class='p-5'>
         <h3 class='text-2xl mb-0.5 font-medium'>

src/components/Popup/popup.js

@@ -1,65 +1,69 @@
-export class Modal {
+export class Popup {
-    constructor() {
+  constructor() {
-      this.triggerModal = this.triggerModal.bind(this);
+    this.triggerPopup = this.triggerPopup.bind(this);
-      this.onDOMLoaded = this.onDOMLoaded.bind(this);
+    this.onDOMLoaded = this.onDOMLoaded.bind(this);
-      this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.handleClosePopup = this.handleClosePopup.bind(this);
-      this.handleKeydown = this.handleKeydown.bind(this);
+    this.handleKeydown = this.handleKeydown.bind(this);
-    }
+  }
-  
-    /**
-     * Triggers the modal on target elements
-     * @param {Event} e
-     */
-    triggerModal(e) {
-      const modalToShow = e?.target?.closest('[data-modal]')?.dataset?.modal || 'unknown-modal';
-      const modalEl = document.querySelector(`#${modalToShow}`);
 
-      if (!modalEl) {
+  /**
-        return;
+   * Triggers the popup on target elements
-      }
+   * @param {Event} e
+   */
+  triggerPopup(e) {
+    const popupToShow =
+      e?.target?.closest('[data-popup]')?.dataset?.popup || 'unknown-popup';
+    const popupEl = document.querySelector(`#${popupToShow}`);
 
-      modalEl.classList.remove('hidden');
+    if (!popupEl) {
-      const focusEl = modalEl.querySelector('[autofocus]');
+      return;
-      if (focusEl) {
-        focusEl.focus();
-      }
     }
 
-    handleCloseModal(e) {
+    popupEl.classList.remove('hidden');
-      const target = e.target;
+    popupEl.classList.add('flex');
-      const modalBody = target.closest('.modal-body');
+    const focusEl = popupEl.querySelector('[autofocus]');
-      const closestModal = target.closest('.modal');
+    if (focusEl) {
+      focusEl.focus();
+    }
+  }
 
-      if (modalBody) {
+  handleClosePopup(e) {
-        return;
+    const target = e.target;
-      }
+    const popupBody = target.closest('.popup-body');
+    const closestPopup = target.closest('.popup');
 
-      if (closestModal) {
+    if (popupBody) {
-        closestModal.classList.add('hidden');
+      return;
-      }
     }
 
-    handleKeydown(e) {
+    if (closestPopup) {
-      if (e.key !== 'Escape') {
+      closestPopup.classList.add('hidden');
-        return;
+      closestPopup.classList.remove('flex');
-      }
-  
-      const modal = document.querySelector('.modal:not(.hidden)');
-      if (modal) {
-        modal.classList.add('hidden');
-      }
     }
+  }
 
-    onDOMLoaded() {
+  handleKeydown(e) {
-      document.addEventListener('click', this.triggerModal);
+    if (e.key !== 'Escape') {
-      document.addEventListener('click', this.handleCloseModal);
+      return;
-      document.addEventListener('keydown', this.handleKeydown);
     }
 
-    init() {
+    const popup = document.querySelector('.popup:not(.hidden)');
-      window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+    if (popup) {
+      popup.classList.add('hidden');
+      popup.classList.remove('flex');
     }
   }
 
-  const modalRef = new Modal();
+  onDOMLoaded() {
-  modalRef.init();  
+    document.addEventListener('click', this.triggerPopup);
+    document.addEventListener('click', this.handleClosePopup);
+    document.addEventListener('keydown', this.handleKeydown);
+  }
+
+  init() {
+    window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+  }
+}
+
+const popupRef = new Popup();
+popupRef.init();

src/components/RoadmapHeader.astro

@@ -48,7 +48,7 @@ const isRoadmapReady = !isUpcoming;
 
               {isRoadmapReady && (
                 <button
-                  data-modal="download-popup"
+                  data-popup="download-popup"
                   class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
                   aria-label="Download Roadmap"
                 >
@@ -58,7 +58,7 @@ const isRoadmapReady = !isUpcoming;
               )}
 
               <button
-                data-modal="subscribe-popup"
+                data-popup="subscribe-popup"
                 class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
                 aria-label="Subscribe for Updates"
               >

src/components/SubscribePopup.astro

@@ -24,7 +24,7 @@ import Captcha from './Captcha/Captcha.astro';
       placeholder='Enter your Email'
     />
 
-    <!-- <Captcha /> -->
+    <Captcha />
 
     <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
     <input type='hidden' name='subform' value='yes' />

src/pages/signup.astro

@@ -36,7 +36,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           placeholder='Enter your email'
         />
 
-        <!-- <Captcha /> -->
+        <Captcha />
 
         <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
         <input type='hidden' name='subform' value='yes' />