Merge remote-tracking branch 'origin/password-feedback'

This commit is contained in:
2025-11-21 10:54:45 +01:00
2 changed files with 130 additions and 15 deletions

View File

@@ -3,7 +3,7 @@ package iz._11a.passmetric;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
import java.util.Map; import java.util.*;
@Controller @Controller
public class PasswordController { public class PasswordController {
@@ -15,19 +15,38 @@ public class PasswordController {
@PostMapping(path = "/api/password/strength") @PostMapping(path = "/api/password/strength")
@ResponseBody @ResponseBody
public Map<String, String> checkPasswordLive(@RequestParam("password") String password) { public Map<String, Object> checkPasswordLive(@RequestParam("password") String password) {
return Map.of("message", analyze(password));
Map<String, Object> response = new HashMap<>();
int score = calculateScore(password);
String strengthText = strengthText(score);
List<String> tips = generateTips(password);
response.put("strengthText", strengthText);
response.put("progress", score * 20); // pasek postępu 0100%
response.put("tips", tips);
return response;
} }
private String analyze(String password) { // ------------------------------------------
// Ocena siły hasła
// ------------------------------------------
private int calculateScore(String password) {
int score = 0; int score = 0;
if (password != null) { if (password == null || password.isEmpty()) return 0;
if (password.matches(".*[a-z].*")) score++;
if (password.matches(".*[A-Z].*")) score++; if (password.matches(".*[a-z].*")) score++;
if (password.matches(".*[0-9].*")) score++; if (password.matches(".*[A-Z].*")) score++;
if (password.matches(".*[@$!%*?&#].*")) score++; if (password.matches(".*[0-9].*")) score++;
if (password.length() >= 8) score++; if (password.matches(".*[@$!%*?&#].*")) score++;
} if (password.length() >= 12) score++;
return score;
}
private String strengthText(int score) {
return switch (score) { return switch (score) {
case 5 -> "Bardzo silne hasło"; case 5 -> "Bardzo silne hasło";
case 4 -> "Silne hasło"; case 4 -> "Silne hasło";
@@ -36,4 +55,31 @@ public class PasswordController {
default -> "Bardzo słabe hasło"; default -> "Bardzo słabe hasło";
}; };
} }
// ------------------------------------------
// Stopniowe podpowiedzi
// ------------------------------------------
private List<String> generateTips(String password) {
List<String> tips = new ArrayList<>();
if (password == null || password.isEmpty()) {
tips.add("Wpisz hasło, aby rozpocząć analizę.");
return tips;
}
if (!password.matches(".*[A-Z].*"))
tips.add("Dodaj co najmniej jedną dużą litere.");
if (!password.matches(".*[0-9].*"))
tips.add("Dodaj co najmniej jedną cyfre.");
if (!password.matches(".*[@$!%*?&#].*"))
tips.add("Dodaj co najmniej jeden znnak specjalny (np. ! @ # $).");
if (password.length() < 12)
tips.add("Wydłuż hasło do co najmniej 12 znaków.");
if (tips.isEmpty())
tips.add("Świetnie! Twoje hasło jest bardzo silne.");
return tips;
}
} }

View File

@@ -5,6 +5,32 @@
<title>PassMetric</title> <title>PassMetric</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" th:href="@{/css/password.css}"> <link rel="stylesheet" th:href="@{/css/password.css}">
<style>
/* Pasek siły hasła dopasowany do Twojego stylu */
#strengthBarContainer {
width: min(92vw, 480px);
margin: 10px auto 0;
height: 10px;
background: #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
#strengthBarFill {
height: 100%;
width: 0%;
background: var(--bad);
transition: width 200ms ease, background-color 200ms ease;
}
ul#tipsList {
width: min(92vw, 480px);
margin: 10px auto 0;
padding-left: 20px;
font-size: 14px;
color: var(--text);
}
</style>
</head> </head>
<body> <body>
<h1>Sprawdź siłę hasła</h1> <h1>Sprawdź siłę hasła</h1>
@@ -14,17 +40,35 @@
<input type="password" id="password" autocomplete="off"> <input type="password" id="password" autocomplete="off">
</form> </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> <p id="liveMessage" aria-live="polite"></p>
<!-- Podpowiedzi krok po kroku -->
<ul id="tipsList"></ul>
<script> <script>
const input = document.getElementById('password'); const input = document.getElementById('password');
const out = document.getElementById('liveMessage'); const out = document.getElementById('liveMessage');
const bar = document.getElementById('strengthBarFill');
const tipsList = document.getElementById('tipsList');
let t; let t;
input.addEventListener('input', () => { input.addEventListener('input', () => {
clearTimeout(t); clearTimeout(t);
const val = input.value; const val = input.value;
if (!val) { out.textContent = ''; return; }
if (!val) {
out.textContent = '';
out.className = '';
bar.style.width = "0%";
tipsList.innerHTML = '';
return;
}
t = setTimeout(async () => { t = setTimeout(async () => {
try { try {
@@ -33,27 +77,52 @@
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ password: val }) body: new URLSearchParams({ password: val })
}); });
if (!resp.ok) { out.textContent = 'Błąd sprawdzania'; return; }
if (!resp.ok) {
out.textContent = 'Błąd sprawdzania';
return;
}
const data = await resp.json(); const data = await resp.json();
out.textContent = data.message || '';
// Ustawiamy tekst siły hasła
out.textContent = data.strengthText || '';
out.className = ''; out.className = '';
switch (data.message) {
switch (data.strengthText) {
case "Bardzo słabe hasło": case "Bardzo słabe hasło":
out.classList.add("bad"); out.classList.add("bad");
bar.style.background = "var(--bad)";
break; break;
case "Słabe hasło": case "Słabe hasło":
out.classList.add("warn"); out.classList.add("warn");
bar.style.background = "var(--warn)";
break; break;
case "Średnie hasło": case "Średnie hasło":
out.classList.add("warn"); out.classList.add("warn");
bar.style.background = "var(--warn)";
break; break;
case "Silne hasło": case "Silne hasło":
out.classList.add("ok"); out.classList.add("ok");
bar.style.background = "var(--ok)";
break; break;
case "Bardzo silne hasło": case "Bardzo silne hasło":
out.classList.add("ok"); out.classList.add("ok");
bar.style.background = "var(--ok)";
break; break;
} }
// Pasek postępu (0100%)
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 { } catch {
out.textContent = 'Błąd sieci'; out.textContent = 'Błąd sieci';
} }