From 7d21ab9c9423ec7b3a4206ad0f3aaacb2144ce94 Mon Sep 17 00:00:00 2001 From: Carls2320 Date: Fri, 14 Feb 2025 14:08:51 +0700 Subject: [PATCH] done token recaptcha --- index.html | 5 ++-- .../contact/{ => Form}/FormSection.jsx | 27 +++++-------------- src/components/contact/Form/useRecaptcha.js | 23 ++++++++++++++++ src/pages/Contact.jsx | 2 +- 4 files changed, 33 insertions(+), 24 deletions(-) rename src/components/contact/{ => Form}/FormSection.jsx (83%) create mode 100644 src/components/contact/Form/useRecaptcha.js diff --git a/index.html b/index.html index 0fd35b0..beb0d7e 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,8 @@
- + + \ No newline at end of file diff --git a/src/components/contact/FormSection.jsx b/src/components/contact/Form/FormSection.jsx similarity index 83% rename from src/components/contact/FormSection.jsx rename to src/components/contact/Form/FormSection.jsx index b8b6b12..012171b 100644 --- a/src/components/contact/FormSection.jsx +++ b/src/components/contact/Form/FormSection.jsx @@ -1,22 +1,10 @@ import { useState } from "react"; -import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya +import { img10 } from "../asset"; // Pastikan img10 ada dan benar path-nya import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA) +import useRecaptcha from './useRecaptcha'; const ContactForm = () => { - // State untuk melacak status reCAPTCHA - const [isCaptchaVerified, setIsCaptchaVerified] = useState(false); - - // Callback yang dijalankan setelah reCAPTCHA dimuat - const callback = function () { - console.log("Done!!!!"); - }; - - // Callback verifikasi reCAPTCHA - const verifyCallback = function (response) { - if (response) { - setIsCaptchaVerified(true); // Jika reCAPTCHA berhasil, set state menjadi true - } - }; + const { capchaToken, recaptchaRef, handleRecaptcha } = useRecaptcha(); return (
{
{
diff --git a/src/components/contact/Form/useRecaptcha.js b/src/components/contact/Form/useRecaptcha.js new file mode 100644 index 0000000..6b6768f --- /dev/null +++ b/src/components/contact/Form/useRecaptcha.js @@ -0,0 +1,23 @@ +import { useState, useRef } from "react"; + +const useRecaptcha = () => { + const [capchaToken, setCapchaToken] = useState(null); // Menyimpan token reCAPTCHA + const recaptchaRef = useRef(); // Menggunakan ref untuk reCAPTCHA jika perlu manipulasi lebih lanjut + + // Fungsi untuk menangani perubahan token setelah reCAPTCHA berhasil + const handleRecaptcha = (token) => { + if (token) { + setCapchaToken(token); // Set token jika berhasil + } else { + setCapchaToken(null); // Reset token jika tidak ada token + } + }; + + return { + capchaToken, // Mengembalikan token + recaptchaRef, // Referensi reCAPTCHA + handleRecaptcha, // Fungsi untuk menangani perubahan token + }; +}; + +export default useRecaptcha; diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx index 54cede4..ceca7cd 100644 --- a/src/pages/Contact.jsx +++ b/src/pages/Contact.jsx @@ -1,6 +1,6 @@ import Header from "../components/beranda/Header" import CustomerService from "../components/contact/CustomerService" -import FormSection from "../components/contact/FormSection" +import FormSection from "../components/contact/Form/FormSection" import FAQSection from "../components/contact/FAQSection" import BottomCTA from "../components/contact/BottomCTA" import WhatsAppButton from "../components/beranda/WhatsAppButon"