# SPRINT 10.4 — LOGIN UI (Login + Register Component)

## METADATA
- Execution: Hodina 4
- Prerekvizity: Sprint 10.3 COMPLETE (React projekt setup)
- Deliverables: Login.tsx, AuthGuard, styling
- Estimated time: 45-55 min
- Output folder: /mnt/outputs/SKYMAILBOX_SPRINTS/SPRINT_10.3_FRONTEND_SETUP/skymailbox/src/pages/

## OBJECTIVES
Vytvořit kompletní Login/Register stránku pro SkyMailbox:
1. Login formulář s email + password
2. Register formulář s email + password + username
3. Toggle mezi login/register
4. Error handling a loading states
5. SKYNET branded design (dark theme, amber accent)
6. Redirect po úspěšném loginu

## STEP-BY-STEP INSTRUCTIONS

### Krok 1: Nahradit placeholder Login.tsx
**Soubor:** `src/pages/Login.tsx`

Kompletní login/register stránka:
- Celostránkový layout s centered card
- Background: SKYNET gradient nebo pattern
- Logo "SKYMAILBOX" nahoře
- Subtitle: "Secure Email for the SKYNET Ecosystem"
- Dva tabs: "Sign In" / "Create Account"

**Sign In tab:**
- Email input (type="email", placeholder="Email address")
- Password input (type="password", placeholder="Password")
- "Sign In" button (amber, full width)
- Loading spinner při submitu
- Error message display (červený text pod formulářem)

**Create Account tab:**
- Username input (min 3 chars)
- Email input
- Password input (min 8 chars)
- Confirm password input
- "Create Account" button
- Password match validation

**Funkce:**
- Použít `useAuthStore` pro login/register
- Po úspěšném login → `navigate('/inbox')`
- Pokud user už je přihlášen → redirect na /inbox
- Keyboard: Enter submits form
- Debounce submit button (prevent double-click)

**Styling (Tailwind classes):**
- Container: `min-h-screen bg-sky-bg flex items-center justify-center`
- Card: `bg-sky-card border border-sky-border rounded-xl p-8 w-full max-w-md shadow-2xl`
- Inputs: `w-full bg-sky-bg border border-sky-border rounded-lg px-4 py-3 text-sky-text placeholder-sky-muted focus:border-sky-accent focus:outline-none`
- Button: `w-full bg-sky-accent text-sky-bg font-semibold py-3 rounded-lg hover:bg-amber-400 transition-colors disabled:opacity-50`
- Tabs: `flex border-b border-sky-border mb-6` with active tab having `border-b-2 border-sky-accent text-sky-accent`

### Krok 2: Footer info
Pod formulář přidat:
- "Part of the SKYNET Ecosystem" text s linkem na skynet.genisys.online
- GENOM node status indicator (mock: zelená tečka + "Secure")
- Version: "SkyMailbox v1.0 · Sprint 10.4"

### Krok 3: Testovat
1. `npm run dev` → otevřít http://localhost:3000/login
2. Ověřit vizuál login formuláře
3. Ověřit toggle mezi Sign In / Create Account
4. Test s API (pokud dostupné) — register nového uživatele → login → redirect

### Krok 4: Screenshot
Pokud možné, vytvořit screenshot login stránky pro dokumentaci.

## COMPLETION CHECKLIST
- [ ] Login formulář renderuje správně
- [ ] Register formulář renderuje správně
- [ ] Tab toggle funguje
- [ ] Error handling zobrazuje chyby
- [ ] Loading state na submit buttonu
- [ ] Redirect na /inbox po loginu
- [ ] Already-logged-in redirect
- [ ] SKYNET branding (dark theme, amber)
- [ ] Responsive (mobile friendly)
- [ ] Build stále prochází

## DELIVERABLES LIST
1. `src/pages/Login.tsx` — kompletní login/register page
2. `SPRINT_10.4_COMPLETE.md`

## COMPLETION REPORT TEMPLATE
```markdown
# ✅ SPRINT 10.4 — LOGIN UI — COMPLETE

## Timestamp
[ISO datetime]

## Status
COMPLETE / FAILED

## Components Created/Modified
- Login.tsx (new)

## Visual Check
- Login form: OK/ISSUE
- Register form: OK/ISSUE
- Dark theme: OK/ISSUE
- Responsive: OK/ISSUE

## Auth Flow Test
- Register: PASS/FAIL
- Login: PASS/FAIL
- Redirect: PASS/FAIL

## Next Sprint
SPRINT_10.5_INBOX_UI
```