Vai al contenuto

Architettura Frontend

Struttura Directory

frontend/src/
├── App.tsx              ← Router principale, wrapper provider
├── main.tsx             ← Entry point, monta i provider globali
├── pages/               ← Pagine (una cartella per area funzionale)
│   ├── auth/            ← Login, Reset Password, Setup Account
│   └── admin/           ← Pannello amministrazione
├── components/
│   ├── layout/          ← Shell, Sidebar, Header
│   ├── ui/              ← Componenti UI atomici
│   ├── admin/           ← Componenti pannello admin
│   ├── calendar/        ← Componenti calendario
│   ├── common/          ← Componenti trasversali
│   └── modals/          ← Modali riutilizzabili
├── contexts/            ← State globale via React Context
│   ├── AuthContext.tsx      ← Utente autenticato, token, login/logout
│   ├── ThemeContext.tsx     ← Tema chiaro/scuro
│   ├── NotificationContext.tsx ← Notifiche UI
│   ├── ModalContext.tsx     ← Gestione modali globale
│   └── PrivacyContext.tsx   ← Modalità privacy
├── services/            ← Chiamate API (un file per modulo)
├── locales/             ← Traduzioni i18n (italiano)
└── utils/               ← Utility pure

AuthContext

Gestisce lo stato di autenticazione globale dell'applicazione.

// Cosa espone
{
  user: User | null,
  isAuthenticated: boolean,
  isLoading: boolean,
  login(email, password): Promise<LoginResult>,
  logout(): void,
  checkAuth(): Promise<User | null>
}

Flusso di avvio:

  1. Al mount, controlla localStorage per un token esistente
  2. Se trovato → inietta in axios.defaults.headers e chiama checkAuth()
  3. checkAuth() chiama GET /api/auth/profile per validare il token e caricare l'utente
  4. Se il token non è valido → logout() automatico

Gestione Token

// Salvataggio dopo login
localStorage.setItem('access_token', data.access_token);
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

// Rimozione al logout
localStorage.removeItem('access_token');
delete axios.defaults.headers.common['Authorization'];

ProtectedRoute

Componente che avvolge le route che richiedono autenticazione. Reindirizza a /login se !isAuthenticated. Salva il path originale in sessionStorage per il redirect post-login.

AxiosInterceptor

Interceptor globale per le risposte HTTP:

  • 401 → logout automatico + redirect a /login
  • Altri errori → propagati al componente per gestione locale

Auto-Update

AutoUpdate.tsx controlla periodicamente version.json per rilevare nuove versioni deployate. Se rileva una nuova versione, notifica l'utente che può ricaricare la pagina.

Nginx è configurato per non caching di index.html e version.json — garanzia che l'utente veda sempre la versione più recente al ricaricamento.

Temi

ThemeContext gestisce tema chiaro/scuro con persistenza nelle preferenze utente.

Servizi API

Un file di servizio per ogni modulo in services/. Ogni servizio usa Axios (con il token già iniettato a livello globale) per comunicare con il backend su /api/.

Esempi: finance.service.ts, calendar.service.ts, entities.service.ts