amnannn
/
rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

done token recaptcha

This commit is contained in:
Carls2320 2025-02-14 14:08:51 +07:00
parent d4749582c1
commit 7d21ab9c94
4 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -15,9 +15,8 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
async defer>
</script>
</body> </body>
</html> </html>

27
src/components/contact/FormSection.jsx → src/components/contact/Form/FormSection.jsx
View File

@ -1,22 +1,10 @@
import { useState } from "react"; 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 ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
import useRecaptcha from './useRecaptcha';
const ContactForm = () => { const ContactForm = () => {
// State untuk melacak status reCAPTCHA const { capchaToken, recaptchaRef, handleRecaptcha } = useRecaptcha();
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
}
};
return ( return (
<div <div
@ -101,7 +89,7 @@ const ContactForm = () => {
</select> </select>
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none"> <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
<svg <svg
className="w-8 h-28 mt-7 text-[#5B59E8]" className="w-6 text-[#5B59E8]"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -121,15 +109,14 @@ const ContactForm = () => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ReCAPTCHA <ReCAPTCHA
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
onChange={verifyCallback} // Mengganti render="explicit" dengan onChange yang lebih sederhana onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
onLoad={callback} // Callback ketika ReCAPTCHA sudah dimuat
/> />
</div> </div>
<button <button
type="submit" type="submit"
className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4" className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
disabled={!isCaptchaVerified} // Tombol dinonaktifkan jika reCAPTCHA belum dicentang disabled={!capchaToken} // Tombol dinonaktifkan jika reCAPTCHA belum dicentang
> >
Kirim Pesan Kirim Pesan
</button> </button>

23
src/components/contact/Form/useRecaptcha.js Normal file
View File

@ -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;

2
src/pages/Contact.jsx
View File

@ -1,6 +1,6 @@
import Header from "../components/beranda/Header" import Header from "../components/beranda/Header"
import CustomerService from "../components/contact/CustomerService" 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 FAQSection from "../components/contact/FAQSection"
import BottomCTA from "../components/contact/BottomCTA" import BottomCTA from "../components/contact/BottomCTA"
import WhatsAppButton from "../components/beranda/WhatsAppButon" import WhatsAppButton from "../components/beranda/WhatsAppButon"