# 🐛 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):
```javascript
// 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**:
```bash
# 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:
```javascript
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!
