Adding reset state for form submission and adding form to pow demo (#…

…1272) * Adding reset state for form submission and adding form to pow demo * React state fixes * Linting and typo
prosopo · Jun 18, 2024 · f12f7c0 · f12f7c0
1 parent 3aac4ee
commit f12f7c0
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 6 deletions.
diff --git a/demos/client-pow-example/src/App.tsx b/demos/client-pow-example/src/App.tsx
@@ -14,7 +14,7 @@
 
 import { EnvironmentTypes, EnvironmentTypesSchema, ProsopoClientConfigSchema } from '@prosopo/types'
 import { ProcaptchaPow } from '@prosopo/procaptcha-pow'
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 
 function App() {
     const [account, setAccount] = useState<string>('')
@@ -30,9 +30,43 @@ function App() {
         serverUrl: process.env.PROSOPO_SERVER_URL || '',
         atlasUri: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false,
     })
+
+    const formRef = useRef<HTMLFormElement>(null)
+
+    useEffect(() => {
+        const form = formRef.current
+
+        if (form) {
+            const handleSubmit = async (event: Event) => {
+                event.preventDefault()
+                console.log('Form submitted:', form)
+
+                console.log('Dummy form submission with data:', event)
+            }
+
+            form.addEventListener('submit', handleSubmit)
+
+            return () => {
+                form.removeEventListener('submit', handleSubmit)
+            }
+        }
+        return
+    }, [])
+
     return (
         <div style={{ height: '100%', display: 'block', justifyContent: 'center', alignItems: 'center' }}>
-            <ProcaptchaPow config={config} />
+            <form ref={formRef}>
+                <div>
+                    <label htmlFor="name">Name:</label>
+                    <input type="text" id="name" name="name" required />
+                </div>
+                <div>
+                    <label htmlFor="email">Email:</label>
+                    <input type="email" id="email" name="email" required />
+                </div>
+                <ProcaptchaPow config={config} />
+                <button type="submit">Submit</button>
+            </form>
         </div>
     )
 }

diff --git a/packages/procaptcha-pow/src/Services/Manager.ts b/packages/procaptcha-pow/src/Services/Manager.ts
@@ -65,6 +65,13 @@ export const Manager = (
         updateState({ timeout: undefined })
     }
 
+    const clearSuccessfulChallengeTimeout = () => {
+        // clear the timeout
+        window.clearTimeout(state.successfullChallengeTimeout)
+        // then clear the timeout from the state
+        updateState({ successfullChallengeTimeout: undefined })
+    }
+
     const getConfig = () => {
         const config: ProcaptchaClientConfigInput = {
             userAccountAddress: '',
@@ -129,6 +136,7 @@ export const Manager = (
     const resetState = () => {
         // clear timeout just in case a timer is still active (shouldn't be)
         clearTimeout()
+        clearSuccessfulChallengeTimeout()
         updateState(defaultState())
     }
 
@@ -231,5 +239,6 @@ export const Manager = (
 
     return {
         start,
+        resetState,
     }
 }
diff --git a/packages/procaptcha-pow/src/components/Captcha.tsx b/packages/procaptcha-pow/src/components/Captcha.tsx
@@ -30,7 +30,7 @@ import {
 import { Manager } from '../Services/Manager.js'
 import { ProcaptchaProps } from '@prosopo/types'
 import { buildUpdateState, useProcaptcha } from '@prosopo/procaptcha-common'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 const Procaptcha = (props: ProcaptchaProps) => {
     const config = props.config
@@ -40,10 +40,29 @@ const Procaptcha = (props: ProcaptchaProps) => {
     const [state, _updateState] = useProcaptcha(useState, useRef)
     // get the state update mechanism
     const updateState = buildUpdateState(state, _updateState)
-    const manager = Manager(config, state, updateState, callbacks)
+    const manager = useRef(Manager(config, state, updateState, callbacks))
+    const captchaRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        const element = captchaRef.current
+        if (!element) return
+
+        const form = element.closest('form')
+        if (!form) return
+
+        const handleSubmit = () => {
+            manager.current.resetState()
+        }
+
+        form.addEventListener('submit', handleSubmit)
+
+        return () => {
+            form.removeEventListener('submit', handleSubmit)
+        }
+    }, [])
 
     return (
-        <div>
+        <div ref={captchaRef}>
             <div style={{ maxWidth: '100%', maxHeight: '100%', overflowX: 'auto' }}>
                 <ContainerDiv>
                     <WidthBasedStylesDiv>
@@ -96,7 +115,7 @@ const Procaptcha = (props: ProcaptchaProps) => {
                                                     ) : (
                                                         <Checkbox
                                                             checked={state.isHuman}
-                                                            onChange={manager.start}
+                                                            onChange={manager.current.start}
                                                             themeColor={themeColor}
                                                             labelText={'I am human'}
                                                             aria-label="human checkbox"