semi dynamic page

3 files changed, 31 insertions, 7 deletions

diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index 482a9ce3..f624fba7 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -4,6 +4,7 @@ import Link from '@/core/components/elements/Link/Link'
 import Alert from '@/core/components/elements/Alert/Alert'
 import PageContent from '@/lib/content/components/PageContent'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import ReCAPTCHA from 'react-google-recaptcha'
 
 const RegisterDesktop = () => {
   const {
@@ -16,6 +17,7 @@ const RegisterDesktop = () => {
     fullnameRef,
     emailRef,
     passwordRef,
+    recaptchaRef,
     tnd,
     setTnd
   } = useRegister()
@@ -89,6 +91,7 @@ const RegisterDesktop = () => {
                   placeholder='••••••••••••'
                 />
               </div>
+              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
               <div class='flex items-center mt-4 '>
                 <input
                   type='checkbox'
@@ -96,11 +99,12 @@ const RegisterDesktop = () => {
                   className='form-input flex items-start w-fit mr-2'
                   required
                 />
-                <label
-                  onClick={() => setTnd(true)}
-                  className='inline cursor-pointer text-danger-500'
-                >
-                  Syarat dan Ketentuan
+                <label className='inline'>
+                  Dengan ini saya menyetujui{' '}
+                  <span onClick={() => setTnd(true)} className='cursor-pointer text-danger-500'>
+                    syarat dan ketentuan
+                  </span>{' '}
+                  yang berlaku
                 </label>
               </div>
               <button
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index f5c818e7..80ea6ab0 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -6,6 +6,7 @@ import useRegister from '../hooks/useRegister'
 import MobileView from '@/core/components/views/MobileView'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import PageContent from '@/lib/content/components/PageContent'
+import ReCAPTCHA from 'react-google-recaptcha'
 
 const RegisterMobile = () => {
   const {
@@ -18,6 +19,7 @@ const RegisterMobile = () => {
     fullnameRef,
     emailRef,
     passwordRef,
+    recaptchaRef,
     tnd,
     setTnd
   } = useRegister()
@@ -93,6 +95,7 @@ const RegisterMobile = () => {
               placeholder='••••••••••••'
             />
           </div>
+          <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
           <div class='flex items-center mt-4 '>
             <input
               type='checkbox'
@@ -100,8 +103,12 @@ const RegisterMobile = () => {
               className='form-input flex items-start w-fit mr-2'
               required
             />
-            <label onClick={() => setTnd(true)} className='inline cursor-pointer text-danger-500'>
-              Syarat dan Ketentuan
+            <label className='inline'>
+              Dengan ini saya menyetujui{' '}
+              <span onClick={() => setTnd(true)} className='cursor-pointer text-danger-500'>
+                syarat dan ketentuan
+              </span>{' '}
+              yang berlaku
             </label>
           </div>
           <button type='submit' className='btn-yellow w-full mt-2' disabled={!isValid || isLoading}>
diff --git a/src/lib/auth/hooks/useRegister.js b/src/lib/auth/hooks/useRegister.js
index 4b0b0d60..1a9412f8 100644
--- a/src/lib/auth/hooks/useRegister.js
+++ b/src/lib/auth/hooks/useRegister.js
@@ -33,8 +33,20 @@ const useRegister = () => {
     companyNameRef.current.value = ''
   }
 
+  const recaptchaRef = useRef(null)
+
   const handleSubmit = async (e) => {
     e.preventDefault()
+
+    const recaptchaValue = recaptchaRef.current.getValue()
+    if (!recaptchaValue) {
+      setAlert({
+        children: 'ReCaptcha harus diisi',
+        type: 'info'
+      })
+      return
+    }
+
     setAlert(null)
     setIsLoading(true)
     const { fullname, email, password, companyName } = inputVal()
@@ -75,6 +87,7 @@ const useRegister = () => {
     fullnameRef,
     emailRef,
     passwordRef,
+    recaptchaRef,
     tnd,
     setTnd
   }