diff --git a/client/package-lock.json b/client/package-lock.json
index e2a1c85d4a939f1c6db371d7e839a748a10427dd..7ae5daca251aa31d530ecfdc89fe9f25f43a70c0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,7 @@
"name": "truffle-client",
"version": "0.1.0",
"dependencies": {
+ "bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web3": "^1.10.2"
@@ -2664,6 +2665,16 @@
"node": ">= 8"
}
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "peer": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@rushstack/eslint-patch": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
@@ -4115,6 +4126,24 @@
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"dev": true
},
+ "node_modules/bootstrap": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+ "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.8"
+ }
+ },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -13832,6 +13861,12 @@
"fastq": "^1.6.0"
}
},
+ "@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "peer": true
+ },
"@rushstack/eslint-patch": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
@@ -14996,6 +15031,12 @@
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"dev": true
},
+ "bootstrap": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+ "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+ "requires": {}
+ },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/client/package.json b/client/package.json
index ba68926f7c207d5fe979eed041f7ace30c3b7816..596cebffe3000c974f1ef43d5776c155d0b14c12 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,6 +7,7 @@
"start": "webpack serve"
},
"dependencies": {
+ "bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web3": "^1.10.2"
diff --git a/client/src/App.jsx b/client/src/App.jsx
index aef0b7242948b35dfe1a98ef370a44c725b2b5a5..e12585882d4db64f342849c2d230096f5e3bfb79 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,11 +1,6 @@
import { EthProvider } from "./contexts/EthContext";
import React, { Component } from 'react';
-import Intro from "./components/Intro/";
-import Setup from "./components/Setup";
-import Demo from "./components/Demo";
-import Footer from "./components/Footer";
-
import Voting from "./contracts/Voting.json";
import RegisterVoters from "./components/RegisterVoters";
import Proposals from "./components/Proposals";
@@ -76,26 +71,25 @@ class App extends Component {
const { contract } = this.state;
return (
- <EthProvider>
- <div id="App">
- <div className="container">
- <Intro />
- <hr />
- <Setup />
- <hr />
- <Demo />
- <hr />
- <Footer />
- </div>
- </div>
- <div id="App">
- <h1>Application de vote</h1>
- {contract && (
- <div className="container">
- <RegisterVoters votingInstance={contract} />
- <Proposals votingInstance={contract} />
- <VotingSession votingInstance={contract} />
- <Results votingInstance={contract} />
+ <EthProvider className="container">
+ <div className="action">
+ <h1 className="mt-4 mb-4">Application de vote</h1>
+ { contract && (
+ <div class="box">
+ <div className="row custom-padding">
+ <div className="col-md-3">
+ <RegisterVoters votingInstance={contract} />
+ </div>
+ <div className="col-md-3">
+ <Proposals votingInstance={contract} />
+ </div>
+ <div className="col-md-3">
+ <VotingSession votingInstance={contract} />
+ </div>
+ </div>
+ <div className="result ">
+ <Results votingInstance={contract} />
+ </div>
</div>
)}
</div>
diff --git a/client/src/components/Proposals.jsx b/client/src/components/Proposals.jsx
index a760d63ede8418ac71763ab7278db6acf39468b1..899bd6237c57f6e54e6a0e0ae103af9cc7ccf653 100644
--- a/client/src/components/Proposals.jsx
+++ b/client/src/components/Proposals.jsx
@@ -22,21 +22,23 @@ const Proposals = ({ votingInstance }) => {
};
return (
- <div>
+ <div class="container">
<h2>Enregistrement des propositions</h2>
- <input
- type="text"
- placeholder="Description de la proposition"
- value={proposalDescription}
- onChange={handleProposalDescriptionChange}
- />
- <button onClick={handleRegisterProposal}>Enregistrer la proposition</button>
+ <div class="input-group mb-3">
+ <input class="form-control"
+ type="text"
+ placeholder="Description de la proposition"
+ value={proposalDescription}
+ onChange={handleProposalDescriptionChange}
+ />
+ <button class="btn btn-primary" onClick={handleRegisterProposal}>Enregistrer</button>
+ </div>
<div>Status: {status}</div>
<div>
<h3>Propositions enregistrées :</h3>
- <ul>
+ <ul class="list-group">
{proposals.map((proposal) => (
- <li key={proposal.id}>{proposal.description}</li>
+ <li class="list-group-item" key={proposal.id}>{proposal.description}</li>
))}
</ul>
</div>
diff --git a/client/src/components/RegisterVoters.jsx b/client/src/components/RegisterVoters.jsx
index 1de9e3aad0fd1eecff2ad20bce89e1faaa551836..e964677fa91299f6c97706f53de9eea18731d442 100644
--- a/client/src/components/RegisterVoters.jsx
+++ b/client/src/components/RegisterVoters.jsx
@@ -21,24 +21,26 @@ const RegisterVoters = ({ votingInstance }) => {
};
return (
- <div>
- <h2>Enregistrement des électeurs</h2>
- <input
- type="text"
- placeholder="Adresse de l'électeur"
- value={voterAddress}
- onChange={handleVoterAddressChange}
- />
- <button onClick={handleRegisterVoter}>Enregistrer l'électeur</button>
- <div>Status: {status}</div>
- <div>
- <h3>Électeurs enregistrés :</h3>
- <ul>
- {registeredVoters.map((voter, index) => (
- <li key={index}>{voter}</li>
- ))}
- </ul>
- </div>
+ <div class="container">
+ <h2>Enregistrement des électeurs</h2>
+ <div class="input-group mb-3">
+ <input class="form-control"
+ type="text"
+ placeholder="Adresse de l'électeur"
+ value={voterAddress}
+ onChange={handleVoterAddressChange}
+ />
+ <button class="btn btn-primary" onClick={handleRegisterVoter}>Enregistrer</button>
+ </div>
+ <div>Status: {status}</div>
+ <div>
+ <h3>Électeurs enregistrés :</h3>
+ <ul class="list-group">
+ {registeredVoters.map((voter, index) => (
+ <li class="list-group-item" key={index}>{voter}</li>
+ ))}
+ </ul>
+ </div>
</div>
);
};
diff --git a/client/src/components/Results.jsx b/client/src/components/Results.jsx
index 86f115415c7fd658551a8bde5cc4869b9f34ed26..1a8d337c71299b126a8cb94ec2cfc7482f7134fa 100644
--- a/client/src/components/Results.jsx
+++ b/client/src/components/Results.jsx
@@ -28,17 +28,19 @@ const Results = ({ votingInstance }) => {
}, [votingInstance]);
return (
- <div>
- <h2>Résultats</h2>
- {winner !== null ? (
- <div>
- <h3>Proposition gagnante :</h3>
- {proposals[winner] && <p>{proposals[winner].description}</p>}
- </div>
- ) : (
- <p>Aucun gagnant pour le moment.</p>
- )}
- <div>Status: {status}</div>
+ <div className="container border border-dark">
+ <div className='result'>
+ <h2>Résultats</h2>
+ {winner !== null ? (
+ <div>
+ <h3>Proposition gagnante :</h3>
+ {proposals[winner] && <p>{proposals[winner].description}</p>}
+ </div>
+ ) : (
+ <p>Aucun gagnant pour le moment.</p>
+ )}
+ <div>Status: {status}</div>
+ </div>
</div>
);
};
diff --git a/client/src/components/VotingSession.jsx b/client/src/components/VotingSession.jsx
index af0dc765f1edb2c13fa4bcd727d53dcbac828dbb..7417f05c6589198fbe58c66f1ce2e6b3fec24722 100644
--- a/client/src/components/VotingSession.jsx
+++ b/client/src/components/VotingSession.jsx
@@ -21,17 +21,19 @@ const VotingSession = ({ votingInstance }) => {
};
return (
- <div>
+ <div class="container">
<h2>Session de vote</h2>
- <div>
- <h3>Choisissez votre proposition préférée :</h3>
- <select onChange={handleProposalSelection}>
+ <div class="input-group mb-3">
+ <p>Choisissez votre proposition préférée :</p>
+ <select class="custom-select" onChange={handleProposalSelection}>
<option value={null}>Sélectionnez une proposition</option>
{/* Populate with available proposals */}
</select>
- <button onClick={handleVote} disabled={voted || selectedProposalId === null}>
- Voter
- </button>
+ <div class="input-group-prepend">
+ <button class="btn btn-outline-secondary" onClick={handleVote} disabled={voted || selectedProposalId === null}>
+ Voter
+ </button>
+ </div>
</div>
<div>Status: {status}</div>
</div>
diff --git a/client/src/css/app.css b/client/src/css/app.css
new file mode 100644
index 0000000000000000000000000000000000000000..740a7156604ae471e07bfffb492abc1bd8e785d9
--- /dev/null
+++ b/client/src/css/app.css
@@ -0,0 +1,31 @@
+h1 {
+ text-align: center;
+ font-weight: bold;
+ text-decoration: underline;
+}
+
+.action {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+}
+
+.custom-padding {
+ align-items: center;
+ justify-content: center;
+}
+
+.result {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 20px;
+ margin-top: 20px;
+}
+
+.result > h2 {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/client/src/styles.css b/client/src/css/styles.css
similarity index 100%
rename from client/src/styles.css
rename to client/src/css/styles.css
diff --git a/client/src/index.jsx b/client/src/index.jsx
index 58dca43f23db931cb0a63982ff71046e60d9d0bd..3b54e4ec18a4659b7e1ba33d160b3b4892fdcb50 100644
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -1,7 +1,8 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
-import "./styles.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import "./css/app.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(