ADD: add password leaks check

src/main/resources/static/css/password.css

@@ -117,7 +117,7 @@ input[type="password"]:focus {
     }
 }
 
-#liveMessage {
+.message {
     width: min(92vw, 480px);
     margin: 12px auto 0;
     padding: 12px 14px;
@@ -129,54 +129,55 @@ input[type="password"]:focus {
     font-size: 14px;
     transition: all 200ms ease;
     opacity: 1;
+    min-height: 47px;
 }
 
 @media (prefers-color-scheme: dark) {
-    #liveMessage {
+    .message {
         background: rgba(30, 41, 59, 0.75);
         border-color: rgba(203, 213, 225, 0.2);
     }
 }
 
 /* Hide when empty */
-#liveMessage:empty {
-    display: none;
+.message:empty {
+    visibility: hidden;
 }
 
-#liveMessage.ok {
+.message.ok {
     border-color: var(--ok);
     background: color-mix(in oklab, var(--ok) 20%, rgba(241, 245, 249, 0.85));
     color: #15803d;
 }
 
 @media (prefers-color-scheme: dark) {
-    #liveMessage.ok {
+    .message.ok {
         background: color-mix(in oklab, var(--ok) 18%, rgba(30, 41, 59, 0.75));
         color: #86efac;
     }
 }
 
-#liveMessage.warn {
+.message.warn {
     border-color: var(--warn);
     background: color-mix(in oklab, var(--warn) 20%, rgba(241, 245, 249, 0.85));
     color: #c2410c;
 }
 
 @media (prefers-color-scheme: dark) {
-    #liveMessage.warn {
+    .message.warn {
         background: color-mix(in oklab, var(--warn) 18%, rgba(30, 41, 59, 0.75));
         color: #fdba74;
     }
 }
 
-#liveMessage.bad {
+.message.bad {
     border-color: var(--bad);
     background: color-mix(in oklab, var(--bad) 20%, rgba(241, 245, 249, 0.85));
     color: #b91c1c;
 }
 
 @media (prefers-color-scheme: dark) {
-    #liveMessage.bad {
+    .message.bad {
         background: color-mix(in oklab, var(--bad) 18%, rgba(30, 41, 59, 0.75));
         color: #fca5a5;
     }

src/main/resources/templates/password.html

@@ -14,17 +14,26 @@
     <input type="password" id="password" autocomplete="off">
 </form>
 
-<p id="liveMessage" aria-live="polite"></p>
-
+<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 = ''; return; }
+        if (!val) {
+            out.textContent = '';
+            leakOut.textContent = '';
+            out.className = 'message';
+            leakOut.className = 'message';
+            return;
+        }
 
         t = setTimeout(async () => {
             try {
@@ -33,29 +42,43 @@
                     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';
+                    leakOut.textContent = '';
+                    return;
+                }
                 const data = await resp.json();
                 out.textContent = data.message || '';
-                out.className = '';
+                out.className = 'message';
                 switch (data.message) {
                     case "Bardzo słabe hasło":
                         out.classList.add("bad");
                         break;
                     case "Słabe hasło":
-                        out.classList.add("warn");
-                        break;
                     case "Średnie hasło":
                         out.classList.add("warn");
                         break;
                     case "Silne hasło":
-                        out.classList.add("ok");
-                        break;
                     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);
     });