108 lines
3.4 KiB
HTML
108 lines
3.4 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>
|
||
|
||
<!-- Pasek siły hasła -->
|
||
<div id="strengthBarContainer">
|
||
<div id="strengthBarFill"></div>
|
||
</div>
|
||
|
||
<!-- Główny komunikat (słabe, średnie, silne itd.) -->
|
||
<p id="liveMessage" aria-live="polite"></p>
|
||
|
||
<!-- Podpowiedzi krok po kroku -->
|
||
<ul id="tipsList"></ul>
|
||
|
||
<script>
|
||
const input = document.getElementById('password');
|
||
const out = document.getElementById('liveMessage');
|
||
const bar = document.getElementById('strengthBarFill');
|
||
const tipsList = document.getElementById('tipsList');
|
||
|
||
let t;
|
||
input.addEventListener('input', () => {
|
||
clearTimeout(t);
|
||
const val = input.value;
|
||
|
||
if (!val) {
|
||
out.textContent = '';
|
||
out.className = '';
|
||
bar.style.width = "0%";
|
||
tipsList.innerHTML = '';
|
||
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';
|
||
return;
|
||
}
|
||
|
||
const data = await resp.json();
|
||
|
||
// Ustawiamy tekst siły hasła
|
||
out.textContent = data.strengthText || '';
|
||
out.className = '';
|
||
|
||
switch (data.strengthText) {
|
||
case "Bardzo słabe hasło":
|
||
out.classList.add("bad");
|
||
bar.style.background = "var(--bad)";
|
||
break;
|
||
case "Słabe hasło":
|
||
out.classList.add("warn");
|
||
bar.style.background = "var(--warn)";
|
||
break;
|
||
case "Średnie hasło":
|
||
out.classList.add("warn");
|
||
bar.style.background = "var(--warn)";
|
||
break;
|
||
case "Silne hasło":
|
||
out.classList.add("ok");
|
||
bar.style.background = "var(--ok)";
|
||
break;
|
||
case "Bardzo silne hasło":
|
||
out.classList.add("ok");
|
||
bar.style.background = "var(--ok)";
|
||
break;
|
||
}
|
||
|
||
// Pasek postępu (0–100%)
|
||
bar.style.width = (data.progress || 0) + "%";
|
||
|
||
// Podpowiedzi
|
||
tipsList.innerHTML = "";
|
||
(data.tips || []).forEach(tip => {
|
||
const li = document.createElement("li");
|
||
li.textContent = tip;
|
||
tipsList.appendChild(li);
|
||
});
|
||
|
||
} catch {
|
||
out.textContent = 'Błąd sieci';
|
||
}
|
||
}, 150);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|