83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
export class TurnStilleCaptcha {
|
|
sitekey = "{{.SiteKey}}";
|
|
/**
|
|
* Initializes the TurnStilleCaptcha instance.
|
|
* Creates a container for the captcha and appends it to the target element.
|
|
* If the Cloudflare Turnstile script is already loaded, it runs the captcha.
|
|
* Otherwise, it loads the script and initializes the captcha with the given properties.
|
|
* @param {HTMLElement} target - The element to attach the captcha container to.
|
|
* @param {Object} [props={}] - Optional properties for captcha initialization, such as theme.
|
|
*/
|
|
|
|
constructor(target, props = {}) {
|
|
// create holder
|
|
this.holder = document.createElement("div");
|
|
this.holder.id = "turnstile-container";
|
|
this.theme = props.theme || "auto";
|
|
target.appendChild(this.holder);
|
|
|
|
|
|
// execute code
|
|
if (window.turnstile) {
|
|
this.runCaptcha();
|
|
} else {
|
|
this.loadCloudflareScript();
|
|
}
|
|
}
|
|
runCaptcha() {
|
|
setTimeout(() => {
|
|
if (globalThis.turnstileInstance) {
|
|
window.turnstile.remove(globalThis.turnstileInstance);
|
|
}
|
|
globalThis.turnstileInstance = window.turnstile.render(this.holder, {
|
|
sitekey: this.sitekey,
|
|
theme: this.theme,
|
|
callback: (token) => {
|
|
if (token) {
|
|
const event = new CustomEvent("token", {
|
|
detail: token,
|
|
bubbles: true,
|
|
});
|
|
this.holder.dispatchEvent(event);
|
|
}
|
|
},
|
|
error: (error) => {
|
|
const event = new CustomEvent("failure", {
|
|
detail: error,
|
|
bubbles: true,
|
|
});
|
|
this.holder.dispatchEvent(event);
|
|
window.turnstile.reset(globalThis.turnstileInstance);
|
|
},
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
loadCloudflareScript() {
|
|
const script = document.createElement("script");
|
|
script.id = "turnstile-script";
|
|
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
|
|
// script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
|
|
script.async = true;
|
|
script.defer = true;
|
|
|
|
script.onload = () => {
|
|
const event = new CustomEvent("loaded", {
|
|
detail: "Turnstile script loaded",
|
|
bubbles: true,
|
|
});
|
|
this.holder.dispatchEvent(event);
|
|
|
|
this.runCaptcha();
|
|
};
|
|
script.onerror = () => {
|
|
const event = new CustomEvent("failure", {
|
|
detail: "Failed to load Turnstile script",
|
|
bubbles: true,
|
|
});
|
|
this.holder.dispatchEvent(event);
|
|
};
|
|
document.head.appendChild(script);
|
|
}
|
|
}
|