@mathiscode/password-leak
Version:
A library to check for compromised passwords
63 lines (58 loc) • 3.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fast Secure Password Checker - Data Breach and Strength Information</title>
<link rel="stylesheet" href="ui.css">
<script type="module" src="ui.js"></script>
<script src="https://unpkg.com/@tsparticles/confetti@3.8.1/tsparticles.confetti.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card" style="text-align: center;">
<h1>Password Checker</h1>
<p class="description">Check if your password has been exposed in data breaches as well as its strength</p>
<div class="input-group">
<input type="password"
id="passwordInput"
placeholder="Enter your password"
autocomplete="new-password">
<button class="visibility-toggle" type="button">
<span class="icon">👁️</span>
</button>
</div>
<button id="checkButton" class="check-button">
<span class="button-text">Check Password</span>
<div class="spinner"></div>
</button>
<div class="password-strength">
<div class="password-strength-bar">
<div class="password-strength-bar-fill"></div>
</div>
<div class="password-strength-text"></div>
</div>
<div class="result" id="result">
<div class="result-icon"></div>
<p class="result-text"></p>
</div>
</div>
<footer>
<p>Made with ❤️ by <a href="https://github.com/mathiscode/sponsors" target="_blank">Jay Mathis</a></p>
<a href="https://www.npmjs.com/package/@mathiscode/password-leak" class="npm-link" target="_blank">
<svg height="20" width="20" viewBox="0 0 24 24" class="npm-icon">
<path fill="currentColor" d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"/>
</svg>
npm install @mathiscode/password-leak
</a>
<a href="https://github.com/mathiscode/password-leak" class="github-link" target="_blank">
<svg height="20" width="20" viewBox="0 0 16 16" class="github-icon">
<path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
View the source code on GitHub
</a>
<a href="https://haveibeenpwned.com/api/v3#PwnedPasswords" class="info-link" target="_blank">How is this safe?</a>
</footer>
</div>
</body>
</html>