Usage no npm install needed!

<script type="module">
  import edgeworkscreativePwnedPassword from 'https://cdn.skypack.dev/@edgeworkscreative/pwned-password';
</script>

README

Pwned Password Component

Web component built with Stencil that utilizes the Have I Been Pwned API to prevent the use of passwords found in previous data breaches.

Only the first 5 characters of the SHA-1 hash are sent to Have I Been Pwned.

DEMO

Using the Pwned Password component on your site

Simply place this script tag in the <head> of your website:

<script src="https://unpkg.com/@edgeworkscreative/pwned-password@latest/dist/pwned-password.js"></script>

Now you can use the component anywhere in the body of your site:

<pwned-password name="password" placeholder="Enter your password"></pwned-password>

document.addEventListener('pwnedPasswordFound', (e) => {
  if (e.detail === 0) {
    let password =  e.srcElement.querySelector('input').value;
    console.log('Password hasn\'t been pwned - submit your form');
  } else {
    alert(`Password has been pwned ${e.detail} times!`);
  }
})