JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/@edgeworkscreative/pwned-password@latest/dist/pwned-password.js"></script>
<form>
<input type="email" name="email" placeholder="Email Address" autocomplete="email" />
<pwned-password name="password" placeholder="Enter your password"></pwned-password>
<input type="submit" value="Register" />
</form>
JavaScript
document.addEventListener('pwnedPasswordFound', (e) => {
if (e.detail === 0) {
let email = e.srcElement.parentElement.querySelector('input[name="email"]').value;
let password = e.srcElement.querySelector('input').value;
alert(`Password hasn't been pwned - submit your form`);
console.log(email);
} else {
alert(`Password has been pwned [[${e.detail}]] times!`);
}
});