feat(captcha): trying to solve captcha issues
parent
a555549fe5
commit
de0d2c4ca4
|
|
@ -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}
|
||||
className="segment_image cover"
|
||||
alt={segment.title}
|
||||
/>
|
||||
<div className="segment_title segment_title_image">
|
||||
{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 }>
|
||||
{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].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,8 +364,7 @@ const SegmentRODO = ({ segment }) => {
|
|||
|
||||
|
||||
const Segment = ({ index, segment }) => {
|
||||
|
||||
let segment_index = "segment_" + index
|
||||
const segment_index = "segment_" + index;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -347,59 +373,52 @@ const Segment = ({ index, segment }) => {
|
|||
>
|
||||
{
|
||||
segment.type === "generalTitleSegment" ?
|
||||
<>
|
||||
<SegmentGeneral
|
||||
key={`general_${index}`}
|
||||
segment={segment}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
segment.type === "titleSegment" ?
|
||||
<>
|
||||
<SegmentTitle
|
||||
key={`title_${index}`}
|
||||
segment={segment}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
segment.type === "subSegment" ?
|
||||
<>
|
||||
<SegmentListNormal
|
||||
key={`normal_${index}`}
|
||||
segment={segment}
|
||||
tabs={segment.tabs}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
segment.type === "workSubSegment" ?
|
||||
<>
|
||||
<SegmentListWork
|
||||
key={`work_${index}`}
|
||||
segment={segment}
|
||||
tabs={segment.tabs}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
segment.type === "createBranchSegment" ?
|
||||
<>
|
||||
<SegmentCreateBranch
|
||||
key={`create_${index}`}
|
||||
segment={segment}
|
||||
tabs={segment.tabs}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
segment.type === "mergeBranchSegment" ?
|
||||
<>
|
||||
<SegmentMergeBranch
|
||||
key={`merge_${index}`}
|
||||
segment={segment}
|
||||
tabs={segment.tabs}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
segment.type === "RODOSegment" ?
|
||||
<>
|
||||
<SegmentRODO
|
||||
key={`rodo_${index}`}
|
||||
segment={segment}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
<></>
|
||||
null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -407,7 +426,6 @@ const Segment = ({ index, segment }) => {
|
|||
|
||||
|
||||
const IndexPage = () => {
|
||||
|
||||
let eng_ = "🇬🇧"
|
||||
let pol_ = "🇵🇱"
|
||||
|
||||
|
|
@ -437,15 +455,13 @@ const IndexPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
{
|
||||
content.map( (value, index) => {
|
||||
return (
|
||||
content.map((value, index) => (
|
||||
<Segment
|
||||
key={`segment_${index}`}
|
||||
index={index}
|
||||
segment={value}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="foot">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue