sortifal/CIA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
CIA/e-voting-system/frontend/README_FRONTEND.md
E-Voting Developer 839ca5461c Fix: Login system and clean up duplicate src/ folder 
- 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
2025-11-05 23:25:43 +01:00

7.3 KiB
Raw Blame History

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

/ - 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

cd frontend
npm install

Développement

npm start

L'application s'ouvrira sur http://localhost:3000

Build pour la production

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.