From 7493e222ae12efe0d6c942455676d6cfcad20d98 Mon Sep 17 00:00:00 2001 From: Worldwide <141194268+Vengi717@users.noreply.github.com> Date: Wed, 1 May 2024 05:41:08 -0400 Subject: [PATCH] change callback and elementId to element (#1192) * change callback and elementId to element * remove comment and fix linting issue * remove stats and change typescript version * revert sitekey and remove pin * fix linting issue --- README.md | 56 +++++---- .../src/frictionless.html | 10 +- demos/client-bundle-example/src/index.html | 8 +- .../client-bundle-example/src/urlParams.html | 8 +- package-lock.json | 110 +++++++++++++++++- packages/procaptcha-bundle/package.json | 2 +- packages/procaptcha-bundle/src/index.tsx | 14 +-- 7 files changed, 161 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index d87059ea9f..2640781008 100644 --- a/README.md +++ b/README.md @@ -95,15 +95,17 @@ An `onload` event is added to the script tag to call the render function when th // A function that will call the render Procaptcha function when the procaptcha script has loaded document.getElementById('procaptcha-script').addEventListener('load', function () { // Define a callback function to be called when the CAPTCHA is verified - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') // Render the CAPTCHA explicitly on a container with id "procaptcha-container" - window.procaptcha.render('procaptcha-container', { + window.procaptcha.render(captchaContainer, { siteKey: 'YOUR_SITE_KEY', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, }) }) ``` @@ -113,18 +115,18 @@ document.getElementById('procaptcha-script').addEventListener('load', function ( The `Procaptcha.render()` function takes an options object as its second argument. The options object can contain the following fields: -| Key | Type | Description | Required | -| ---------------------- | ------ | -------------------------------------------------------------------------------------------------------- | -------- | -| siteKey | string | The site key of your application / website. This is required. | ✓ | -| callback | string | The name of the window function that will be called when the CAPTCHA is verified. | ✗ | -| theme | string | The theme of the CAPTCHA widget. The default is `light`. The other option is `dark`. | ✗ | -| captchaType | string | The type of CAPTCHA to render. The default is `frictionless`. Other options are `image`, `pow`. | ✗ | -| chalexpired-callback | string | The name of the window function that will be called when the CAPTCHA challenge expires. | ✗ | -| error-callback | string | The name of the window function that will be called when an error occurs. | ✗ | -| close-callback | string | The name of the window function that will be called when the CAPTCHA is closed. | ✗ | -| open-callback | string | The name of the window function that will be called when the CAPTCHA is opened. | ✗ | -| expired-callback | string | The name of the window function that will be called when the CAPTCHA solution expires. | ✗ | -| challenge-valid-length | number | The amount of time, in milliseconds, a successful CAPTCHA challenge is valid for. Defaults to 2 minutes. | ✗ | +| Key | Type | Description | Required | +| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------- | -------- | +| siteKey | string | The site key of your application / website. This is required. | ✓ | +| callback | function | The function that will be called when the CAPTCHA is verified. | ✗ | +| theme | string | The theme of the CAPTCHA widget. The default is `light`. The other option is `dark`. | ✗ | +| captchaType | string | The type of CAPTCHA to render. The default is `frictionless`. Other options are `image`, `pow`. | ✗ | +| chalexpired-callback | string | The name of the window function that will be called when the CAPTCHA challenge expires. | ✗ | +| error-callback | string | The name of the window function that will be called when an error occurs. | ✗ | +| close-callback | string | The name of the window function that will be called when the CAPTCHA is closed. | ✗ | +| open-callback | string | The name of the window function that will be called when the CAPTCHA is opened. | ✗ | +| expired-callback | string | The name of the window function that will be called when the CAPTCHA solution expires. | ✗ | +| challenge-valid-length | number | The amount of time, in milliseconds, a successful CAPTCHA challenge is valid for. Defaults to 2 minutes. | ✗ | The same options can be passed to the implicit rendering method by adding them as data attributes to the `.procaptcha`. For example, to set the theme to dark, you would add `data-theme="dark"` to the `.procaptcha` container. @@ -268,13 +270,15 @@ setting. ```javascript document.getElementById('procaptcha-script').addEventListener('load', function () { - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } - window.procaptcha.render('procaptcha-container', { + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') + window.procaptcha.render(captchaContainer, { siteKey: 'YOUR_SITE_KEY', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, captchaType: 'frictionless', // can also be omitted }) }) @@ -296,13 +300,15 @@ the `captchaType` to `pow`. ```javascript document.getElementById('procaptcha-script').addEventListener('load', function () { - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } - window.procaptcha.render('procaptcha-container', { + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') + window.procaptcha.render(captchaContainer, { siteKey: 'YOUR_SITE_KEY', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, captchaType: 'pow', }) }) @@ -323,13 +329,15 @@ to `image`. ```javascript document.getElementById('procaptcha-script').addEventListener('load', function () { - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } - window.procaptcha.render('procaptcha-container', { + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') + window.procaptcha.render(captchaContainer, { siteKey: 'YOUR_SITE_KEY', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, captchaType: 'image', }) }) diff --git a/demos/client-bundle-example/src/frictionless.html b/demos/client-bundle-example/src/frictionless.html index 9e5ebd9ce6..c9d098ea49 100644 --- a/demos/client-bundle-example/src/frictionless.html +++ b/demos/client-bundle-example/src/frictionless.html @@ -6,24 +6,26 @@ async function captchaLoaded() { const render = (await import('./assets/procaptcha.bundle')).render console.log('Captcha loaded') - render('procaptcha-container', { + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') + render(captchaContainer, { siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, captchaType: 'frictionless', }) } window.captchaLoaded = captchaLoaded // Define a callback function to be called when the CAPTCHA is verified - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } diff --git a/demos/client-bundle-example/src/index.html b/demos/client-bundle-example/src/index.html index 4fd00f29bb..e9136f9765 100644 --- a/demos/client-bundle-example/src/index.html +++ b/demos/client-bundle-example/src/index.html @@ -36,15 +36,17 @@ import { render } from './assets/procaptcha.bundle.js' // Define a callback function to be called when the CAPTCHA is verified - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') // Render the CAPTCHA explicitly on a container with id "procaptcha-container" - render('procaptcha-container', { + render(captchaContainer, { siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, }) diff --git a/demos/client-bundle-example/src/urlParams.html b/demos/client-bundle-example/src/urlParams.html index 82db12cd66..8d6f59f718 100644 --- a/demos/client-bundle-example/src/urlParams.html +++ b/demos/client-bundle-example/src/urlParams.html @@ -6,16 +6,18 @@ async function captchaLoaded() { const render = (await import('./assets/procaptcha.bundle')).render console.log('Captcha loaded') - render('procaptcha-container', { + // Get the Element using elementId + const captchaContainer = document.getElementById('procaptcha-container') + render(captchaContainer, { siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw', theme: 'dark', - callback: 'onCaptchaVerified', + callback: onCaptchaVerified, }) } window.captchaLoaded = captchaLoaded // Define a callback function to be called when the CAPTCHA is verified - window.onCaptchaVerified = function (output) { + function onCaptchaVerified(output) { console.log('Captcha verified, output: ' + JSON.stringify(output)) } diff --git a/package-lock.json b/package-lock.json index 906d519155..af0ffae63f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "typedoc-plugin-mdn-links": "^3.1.16", "typedoc-plugin-missing-exports": "^2.2.0", "typedoc-plugin-zod": "^1.1.2", - "typescript": "5.1.6" + "typescript": "^5.1.6" }, "engines": { "node": ">=18", @@ -4927,6 +4927,66 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@next/swc-darwin-arm64": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz", + "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz", + "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz", + "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz", + "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-linux-x64-gnu": { "version": "14.0.1", "cpu": [ @@ -4955,6 +5015,51 @@ "node": ">= 10" } }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz", + "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz", + "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz", + "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "dev": true, @@ -26847,7 +26952,8 @@ }, "node_modules/typescript": { "version": "5.1.6", - "license": "Apache-2.0", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", + "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/packages/procaptcha-bundle/package.json b/packages/procaptcha-bundle/package.json index 7682243116..48667b02cb 100644 --- a/packages/procaptcha-bundle/package.json +++ b/packages/procaptcha-bundle/package.json @@ -62,7 +62,7 @@ "@rollup/plugin-typescript": "^11.1.2", "@vitejs/plugin-react": "^4.2.1", "tslib": "2.6.2", - "typescript": "5.1.6", + "typescript": "^5.1.6", "webpack-merge": "^5.9.0" } } diff --git a/packages/procaptcha-bundle/src/index.tsx b/packages/procaptcha-bundle/src/index.tsx index fc348782e9..a8fc256bf4 100644 --- a/packages/procaptcha-bundle/src/index.tsx +++ b/packages/procaptcha-bundle/src/index.tsx @@ -31,7 +31,7 @@ interface ProcaptchaRenderOptions { siteKey: string theme?: 'light' | 'dark' captchaType?: Features - callback?: string + callback?: (payload: ProcaptchaOutput) => void 'challenge-valid-length'?: string // seconds for successful challenge to be valid 'chalexpired-callback'?: string 'expired-callback'?: string @@ -112,7 +112,7 @@ const renderLogic = ( renderOptions?: ProcaptchaRenderOptions ) => { elements.forEach((element) => { - const callbackName = renderOptions?.callback || element.getAttribute('data-callback') + const callbackName = renderOptions?.callback const chalExpiredCallbackName = renderOptions?.['chalexpired-callback'] || element.getAttribute('data-chalexpired-callback') const errorCallback = renderOptions?.['error-callback'] || element.getAttribute('data-error-callback') @@ -141,7 +141,7 @@ const renderLogic = ( }, } - if (callbackName) callbacks.onHuman = getWindowCallback(callbackName) + if (callbackName) callbacks.onHuman = renderOptions?.callback as any // Assuming the callback is set correctly if (chalExpiredCallbackName) callbacks.onChallengeExpired = getWindowCallback(chalExpiredCallbackName) if (onExpiredCallbackName) callbacks.onExpired = getWindowCallback(onExpiredCallbackName) if (errorCallback) callbacks.onError = getWindowCallback(errorCallback) @@ -195,14 +195,8 @@ const implicitRender = () => { } // Explicit render for targeting specific elements -export const render = (elementId: string, renderOptions: ProcaptchaRenderOptions) => { +export const render = (element: Element, renderOptions: ProcaptchaRenderOptions) => { const siteKey = renderOptions.siteKey - const element = document.getElementById(elementId) - - if (!element) { - console.error('Element not found:', elementId) - return - } renderLogic([element], getConfig(siteKey), renderOptions) }