feat/captcha #1
|
|
@ -1,3 +1,4 @@
|
|||
node_modules/
|
||||
.cache/
|
||||
public/
|
||||
.env
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
"gatsby-plugin-sass": "^5.7.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-simple-captcha": "^9.3.1",
|
||||
"sass": "^1.49.7"
|
||||
}
|
||||
},
|
||||
|
|
@ -9134,6 +9136,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 +12300,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 +12508,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",
|
||||
|
|
@ -12502,6 +12539,106 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha": {
|
||||
"version": "9.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-simple-captcha/-/react-simple-captcha-9.3.1.tgz",
|
||||
"integrity": "sha512-pQ/WKjXns9ukhjjbaSZhl2P0QygHs50N9hxMmPAiFMh+0xXt2AocvSsEe24LyW/eOzOso+2Ifiuym/TZMyYDsA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-html-parser": "^2.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/dom-serializer": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
"integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.0.1",
|
||||
"entities": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/dom-serializer/node_modules/domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/dom-serializer/node_modules/entities": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
|
||||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
|
||||
"license": "BSD-2-Clause",
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/domelementtype": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
|
||||
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/domhandler": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
|
||||
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/domutils": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
|
||||
"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"dom-serializer": "0",
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/entities": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
|
||||
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/htmlparser2": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
|
||||
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^1.3.1",
|
||||
"domhandler": "^2.3.0",
|
||||
"domutils": "^1.5.1",
|
||||
"entities": "^1.1.1",
|
||||
"inherits": "^2.0.1",
|
||||
"readable-stream": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-captcha/node_modules/react-html-parser": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
|
||||
"integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"htmlparser2": "^3.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
|
|
@ -22182,6 +22319,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 +24749,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 +24895,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",
|
||||
|
|
@ -24756,6 +24919,85 @@
|
|||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
|
||||
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
|
||||
},
|
||||
"react-simple-captcha": {
|
||||
"version": "9.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-simple-captcha/-/react-simple-captcha-9.3.1.tgz",
|
||||
"integrity": "sha512-pQ/WKjXns9ukhjjbaSZhl2P0QygHs50N9hxMmPAiFMh+0xXt2AocvSsEe24LyW/eOzOso+2Ifiuym/TZMyYDsA==",
|
||||
"requires": {
|
||||
"react-html-parser": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"dom-serializer": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
"integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
|
||||
"requires": {
|
||||
"domelementtype": "^2.0.1",
|
||||
"entities": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
|
||||
},
|
||||
"entities": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
|
||||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"domelementtype": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
|
||||
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
|
||||
},
|
||||
"domhandler": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
|
||||
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
|
||||
"requires": {
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"domutils": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
|
||||
"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
|
||||
"requires": {
|
||||
"dom-serializer": "0",
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"entities": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
|
||||
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
|
||||
},
|
||||
"htmlparser2": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
|
||||
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
|
||||
"requires": {
|
||||
"domelementtype": "^1.3.1",
|
||||
"domhandler": "^2.3.0",
|
||||
"domutils": "^1.5.1",
|
||||
"entities": "^1.1.1",
|
||||
"inherits": "^2.0.1",
|
||||
"readable-stream": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"react-html-parser": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
|
||||
"integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
|
||||
"requires": {
|
||||
"htmlparser2": "^3.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
"gatsby-plugin-sass": "^5.7.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-simple-captcha": "^9.3.1",
|
||||
"sass": "^1.49.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1140
src/content/kamil.js
1140
src/content/kamil.js
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -2,7 +2,89 @@ import * as React from "react"
|
|||
import "../styles/general.scss"
|
||||
import { content_pl } from "../content/kamil"
|
||||
import { content_en } from "../content/kamil"
|
||||
import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha'
|
||||
|
||||
const SimpleCaptchaWrapper = ({ onVerified, language }) => {
|
||||
const [error, setError] = React.useState(null);
|
||||
|
||||
let content = {
|
||||
"pl": {
|
||||
"initial_information": "Wprowadź kod z obrazka aby wyświetlić informacje kontaktowe.",
|
||||
"captcha_console_initialization": "Błąd inicjalizacji captcha:",
|
||||
"captcha_ui_initialization": "Nie można załadować captcha",
|
||||
"captcha_console_reload": "Błąd przeładowania captcha:",
|
||||
"captcha_reload_button": "Odśwież kod",
|
||||
"captcha": "Wprowadź kod z obrazka",
|
||||
"button": "Potwierdź",
|
||||
"error": "Nieprawidłowy kod. Spróbuj ponownie.",
|
||||
},
|
||||
"en": {
|
||||
"initial_information": "Please enter the code from the image for display contact information.",
|
||||
"captcha_console_initialization": "Captcha initialization error:",
|
||||
"captcha_ui_initialization": "Cannot load captcha",
|
||||
"captcha_console_reload": "Captcha reload error:",
|
||||
"captcha_reload_button": "Reload code",
|
||||
"captcha": "Enter the code from the image",
|
||||
"button": "Confirm",
|
||||
"error": "Invalid code. Try again.",
|
||||
}
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
try {
|
||||
loadCaptchaEnginge(6, '#242424', '#a6a6a6');
|
||||
} catch (err) {
|
||||
console.error(content[language].captcha_console_initialization, err);
|
||||
setError(content[language].captcha_ui_initialization);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const userCaptchaValue = document.getElementById('user_captcha_input').value;
|
||||
|
||||
if (validateCaptcha(userCaptchaValue)) {
|
||||
onVerified(true);
|
||||
setError(null);
|
||||
} else {
|
||||
setError(content[language].error);
|
||||
document.getElementById('user_captcha_input').value = "";
|
||||
// Przeładowanie captcha
|
||||
try {
|
||||
loadCaptchaEnginge(6, '#242424', '#a6a6a6');
|
||||
} catch (err) {
|
||||
console.error(content[language].captcha_console_reload, err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="captcha-container">
|
||||
<div className="captcha-form">
|
||||
<p>
|
||||
{content[language].initial_information}
|
||||
</p>
|
||||
<LoadCanvasTemplate reloadText={content[language].captcha_reload_button} reloadColor="#a6a6a6" />
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={content[language].captcha}
|
||||
id="user_captcha_input"
|
||||
className="captcha-input"
|
||||
/>
|
||||
<button type="submit" className="captcha-button">
|
||||
{content[language].button}
|
||||
</button>
|
||||
</form>
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MiniWorkImage = ({ image }) => {
|
||||
return (
|
||||
|
|
@ -265,56 +347,50 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
|
|||
|
||||
|
||||
const SegmentGeneral = ({ segment }) => {
|
||||
const [isVerified, setIsVerified] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="segment_general"
|
||||
>
|
||||
<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 ? (
|
||||
<SimpleCaptchaWrapper
|
||||
onVerified={setIsVerified}
|
||||
language={segment.content_language}
|
||||
/>
|
||||
) : (
|
||||
<div className="segment_content_image">
|
||||
{
|
||||
typeof segment.content === "object" ?
|
||||
Object.keys(segment.content).map( (key) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="segment_image_item"
|
||||
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] }>
|
||||
<div className="segment_image_item subitem">
|
||||
{segment.content[key].includes(".com/") ? (
|
||||
<a href={`https://${segment.content[key]}`}>
|
||||
{segment.content[key]}
|
||||
</a>
|
||||
:
|
||||
) : (
|
||||
segment.content[key]
|
||||
}
|
||||
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
||||
:
|
||||
</React.Fragment>
|
||||
))
|
||||
) : (
|
||||
"lol"
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const SegmentRODO = ({ segment }) => {
|
||||
|
|
@ -331,8 +407,7 @@ const SegmentRODO = ({ segment }) => {
|
|||
|
||||
|
||||
const Segment = ({ index, segment }) => {
|
||||
|
||||
let segment_index = "segment_" + index
|
||||
const segment_index = "segment_" + index;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -341,59 +416,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>
|
||||
)
|
||||
|
|
@ -401,7 +469,6 @@ const Segment = ({ index, segment }) => {
|
|||
|
||||
|
||||
const IndexPage = () => {
|
||||
|
||||
let eng_ = "🇬🇧"
|
||||
let pol_ = "🇵🇱"
|
||||
|
||||
|
|
@ -431,15 +498,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">
|
||||
|
|
|
|||
|
|
@ -207,3 +207,70 @@ body {
|
|||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
float: right;
|
||||
|
||||
.captcha-form {
|
||||
background-color: $div_background_color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 210px;
|
||||
height: 250px;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color;
|
||||
cursor: pointer;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 35px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.captcha-input {
|
||||
width: 170px;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid $color;
|
||||
background-color: $background_color;
|
||||
color: $color;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.captcha-button {
|
||||
width: 188px;
|
||||
padding: 8px;
|
||||
background-color: $background_color;
|
||||
color: $color;
|
||||
border: 1px solid $color;
|
||||
cursor: pointer;
|
||||
font-size: 9pt;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($background_color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #ff4444;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue