From 2ebe31cd79b27b76b84ebf5f6d1496f8595b02ad Mon Sep 17 00:00:00 2001 From: TBS093A Date: Mon, 12 May 2025 12:08:00 +0200 Subject: [PATCH] feat(captcha & content): stylize all css's and prepare imporvement of english content stuff - --- .env.example | 2 - package-lock.json | 180 ++++++++++++++++++++++++++++++ package.json | 1 + src/content/kamil.js | 194 +++++++++++++++++++++++---------- src/images/work_aptiv_logo.png | Bin 0 -> 7248 bytes src/pages/index.js | 107 ++++++++++++------ src/styles/general.scss | 73 +++++++++++-- 7 files changed, 456 insertions(+), 101 deletions(-) delete mode 100644 .env.example create mode 100644 src/images/work_aptiv_logo.png diff --git a/.env.example b/.env.example deleted file mode 100644 index c03d9f3..0000000 --- a/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -export GATSBY_RECAPTCHA_SITE_KEY="" -export GATSBY_RECAPTCHA_SECRET_KEY="" \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d28a6ca..538ba33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "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" } }, @@ -12538,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", @@ -24818,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", diff --git a/package.json b/package.json index 8f22393..e536e17 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "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" } } diff --git a/src/content/kamil.js b/src/content/kamil.js index 7edb366..e459658 100644 --- a/src/content/kamil.js +++ b/src/content/kamil.js @@ -18,6 +18,7 @@ import WorkSiiLogo from "../images/work_sii_logo.png" import WorkInfinidatLogo from "../images/work_infinidat_logo.png" import WorkTechemLogo from "../images/work_techem_logo.png" import WorkAdobeLogo from "../images/work_adobe_logo_2.png" +import WorkAptivLogo from "../images/work_aptiv_logo.png" import InterestsBlockchainLogo from "../images/interests_blockchain_logo.png" import InterestsBlenderLogo from "../images/interests_blender_logo.png" @@ -28,11 +29,12 @@ export const content_pl = [ type: "generalTitleSegment", title: "Kamil Żuk", image: MePng, + content_language: "pl", content: { "E-mail": "zukkamil.44@gmail.com", - "Github": "git.00x097.com/tbs093a", + "Telefon": "+48 570 688 112", + "Git": "git.00x097.com/tbs093a", "Wykształcenie": "Wyższe / Inżynier", - "Miejsce Zamieszkania": "Rzeszów / Polska", "Data Urodzenia": "30.06.1997 r.", } }, @@ -359,12 +361,11 @@ export const content_pl = [ { type: "workSubSegment", tabs: 1, - title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024", + title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025", image: WorkSiiLogo, branchBorderColor: "#0464a8", mainBorderColor: "#0464a8", content: [ - "Ulepszanie bot'a inwestycyjnego pod automatyczne inwestowanie wyzwalane zewnętrznymi wiadomościami / sygnałami (Python / Mexc API / Kucoin API / Telegram API / OpenAI API)", "Konserwacja inrastruktury (Terrafrom / Azure / Hetzner)", "Konserwacja infrastruktury mikroserwisowej (Docker / Kubernetes / Helm)", "Konserwacja serwerów (Linux)", @@ -378,6 +379,25 @@ export const content_pl = [ branchBorderColor: "#0464a8", mainBorderColor: "#0464a8", }, + { + type: "workSubSegment", + tabs: 1, + title: "Aptiv PLC - DevOps Engineer & Python Developer - from 11.02.2025", + image: WorkAptivLogo, + branchBorderColor: "#000000", + mainBorderColor: "#0464a8", + content: [ + "Konserwacja & Ulepszanie pipeline'ów & job'ów (Jenkins / Wind River Studio / Python / Bash / GitGerrit)", + "Automtizacja ręcznych zadań (Jenkins / Wind River Studio / Python / Bash / GitGerrit)", + "Praca z mikroserwisami (Docker / Kubernetes)", + ], + }, + { + type: "mergeBranchSegment", + tabs: 1, + branchBorderColor: "#000000", + mainBorderColor: "#0464a8", + }, { type: "titleSegment", title: "Zainteresowania", @@ -421,11 +441,12 @@ export const content_en = [ type: "generalTitleSegment", title: "Kamil Żuk", image: MePng, + content_language: "en", content: { "E-mail": "zukkamil.44@gmail.com", - "Github": "git.00x097.com/tbs093a", + "Phone": "+48 570 688 112", + "Git": "git.00x097.com/tbs093a", "Education": "Higher / Engineer", - "Place of Residence": "Rzeszów / Poland", "Date of Birth": "30.06.1997", } }, @@ -450,12 +471,36 @@ export const content_en = [ { type: "workSubSegment", tabs: 1, - title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024", + title: "Aptiv PLC - DevOps Engineer & Python Developer - from 11.02.2025", + image: WorkAptivLogo, + branchBorderColor: "#000000", + mainBorderColor: "#0464a8", + content: [ + "Pipelines & Jobs maintenance & improvements (Jenkins / Wind River Studio / Python / Bash / GitGerrit)", + "Automtization of manual tasks (Jenkins / Wind River Studio / Python / Bash / GitGerrit)", + "Work with microservices (Docker / Kubernetes)", + ], + }, + { + type: "mergeBranchSegment", + tabs: 1, + branchBorderColor: "#000000", + mainBorderColor: "#0464a8", + }, + { + type: "createBranchSegment", + tabs: 1, + branchBorderColor: "#0464a8", + mainBorderColor: "#0464a8", + }, + { + type: "workSubSegment", + tabs: 1, + title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025", image: WorkSiiLogo, branchBorderColor: "#0464a8", mainBorderColor: "#0464a8", content: [ - "Improving crypto / stock exchange bot for automatic investment triggered by outside messages / signals (Python / Mexc API / Kucoin API / Telegram API / OpenAI API)", "Inrastructure maintenance (Terrafrom / Azure / Hetzner)", "Microservices infrastructure maintenance (Docker / Kubernetes / Helm)", "Servers maintenance (Linux)", @@ -672,19 +717,51 @@ export const content_en = [ },{ type: "workSubSegment", tabs: 0, - title: "Programming - Python", - image: "", //SkillsPythonLogo, + title: "Programming", + image: "", branchBorderColor: "#ffd748", mainBorderColor: null, firstElement: true, + content: [], + }, + { + type: "workSubSegment", + tabs: 1, + title: "Coding & Scripting", + image: "", + branchBorderColor: "#6d3d00", + mainBorderColor: "#ffd748", content: [ - "Django", - "Django REST Framework", - "Channels 3.0", - "Celery (Task Manager)", - "Asyncio", + "Python", + "Bash / ZSH / Powershell", + "Javascript (Pure JS / ReactJS)", ], }, + { + type: "mergeBranchSegment", + tabs: 1, + branchBorderColor: "#6d3d00", + mainBorderColor: "#ffd748", + }, + { + type: "workSubSegment", + tabs: 1, + title: "LLM & Other AI Tools", + image: "", + branchBorderColor: "#8b0000", + mainBorderColor: "#ffd748", + content: [ + "Public LLMs (Claude / Gemini / ChatGPT)", + "Local LLMs (Ollama - Bielik AI / DeepSeek)", + "Coding Agents (Cursor AI / Copilot)", + ], + }, + { + type: "mergeBranchSegment", + tabs: 1, + branchBorderColor: "#8b0000", + mainBorderColor: "#ffd748", + }, { type: "workSubSegment", tabs: 0, @@ -702,9 +779,11 @@ export const content_en = [ mainBorderColor: "#2e8cb1", content: [ "Jenkins (CI/CD / Routine Processes Automatization (Job's) / GitOps)", - "Ansible (Automatization of servers & dev environments configuration)", + "Ansible (Server Configuration Stuffs)", + "Terraform / OpenTofu (Infrastructure as Code)", "Bash / ZSH (Linux)", "Powershell (Windows)", + "Python (Cross-Platform)", ], }, { @@ -713,45 +792,6 @@ export const content_en = [ branchBorderColor: "#4aa720", mainBorderColor: "#2e8cb1", }, - - { - type: "workSubSegment", - tabs: 1, - title: "Containerization", - image: "", //SkillsContainersLogo, - branchBorderColor: "#00b7ff", - mainBorderColor: "#2e8cb1", - content: [ - "Docker", - "Docker-Compose (Microservices oriented on single servers or debug purposes)", - "MiniKube (Local debugging K8S manifests)", - "Kubernetes (Helm / Cert-Manager / Ingress / K9S)", - ], - }, - { - type: "mergeBranchSegment", - tabs: 1, - branchBorderColor: "#00b7ff", - mainBorderColor: "#2e8cb1", - }, - { - type: "workSubSegment", - tabs: 1, - title: "Configuration", - image: "", //SkillsNginxLogo, - branchBorderColor: "#d90000", - mainBorderColor: "#2e8cb1", - content: [ - "Apache", - "Nginx (https-portal)", - ], - }, - { - type: "mergeBranchSegment", - tabs: 1, - branchBorderColor: "#d90000", - mainBorderColor: "#2e8cb1", - }, { type: "workSubSegment", tabs: 1, @@ -763,6 +803,7 @@ export const content_en = [ "Hetzner", "OVH", "AWS", + "Azure", ], }, { @@ -771,6 +812,49 @@ export const content_en = [ branchBorderColor: "#f96900", mainBorderColor: "#2e8cb1", }, + { + type: "workSubSegment", + tabs: 1, + title: "Containerization", + image: "", //SkillsContainersLogo, + branchBorderColor: "#00b7ff", + mainBorderColor: "#2e8cb1", + content: [ + "Docker & Docker-Compose", + "Podman", + "Kubernetes (Kubespray / Helm / Cert-Manager / Ingress / K9S)", + ], + }, + { + type: "mergeBranchSegment", + tabs: 1, + branchBorderColor: "#00b7ff", + mainBorderColor: "#2e8cb1", + }, + { + type: "workSubSegment", + tabs: 1, + title: "Reliability & Monitoring", + image: "", + branchBorderColor: "#000000", + mainBorderColor: "#2e8cb1", + content: [ + "Grafana", + "Prometheus", + "ElasticSearch", + "Kibana", + "Logstash", + "New Relic", + "Splunk", + "Fluent-Bit", + ], + }, + { + type: "mergeBranchSegment", + tabs: 1, + branchBorderColor: "#000000", + mainBorderColor: "#2e8cb1", + }, { type: "workSubSegment", tabs: 0, diff --git a/src/images/work_aptiv_logo.png b/src/images/work_aptiv_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1bdb3991e58d05ee2ee0cddfd982bdd7c7f2aae7 GIT binary patch literal 7248 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 B$U^`C literal 0 HcmV?d00001 diff --git a/src/pages/index.js b/src/pages/index.js index f0d1f29..a5427ab 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,48 +2,86 @@ 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" +import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha' -// Klucz strony reCAPTCHA -const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY"; - -// Komponent obsługujący reCAPTCHA -const CaptchaWrapper = ({ onVerified }) => { +const SimpleCaptchaWrapper = ({ onVerified, language }) => { const [error, setError] = React.useState(null); - const recaptchaRef = React.useRef(null); - const handleCaptchaChange = () => { + 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 { - const token = recaptchaRef.current.getValue(); - if (token) { - onVerified(true); - setError(null); - } + loadCaptchaEnginge(6, '#242424', '#a6a6a6'); } catch (err) { - console.error("reCAPTCHA error:", err); - setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie."); + 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 (

- setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.")} - onExpired={() => { - if (recaptchaRef.current) { - recaptchaRef.current.reset(); - } - }} - hl="pl" - /> - {error && ( -
- {error} -
- )} +
+

+ {content[language].initial_information} +

+ +
+ + +
+ {error && ( +
+ {error} +
+ )} +
); }; @@ -322,7 +360,10 @@ const SegmentGeneral = ({ segment }) => { {segment.title} {!isVerified ? ( - + ) : (
{typeof segment.content === "object" ? ( diff --git a/src/styles/general.scss b/src/styles/general.scss index d794d5a..16e26a5 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -209,17 +209,68 @@ body { } .captcha-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 20px 0; - padding: 10px; + float: right; - .error-message { - color: #ff4444; - margin-top: 10px; - font-size: 14px; - text-align: center; + .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; + } } }