diff --git a/public/assets/offline.png b/public/assets/offline.png index 2ca2cc93..72220cf8 100644 Binary files a/public/assets/offline.png and b/public/assets/offline.png differ diff --git a/src/components/modals/CaptchaModal.jsx b/src/components/modals/CaptchaModal.jsx index 4efc02a4..b09bbc1f 100644 --- a/src/components/modals/CaptchaModal.jsx +++ b/src/components/modals/CaptchaModal.jsx @@ -7,11 +7,15 @@ import Draggable from 'react-draggable'; const CaptchaModal = () => { const { - challengesArray, + challengesArray, setChallengesArray, pendingComment, selectedStyle, setCaptchaResponse, + isAuthorDelete, setIsAuthorDelete, + isAuthorEdit, setIsAuthorEdit, isCaptchaOpen, setIsCaptchaOpen, + isModEdit, setIsModEdit, + resolveCaptchaPromise, selectedShortCid, } = useGeneralStore(state => state); @@ -22,8 +26,18 @@ const CaptchaModal = () => { const responseRef = useRef(); const nodeRef = useRef(null); + + useEffect(() => { + if (!isCaptchaOpen) { + setIsAuthorDelete(false); + setIsAuthorEdit(false); + setIsModEdit(false); + } + }, [isCaptchaOpen, setIsAuthorDelete, setIsAuthorEdit, setIsModEdit]); - useEffect(() => { + + + useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 480); window.addEventListener('resize', handleResize); @@ -50,6 +64,7 @@ const CaptchaModal = () => { } }, [challengesArray]); + const handleKeyDown = (event) => { if (event.key === "Enter") { event.preventDefault(); @@ -57,28 +72,35 @@ const CaptchaModal = () => { } }; + const handleReturnKeyDown = () => { - submitCaptcha((response) => { - useGeneralStore.getState().setCaptchaResponse(response); - useGeneralStore.getState().resolveCaptchaPromise(response); + submitCaptcha((response) => { + setCaptchaResponse(response); + resolveCaptchaPromise(response); }); }; const submitCaptcha = (callback) => { setCaptchaResponse(responseRef.current.value); + setImageSources([]); + setChallengesArray([]); setIsCaptchaOpen(false); if (callback) { callback(responseRef.current.value); } -}; + }; return ( setIsCaptchaOpen(false)} + onRequestClose={() => { + submitCaptcha(); + setImageSources([]); + setChallengesArray([]); + setIsCaptchaOpen(false);}} contentLabel="Captcha Modal" shouldCloseOnEsc={false} shouldCloseOnOverlayClick={false} @@ -87,7 +109,10 @@ const CaptchaModal = () => {
- {pendingComment.parentCid ? + {isModEdit ? "Challenge for Moderator Action" : + isAuthorEdit ? "Challenge for Editing Post" : + isAuthorDelete ? "Challenge for Deleting Post" : + pendingComment.parentCid ? ("Challenges for Reply to c/" + selectedShortCid) : "Challenges for New Thread"}
diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx index d6db0d99..24cdac0b 100644 --- a/src/components/modals/ModerationModal.jsx +++ b/src/components/modals/ModerationModal.jsx @@ -15,6 +15,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { setCaptchaResponse, setChallengesArray, setIsCaptchaOpen, + setIsModEdit, moderatingCommentCid, setResolveCaptchaPromise, } = useGeneralStore(state => state); @@ -221,6 +222,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { reason: reason })); setTriggerPublishCommentEdit(true); + setIsModEdit(true); handleCloseModal(); }} > diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx index 6b1be583..8ccbdb09 100644 --- a/src/components/modals/ReplyModal.jsx +++ b/src/components/modals/ReplyModal.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { usePublishComment } from '@plebbit/plebbit-react-hooks'; +import { useAccount, usePublishComment } from '@plebbit/plebbit-react-hooks'; import { StyledModal } from '../styled/modals/ReplyModal.styled'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import Modal from 'react-modal'; @@ -21,8 +21,9 @@ const ReplyModal = ({ isOpen, closeModal }) => { selectedStyle, } = useGeneralStore(state => state); + const account = useAccount(); + const nodeRef = useRef(null); - const nameRef = useRef(); const commentRef = useRef(); const linkRef = useRef(); @@ -224,7 +225,11 @@ const ReplyModal = ({ isOpen, closeModal }) => {
- + {account && account.author && account.author.displayName ? ( + + ) : ( + + )}
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 3cf34671..30e650a2 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -11,7 +11,10 @@ const {version} = packageJson const SettingsModal = ({ isOpen, closeModal }) => { - const selectedStyle = useGeneralStore(state => state.selectedStyle); + const { + selectedStyle, + } = useGeneralStore(state => state); + const navigate = useNavigate(); const location = useLocation(); const [expanded, setExpanded] = useState([]); @@ -30,6 +33,7 @@ const SettingsModal = ({ isOpen, closeModal }) => { const pubsubRef = useRef(); const dataPathRef = useRef(); const importRef = useRef(); + const nameRef = useRef(); const isValidURL = (url) => { try { @@ -171,6 +175,23 @@ const SettingsModal = ({ isOpen, closeModal }) => { const handleAccountChange = (e) => { setActiveAccount(e.target.value); }; + + const handleDisplayName = async () => { + const name = nameRef.current.value; + + try { + await setAccount({ + ...account, + name: name || account.name, + author: { + ...account.author, + displayName: name, + }}); + setSuccessMessage("Account Name Saved"); + } catch (error) { + setErrorMessage(error.message); + } + }; return ( @@ -229,31 +250,27 @@ const SettingsModal = ({ isOpen, closeModal }) => {
  • - Export or Import Your Data + Account Data
    • -
    - - -
    +
    + + +
  • To export, click "Export", then save your account data displayed below in a safe place. To import, paste your account data into the box below, then click "Import".