-
Login
- {/*
-
*/}
-
-
-
setVoterid(e.target.value)}
- >
-
-
-
setEmail(e.target.value)}
- >
+
+
+
+
+ E-voting System
+
+
+ Login
+
+
-
+
);
}
diff --git a/client/src/components/ModalForm.jsx b/client/src/components/ModalForm.jsx
new file mode 100644
index 0000000..73574c5
--- /dev/null
+++ b/client/src/components/ModalForm.jsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+
+function ModalForm({
+ onSubmit,
+ fields,
+ defaultValue,
+ closeModal,
+ validateFormCustom,
+}) {
+ const [formState, setFormState] = useState(defaultValue);
+ const [errors, setErrors] = useState("");
+
+ // Generic form validation
+ const validateForm = () => {
+ if (validateFormCustom) {
+ // Use custom validation if provided
+ const validationErrors = validateFormCustom(formState);
+ console.log(validationErrors);
+ if (validationErrors) {
+ setErrors(validationErrors.join(", "));
+ return false;
+ }
+ } else {
+ const errorFields = Object.entries(formState)
+ .filter(([key, value]) => !value)
+ .map(([key]) => key);
+ if (errorFields.length > 0) {
+ setErrors(errorFields.join(", "));
+ return false;
+ }
+ }
+
+ setErrors("");
+ return true;
+ };
+
+ const handleChange = (e) => {
+ setFormState({ ...formState, [e.target.name]: e.target.value });
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (!validateForm()) {
+ return;
+ }
+ onSubmit(formState);
+ closeModal();
+ };
+
+ return (
+
{
+ if (e.target.className === "modal-container") closeModal();
+ }}
+ >
+
+
+ );
+}
+
+export default ModalForm;
diff --git a/client/src/components/NavSideBar.jsx b/client/src/components/NavSideBar.jsx
index d5b1ed0..eec859e 100644
--- a/client/src/components/NavSideBar.jsx
+++ b/client/src/components/NavSideBar.jsx
@@ -3,29 +3,34 @@ import { Link } from "react-router";
function NavSideBar() {
return (
-
Voting System
-
Voter Account
+
e-Voting System
+ {/*
Voter Account
*/}
REPORTS
-
- Dashboard
+
+ Dashboard
- Votes
MANAGE
- Voters
- Positions
-
- Candidates
+
+ Voters
+
+
+ Positions
+
+
+ Candidates
SETTINGS
- Ballot Position
- Election Title
+
+ Ballot Position
+
+ Election Title
);
diff --git a/client/src/components/Position.jsx b/client/src/components/Position.jsx
new file mode 100644
index 0000000..47d7abf
--- /dev/null
+++ b/client/src/components/Position.jsx
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import ModalForm from "./ModalForm";
+import { POSITION_DATA } from "./Data";
+
+function Position() {
+ const [modalOpen, setModalOpen] = useState(false);
+ const [positions, setPositions] = useState(POSITION_DATA);
+ const [positionToEdit, setPositionToEdit] = useState(null);
+
+ const fields = [
+ { name: "description", label: "Description", type: "text" },
+ { name: "maxVote", label: "Maximum Vote", type: "number" },
+ ];
+
+ const validatePositionForm = (formState) => {
+ const errors = [];
+ for (const field of fields) {
+ if (!formState[field.name]) {
+ errors.push(`${field.label}`);
+ }
+ }
+ return errors.length > 0 ? errors : null;
+ };
+
+ const handleDeletePosition = (targetIndex) => {
+ setPositions(positions.filter((_, idx) => idx !== targetIndex));
+ };
+
+ const handleEditPosition = (idx) => {
+ setPositionToEdit(idx);
+ setModalOpen(true);
+ };
+
+ const handleSubmit = (newPosition) => {
+ positionToEdit === null
+ ? setPositions([...positions, newPosition])
+ : setPositions(
+ positions.map((currPosition, idx) => {
+ if (idx !== positionToEdit) return currPosition;
+ return newPosition;
+ })
+ );
+ };
+
+ const positionList = positions.map((position, idx) => (
+
+ | {position.description} |
+ {position.maxVote} |
+
+
+
+ |
+
+ ));
+
+ return (
+ <>
+
+
Positions
+
+
+
+ | Description |
+ Maximum Vote |
+ Tools |
+
+
+
+ {positions.length > 0 ? (
+ positionList
+ ) : (
+
+ |
+ There are no positions to display.
+ |
+
+ )}
+
+
+
+ {modalOpen && (
+
{
+ setModalOpen(false);
+ setPositionToEdit(null);
+ }}
+ fields={fields}
+ onSubmit={handleSubmit}
+ validateFormCustom={validatePositionForm}
+ defaultValue={positionToEdit !== null && positions[positionToEdit]}
+ />
+ )}
+
+
+ );
+}
+
+export default Position;
diff --git a/client/src/components/Register.jsx b/client/src/components/Register.jsx
index 391ab1c..2ae8f8b 100644
--- a/client/src/components/Register.jsx
+++ b/client/src/components/Register.jsx
@@ -1,5 +1,7 @@
import { useState } from "react";
import { Link, useNavigate } from "react-router";
+import voting from "../assets/voting.png";
+import gov_nepal from "../assets/gov_nepal.png";
function Register() {
const [fname, setFname] = useState("");
@@ -10,134 +12,192 @@ function Register() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
- const Navigate = useNavigate();
+ const navigate = useNavigate();
- function handleSubmit(e) {
+ async function handleSubmit(e) {
e.preventDefault();
const userData = {
- fname,
- lname,
- citizenNum,
- address,
- phoneNo,
- email,
+ username: `${fname} ${lname}`,
+ voter_id: phoneNo,
password,
+ password2: password,
};
- console.log(userData);
- Navigate("/Dashboard");
+
+ try {
+ const response = await fetch("http://127.0.0.1:8000/register/", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(userData),
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ console.log("Candidates:", data);
+ } else {
+ console.error("Error getting candidates:", data);
+ }
+ } catch (err) {
+ console.log(err);
+ }
}
return (
-