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 0000000..1bdb399
Binary files /dev/null and b/src/images/work_aptiv_logo.png differ
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}
+
+ )}
+
{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;
+ }
}
}