88 lines
2.9 KiB
HTML
88 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>PassMetric</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" th:href="@{/css/password.css}">
|
|
</head>
|
|
<body>
|
|
<h1>Sprawdź siłę hasła</h1>
|
|
|
|
<form>
|
|
<label for="password">Hasło</label>
|
|
<input type="password" id="password" autocomplete="off">
|
|
</form>
|
|
|
|
<div class="message-wrapper">
|
|
<p id="liveMessage" class="message" aria-live="polite"></p>
|
|
<p id="leakMessage" class="message" aria-live="polite"></p>
|
|
</div>
|
|
<script>
|
|
const input = document.getElementById('password');
|
|
const out = document.getElementById('liveMessage');
|
|
const leakOut = document.getElementById('leakMessage');
|
|
|
|
let t;
|
|
input.addEventListener('input', () => {
|
|
clearTimeout(t);
|
|
const val = input.value;
|
|
if (!val) {
|
|
out.textContent = '';
|
|
leakOut.textContent = '';
|
|
out.className = 'message';
|
|
leakOut.className = 'message';
|
|
return;
|
|
}
|
|
|
|
t = setTimeout(async () => {
|
|
try {
|
|
const resp = await fetch('/api/password/strength', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: new URLSearchParams({ password: val })
|
|
});
|
|
if (!resp.ok) {
|
|
out.textContent = 'Błąd sprawdzania';
|
|
leakOut.textContent = '';
|
|
return;
|
|
}
|
|
const data = await resp.json();
|
|
out.textContent = data.message || '';
|
|
out.className = 'message';
|
|
switch (data.message) {
|
|
case "Bardzo słabe hasło":
|
|
out.classList.add("bad");
|
|
break;
|
|
case "Słabe hasło":
|
|
case "Średnie hasło":
|
|
out.classList.add("warn");
|
|
break;
|
|
case "Silne hasło":
|
|
case "Bardzo silne hasło":
|
|
out.classList.add("ok");
|
|
break;
|
|
}
|
|
|
|
if (data.leaked) {
|
|
leakOut.textContent = data.leaked || '';
|
|
leakOut.className = 'message';
|
|
switch (data.leaked) {
|
|
case "Hasło wyciekło!":
|
|
leakOut.classList.add("bad");
|
|
break;
|
|
case "Hasło nie występuje w wyciekach":
|
|
leakOut.classList.add("ok");
|
|
break;
|
|
}
|
|
}
|
|
} catch {
|
|
out.textContent = 'Błąd sieci';
|
|
leakOut.textContent = '';
|
|
}
|
|
}, 150);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|