friendly-challenge
Version:
The client code used for FriendlyCaptcha (widget script, html, styling and webworker solvers)
97 lines (78 loc) • 4.01 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>FriendlyCaptcha</title>
<script type="module" src="widget.module.min.js" defer async></script>
<script nomodule src="widget.min.js" defer async></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
}
.frc-captcha { /* Puts some space between the widgets below */
margin-top: 8px;
}
</style>
</head>
<body>
<!-- This index.html is used for e2e testing -->
<h3>Localization tests</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-lang="fr"></div>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-lang="de"></div>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-lang="nl"></div>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-lang="ja"></div>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-lang="he"></div>
<h4>This one has an invalid data-lang, it should fall back to English.</h4>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-lang="ww"></div>
<h3>Custom field name</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-solution-field-name="my-field-name"></div>
<h3>No hidden form field</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-solution-field-name="-"></div>
<h3>Invalid sitekey</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSABC"></div>
<h3>Invalid puzzle endpoint</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-puzzle-endpoint="https://example.com"></div>
<h3>Completely invalid endpoint</h3>
<div class="frc-captcha" data-lang="de" data-sitekey="FCMGEMUD2KTDSQ5H" data-puzzle-endpoint="https://www.example.com/api/v1/puzzle"></div>
<h3>Not allowed EU endpoint</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-puzzle-endpoint="https://eu-api.friendlycaptcha.eu/api/v1/puzzle"></div>
<div class="frc-captcha" data-lang="de" data-sitekey="FCMGEMUD2KTDSQ5H" data-puzzle-endpoint="https://eu-api.friendlycaptcha.eu/api/v1/puzzle"></div>
<h3>With fallback endpoint</h3>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-puzzle-endpoint="https://api.friendlycaptcha.com/api/v1/puzzle,https://eu-api.friendlycaptcha.eu/api/v1/puzzle"></div>
<hr>
<form>
<div class="frc-captcha" data-sitekey="FCMGEMUD2KTDSQ5H" data-callback="doneCallback"></div>
</form>
<button id="start-button">Start widget</button>
<button id="reset-button">Reset widget</button>
<button id="destroy-button">Destroy widget</button>
<button id="theme-button">Toggle dark theme</button>
<button id="lang-button">Set language to Vietnamese (reset required)</button>
<script>
function doneCallback() {
const doneEl = document.createElement("div")
doneEl.id = "frc-captcha-done-callback-generated-element";
doneEl.innerHTML = "Captcha done " + new Date().toISOString();
document.body.appendChild(doneEl);
}
document.querySelector("#start-button").addEventListener("click", function() {
friendlyChallenge.autoWidget.start();
});
document.querySelector("#reset-button").addEventListener("click", function() {
friendlyChallenge.autoWidget.reset();
});
document.querySelector("#destroy-button").addEventListener("click", function() {
friendlyChallenge.autoWidget.destroy();
});
document.querySelector("#lang-button").addEventListener("click", function() {
friendlyChallenge.autoWidget.loadLanguage("vi");
});
document.querySelector("#theme-button").addEventListener("click", function() {
[].forEach.call(document.querySelectorAll(".frc-captcha"), function(c) {
c.classList.toggle("dark")
});
});
</script>
</body>
</html>