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
+
+
+
+