# AuthContext - Příklady použití

## 📦 Setup v aplikaci

Nejdříve obal celou aplikaci v `AuthProvider`:

```tsx
// main.tsx nebo App.tsx
import { AuthProvider } from "@/context/AuthContext";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        {/* Tady tvoje routes a komponenty */}
      </AuthProvider>
    </BrowserRouter>
  );
}
```

---

## 🔐 Login stránka

```tsx
import { useState } from "react";
import { useAuth } from "@/context/AuthContext";
import { useNavigate } from "react-router-dom";

export default function LoginPage() {
  const { login, isLoading } = useAuth();
  const navigate = useNavigate();
  
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");

    try {
      // Login automaticky nastaví cookies a načte user data
      await login({ username, password });
      navigate("/dashboard"); // Přesměruj po úspěšném přihlášení
    } catch (err: any) {
      setError(err.message);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Přihlášení</h1>
      
      {error && (
        <div className="mb-4 p-3 bg-red-100 text-red-700 rounded">
          {error}
        </div>
      )}
      
      <div className="mb-4">
        <label className="block mb-2 font-medium">Username nebo Email</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="username nebo email@example.com"
          className="w-full p-2 border rounded"
          required
        />
      </div>
      
      <div className="mb-6">
        <label className="block mb-2 font-medium">Heslo</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="••••••••"
          className="w-full p-2 border rounded"
          required
        />
      </div>
      
      <button
        type="submit"
        disabled={isLoading}
        className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 disabled:bg-gray-300"
      >
        {isLoading ? "Přihlašování..." : "Přihlásit se"}
      </button>
    </form>
  );
}
```

---

## 👤 Profilová stránka

```tsx
import { useAuth } from "@/context/AuthContext";
import { Navigate } from "react-router-dom";

export default function ProfilePage() {
  const { user, isAuthenticated, isLoading, logout } = useAuth();

  // Redirect pokud není přihlášen
  if (!isLoading && !isAuthenticated) {
    return <Navigate to="/login" />;
  }

  // Loading state
  if (isLoading) {
    return <div className="p-8">Načítání...</div>;
  }

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Můj profil</h1>
      
      <div className="bg-white p-6 rounded shadow">
        <div className="mb-4">
          <span className="font-medium">Username:</span> {user?.username}
        </div>
        <div className="mb-4">
          <span className="font-medium">Email:</span> {user?.email}
        </div>
        <div className="mb-4">
          <span className="font-medium">Jméno:</span> {user?.first_name} {user?.last_name}
        </div>
        <div className="mb-4">
          <span className="font-medium">Role:</span> {user?.role || "Uživatel"}
        </div>
        <div className="mb-4">
          <span className="font-medium">Email ověřen:</span> {user?.email_verified ? "✅ Ano" : "❌ Ne"}
        </div>
        <div className="mb-6">
          <span className="font-medium">Účet vytvořen:</span>{" "}
          {user?.create_time ? new Date(user.create_time).toLocaleDateString("cs-CZ") : "N/A"}
        </div>
        
        <button
          onClick={logout}
          className="bg-red-500 text-white px-6 py-2 rounded hover:bg-red-600"
        >
          Odhlásit se
        </button>
      </div>
    </div>
  );
}
```

---

## 🛡️ Protected Route (ochrana stránek)

```tsx
import { Navigate } from "react-router-dom";
import { useAuth } from "@/context/AuthContext";

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return <div className="p-8">Načítání...</div>;
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
}

// Použití v routes:
// <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
```

---

## 🧭 Navigace s uživatelem

```tsx
import { useAuth } from "@/context/AuthContext";
import { Link } from "react-router-dom";

export function Navbar() {
  const { user, isAuthenticated, logout } = useAuth();

  return (
    <nav className="bg-gray-800 text-white p-4">
      <div className="container mx-auto flex justify-between items-center">
        <Link to="/" className="text-xl font-bold">
          Vontor CZ
        </Link>
        
        <div className="flex gap-4 items-center">
          {isAuthenticated ? (
            <>
              <span>Ahoj, {user?.username}!</span>
              <Link to="/profile" className="hover:underline">
                Profil
              </Link>
              <button onClick={logout} className="hover:underline">
                Odhlásit
              </button>
            </>
          ) : (
            <>
              <Link to="/login" className="hover:underline">
                Přihlásit
              </Link>
              <Link to="/register" className="hover:underline">
                Registrovat
              </Link>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}
```

---

## 🔄 Manuální refresh uživatele

```tsx
import { useAuth } from "@/context/AuthContext";
import { useEffect } from "react";

export function SettingsPage() {
  const { user, refreshUser } = useAuth();

  // Po úpravě profilu obnov data
  async function handleUpdateProfile() {
    // ... ulož změny přes API
    
    // Pak obnov context
    await refreshUser();
  }

  return (
    <div>
      <h1>Nastavení profilu</h1>
      {/* formulář pro úpravu */}
      <button onClick={handleUpdateProfile}>Uložit změny</button>
    </div>
  );
}
```

---

## 📊 Podmíněné zobrazení podle role

```tsx
import { useAuth } from "@/context/AuthContext";

export function AdminPanel() {
  const { user } = useAuth();

  // Zobraz jen pro adminy
  if (user?.role !== "admin") {
    return <div>Nemáte oprávnění k přístupu.</div>;
  }

  return (
    <div>
      <h1>Admin Panel</h1>
      {/* Admin obsah */}
    </div>
  );
}
```

---

## 🔑 Dostupné API typy

### CustomTokenObtainPair (Login payload)
```typescript
{
  username: string;  // nebo email
  password: string;
}
```

### CustomUser (Response type)
```typescript
{
  id: number;
  username: string;
  email: string;
  first_name?: string;
  last_name?: string;
  role?: "admin" | "user" | ...;
  email_verified?: boolean;
  phone_number?: string | null;
  create_time: Date;
  city?: string | null;
  street?: string | null;
  postal_code?: string | null;
  gdpr: boolean;
  is_active?: boolean;
}
```

---

## ⚙️ AuthContext API

### `user: CustomUser | null`
Aktuálně přihlášený uživatel nebo `null`

### `isAuthenticated: boolean`
`true` pokud je uživatel přihlášen

### `isLoading: boolean`
`true` během načítání uživatele

### `login(payload: CustomTokenObtainPair): Promise<void>`
Přihlásit uživatele (nastaví cookies a načte data)

### `logout(): Promise<void>`
Odhlásit uživatele (smaže cookies)

### `refreshUser(): Promise<void>`
Znovu načti aktuální uživatelská data z API

---

## 🎯 Best Practices

1. **Vždy používej `isLoading`** pro zobrazení loading stavu
2. **Kontroluj `isAuthenticated`** před přístupem k chráněnému obsahu
3. **Zachyť chyby** při login (try/catch)
4. **Po úpravě profilu** zavolej `refreshUser()`
5. **Používej `ProtectedRoute`** pro ochranu celých stránek
