change front to angular

README.md

 # DApp de Vote
 
-Cette application décentralisée (DApp) permet de gérer un système de vote transparent sur la blockchain Ethereum.
+Cette application décentralisée (DApp) permet de gérer un système de vote transparent sur la blockchain Ethereum. Elle implémente un processus de vote complet, depuis l'enregistrement des électeurs jusqu'au dépouillement des résultats.
 
 ## Fonctionnalités
 
 - Inscription des électeurs sur liste blanche par l'administrateur
 - Enregistrement des propositions par les électeurs inscrits
-- Vote pour les propositions préférées
+- Vote pour les propositions
+- Délégation de vote à d'autres électeurs
 - Comptabilisation automatique des votes
 - Vérification des résultats accessible à tous
+- Période limitée pour l'enregistrement des propositions et le vote
+
+## Technologies utilisées
+
+- **Smart Contract**: Solidity 0.8.20, OpenZeppelin
+- **Backend**: Hardhat (environnement de développement Ethereum)
+- **Frontend**: Angular 17
+- **Web3**: ethers.js v5.7
+- **Styling**: Bootstrap 5
 
 ## Structure du Projet
 
-- `contracts/` : Contient les smart contracts Solidity
-- `frontend/` : Application React pour l'interface utilisateur
+- `contracts/` : Smart contracts Solidity
+  - `Voting.sol` : Contrat principal de la DApp
+- `scripts/` : Scripts de déploiement et d'interaction avec le contrat
+  - `deploy.js` : Script pour déployer le contrat sur la blockchain
+- `frontend-angular/` : Interface utilisateur Angular
 - `test/` : Tests automatisés pour les smart contracts
 
-## Installation
+## Prérequis
+
+- Node.js v16+
+- npm v8+
+- MetaMask ou un autre portefeuille Ethereum installé dans votre navigateur
+
+## Installation et démarrage
+
+1. **Cloner le dépôt et installer les dépendances**
 
 ```bash
-# Installer les dépendances
+git clone <url-du-repo>
+cd voting-dapp
 npm install
+```
+
+2. **Compiler les smart contracts**
+
+```bash
+npm run compile
+```
+
+3. **Démarrer un nœud Ethereum local**
+
+```bash
+npm run node
+```
+
+Ce nœud local s'exécutera à l'adresse `http://127.0.0.1:8545`.
+
+4. **Déployer le contrat sur le nœud local**
+
+Dans un nouveau terminal, exécutez:
+
+```bash
+npm run deploy
+```
+
+Notez l'adresse du contrat déployé, vous en aurez besoin pour configurer le frontend.
+
+5. **Configurer et démarrer le frontend Angular**
+
+```bash
+cd frontend-angular
+npm install
+```
+
+Pour configurer l'adresse du contrat, ouvrez le fichier `src/app/services/contract.service.ts` et modifiez la ligne suivante avec l'adresse de votre contrat déployé:
+
+```javascript
+private contractAddress = '<ADRESSE_DU_CONTRAT_DÉPLOYÉ>';
+```
 
-# Démarrer le serveur de développement
+Puis démarrez l'application:
+
+```bash
 npm run dev
 ```
 
-## Déploiement
+L'application sera accessible à l'adresse `http://localhost:4200`.
+
+## Guide d'utilisation
+
+### 1. Connexion à MetaMask
+
+- Au démarrage de l'application, cliquez sur "Connecter votre portefeuille"
+- Autorisez la connexion dans MetaMask
+- Assurez-vous d'être sur le réseau local Hardhat (localhost:8545, Chain ID: 1337)
+
+### 2. Processus de vote
+
+Le processus de vote suit plusieurs étapes:
+
+#### Phase 1: Enregistrement des électeurs
+- Seul l'administrateur (le déployeur du contrat) peut enregistrer des électeurs
+- Entrez l'adresse Ethereum de chaque électeur dans le formulaire
+
+#### Phase 2: Enregistrement des propositions
+- L'administrateur démarre cette phase en spécifiant une durée en minutes
+- Les électeurs enregistrés peuvent soumettre des propositions
+
+#### Phase 3: Fin de l'enregistrement des propositions
+- L'administrateur termine cette phase manuellement ou la période expire automatiquement
+
+#### Phase 4: Session de vote
+- L'administrateur démarre la session en spécifiant une durée en minutes
+- Les électeurs peuvent voter pour une proposition ou déléguer leur vote
+
+#### Phase 5: Fin de la session de vote
+- L'administrateur termine cette phase manuellement ou la période expire automatiquement
+
+#### Phase 6: Dépouillement des votes
+- L'administrateur déclenche le comptage des votes
+- Les résultats sont visibles par tous les utilisateurs
+
+## Tests
+
+### Tests des smart contracts
+
+```bash
+npm test
+```
+
+Ces tests vérifient:
+- L'enregistrement des électeurs
+- Le cycle de vie du workflow
+- La soumission de propositions
+- Le processus de vote et de délégation
+- Le dépouillement des résultats
+
+### Tests manuels du frontend
+
+1. **Test du rôle administrateur**
+   - Utilisez le compte qui a déployé le contrat
+   - Vérifiez que vous pouvez enregistrer des électeurs et gérer le workflow
+
+2. **Test du rôle électeur**
+   - Connectez-vous avec un compte enregistré comme électeur
+   - Soumettez des propositions et votez
+
+3. **Test de l'utilisateur non autorisé**
+   - Connectez-vous avec un compte non enregistré
+   - Vérifiez que vous ne pouvez ni soumettre de propositions ni voter
+
+## Fonctionnalités supplémentaires
+
+1. **Limite de temps pour les phases**
+   - Les phases d'enregistrement des propositions et de vote ont des durées configurables
+   - Le système verrouille automatiquement les actions après expiration
+
+2. **Système de délégation de vote**
+   - Les électeurs peuvent déléguer leur vote à un autre électeur enregistré
+   - Vérification des boucles de délégation pour éviter les références circulaires
+
+## Utilisation en production
+
+Pour un déploiement en production, vous devrez:
+
+1. Modifier le fichier `hardhat.config.js` pour spécifier un réseau public (Mainnet, Goerli, etc.)
+2. Ajouter une clé privée sécurisée ou utiliser un gestionnaire de clés
+3. Déployer le contrat sur le réseau choisi
+4. Configurer le frontend avec la nouvelle adresse de contrat
+5. Déployer le frontend sur un service d'hébergement
 
-Lien vers le déploiement public : [à venir]
+## Dépannage
 
-## Démo
+### Problèmes courants
 
-Lien vers la vidéo de démo : [à venir]
+1. **Erreur "No such contract"**
+   - Vérifiez que le contrat est bien déployé
+   - Assurez-vous que l'adresse du contrat dans le frontend est correcte
 
-## Organisation du Projet
+2. **Erreur "Cannot estimate gas"**
+   - La transaction peut échouer à cause des règles du contrat
+   - Vérifiez que vous êtes dans la bonne phase du workflow
 
-Ce projet a été développé en suivant une architecture modulaire permettant de séparer clairement la logique de contrat de l'interface utilisateur.
+3. **MetaMask n'affiche pas la confirmation**
+   - Assurez-vous d'être sur le bon réseau (localhost:8545)
+   - Redémarrez MetaMask si nécessaire
 
-## Fonctionnalités Supplémentaires
+### Support
 
-1. Système de délégation de vote
-2. Possibilité de définir une date limite automatique pour les phases de vote 
\ No newline at end of file
+Pour toute question ou problème, veuillez ouvrir une issue sur le dépôt GitHub. 
\ No newline at end of file

frontend-angular/angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "voting-dapp-frontend-angular": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/voting-dapp-frontend-angular",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "voting-dapp-frontend-angular:build:production"
+            },
+            "development": {
+              "browserTarget": "voting-dapp-frontend-angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "voting-dapp-frontend-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+} 
\ No newline at end of file

frontend-angular/package.json

+{
+  "name": "voting-dapp-frontend-angular",
+  "version": "0.1.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "dev": "ng serve"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.1.0",
+    "@angular/common": "^17.1.0",
+    "@angular/compiler": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/forms": "^17.1.0",
+    "@angular/platform-browser": "^17.1.0",
+    "@angular/platform-browser-dynamic": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "ethers": "^5.7.2",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.1.1",
+    "@angular/cli": "^17.1.1",
+    "@angular/compiler-cli": "^17.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.3.2"
+  }
+} 
\ No newline at end of file

frontend-angular/src/app/app.component.html

+<div class="container-fluid py-4">
+  <app-header [account]="account" [isOwner]="isOwner"></app-header>
+  
+  <div class="container my-4">
+    <div class="row justify-content-center">
+      <div class="col-lg-10">
+        <!-- Alerte d'erreur -->
+        <div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
+          {{ error }}
+          <button type="button" class="btn-close" (click)="error = null"></button>
+        </div>
+        
+        <!-- Chargement global -->
+        <div *ngIf="loading" class="text-center my-4">
+          <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Chargement...</span>
+          </div>
+          <p class="mt-2">Traitement en cours...</p>
+        </div>
+        
+        <!-- Connexion au portefeuille si déconnecté -->
+        <div *ngIf="!isConnected" class="card">
+          <div class="card-body text-center p-5">
+            <app-connect-wallet></app-connect-wallet>
+          </div>
+        </div>
+        
+        <!-- Contenu principal si connecté -->
+        <div *ngIf="isConnected" class="fade-in">
+          <!-- Statut du workflow -->
+          <app-workflow-status 
+            [currentStatus]="currentStatus" 
+            [isOwner]="isOwner">
+          </app-workflow-status>
+          
+          <!-- Gestion des électeurs (admin uniquement, workflow 0) -->
+          <app-voter-management 
+            *ngIf="isOwner && currentStatus === '0'"
+            [currentStatus]="currentStatus">
+          </app-voter-management>
+          
+          <!-- Gestion des propositions (électeurs inscrits, workflow 1) -->
+          <app-proposal-management 
+            *ngIf="isVoter && currentStatus === '1'"
+            [currentStatus]="currentStatus">
+          </app-proposal-management>
+          
+          <!-- Session de vote (électeurs inscrits, workflow 3) -->
+          <app-voting-session 
+            *ngIf="isVoter && (currentStatus === '3' || currentStatus === '5')"
+            [currentStatus]="currentStatus">
+          </app-voting-session>
+          
+          <!-- Message si pas d'action disponible -->
+          <div *ngIf="!isOwner && !isVoter" class="card">
+            <div class="card-body text-center p-4">
+              <h4>Accès limité</h4>
+              <p>Votre adresse n'est pas enregistrée comme électeur pour cette session de vote.</p>
+              <p>Veuillez contacter l'administrateur pour être ajouté à la liste des électeurs.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> 
\ No newline at end of file

frontend-angular/src/app/app.component.scss

+/* Styles spécifiques au composant App */ 
\ No newline at end of file

frontend-angular/src/app/app.component.ts

+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ContractService } from './services/contract.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit, OnDestroy {
+  title = 'DApp de Vote';
+  
+  isConnected = false;
+  account: string | null = null;
+  isOwner = false;
+  isVoter = false;
+  currentStatus = '0';
+  loading = false;
+  error: string | null = null;
+  
+  private subscriptions: Subscription[] = [];
+  
+  constructor(private contractService: ContractService) {}
+  
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.contractService.account$.subscribe(account => {
+        this.account = account;
+        this.isConnected = !!account;
+      }),
+      
+      this.contractService.isOwner$.subscribe(isOwner => {
+        this.isOwner = isOwner;
+      }),
+      
+      this.contractService.isVoter$.subscribe(isVoter => {
+        this.isVoter = isVoter;
+      }),
+      
+      this.contractService.currentStatus$.subscribe(status => {
+        this.currentStatus = status;
+      }),
+      
+      this.contractService.loading$.subscribe(loading => {
+        this.loading = loading;
+      }),
+      
+      this.contractService.error$.subscribe(error => {
+        this.error = error;
+      })
+    );
+  }
+  
+  ngOnDestroy(): void {
+    // Désabonnement de tous les observables
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+} 
\ No newline at end of file

frontend-angular/src/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+import { HeaderComponent } from './components/header/header.component';
+import { ConnectWalletComponent } from './components/connect-wallet/connect-wallet.component';
+import { WorkflowStatusComponent } from './components/workflow-status/workflow-status.component';
+import { VoterManagementComponent } from './components/voter-management/voter-management.component';
+import { ProposalManagementComponent } from './components/proposal-management/proposal-management.component';
+import { VotingSessionComponent } from './components/voting-session/voting-session.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeaderComponent,
+    ConnectWalletComponent,
+    WorkflowStatusComponent,
+    VoterManagementComponent,
+    ProposalManagementComponent,
+    VotingSessionComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { } 
\ No newline at end of file

frontend-angular/src/app/components/header/header.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent {
+  @Input() account: string | null = null;
+ 
\ No newline at end of file

frontend-angular/src/index.html

+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>DApp de Vote - Système de vote décentralisé</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html> 
\ No newline at end of file

frontend-angular/src/main.ts

+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err)); 
\ No newline at end of file

frontend-angular/src/styles.scss

+/* Styles globaux */
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f8f9fa;
+  color: #333;
+}
+
+.gradient-custom {
+  background: linear-gradient(to right, #667eea, #764ba2);
+}
+
+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+.card-header {
+  background-color: #f1f5fb;
+  border-bottom: 1px solid #e3e6f0;
+  padding: 15px 20px;
+}
+
+.btn-primary {
+  background-color: #667eea;
+  border-color: #667eea;
+}
+
+.btn-primary:hover {
+  background-color: #5a6acf;
+  border-color: #5a6acf;
+}
+
+.alert {
+  border-radius: 8px;
+  margin-bottom: 15px;
+}
+
+.form-control:focus {
+  border-color: #a496e9;
+  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+}
+
+.badge-success {
+  background-color: #28a745;
+}
+
+.badge-danger {
+  background-color: #dc3545;
+}
+
+.badge-warning {
+  background-color: #ffc107;
+}
+
+.badge-info {
+  background-color: #17a2b8;
+}
+
+/* Animation pour les transitions d'état */
+.fade-in {
+  animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Étiquettes de statut workflow */
+.status-badge {
+  padding: 8px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 5px;
+} 
\ No newline at end of file

frontend-angular/tsconfig.app.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+} 
\ No newline at end of file

frontend-angular/tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+} 
\ No newline at end of file

frontend-angular/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+} 
\ No newline at end of file

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "hardhat test",
-    "dev": "cd frontend && npm run dev",
+    "dev": "cd frontend-angular && npm run dev",
     "compile": "hardhat compile",
     "deploy": "hardhat run scripts/deploy.js --network localhost",
     "node": "hardhat node"

script-frontend.bat

+@echo off
+echo ===== Nettoyage de l'installation existante =====
+cd frontend
+rmdir /s /q node_modules
+del package-lock.json
+
+echo ===== Nettoyage du cache npm =====
+npm cache clean --force
+
+echo ===== Installation des packages avec option de compatibilité =====
+npm install --legacy-peer-deps
+
+echo ===== Installation spécifique des modules manquants =====
+npm install schema-utils prompts webpack webpack-dev-server react-dev-utils --save-dev --legacy-peer-deps
+
+echo ===== Vérification et installation des dépendances principales =====
+npm install react react-dom ethers@5.7.2 web3 web3modal --legacy-peer-deps
+
+echo ===== Réparation des modules cassés =====
+npm rebuild
+
+echo ===== Installation terminée =====
+echo Pour démarrer l'application, exécutez: npm start
+cd ..
\ No newline at end of file