From d7b201c7f79326c168ed92580fb12d1f6c75339c Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 3 Jan 2023 18:30:56 +0400
Subject: [PATCH] Enable captcha and refactor popup

---
 package.json                        |   1 +
 src/components/Captcha/captcha.js   |   2 +-
 src/components/DownloadPopup.astro  |   2 +-
 src/components/Popup/Popup.astro    |   8 +-
 src/components/Popup/popup.js       | 120 ++++++++++++++--------------
 src/components/RoadmapHeader.astro  |   4 +-
 src/components/SubscribePopup.astro |   2 +-
 src/pages/signup.astro              |   2 +-
 8 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index 4779bd72e..d413d9bc7 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Captcha/captcha.js b/src/components/Captcha/captcha.js
index a68f80b86..01189491e 100644
--- a/src/components/Captcha/captcha.js
+++ b/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;
   }
 
diff --git a/src/components/DownloadPopup.astro b/src/components/DownloadPopup.astro
index c9f18bf8a..c06362b68 100644
--- a/src/components/DownloadPopup.astro
+++ b/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' />
diff --git a/src/components/Popup/Popup.astro b/src/components/Popup/Popup.astro
index f262aa2ae..2797c2037 100644
--- a/src/components/Popup/Popup.astro
+++ b/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'>
diff --git a/src/components/Popup/popup.js b/src/components/Popup/popup.js
index cadc097db..df2de4b2a 100644
--- a/src/components/Popup/popup.js
+++ b/src/components/Popup/popup.js
@@ -1,65 +1,69 @@
-export class Modal {
-    constructor() {
-      this.triggerModal = this.triggerModal.bind(this);
-      this.onDOMLoaded = this.onDOMLoaded.bind(this);
-      this.handleCloseModal = this.handleCloseModal.bind(this);
-      this.handleKeydown = this.handleKeydown.bind(this);
+export class Popup {
+  constructor() {
+    this.triggerPopup = this.triggerPopup.bind(this);
+    this.onDOMLoaded = this.onDOMLoaded.bind(this);
+    this.handleClosePopup = this.handleClosePopup.bind(this);
+    this.handleKeydown = this.handleKeydown.bind(this);
+  }
+
+  /**
+   * 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}`);
+
+    if (!popupEl) {
+      return;
     }
-  
-    /**
-     * 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;
-      }
-  
-      modalEl.classList.remove('hidden');
-      const focusEl = modalEl.querySelector('[autofocus]');
-      if (focusEl) {
-        focusEl.focus();
-      }
+
+    popupEl.classList.remove('hidden');
+    popupEl.classList.add('flex');
+    const focusEl = popupEl.querySelector('[autofocus]');
+    if (focusEl) {
+      focusEl.focus();
     }
-  
-    handleCloseModal(e) {
-      const target = e.target;
-      const modalBody = target.closest('.modal-body');
-      const closestModal = target.closest('.modal');
-  
-      if (modalBody) {
-        return;
-      }
-  
-      if (closestModal) {
-        closestModal.classList.add('hidden');
-      }
+  }
+
+  handleClosePopup(e) {
+    const target = e.target;
+    const popupBody = target.closest('.popup-body');
+    const closestPopup = target.closest('.popup');
+
+    if (popupBody) {
+      return;
     }
-  
-    handleKeydown(e) {
-      if (e.key !== 'Escape') {
-        return;
-      }
-  
-      const modal = document.querySelector('.modal:not(.hidden)');
-      if (modal) {
-        modal.classList.add('hidden');
-      }
+
+    if (closestPopup) {
+      closestPopup.classList.add('hidden');
+      closestPopup.classList.remove('flex');
     }
-  
-    onDOMLoaded() {
-      document.addEventListener('click', this.triggerModal);
-      document.addEventListener('click', this.handleCloseModal);
-      document.addEventListener('keydown', this.handleKeydown);
+  }
+
+  handleKeydown(e) {
+    if (e.key !== 'Escape') {
+      return;
     }
-  
-    init() {
-      window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+    const popup = document.querySelector('.popup:not(.hidden)');
+    if (popup) {
+      popup.classList.add('hidden');
+      popup.classList.remove('flex');
     }
   }
-  
-  const modalRef = new Modal();
-  modalRef.init();  
\ No newline at end of file
+
+  onDOMLoaded() {
+    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();
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 77e859c30..a336d4eec 100644
--- a/src/components/RoadmapHeader.astro
+++ b/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"
               >
diff --git a/src/components/SubscribePopup.astro b/src/components/SubscribePopup.astro
index c45534b89..1dfc4a002 100644
--- a/src/components/SubscribePopup.astro
+++ b/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' />
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index 2552ad3a2..91adf09ce 100644
--- a/src/pages/signup.astro
+++ b/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' />