External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added captcha modal

Browse Source
This commit is contained in:
plebbitor
2023-03-12 22:07:15 +01:00
parent 5bfcb584ef
commit d39ffd0544
5 changed files with 79 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Board.jsx
+20 -22
View File
@@ -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');
const cntEl = document.getElementById('t-cnt');
cntEl.appendChild(challengeImg);
inputEl.focus();
setIsCaptchaOpen(true);
setCaptchaImage(imageSource);
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
const challengeResponse = inputEl.value;
inputEl.value = '';
if (cntEl.contains(challengeImg)) {
cntEl.removeChild(challengeImg);
}
setCaptchaImage('');
resolve(captchaResponse);
setIsCaptchaOpen(false);
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
+18 -14
View File
@@ -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" />
<input type="text" autoComplete='off'
placeholder="TYPE THE CAPTCHA HERE" />
<button className="submit">Submit</button>
<img src={captchaImage} alt="captcha" />
<input
type="text"
autoComplete='off'
placeholder="TYPE THE CAPTCHA HERE AND PRESS ENTER"
value={captchaResponse}
onChange={handleChallengeResponse} />
</div>
</StyledModal>
);
src/components/Catalog.jsx
+20 -21
View File
@@ -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');
const cntEl = document.getElementById('t-cnt');
cntEl.appendChild(challengeImg);
inputEl.focus();
setIsCaptchaOpen(true);
setCaptchaImage(imageSource);
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
const challengeResponse = inputEl.value;
inputEl.value = '';
if (cntEl.contains(challengeImg)) {
cntEl.removeChild(challengeImg);
}
setCaptchaImage('');
resolve(captchaResponse);
setIsCaptchaOpen(false);
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
+19 -20
View File
@@ -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');
const cntEl = document.getElementById('t-cnt');
cntEl.appendChild(challengeImg);
inputEl.focus();
setIsCaptchaOpen(true);
setCaptchaImage(imageSource);
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
const challengeResponse = inputEl.value;
inputEl.value = '';
if (cntEl.contains(challengeImg)) {
cntEl.removeChild(challengeImg);
}
setCaptchaImage('');
resolve(captchaResponse);
setIsCaptchaOpen(false);
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>