test captcha modal

package.json

@@ -24,6 +24,7 @@
     "react-helmet-async": "^1.3.0",
     "react-infinite-scroller": "^1.2.6",
     "react-is": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "react-tooltip": "^5.8.3",

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;

yarn.lock

@@ -5827,6 +5827,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -10084,6 +10089,21 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
+  integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-native-fetch-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-native-fetch-api/-/react-native-fetch-api-3.0.0.tgz#81e1bb6562c292521bc4eca52fe1097f4c1ebab5"
@@ -11814,6 +11834,13 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"