Pasek siły hasła oraz podpowiedzi do stworzenia silnego hasła

2025-11-19 21:10:56 +01:00
parent 5b719d6e33
commit 3588e67aff
2 changed files with 117 additions and 88 deletions
--- a/src/main/java/iz/_11a/passmetric/PasswordController.java
+++ b/src/main/java/iz/_11a/passmetric/PasswordController.java
@@ -3,7 +3,7 @@ package iz._11a.passmetric;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;

-import java.util.Map;
+import java.util.*;

@Controller
 public class PasswordController {
@@ -15,19 +15,38 @@ public class PasswordController {

    @PostMapping(path = "/api/password/strength")
    @ResponseBody
-    public Map<String, String> checkPasswordLive(@RequestParam("password") String password) {
-        return Map.of("message", analyze(password));
+    public Map<String, Object> checkPasswordLive(@RequestParam("password") String 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 0–100%
+        response.put("tips", tips);
+
+        return response;
    }

-    private String analyze(String password) {
+    // ------------------------------------------
+    // Ocena siły hasła
+    // ------------------------------------------
+    private int calculateScore(String password) {
        int score = 0;
-        if (password != null) {
-            if (password.matches(".*[a-z].*")) score++;
-            if (password.matches(".*[A-Z].*")) score++;
-            if (password.matches(".*[0-9].*")) score++;
-            if (password.matches(".*[@$!%*?&#].*")) score++;
-            if (password.length() >= 8) score++;
-        }
+        if (password == null || password.isEmpty()) return 0;
+
+        if (password.matches(".*[a-z].*")) score++;
+        if (password.matches(".*[A-Z].*")) score++;
+        if (password.matches(".*[0-9].*")) score++;
+        if (password.matches(".*[@$!%*?&#].*")) score++;
+        if (password.length() >= 12) score++;
+
+        return score;
+    }
+
+    private String strengthText(int score) {
        return switch (score) {
            case 5 -> "Bardzo silne hasło";
            case 4 -> "Silne hasło";
@@ -36,4 +55,31 @@ public class PasswordController {
            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;
+    }
 }
--- a/src/main/resources/templates/password.html
+++ b/src/main/resources/templates/password.html
@@ -6,28 +6,30 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/css/password.css}">
    <style>
-        /* Pasek postępu siły hasła */
-        .strength-indicator {
-            display: flex;
-            justify-content: space-between;
+        /* Pasek siły hasła – dopasowany do Twojego stylu */
+        #strengthBarContainer {
            width: min(92vw, 480px);
-            margin: 10px auto 6px;
+            margin: 10px auto 0;
+            height: 10px;
+            background: #e2e8f0;
+            border-radius: 8px;
+            overflow: hidden;
        }

-        .strength-dot {
-            flex: 1;
-            height: 8px;
-            margin: 0 3px;
-            border-radius: 5px;
-            background-color: #e5e7eb; /* jasnoszary */
-            transition: background-color 0.3s ease;
+        #strengthBarFill {
+            height: 100%;
+            width: 0%;
+            background: var(--bad);
+            transition: width 200ms ease, background-color 200ms ease;
        }

-        .strength-dot.active-1 { background-color: #dc2626; } /* bardzo słabe */
-        .strength-dot.active-2 { background-color: #f97316; } /* słabe */
-        .strength-dot.active-3 { background-color: #facc15; } /* średnie */
-        .strength-dot.active-4 { background-color: #22c55e; } /* silne */
-        .strength-dot.active-5 { background-color: #16a34a; } /* bardzo silne */
+        ul#tipsList {
+            width: min(92vw, 480px);
+            margin: 10px auto 0;
+            padding-left: 20px;
+            font-size: 14px;
+            color: var(--text);
+        }
    </style>
 </head>
 <body>
@@ -38,80 +40,36 @@
    <input type="password" id="password" autocomplete="off">
 </form>

-<!-- Pasek postępu -->
-<div class="strength-indicator">
-    <div class="strength-dot" id="dot1"></div>
-    <div class="strength-dot" id="dot2"></div>
-    <div class="strength-dot" id="dot3"></div>
-    <div class="strength-dot" id="dot4"></div>
-    <div class="strength-dot" id="dot5"></div>
+<!-- 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="suggestion" style="text-align:center; color: var(--muted); font-size: 14px; margin-top: 6px;"></p>
+
+<!-- Podpowiedzi krok po kroku -->
+<ul id="tipsList"></ul>

 <script>
    const input = document.getElementById('password');
    const out = document.getElementById('liveMessage');
-    const suggestion = document.getElementById('suggestion');
-    const dots = [
-        document.getElementById('dot1'),
-        document.getElementById('dot2'),
-        document.getElementById('dot3'),
-        document.getElementById('dot4'),
-        document.getElementById('dot5')
-    ];
+    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 = '';
-            suggestion.textContent = '';
-            dots.forEach(dot => dot.className = 'strength-dot');
+            out.className = '';
+            bar.style.width = "0%";
+            tipsList.innerHTML = '';
            return;
        }

-        // Ocena hasła (lokalna)
-        let score = 0;
-        const hasLower = /[a-z]/.test(val);
-        const hasUpper = /[A-Z]/.test(val);
-        const hasNumber = /[0-9]/.test(val);
-        const hasSymbol = /[@$!%*?&#]/.test(val);
-        const longEnough = val.length >= 8;
-
-        if (hasLower) score++;
-        if (hasUpper) score++;
-        if (hasNumber) score++;
-        if (hasSymbol) score++;
-        if (longEnough) score++;
-
-        // Aktualizacja kropek
-        dots.forEach((dot, i) => {
-            dot.className = 'strength-dot';
-            if (i < score) dot.classList.add(`active-${score}`);
-        });
-
-        // Stopniowe podpowiedzi
-        let tip = "";
-        if (!hasLower) {
-            tip = "Zacznij od dodania małych liter, np. a–z.";
-        } else if (hasLower && !hasUpper) {
-            tip = "Spróbuj dodać dużą literę, np. A–Z.";
-        } else if (hasLower && hasUpper && !hasNumber) {
-            tip = "Dodaj cyfrę, np. 3 lub 7.";
-        } else if (hasLower && hasUpper && hasNumber && !hasSymbol) {
-            tip = "Dodaj znak specjalny, np. !, @, # lub $.";
-        } else if (hasLower && hasUpper && hasNumber && hasSymbol && !longEnough) {
-            tip = "Hasło jest dobre — wydłuż je do co najmniej 8 znaków, by było silniejsze.";
-        } else {
-            tip = "Świetnie! Twoje hasło jest bardzo silne 💪";
-        }
-
-        suggestion.textContent = tip;
-
-        // Wysłanie do backendu (do oceny)
        t = setTimeout(async () => {
            try {
                const resp = await fetch('/api/password/strength', {
@@ -119,27 +77,52 @@
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    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();
-                out.textContent = data.message || '';
+
+                // Ustawiamy tekst siły hasła
+                out.textContent = data.strengthText || '';
                out.className = '';
-                switch (data.message) {
+
+                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';
            }