839ca5461c
- Fixed LoginPage.js to use correct API endpoint (localhost:8000) - Fixed prop naming (onLoginSuccess → onLogin) - Fixed data structure mapping (voter.email → email, etc) - Removed duplicate src/ folder structure - Updated DashboardPage.js with proper API endpoints - Added lucide-react dependency - Fixed docker-compose and Dockerfile.backend for proper execution - Cleaned up console logs - System fully working with Docker deployment
274 lines
7.3 KiB
Markdown
274 lines
7.3 KiB
Markdown
# Frontend E-Voting System
|
|
|
|
Un frontend complet et moderne pour le système de vote électronique, construit avec React et un design professionnalresponsive.
|
|
|
|
## 🏗️ Structure du Projet
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── components/ # Composants réutilisables
|
|
│ │ ├── Header.jsx # Barre de navigation
|
|
│ │ ├── Footer.jsx # Pied de page
|
|
│ │ ├── VoteCard.jsx # Carte de vote
|
|
│ │ ├── Alert.jsx # Notifications
|
|
│ │ ├── Modal.jsx # Boîte de dialogue
|
|
│ │ ├── LoadingSpinner.jsx # Indicateur de chargement
|
|
│ │ ├── index.js # Export des composants
|
|
│ │ └── *.css # Styles des composants
|
|
│ │
|
|
│ ├── pages/ # Pages principales
|
|
│ │ ├── HomePage.jsx # Page d'accueil publique
|
|
│ │ ├── LoginPage.jsx # Connexion
|
|
│ │ ├── RegisterPage.jsx # Inscription
|
|
│ │ ├── DashboardPage.jsx # Tableau de bord (connecté)
|
|
│ │ ├── VotingPage.jsx # Page de vote
|
|
│ │ ├── ArchivesPage.jsx # Archives publiques
|
|
│ │ ├── ProfilePage.jsx # Profil utilisateur
|
|
│ │ ├── index.js # Export des pages
|
|
│ │ └── *.css # Styles des pages
|
|
│ │
|
|
│ ├── styles/ # Styles globaux
|
|
│ │ ├── globals.css # Thème et variables CSS
|
|
│ │ └── components.css # Styles des composants de base
|
|
│ │
|
|
│ ├── App.js # Application principale avec routage
|
|
│ ├── App.css # Styles de l'application
|
|
│ ├── index.js # Point d'entrée
|
|
│ └── index.css # Styles de base
|
|
│
|
|
└── package.json # Dépendances du projet
|
|
```
|
|
|
|
## 🎨 Palette de Couleurs
|
|
|
|
| Classe | Couleur | Utilisation |
|
|
|--------|---------|-------------|
|
|
| `--primary-dark` | #1e3a5f | Bleu foncé - Confiance, titres |
|
|
| `--primary-blue` | #2563eb | Bleu principal - Actions, liens |
|
|
| `--primary-light` | #3b82f6 | Bleu clair - Dégradés |
|
|
| `--success-green` | #10b981 | Vert - Succès, confirmations |
|
|
| `--warning-orange` | #f97316 | Orange - Alertes, actions urgentes |
|
|
| `--danger-red` | #ef4444 | Rouge - Erreurs, suppression |
|
|
| `--light-gray` | #f3f4f6 | Gris clair - Fond |
|
|
| `--white` | #ffffff | Blanc - Cartes, formulaires |
|
|
|
|
## 📱 Pages Disponibles
|
|
|
|
### Pages Publiques (accessibles sans connexion)
|
|
|
|
- **`/`** - Page d'accueil
|
|
- Section héros avec CTA
|
|
- "Comment ça marche" (3 étapes)
|
|
- Présentation des garanties
|
|
- Aperçu des votes récents
|
|
|
|
- **`/register`** - Inscription
|
|
- Formulaire de création de compte
|
|
- Validation des données
|
|
- Acceptation des CGU
|
|
|
|
- **`/login`** - Connexion
|
|
- Formulaire d'authentification
|
|
- Lien "Mot de passe oublié"
|
|
|
|
- **`/archives`** - Archives Publiques
|
|
- Liste de tous les votes terminés
|
|
- Recherche et filtrage
|
|
- Affichage des résultats
|
|
|
|
### Pages Privées (accessibles après connexion)
|
|
|
|
- **`/dashboard`** - Tableau de Bord
|
|
- Statistiques personnalisées (votes actifs, futurs, historique)
|
|
- Section "Action Requise" pour les votes urgents
|
|
- Filtrage par statut (all, actifs, futurs, historique)
|
|
|
|
- **`/vote/:id`** - Page de Vote
|
|
- Détails complets du vote
|
|
- Description et contexte
|
|
- Formulaire de sélection d'option
|
|
- Modal de confirmation
|
|
- Écran de succès après vote
|
|
|
|
- **`/profile`** - Profil Utilisateur
|
|
- Modification du nom et email
|
|
- Changement de mot de passe
|
|
- Déconnexion
|
|
|
|
## 🔄 Routage
|
|
|
|
```javascript
|
|
/ - Public
|
|
├── HomePage
|
|
├── /register - RegisterPage
|
|
├── /login - LoginPage
|
|
├── /archives - ArchivesPage
|
|
│
|
|
└── (Privé) Nécessite connexion
|
|
├── /dashboard - DashboardPage
|
|
├── /dashboard/actifs - DashboardPage (filtré)
|
|
├── /dashboard/futurs - DashboardPage (filtré)
|
|
├── /dashboard/historique - DashboardPage (filtré)
|
|
├── /vote/:id - VotingPage
|
|
└── /profile - ProfilePage
|
|
```
|
|
|
|
## 🚀 Démarrage Rapide
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
### Développement
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
L'application s'ouvrira sur `http://localhost:3000`
|
|
|
|
### Build pour la production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## 🧩 Composants Réutilisables
|
|
|
|
### Header
|
|
Barre de navigation avec logo, liens de navigation et profil utilisateur.
|
|
- Menu responsive sur mobile
|
|
- Navigation différente selon la connexion
|
|
|
|
### Footer
|
|
Pied de page avec liens, infos de contact et copyright.
|
|
|
|
### VoteCard
|
|
Affichage d'un vote sous forme de carte.
|
|
- Titre, description, statut
|
|
- Countdown (temps restant)
|
|
- Résultats (si terminé)
|
|
- Bouton d'action approprié
|
|
|
|
### Alert
|
|
Notifications avec types: success, error, warning, info.
|
|
- Icônes automatiques
|
|
- Fermeture possible
|
|
|
|
### Modal
|
|
Boîte de dialogue modale.
|
|
- Titre, contenu, actions
|
|
- Confirmation/Annulation
|
|
|
|
### LoadingSpinner
|
|
Indicateur de chargement.
|
|
- Version inline ou fullscreen
|
|
|
|
## 🎯 Fonctionnalités
|
|
|
|
✅ **Authentification**
|
|
- Inscription et connexion sécurisées
|
|
- Stockage du token JWT
|
|
- Vérification de session
|
|
|
|
✅ **Gestion des Votes**
|
|
- Affichage des votes par statut
|
|
- Participation au vote avec confirmation
|
|
- Visualisation des résultats
|
|
|
|
✅ **Profil Utilisateur**
|
|
- Modification des informations
|
|
- Changement de mot de passe
|
|
- Déconnexion sécurisée
|
|
|
|
✅ **Responsive Design**
|
|
- Mobile-first approach
|
|
- Grille fluide
|
|
- Media queries pour tous les appareils
|
|
|
|
✅ **Accessibilité**
|
|
- Contraste élevé
|
|
- Navigation au clavier
|
|
- Textes alternatifs
|
|
- Sémantique HTML
|
|
|
|
✅ **Performance**
|
|
- Code splitting
|
|
- Lazy loading des pages
|
|
- Optimisation des requêtes API
|
|
|
|
## 🎨 Design System
|
|
|
|
### Espacements
|
|
- `--spacing-xs`: 0.25rem
|
|
- `--spacing-sm`: 0.5rem
|
|
- `--spacing-md`: 1rem
|
|
- `--spacing-lg`: 1.5rem
|
|
- `--spacing-xl`: 2rem
|
|
- `--spacing-2xl`: 3rem
|
|
|
|
### Radius
|
|
- `--radius-sm`: 0.375rem
|
|
- `--radius-md`: 0.5rem
|
|
- `--radius-lg`: 0.75rem
|
|
- `--radius-xl`: 1rem
|
|
|
|
### Shadows
|
|
- `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
|
|
|
|
## 📞 API Integration
|
|
|
|
L'application communique avec le backend sur `http://localhost:8000`:
|
|
|
|
- `POST /auth/register` - Inscription
|
|
- `POST /auth/login` - Connexion
|
|
- `GET /elections/` - Lister les votes
|
|
- `GET /elections/{id}` - Détails d'un vote
|
|
- `POST /votes/submit` - Soumettre un vote
|
|
- `GET /votes/my-votes` - Mes votes
|
|
- `PUT /auth/profile` - Mise à jour profil
|
|
- `POST /auth/change-password` - Changer le mot de passe
|
|
|
|
## 🔐 Sécurité
|
|
|
|
- Tokens JWT stockés en localStorage
|
|
- Authentification requise pour les pages privées
|
|
- Redirection automatique vers login si non connecté
|
|
- Validation des formulaires côté client
|
|
- Protection des routes
|
|
|
|
## 📱 Responsive Breakpoints
|
|
|
|
- **Desktop**: > 1024px
|
|
- **Tablet**: 768px - 1024px
|
|
- **Mobile**: < 768px
|
|
|
|
## 🔄 État Global
|
|
|
|
État géré avec React Context et localStorage:
|
|
- Utilisateur connecté
|
|
- Token d'authentification
|
|
- Informations du voter
|
|
|
|
## 📦 Dépendances
|
|
|
|
- `react` - Framework
|
|
- `react-dom` - Rendu DOM
|
|
- `react-router-dom` - Routage
|
|
- `axios` - Requêtes HTTP
|
|
- `lucide-react` - Icônes
|
|
|
|
## 🛠️ Outils de Développement
|
|
|
|
- `react-scripts` - Configuration webpack
|
|
- Linter ESLint
|
|
- Formatage automatique (Prettier)
|
|
|
|
## 📄 License
|
|
|
|
Ce projet est sous licence MIT.
|