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

206
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 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 }) => {
return (
<div
@ -269,58 +309,45 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
const SegmentGeneral = ({ segment }) => {
const [isVerified, setIsVerified] = React.useState(false);
const handleCaptchaChange = (value) => {
setIsVerified(!!value);
};
return (
<div className="segment_general">
<img
src={ segment.image }
src={segment.image}
className="segment_image cover"
alt={segment.title}
/>
<div className="segment_title segment_title_image">
{ segment.title }
{segment.title}
</div>
{!isVerified ? (
<div className="captcha-container">
<ReCAPTCHA
sitekey={RECAPTCHA_SITE_KEY}
onChange={handleCaptchaChange}
/>
</div>
<CaptchaWrapper onVerified={setIsVerified} />
) : (
<div className="segment_content_image">
{
typeof segment.content === "object" ?
Object.keys(segment.content).map( (key) => {
return (
<React.Fragment key={ "item_" + key }>
<div className="segment_image_item">
{ key + ": " }
</div>
<div className="segment_image_item subitem">
{
segment.content[key].includes("git.") ?
<a href={ "https://" + segment.content[key] }>
{ segment.content[key] }
</a>
:
segment.content[key]
}
</div>
</React.Fragment>
)
}
)
:
"lol"
}
{typeof segment.content === "object" ? (
Object.keys(segment.content).map((key) => (
<React.Fragment key={`item_${key}`}>
<div className="segment_image_item">
{key + ": "}
</div>
<div className="segment_image_item subitem">
{segment.content[key].includes("git.") ? (
<a href={`https://${segment.content[key]}`}>
{segment.content[key]}
</a>
) : (
segment.content[key]
)}
</div>
</React.Fragment>
))
) : (
"lol"
)}
</div>
)}
</div>
)
}
);
};
const SegmentRODO = ({ segment }) => {
@ -337,69 +364,61 @@ const SegmentRODO = ({ segment }) => {
const Segment = ({ index, segment }) => {
let segment_index = "segment_" + index
const segment_index = "segment_" + index;
return (
<div
id={ segment_index }
key={ segment_index }
id={segment_index}
key={segment_index}
>
{
segment.type === "generalTitleSegment" ?
<>
<SegmentGeneral
segment={ segment }
/>
</>
<SegmentGeneral
key={`general_${index}`}
segment={segment}
/>
:
segment.type === "titleSegment" ?
<>
<SegmentTitle
segment={ segment }
/>
</>
<SegmentTitle
key={`title_${index}`}
segment={segment}
/>
:
segment.type === "subSegment" ?
<>
<SegmentListNormal
segment={ segment }
tabs={ segment.tabs }
/>
</>
<SegmentListNormal
key={`normal_${index}`}
segment={segment}
tabs={segment.tabs}
/>
:
segment.type === "workSubSegment" ?
<>
<SegmentListWork
segment={ segment }
tabs={ segment.tabs }
/>
</>
<SegmentListWork
key={`work_${index}`}
segment={segment}
tabs={segment.tabs}
/>
:
segment.type === "createBranchSegment" ?
<>
<SegmentCreateBranch
segment={ segment }
tabs={ segment.tabs }
/>
</>
<SegmentCreateBranch
key={`create_${index}`}
segment={segment}
tabs={segment.tabs}
/>
:
segment.type === "mergeBranchSegment" ?
<>
<SegmentMergeBranch
segment={ segment }
tabs={ segment.tabs }
/>
</>
<SegmentMergeBranch
key={`merge_${index}`}
segment={segment}
tabs={segment.tabs}
/>
:
segment.type === "RODOSegment" ?
<>
<SegmentRODO
segment={ segment }
/>
</>
<SegmentRODO
key={`rodo_${index}`}
segment={segment}
/>
:
<></>
null
}
</div>
)
@ -407,7 +426,6 @@ const Segment = ({ index, segment }) => {
const IndexPage = () => {
let eng_ = "🇬🇧"
let pol_ = "🇵🇱"
@ -432,20 +450,18 @@ const IndexPage = () => {
Curriculum Vitae
</div>
<div className="language_bar">
<div onClick={ e => swap_content(e) }>
{ content_swapper }
<div onClick={e => swap_content(e)}>
{content_swapper}
</div>
</div>
{
content.map( (value, index) => {
return (
<Segment
index={ index }
segment={ value }
/>
)
}
)
content.map((value, index) => (
<Segment
key={`segment_${index}`}
index={index}
segment={value}
/>
))
}
</div>
<div className="foot">

10
src/styles/general.scss
View File

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