test captcha modal

src/App.js

@@ -6,6 +6,7 @@ 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';
@@ -43,6 +44,7 @@ export default function App() {
   const [selectedThread, setSelectedThread] = useState('');
   const [cookies, setCookie] = useCookies(['selectedStyle']);
   const [selectedStyle, setSelectedStyle] = useState(cookies.selectedStyle || 'Yotsuba');
+  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
 
 
 
@@ -52,6 +54,9 @@ export default function App() {
     preloadImages([...imageUrls]);
   }, []);
 
+  const handleCaptchaClose = () => {
+    setIsCaptchaOpen(false);
+  };
 
   return (
   <div>
@@ -68,7 +73,7 @@ export default function App() {
     color={bodyStyle.color} 
     fontFamily={bodyStyle.fontFamily}
     />
-    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle }}>
+    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, isCaptchaOpen, setIsCaptchaOpen }}>
       <Routes>
         <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
         <Route path={`/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
@@ -83,5 +88,6 @@ export default function App() {
         <Route path='*' element={<NotFound />} />
       </Routes>
     </BoardContext.Provider>
+    <CaptchaModal isOpen={isCaptchaOpen} closeModal={handleCaptchaClose} />
   </div>
 )}

src/components/Board.jsx

@@ -13,7 +13,7 @@ import { useCookies } from 'react-cookie';
 
 const Board = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');
@@ -238,7 +238,7 @@ const Board = ({ setBodyStyle }) => {
 
 
   const handleClickHelp = () => {
-    alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
+    alert("- The media will appear in the post after sharing its link. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.");
   };
 
 
@@ -461,23 +461,14 @@ const Board = ({ setBodyStyle }) => {
                 <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" value={comment} onChange={(event) => setComment(event.target.value)}></textarea>
               </td>
             </tr>
-            <tr id="captchaFormPart">
-              <td>Verification</td>
-              <td colSpan={2}>
-                <div id="t-root">
-                  <input id="t-resp" name="t-response" placeholder="Type the CAPTCHA here and hit return" autoComplete='off' type="text" />
-                  <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help" tabIndex={-1}>?</button>
-                  <div id="t-cnt">
-                  </div>
-                </div>
-              </td>
-            </tr>
             <tr data-type="File">
               <td>Embed File</td>
               <td>
                 <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
+                <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button>
               </td>
             </tr>
+            <button onClick={() => setIsCaptchaOpen(true)}>Show Captcha</button>
             <tr></tr>
           </tbody>
         </PostFormTable>

src/components/CaptchaModal.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Modal from 'react-modal';
+import styled from 'styled-components';
+
+const StyledModal = styled(Modal)`
+  @media (min-width: 480px) {
+    .modal-content {
+      width: 450px;
+      height: 350px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .modal-content {
+      width: 90%;
+      height: 40%;
+    }
+  }
+  .modal-content {
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.75);
+    padding: 0;
+    z-index: 9999;
+    border: 1px solid #aaa;
+  }
+
+  button.x {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  img {
+    width: 80%;
+    height: 100px;
+    object-fit: contain;
+  }
+
+  .challenge {
+    font-size: 12pt;
+    margin-bottom: 30px;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  input {
+    margin-top: 20px;
+    width: 70%;
+    padding: 2px;
+    border: 1px solid #ccc;
+    font-family: monospace;
+    border: 1px solid #777;
+    outline: none;
+  }
+
+  button.submit {
+    margin-top: 20px;
+    padding: 3px 15px;
+    border-radius: 3px;
+  }
+`;
+
+const customOverlayStyles = {
+  overlay: {
+    backgroundColor: 'rgba(0,0,0,.4)'
+  }
+};
+
+const CaptchaModal = ({ isOpen, closeModal }) => {
+  const handleCloseModal = () => {
+    closeModal();
+  };
+
+  return (
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      shouldCloseOnOverlayClick={false}
+      contentLabel="Captcha Modal"
+      style={customOverlayStyles}
+    >
+      <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" />
+        <input type="text" autoComplete='off'
+        placeholder="TYPE THE CAPTCHA HERE" />
+        <button className="submit">Submit</button>
+      </div>
+    </StyledModal>
+  );
+};
+
+Modal.setAppElement('#root');
+
+export default CaptchaModal;

src/components/styles/Board.styled.jsx

@@ -673,16 +673,6 @@ export const PostFormTable = styled.table`
         -webkit-appearance: none;
       }
 
-      #t-help {
-        font-size: 11px;
-        padding: 0;
-        width: 20px;
-        box-sizing: border-box;
-        margin: 0px 0px 0px 6px;
-        vertical-align: middle;
-        height: 18px;
-      }
-
       #t-cnt {
         height: 80px;
         margin-top: 2px;