added captcha modal

src/App.js

@@ -6,7 +6,6 @@ import Board from './components/Board';
 import Thread from './components/Thread';
 import Catalog from './components/Catalog';
 import NotFound from './components/NotFound';
-import CaptchaModal from './components/CaptchaModal';
 import { createGlobalStyle } from 'styled-components';
 import 'react-tooltip/dist/react-tooltip.css';
 import preloadImages from './utils/preloadImages';
@@ -41,8 +40,7 @@ export default function App() {
     color: "maroon",
     fontFamily: "Helvetica, Arial, sans-serif"
   });
-  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [captchaResponse, setCaptchaResponse] = useState('');
-
 
   const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);
 
@@ -51,12 +49,6 @@ export default function App() {
   }, []);
 
 
-  const handleCaptchaClose = () => {
-    setIsCaptchaOpen(false);
-  };
-
-
-
   return (
   <div>
     <Helmet>
@@ -72,7 +64,7 @@ export default function App() {
     color={bodyStyle.color} 
     fontFamily={bodyStyle.fontFamily}
     />
-    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, isCaptchaOpen, setIsCaptchaOpen }}>
+    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse }}>
       <Routes>
         <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
         <Route path={`/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
@@ -87,6 +79,5 @@ export default function App() {
         <Route path='*' element={<NotFound />} />
       </Routes>
     </BoardContext.Provider>
-    <CaptchaModal isOpen={isCaptchaOpen} closeModal={handleCaptchaClose} />
   </div>
 )}

src/components/Board.jsx

@@ -3,6 +3,7 @@ import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
 import { BoardContext } from '../App';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import ImageBanner from './ImageBanner';
+import CaptchaModal from './CaptchaModal';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
@@ -12,13 +13,15 @@ import renderComments from '../utils/renderComments';
 
 const Board = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');
   const [subject, setSubject] = useState('');
   const [comment, setComment] = useState('');
   const { publishComment } = useAccountsActions();
+  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const location = useLocation();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -28,7 +31,6 @@ const Board = ({ setBodyStyle }) => {
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const renderedFeed = selectedFeed.slice(0, endIndex);
   const { subplebbitAddress } = useParams();
-  // const [cookies, setCookie] = useCookies(['selectedStyle']);
 
 
   // temporary title from JSON, gets subplebbitAddress from URL
@@ -178,26 +180,19 @@ const Board = ({ setBodyStyle }) => {
       challengeImg.src = imageSource;
   
       challengeImg.onload = () => {
-        const inputEl = document.getElementById('t-resp');
+        setIsCaptchaOpen(true);
-        const cntEl = document.getElementById('t-cnt');
+        setCaptchaImage(imageSource);
-        cntEl.appendChild(challengeImg);
-        inputEl.focus();
   
         const handleKeyDown = (event) => {
           if (event.key === 'Enter') {
-            const challengeResponse = inputEl.value;
+            setCaptchaImage('');
-            inputEl.value = '';
+            resolve(captchaResponse);
-  
+            setIsCaptchaOpen(false);
-            if (cntEl.contains(challengeImg)) {
-              cntEl.removeChild(challengeImg);
-            }
-  
             document.removeEventListener('keydown', handleKeyDown);
-  
-            resolve(challengeResponse);
           }
         };
-  
+
+        setCaptchaResponse('');
         document.addEventListener('keydown', handleKeyDown);
       };
   
@@ -250,7 +245,7 @@ const Board = ({ setBodyStyle }) => {
 
   const handleClickThread = (thread) => {
     setSelectedThread(thread);
-  }
+  };
   
 
   const handlePublishComment = async () => {
@@ -283,6 +278,10 @@ const Board = ({ setBodyStyle }) => {
     }
   }
 
+  const handleCaptchaClose = () => {
+    setIsCaptchaOpen(false);
+  };
+
 
   const handleStyleChange = (event) => {
     switch (event.target.value) {
@@ -375,6 +374,10 @@ const Board = ({ setBodyStyle }) => {
 
   return (
     <Container>
+      <CaptchaModal 
+      isOpen={isCaptchaOpen} 
+      closeModal={handleCaptchaClose} 
+      captchaImage={captchaImage} />
       <NavBar selectedStyle={selectedStyle}>
         <>
           {defaultSubplebbits.map(subplebbit => (
@@ -469,11 +472,6 @@ const Board = ({ setBodyStyle }) => {
                 <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button>
               </td>
             </tr>
-            <tr>
-              <td>
-                <button onClick={() => setIsCaptchaOpen(true)}>Show Captcha</button>
-              </td>
-            </tr>
           </tbody>
         </PostFormTable>
       </PostForm>

src/components/CaptchaModal.jsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useState, useContext } from 'react';
 import Modal from 'react-modal';
 import styled from 'styled-components';
+import { BoardContext } from '../App';
 
 const StyledModal = styled(Modal)`
   @media (min-width: 480px) {
     .modal-content {
       width: 450px;
-      height: 350px;
+      height: 300px;
     }
   }
 
@@ -52,7 +53,7 @@ const StyledModal = styled(Modal)`
   }
 
   input {
-    margin-top: 20px;
+    margin-top: 30px;
     width: 70%;
     padding: 2px;
     border: 1px solid #ccc;
@@ -60,12 +61,6 @@ const StyledModal = styled(Modal)`
     border: 1px solid #777;
     outline: none;
   }
-
-  button.submit {
-    margin-top: 20px;
-    padding: 3px 15px;
-    border-radius: 3px;
-  }
 `;
 
 const customOverlayStyles = {
@@ -74,11 +69,17 @@ const customOverlayStyles = {
   }
 };
 
-const CaptchaModal = ({ isOpen, closeModal }) => {
+const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
+  const { captchaResponse, setCaptchaResponse } = useContext(BoardContext);
+
   const handleCloseModal = () => {
     closeModal();
   };
 
+  const handleChallengeResponse = (event) => {
+    setCaptchaResponse(event.target.value);
+  };  
+
   return (
     <StyledModal
       isOpen={isOpen}
@@ -90,10 +91,13 @@ const CaptchaModal = ({ isOpen, closeModal }) => {
       <div className="modal-content">
         <button className='x' onClick={handleCloseModal}>X</button>
         <div className="challenge">Verification</div>
-        <img src="/assets/banners/banner-1.jpg" alt="captcha" />
+        <img src={captchaImage} alt="captcha" />
-        <input type="text" autoComplete='off'
+        <input 
-        placeholder="TYPE THE CAPTCHA HERE" />
+        type="text" 
-        <button className="submit">Submit</button>
+        autoComplete='off'
+        placeholder="TYPE THE CAPTCHA HERE AND PRESS ENTER" 
+        value={captchaResponse} 
+        onChange={handleChallengeResponse} />
       </div>
     </StyledModal>
   );

src/components/Catalog.jsx

@@ -6,22 +6,25 @@ import { Threads } from './styles/Catalog.styled';
 import { BoardContext } from '../App';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
+import CaptchaModal from './CaptchaModal';
 import InfiniteScroll from 'react-infinite-scroller';
 
 
 const Catalog = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');
   const [subject, setSubject] = useState('');
   const [comment, setComment] = useState('');
+  const { publishComment } = useAccountsActions();
+  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const location = useLocation();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const { publishComment } = useAccountsActions();
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
   const { subplebbitAddress } = useParams();
 
@@ -158,26 +161,19 @@ const Catalog = ({ setBodyStyle }) => {
       challengeImg.src = imageSource;
   
       challengeImg.onload = () => {
-        const inputEl = document.getElementById('t-resp');
+        setIsCaptchaOpen(true);
-        const cntEl = document.getElementById('t-cnt');
+        setCaptchaImage(imageSource);
-        cntEl.appendChild(challengeImg);
-        inputEl.focus();
   
         const handleKeyDown = (event) => {
           if (event.key === 'Enter') {
-            const challengeResponse = inputEl.value;
+            setCaptchaImage('');
-            inputEl.value = '';
+            resolve(captchaResponse);
-  
+            setIsCaptchaOpen(false);
-            if (cntEl.contains(challengeImg)) {
-              cntEl.removeChild(challengeImg);
-            }
-  
             document.removeEventListener('keydown', handleKeyDown);
-  
-            resolve(challengeResponse);
           }
         };
-  
+
+        setCaptchaResponse('');
         document.addEventListener('keydown', handleKeyDown);
       };
   
@@ -244,6 +240,10 @@ const Catalog = ({ setBodyStyle }) => {
     }
   };
 
+  const handleCaptchaClose = () => {
+    setIsCaptchaOpen(false);
+  };
+
 
   const handleStyleChange = (event) => {
     switch (event.target.value) {
@@ -336,6 +336,10 @@ const Catalog = ({ setBodyStyle }) => {
 
   return (
     <Container>
+      <CaptchaModal 
+      isOpen={isCaptchaOpen} 
+      closeModal={handleCaptchaClose} 
+      captchaImage={captchaImage} />
       <NavBar selectedStyle={selectedStyle}>
         <>
           {defaultSubplebbits.map(subplebbit => (
@@ -430,11 +434,6 @@ const Catalog = ({ setBodyStyle }) => {
                 <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button>
               </td>
             </tr>
-            <tr>
-              <td>
-                <button onClick={() => setIsCaptchaOpen(true)}>Show Captcha</button>
-              </td>
-            </tr>
           </tbody>
         </PostFormTable>
       </PostForm>

src/components/Thread.jsx

@@ -5,6 +5,7 @@ import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
 import { BoardContext } from '../App';
 import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
+import CaptchaModal from './CaptchaModal';
 import { Tooltip } from 'react-tooltip';
 import getDate from '../utils/getDate';
 import renderThreadComments from '../utils/renderThreadComments';
@@ -12,13 +13,15 @@ import renderThreadComments from '../utils/renderThreadComments';
 
 const Thread = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');
   const [subject, setSubject] = useState('');
   const [commentContent, setCommentContent] = useState('');
   const { publishComment } = useAccountsActions();
+  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const location = useLocation();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -153,26 +156,19 @@ const Thread = ({ setBodyStyle }) => {
       challengeImg.src = imageSource;
   
       challengeImg.onload = () => {
-        const inputEl = document.getElementById('t-resp');
+        setIsCaptchaOpen(true);
-        const cntEl = document.getElementById('t-cnt');
+        setCaptchaImage(imageSource);
-        cntEl.appendChild(challengeImg);
-        inputEl.focus();
   
         const handleKeyDown = (event) => {
           if (event.key === 'Enter') {
-            const challengeResponse = inputEl.value;
+            setCaptchaImage('');
-            inputEl.value = '';
+            resolve(captchaResponse);
-  
+            setIsCaptchaOpen(false);
-            if (cntEl.contains(challengeImg)) {
-              cntEl.removeChild(challengeImg);
-            }
-  
             document.removeEventListener('keydown', handleKeyDown);
-  
-            resolve(challengeResponse);
           }
         };
-  
+
+        setCaptchaResponse('');
         document.addEventListener('keydown', handleKeyDown);
       };
   
@@ -254,6 +250,10 @@ const Thread = ({ setBodyStyle }) => {
     }
   }
 
+  const handleCaptchaClose = () => {
+    setIsCaptchaOpen(false);
+  };
+
 
   const handleStyleChange = (event) => {
     switch (event.target.value) {
@@ -346,6 +346,10 @@ const Thread = ({ setBodyStyle }) => {
 
   return (
     <Container>
+      <CaptchaModal 
+      isOpen={isCaptchaOpen} 
+      closeModal={handleCaptchaClose} 
+      captchaImage={captchaImage} />
       <NavBar selectedStyle={selectedStyle}>
         <>
           {defaultSubplebbits.map(subplebbit => (
@@ -457,11 +461,6 @@ const Thread = ({ setBodyStyle }) => {
                 <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button>
               </td>
             </tr>
-            <tr>
-              <td>
-                <button onClick={() => setIsCaptchaOpen(true)}>Show Captcha</button>
-              </td>
-            </tr>
           </tbody>
         </PostFormTable>
       </PostForm>