tbs093a
/
curriculum.vitae
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(captcha): trying to solve captcha issues

pull/1/head
TBS093A 2025-05-12 08:59:58 +02:00
parent a555549fe5
commit de0d2c4ca4
2 changed files with 120 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/pages/index.js
View File

@ -6,6 +6,46 @@ import ReCAPTCHA from "react-google-recaptcha"
const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY" const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY"
const CaptchaWrapper = ({ onVerified }) => {
const [error, setError] = React.useState(null);
const isMounted = React.useRef(true);
React.useEffect(() => {
return () => {
isMounted.current = false;
};
}, []);
const handleCaptchaChange = (value) => {
if (isMounted.current && value) {
onVerified(true);
setError(null);
}
};
const handleCaptchaError = () => {
if (isMounted.current) {
setError('Wystąpił błąd podczas weryfikacji CAPTCHA');
onVerified(false);
}
};
return (
<div className="captcha-container">
<ReCAPTCHA
sitekey={RECAPTCHA_SITE_KEY}
onChange={handleCaptchaChange}
onError={handleCaptchaError}
/>
{error && (
<div className="error-message" role="alert">
{error}
</div>
)}
</div>
);
};
const MiniWorkImage = ({ image }) => { const MiniWorkImage = ({ image }) => {
return ( return (
<div <div
@ -269,58 +309,45 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
const SegmentGeneral = ({ segment }) => { const SegmentGeneral = ({ segment }) => {
const [isVerified, setIsVerified] = React.useState(false); const [isVerified, setIsVerified] = React.useState(false);
const handleCaptchaChange = (value) => {
setIsVerified(!!value);
};
return ( return (
<div className="segment_general"> <div className="segment_general">
<img <img
src={ segment.image } src={segment.image}
className="segment_image cover" className="segment_image cover"
alt={segment.title}
/> />
<div className="segment_title segment_title_image"> <div className="segment_title segment_title_image">
{ segment.title } {segment.title}
</div> </div>
{!isVerified ? ( {!isVerified ? (
<div className="captcha-container"> <CaptchaWrapper onVerified={setIsVerified} />
<ReCAPTCHA
sitekey={RECAPTCHA_SITE_KEY}
onChange={handleCaptchaChange}
/>
</div>
) : ( ) : (
<div className="segment_content_image"> <div className="segment_content_image">
{ {typeof segment.content === "object" ? (
typeof segment.content === "object" ? Object.keys(segment.content).map((key) => (
Object.keys(segment.content).map( (key) => { <React.Fragment key={`item_${key}`}>
return (
<React.Fragment key={ "item_" + key }>
<div className="segment_image_item"> <div className="segment_image_item">
{ key + ": " } {key + ": "}
</div> </div>
<div className="segment_image_item subitem"> <div className="segment_image_item subitem">
{ {segment.content[key].includes("git.") ? (
segment.content[key].includes("git.") ? <a href={`https://${segment.content[key]}`}>
<a href={ "https://" + segment.content[key] }> {segment.content[key]}
{ segment.content[key] }
</a> </a>
: ) : (
segment.content[key] segment.content[key]
} )}
</div> </div>
</React.Fragment> </React.Fragment>
) ))
} ) : (
)
:
"lol" "lol"
} )}
</div> </div>
)} )}
</div> </div>
) );
} };
const SegmentRODO = ({ segment }) => { const SegmentRODO = ({ segment }) => {
@ -337,69 +364,61 @@ const SegmentRODO = ({ segment }) => {
const Segment = ({ index, segment }) => { const Segment = ({ index, segment }) => {
const segment_index = "segment_" + index;
let segment_index = "segment_" + index
return ( return (
<div <div
id={ segment_index } id={segment_index}
key={ segment_index } key={segment_index}
> >
{ {
segment.type === "generalTitleSegment" ? segment.type === "generalTitleSegment" ?
<>
<SegmentGeneral <SegmentGeneral
segment={ segment } key={`general_${index}`}
segment={segment}
/> />
</>
: :
segment.type === "titleSegment" ? segment.type === "titleSegment" ?
<>
<SegmentTitle <SegmentTitle
segment={ segment } key={`title_${index}`}
segment={segment}
/> />
</>
: :
segment.type === "subSegment" ? segment.type === "subSegment" ?
<>
<SegmentListNormal <SegmentListNormal
segment={ segment } key={`normal_${index}`}
tabs={ segment.tabs } segment={segment}
tabs={segment.tabs}
/> />
</>
: :
segment.type === "workSubSegment" ? segment.type === "workSubSegment" ?
<>
<SegmentListWork <SegmentListWork
segment={ segment } key={`work_${index}`}
tabs={ segment.tabs } segment={segment}
tabs={segment.tabs}
/> />
</>
: :
segment.type === "createBranchSegment" ? segment.type === "createBranchSegment" ?
<>
<SegmentCreateBranch <SegmentCreateBranch
segment={ segment } key={`create_${index}`}
tabs={ segment.tabs } segment={segment}
tabs={segment.tabs}
/> />
</>
: :
segment.type === "mergeBranchSegment" ? segment.type === "mergeBranchSegment" ?
<>
<SegmentMergeBranch <SegmentMergeBranch
segment={ segment } key={`merge_${index}`}
tabs={ segment.tabs } segment={segment}
tabs={segment.tabs}
/> />
</>
: :
segment.type === "RODOSegment" ? segment.type === "RODOSegment" ?
<>
<SegmentRODO <SegmentRODO
segment={ segment } key={`rodo_${index}`}
segment={segment}
/> />
</>
: :
<></> null
} }
</div> </div>
) )
@ -407,7 +426,6 @@ const Segment = ({ index, segment }) => {
const IndexPage = () => { const IndexPage = () => {
let eng_ = "🇬🇧" let eng_ = "🇬🇧"
let pol_ = "🇵🇱" let pol_ = "🇵🇱"
@ -432,20 +450,18 @@ const IndexPage = () => {
Curriculum Vitae Curriculum Vitae
</div> </div>
<div className="language_bar"> <div className="language_bar">
<div onClick={ e => swap_content(e) }> <div onClick={e => swap_content(e)}>
{ content_swapper } {content_swapper}
</div> </div>
</div> </div>
{ {
content.map( (value, index) => { content.map((value, index) => (
return (
<Segment <Segment
index={ index } key={`segment_${index}`}
segment={ value } index={index}
segment={value}
/> />
) ))
}
)
} }
</div> </div>
<div className="foot"> <div className="foot">

10
src/styles/general.scss
View File

@ -210,6 +210,14 @@ body {
.captcha-container { .captcha-container {
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
margin: 20px 0; margin: 20px 0;
.error-message {
color: #ff4444;
margin-top: 10px;
font-size: 14px;
text-align: center;
}
} }