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

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) {
+    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 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 == 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) {
             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;
+    }
 }

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 */
+        /* Pasek siły hasła – dopasowany do Twojego stylu */
-        .strength-indicator {
+        #strengthBarContainer {
-            display: flex;
-            justify-content: space-between;
             width: min(92vw, 480px);
-            margin: 10px auto 6px;
+            margin: 10px auto 0;
+            height: 10px;
+            background: #e2e8f0;
+            border-radius: 8px;
+            overflow: hidden;
         }
 
-        .strength-dot {
+        #strengthBarFill {
-            flex: 1;
+            height: 100%;
-            height: 8px;
+            width: 0%;
-            margin: 0 3px;
+            background: var(--bad);
-            border-radius: 5px;
+            transition: width 200ms ease, background-color 200ms ease;
-            background-color: #e5e7eb; /* jasnoszary */
-            transition: background-color 0.3s ease;
         }
 
-        .strength-dot.active-1 { background-color: #dc2626; } /* bardzo słabe */
+        ul#tipsList {
-        .strength-dot.active-2 { background-color: #f97316; } /* słabe */
+            width: min(92vw, 480px);
-        .strength-dot.active-3 { background-color: #facc15; } /* średnie */
+            margin: 10px auto 0;
-        .strength-dot.active-4 { background-color: #22c55e; } /* silne */
+            padding-left: 20px;
-        .strength-dot.active-5 { background-color: #16a34a; } /* bardzo silne */
+            font-size: 14px;
+            color: var(--text);
+        }
     </style>
 </head>
 <body>
@@ -38,80 +40,36 @@
     <input type="password" id="password" autocomplete="off">
 </form>
 
-<!-- Pasek postępu -->
+<!-- Pasek siły hasła -->
-<div class="strength-indicator">
+<div id="strengthBarContainer">
-    <div class="strength-dot" id="dot1"></div>
+    <div id="strengthBarFill"></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>
 </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 bar = document.getElementById('strengthBarFill');
-    const dots = [
+    const tipsList = document.getElementById('tipsList');
-        document.getElementById('dot1'),
-        document.getElementById('dot2'),
-        document.getElementById('dot3'),
-        document.getElementById('dot4'),
-        document.getElementById('dot5')
-    ];
 
     let t;
     input.addEventListener('input', () => {
         clearTimeout(t);
         const val = input.value;
+
         if (!val) {
             out.textContent = '';
-            suggestion.textContent = '';
+            out.className = '';
-            dots.forEach(dot => dot.className = 'strength-dot');
+            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';
             }