vue-captcha-switcher
Version:
A Vue.js component to switch between different CAPTCHA services.
257 lines (256 loc) • 7.12 kB
JavaScript
import { defineComponent as u, ref as h, onMounted as m, onBeforeUnmount as f, createElementBlock as y, openBlock as w, watch as k, computed as v, createBlock as I, resolveDynamicComponent as b } from "vue";
const _ = /* @__PURE__ */ u({
__name: "TurnstileCaptcha",
props: {
sitekey: {
type: String,
required: !0
},
size: {
type: String,
default: "normal"
},
theme: {
type: String,
default: "light"
},
scriptId: {
type: String,
default: "turnstile-script"
}
},
emits: ["verify", "error", "expire", "fail"],
setup(s, { expose: p, emit: l }) {
const a = h(null);
let c = null;
const t = s, n = l;
p({
execute() {
window.turnstile && c !== null && window.turnstile.execute(c);
},
reset() {
window.turnstile && c !== null && window.turnstile.reset(c);
},
cleanup: i
});
function o() {
window.turnstile && a.value && (c = window.turnstile.render(a.value, {
sitekey: t.sitekey,
theme: t.theme,
size: t.size,
callback: (e) => n("verify", e),
"expired-callback": () => n("expire"),
"error-callback": () => n("fail")
}));
}
function r() {
window.onloadTurnstileCallback = o;
}
m(() => {
if (document.getElementById(t.scriptId))
o();
else {
const e = document.createElement("script");
e.id = t.scriptId, e.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback&render=explicit", e.async = !0, e.defer = !0, e.onerror = () => n("error", new Error("Turnstile script failed to load.")), document.head.appendChild(e), e.onload = r;
}
});
function i() {
const e = document.getElementById(t.scriptId);
e == null || e.remove(), a.value && (a.value.innerHTML = ""), delete window.onloadTurnstileCallback, delete window.turnstile;
}
return f(() => {
i();
}), (e, d) => (w(), y("div", {
ref_key: "turnstileDiv",
ref: a
}, null, 512));
}
}), C = /* @__PURE__ */ u({
__name: "RecaptchaV2",
props: {
sitekey: {
type: String,
required: !0
},
size: {
type: String,
default: "normal"
},
theme: {
type: String,
default: "light"
},
scriptId: {
type: String,
default: "recaptcha-script"
}
},
emits: ["verify", "error", "expire", "fail"],
setup(s, { expose: p, emit: l }) {
const a = h(null);
let c = null;
const t = s, n = l;
p({
execute() {
window.grecaptcha && c !== null && window.grecaptcha.execute(c);
},
reset() {
window.grecaptcha && c !== null && window.grecaptcha.reset(c);
},
cleanup: i
});
function o() {
window.grecaptcha && a.value && (c = window.grecaptcha.render(a.value, {
sitekey: t.sitekey,
theme: t.theme,
size: t.size,
callback: (e) => n("verify", e),
"expired-callback": () => n("expire"),
"error-callback": () => n("fail")
}));
}
function r() {
window.onloadRecaptchaCallback = o;
}
m(() => {
if (document.getElementById(t.scriptId))
o();
else {
const e = document.createElement("script");
e.id = t.scriptId, e.src = "https://www.google.com/recaptcha/api.js?onload=onloadRecaptchaCallback&render=explicit", e.async = !0, e.defer = !0, e.onerror = () => n("error"), document.head.appendChild(e), e.onload = r;
}
});
function i() {
const e = document.getElementById(t.scriptId);
e == null || e.remove(), a.value && (a.value.innerHTML = ""), delete window.onloadRecaptchaCallback, delete window.grecaptcha;
}
return f(() => {
i();
}), (e, d) => (w(), y("div", {
ref_key: "recaptchaDiv",
ref: a
}, null, 512));
}
}), x = /* @__PURE__ */ u({
__name: "HCaptcha",
props: {
sitekey: {
type: String,
required: !0
},
size: {
type: String,
default: "normal"
},
theme: {
type: String,
default: "light"
},
scriptId: {
type: String,
default: "hcaptcha-script"
}
},
emits: ["verify", "error", "expire", "fail"],
setup(s, { expose: p, emit: l }) {
const a = h(null);
let c = null;
const t = s, n = l;
p({
execute() {
window.hcaptcha && c !== null && window.hcaptcha.execute(c);
},
reset() {
window.hcaptcha && c !== null && window.hcaptcha.reset(c);
},
cleanup: i
});
function o() {
window.hcaptcha && a.value && (c = window.hcaptcha.render(a.value, {
sitekey: t.sitekey,
theme: t.theme,
size: t.size,
callback: (e) => n("verify", e),
"expired-callback": () => n("expire"),
"error-callback": () => n("fail")
}));
}
function r() {
window.onloadHcaptchaCallback = o;
}
m(() => {
if (document.getElementById(t.scriptId))
o();
else {
const e = document.createElement("script");
e.id = t.scriptId, e.src = "https://js.hcaptcha.com/1/api.js?onload=onloadHcaptchaCallback&render=explicit", e.async = !0, e.defer = !0, e.onerror = () => n("error"), document.head.appendChild(e), e.onload = r;
}
});
function i() {
const e = document.getElementById(t.scriptId);
e == null || e.remove(), a.value && (a.value.innerHTML = ""), delete window.onloadHcaptchaCallback, delete window.hcaptcha;
}
return f(() => {
i();
}), (e, d) => (w(), y("div", {
ref_key: "hcaptchaDiv",
ref: a
}, null, 512));
}
}), R = /* @__PURE__ */ u({
__name: "CaptchaSwitcher",
props: {
modelValue: {},
captchaName: {},
publicKey: {},
captchaScriptIds: {},
captchaReset: { type: Boolean },
theme: {},
size: {}
},
emits: ["update:modelValue", "captchaReset"],
setup(s, { emit: p }) {
const l = s, a = p, c = h(null), t = (r) => {
a("update:modelValue", r);
};
k(() => l.captchaReset, (r) => {
var i;
r && ((i = c.value) != null && i.reset) && (c.value.reset(), a("captchaReset"));
});
const n = (r) => {
const i = l.captchaScriptIds || {};
for (const [e, d] of Object.entries(i))
if (e !== r && d) {
const g = document.getElementById(d);
g && g.remove();
}
};
k(() => l.captchaName, (r) => {
n(r);
}), m(() => {
n(l.captchaName);
}), f(() => {
n("");
});
const o = v(() => ({
recaptcha: C,
hcaptcha: x,
turnstile: _
})[l.captchaName]);
return (r, i) => {
var e;
return w(), I(b(o.value), {
sitekey: r.publicKey,
theme: r.theme,
size: r.size,
"script-id": (e = r.captchaScriptIds) == null ? void 0 : e[r.captchaName],
onVerify: t,
ref_key: "captchaRef",
ref: c
}, null, 40, ["sitekey", "theme", "size", "script-id"]);
};
}
});
export {
R as default
};