From 2d4d8ee2f1e859a0a091a2986a6fa0d63702e859 Mon Sep 17 00:00:00 2001 From: George Oastler Date: Mon, 9 Dec 2024 19:29:19 +0000 Subject: [PATCH] ios webview fix (#1564) --- .../io/prosopo/procaptcha/MainActivity.kt | 3 +- .../cypress/support/commands.ts | 2 +- .../procaptcha.xcodeproj/project.pbxproj | 4 +- .../ios-webview/procaptcha/ContentView.swift | 8 +- .../src/components/CaptchaComponent.tsx | 33 ++-- .../src/components/CaptchaWidget.tsx | 153 ++++++------------ 6 files changed, 83 insertions(+), 120 deletions(-) diff --git a/demos/android-webview/app/src/main/java/io/prosopo/procaptcha/MainActivity.kt b/demos/android-webview/app/src/main/java/io/prosopo/procaptcha/MainActivity.kt index fd8279ff49..0a5295c20a 100644 --- a/demos/android-webview/app/src/main/java/io/prosopo/procaptcha/MainActivity.kt +++ b/demos/android-webview/app/src/main/java/io/prosopo/procaptcha/MainActivity.kt @@ -138,7 +138,8 @@ class MainActivity : AppCompatActivity() { Link -
+

image

+

diff --git a/demos/cypress-shared/cypress/support/commands.ts b/demos/cypress-shared/cypress/support/commands.ts index 9fcfc657b3..396cd50d41 100644 --- a/demos/cypress-shared/cypress/support/commands.ts +++ b/demos/cypress-shared/cypress/support/commands.ts @@ -84,7 +84,7 @@ function clickIAmHuman(): Cypress.Chainable { } function captchaImages(): Cypress.Chainable> { - return getWidgetElement("p").then(($p) => { + return getWidgetElement(".prosopo-modalInner p").then(($p) => { const $pWithText = $p.filter((index, el) => { return Cypress.$(el).text().includes("all containing"); }); diff --git a/demos/ios-webview/procaptcha.xcodeproj/project.pbxproj b/demos/ios-webview/procaptcha.xcodeproj/project.pbxproj index feb53a6e05..f5ba2f6c3c 100644 --- a/demos/ios-webview/procaptcha.xcodeproj/project.pbxproj +++ b/demos/ios-webview/procaptcha.xcodeproj/project.pbxproj @@ -277,7 +277,7 @@ "INFOPLIST_KEY_UIStatusBarStyle[sdk=iphonesimulator*]" = UIStatusBarStyleDefault; INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; - IPHONEOS_DEPLOYMENT_TARGET = 14.5; + IPHONEOS_DEPLOYMENT_TARGET = 16.4; LD_RUNPATH_SEARCH_PATHS = "@executable_path/Frameworks"; "LD_RUNPATH_SEARCH_PATHS[sdk=macosx*]" = "@executable_path/../Frameworks"; MACOSX_DEPLOYMENT_TARGET = 13.3; @@ -315,7 +315,7 @@ "INFOPLIST_KEY_UIStatusBarStyle[sdk=iphonesimulator*]" = UIStatusBarStyleDefault; INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; - IPHONEOS_DEPLOYMENT_TARGET = 14.5; + IPHONEOS_DEPLOYMENT_TARGET = 16.4; LD_RUNPATH_SEARCH_PATHS = "@executable_path/Frameworks"; "LD_RUNPATH_SEARCH_PATHS[sdk=macosx*]" = "@executable_path/../Frameworks"; MACOSX_DEPLOYMENT_TARGET = 13.3; diff --git a/demos/ios-webview/procaptcha/ContentView.swift b/demos/ios-webview/procaptcha/ContentView.swift index e8455a98ed..8bf7575c9e 100644 --- a/demos/ios-webview/procaptcha/ContentView.swift +++ b/demos/ios-webview/procaptcha/ContentView.swift @@ -46,10 +46,11 @@ struct WebView: UIViewRepresentable { let webView = WKWebView(frame: .zero, configuration: webViewConfiguration) webView.navigationDelegate = context.coordinator - //webView.isInspectable = true + webView.isInspectable = true //DispatchQueue.main.asyncAfter(deadline: .now() + 30) { - webView.loadHTMLString(htmlString, baseURL: nil) + // baseURL must be set for localstorage to work. If localstorage is not required, it can be set to nil. Localstorage errors appear like "SecurityError: The operation is insecure." + webView.loadHTMLString(htmlString, baseURL: URL(string: "https://prosopo.io")) //} return webView @@ -99,7 +100,8 @@ struct ContentView: View {
-
+

image

+

diff --git a/packages/procaptcha-react/src/components/CaptchaComponent.tsx b/packages/procaptcha-react/src/components/CaptchaComponent.tsx index ee7df47cbf..413e08cdd0 100644 --- a/packages/procaptcha-react/src/components/CaptchaComponent.tsx +++ b/packages/procaptcha-react/src/components/CaptchaComponent.tsx @@ -50,6 +50,8 @@ const CaptchaComponent = ({ () => (themeColor === "light" ? lightTheme : darkTheme), [themeColor], ); + const fullSpacing = `${theme.spacing.unit}px`; + const halfSpacing = `${theme.spacing.half}px`; return ( Loading...}> @@ -66,8 +68,10 @@ const CaptchaComponent = ({ border: "1px solid #dddddd", boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px", borderRadius: "4px", - padding: `${theme.spacing.unit}px`, backgroundColor: theme.palette.background.default, + userSelect: "none", + touchAction: "none", + overscrollBehavior: "none", }} >
-
+
{captcha && ( )}
-
-
+ /> */}
{items.map((item, index) => { const hash = getHash(item); const imageStyle: Properties = { - ...paddingForImageColumns[index % 3], - ...paddingForImageRows[Math.floor(index / 3)], // enable the items in the grid to grow in width to use up excess space flexGrow: 1, // make the width of each item 1/3rd of the width overall, i.e. 3 columns flexBasis: "33.3333%", // include the padding / margin / border in the width boxSizing: "border-box", + paddingLeft: halfSpacing, + paddingTop: halfSpacing, }; return (
onClick(hash)} - onTouchStart={isTouchDevice ? () => onClick(hash) : undefined} + onClick={() => onClick(hash)} > -
- {`Captcha -
- + {`Captcha
- + +