nordabiz/DEBUG-PASSWORD-VALIDATION.md

🐛 Debug: Password Validation Checkboxes

Problem

Checkboxy nie zaznaczają się podczas wpisywania hasła.

Kroki Debugowania

1. HARD REFRESH Przeglądarki

Mac: Cmd + Shift + R Windows/Linux: Ctrl + Shift + R

Lub:

1. Otwórz DevTools (F12)
2. Kliknij prawym na przycisk Refresh
3. Wybierz "Empty Cache and Hard Reload"

---

2. Sprawdź Console (F12 → Console)

Po odświeżeniu strony powinno być:

🔧 Password validation loaded - Version 2025-11-24 14:00

Jeśli NIE MA → Przeglądarka wczytała starą wersję (cache problem)

---

3. Wpisz hasło i sprawdź Console

Podczas wpisywania powinno być:

Updating req-length: invalid
Updating req-upper: invalid
Updating req-lower: VALID    ← Gdy wpiszesz małą literę
Updating req-digit: invalid

Jeśli NIE MA logów → JavaScript się nie uruchomił

Jeśli JEST → JavaScript działa, problem jest z CSS

---

4. Sprawdź HTML w DevTools

1. F12 → Elements
2. Znajdź: <li id="req-lower" class="valid">
3. Sprawdź czy ma klasę .valid gdy wpisujesz małą literę

Jeśli MA klasę .valid → Problem z CSS Jeśli NIE MA klasy → Problem z JavaScript

---

5. Test w Console

Wklej to do Console (F12):

// Test checkbox update
const testLi = document.getElementById('req-lower');
testLi.classList.add('valid');
console.log('Added valid class - should turn green!');

Jeśli checkbox się zazielenia → CSS działa, problem z JavaScript Jeśli nic się nie stało → Problem z CSS

---

Możliwe Przyczyny

A. Cache Problem (najczęstszy)

Objaw: Stary kod w przeglądarce Rozwiązanie:

1. Ctrl+Shift+R (hard refresh)
2. Settings → Clear browsing data → Cached images and files
3. Zamknij i otwórz przeglądarkę

B. Flask nie wczytał nowego template

Objaw: Console pokazuje starą wersję lub brak logów Rozwiązanie:

# Restart Flask
cd ~/claude/projects/active/nordabiz
pkill -f "python.*app.py"
python3 app.py &

C. CSS nie załadowany

Objaw: JavaScript działa (logi w console) ale checkboxy nie zmieniają wyglądu Rozwiązanie: Sprawdź czy CSS block wczytał się (inspect element)

D. JavaScript error

Objaw: Console pokazuje błędy czerwone Rozwiązanie: Prześlij screenshot błędu

---

Quick Fix Test

Wklej to do Console aby przetestować CSS:

document.querySelectorAll('.password-requirements li').forEach(li => {
    li.classList.add('valid');
});

Wszystkie checkboxy powinny się zazielenić!

Jeśli nie → problem z CSS. Jeśli tak → problem z JavaScript event listener.

---

Ostateczny Test

Sprawdź computed styles dla checkbox:

1. F12 → Elements
2. Znajdź: <span class="checkbox-icon"></span>
3. Przejdź do Computed styles
4. Sprawdź:
   • width: 20px
   • height: 20px
   • border: 2px solid ...

Jeśli brakuje → CSS nie załadowany.

---

Kontakt

Jeśli nic nie pomaga, prześlij:

1. Screenshot Console (F12)
2. Screenshot Elements (pokazujący HTML)
3. Screenshot Computed styles

To pomoże zdiagnozować problem!