From 16c76fb06c9f2f7e9a3808d7c8444cfc2033eabf Mon Sep 17 00:00:00 2001 From: plebbitor Date: Thu, 9 Mar 2023 17:51:56 +0100 Subject: [PATCH] test captcha modal --- package.json | 1 + src/App.js | 8 +- src/components/Board.jsx | 17 +--- src/components/CaptchaModal.jsx | 104 +++++++++++++++++++++++++ src/components/styles/Board.styled.jsx | 10 --- yarn.lock | 27 +++++++ 6 files changed, 143 insertions(+), 24 deletions(-) create mode 100644 src/components/CaptchaModal.jsx diff --git a/package.json b/package.json index e62a68c2..d916dc8a 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index f7428418..a21308b7 100644 --- a/src/App.js +++ b/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 (
@@ -68,7 +73,7 @@ export default function App() { color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} /> - + } /> }> @@ -83,5 +88,6 @@ export default function App() { } /> +
)} diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 06873115..1b2c95fc 100644 --- a/src/components/Board.jsx +++ b/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 }) => { - - Verification - -
- - -
-
-
- - Embed File + + diff --git a/src/components/CaptchaModal.jsx b/src/components/CaptchaModal.jsx new file mode 100644 index 00000000..c5ce8017 --- /dev/null +++ b/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 ( + +
+ +
Verification
+ captcha + + +
+ + ); +}; + +Modal.setAppElement('#root'); + +export default CaptchaModal; diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index abbcb83f..f01d269a 100644 --- a/src/components/styles/Board.styled.jsx +++ b/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; diff --git a/yarn.lock b/yarn.lock index ca940bdb..b322e547 100644 --- a/yarn.lock +++ b/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"