feat: expose reset into even object to allow retry #62

hCaptcha · Sep 29, 2024 · 48ac268 · 48ac268
1 parent 250d209
commit 48ac268
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/Example.App.js b/Example.App.js
@@ -15,9 +15,11 @@ export default class App extends React.Component {
       if (['cancel'].includes(event.nativeEvent.data)) {
         this.captchaForm.hide();
         this.setState({ code: event.nativeEvent.data});
-      } else if (['error', 'expired'].includes(event.nativeEvent.data)) {
+      } else if (['error'].includes(event.nativeEvent.data)) {
         this.captchaForm.hide();
         this.setState({ code: event.nativeEvent.data});
+      } else if (event.nativeEvent.data === 'expired') {
+        event.reset();
       } else if (event.nativeEvent.data === 'open') {
         console.log('Visual challenge opened');
       } else {

diff --git a/Hcaptcha.js b/Hcaptcha.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useRef } from 'react';
 import WebView from 'react-native-webview';
 import { Linking, StyleSheet, View, ActivityIndicator } from 'react-native';
 import ReactNativeVersion from 'react-native/Libraries/Core/ReactNativeVersion';
@@ -153,7 +153,7 @@ const Hcaptcha = ({
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
-          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); };
+          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
           var onDataErrorCallback = function(error) {
             console.log("challenge error callback fired");
             window.ReactNativeWebView.postMessage("error");
@@ -201,8 +201,17 @@ const Hcaptcha = ({
     [loadingIndicatorColor]
   );
 
+  const webViewRef = useRef(null);
+
+  const reset = () => {
+    if (webViewRef.current) {
+      webViewRef.current.injectJavaScript('onloadCallback();');
+    }
+  };
+
   return (
     <WebView
+      ref={webViewRef}
       originWhitelist={['*']}
       onShouldStartLoadWithRequest={(event) => {
         if (event.url.slice(0, 24) === 'https://www.hcaptcha.com') {
@@ -212,7 +221,10 @@ const Hcaptcha = ({
         return true;
       }}
       mixedContentMode={'always'}
-      onMessage={onMessage}
+      onMessage={(e) => {
+        e.reset = reset;
+        onMessage(e);
+      }}
       javaScriptEnabled
       injectedJavaScript={patchPostMessageJsCode}
       automaticallyAdjustContentInsets

diff --git a/__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap b/__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap
@@ -53,6 +53,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with all props 1
 })();"
       javaScriptEnabled={true}
       mixedContentMode="always"
+      onMessage={[Function]}
       onShouldStartLoadWithRequest={[Function]}
       originWhitelist={
         [
@@ -103,7 +104,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with all props 1
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
-          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); };
+          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
           var onDataErrorCallback = function(error) {
             console.log("challenge error callback fired");
             window.ReactNativeWebView.postMessage("error");
@@ -208,6 +209,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with minimum pro
 })();"
       javaScriptEnabled={true}
       mixedContentMode="always"
+      onMessage={[Function]}
       onShouldStartLoadWithRequest={[Function]}
       originWhitelist={
         [
@@ -258,7 +260,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with minimum pro
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
-          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); };
+          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
           var onDataErrorCallback = function(error) {
             console.log("challenge error callback fired");
             window.ReactNativeWebView.postMessage("error");

diff --git a/__tests__/__snapshots__/Hcaptcha.test.js.snap b/__tests__/__snapshots__/Hcaptcha.test.js.snap
@@ -15,6 +15,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with all props 1`] = `
 })();"
   javaScriptEnabled={true}
   mixedContentMode="always"
+  onMessage={[Function]}
   onShouldStartLoadWithRequest={[Function]}
   originWhitelist={
     [
@@ -65,7 +66,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with all props 1`] = `
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
-          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); };
+          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
           var onDataErrorCallback = function(error) {
             console.log("challenge error callback fired");
             window.ReactNativeWebView.postMessage("error");
@@ -130,6 +131,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with minimum props 1`] = `
 })();"
   javaScriptEnabled={true}
   mixedContentMode="always"
+  onMessage={[Function]}
   onShouldStartLoadWithRequest={[Function]}
   originWhitelist={
     [
@@ -180,7 +182,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with minimum props 1`] = `
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
-          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); };
+          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
           var onDataErrorCallback = function(error) {
             console.log("challenge error callback fired");
             window.ReactNativeWebView.postMessage("error");
@@ -244,6 +246,7 @@ exports[`Hcaptcha snapshot tests test debug 1`] = `
 })();"
   javaScriptEnabled={true}
   mixedContentMode="always"
+  onMessage={[Function]}
   onShouldStartLoadWithRequest={[Function]}
   originWhitelist={
     [
@@ -294,7 +297,7 @@ exports[`Hcaptcha snapshot tests test debug 1`] = `
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
-          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("cancel"); };
+          var onChalExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
           var onDataErrorCallback = function(error) {
             console.log("challenge error callback fired");
             window.ReactNativeWebView.postMessage("error");