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

feat(captcha): trying to implement captcha functionality for information bar 

-
pull/1/head
TBS093A 2025-05-12 08:16:53 +02:00
parent 5c9a72c139
commit 5b7625d1cc
4 changed files with 113 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
package-lock.json generated
View File

@ -12,6 +12,7 @@
"gatsby-plugin-sass": "^5.7.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-google-recaptcha": "^3.1.0",
"sass": "^1.49.7"
}
},
@ -9134,6 +9135,15 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hosted-git-info": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@ -12289,6 +12299,19 @@
"node": ">=0.10.0"
}
},
"node_modules/react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"license": "MIT",
"dependencies": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -12484,6 +12507,19 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -22182,6 +22218,14 @@
}
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@ -24604,6 +24648,15 @@
"object-assign": "^4.1.1"
}
},
"react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"requires": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
}
},
"react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -24741,6 +24794,15 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"react-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"requires": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View File

@ -19,6 +19,7 @@
"gatsby-plugin-sass": "^5.7.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-google-recaptcha": "^3.1.0",
"sass": "^1.49.7"
}
}

83
src/pages/index.js
View File

@ -2,6 +2,7 @@ import * as React from "react"
import "../styles/general.scss"
import { content_pl } from "../content/kamil"
import { content_en } from "../content/kamil"
import ReCAPTCHA from "react-google-recaptcha"
const MiniWorkImage = ({ image }) => {
@ -265,10 +266,14 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
const SegmentGeneral = ({ segment }) => {
const [isVerified, setIsVerified] = React.useState(false);
const handleCaptchaChange = (value) => {
setIsVerified(!!value);
};
return (
<div
className="segment_general"
>
<div className="segment_general">
<img
src={ segment.image }
className="segment_image cover"
@ -276,42 +281,42 @@ const SegmentGeneral = ({ segment }) => {
<div className="segment_title segment_title_image">
{ segment.title }
</div>
<div className="segment_content_image">
{
typeof segment.content === "object" ?
Object.keys(segment.content).map( (key) => {
return (
<>
<div
className="segment_image_item"
key={ "item_" + key }
>
{ 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>
</>
)
}
)
:
"lol"
}
</div>
{!isVerified ? (
<div className="captcha-container">
<ReCAPTCHA
sitekey="YOUR_RECAPTCHA_SITE_KEY"
onChange={handleCaptchaChange}
/>
</div>
) : (
<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"
}
</div>
)}
</div>
)
}

6
src/styles/general.scss
View File

@ -207,3 +207,9 @@ body {
width: 100%;
height: 30px;
}
.captcha-container {
display: flex;
justify-content: center;
margin: 20px 0;
}