Feature/candidate onboarding terms

anonymousVoting/clientAnonymousVoting/src/components/ConnectWallet.js

@@ -124,4 +124,4 @@ const ConnectWallet = () => {
     );
 }
 
-export default ConnectWallet;
+export default ConnectWallet;

anonymousVoting/clientAnonymousVoting/src/components/CreateProcessPage.js

@@ -5,8 +5,8 @@ import styles from './CreateProcessPage.module.css';
 import {ethers} from 'ethers';
 
 //web3 imports
-import { deployVotingProcess, deployTestContract, getTestContract } from '../web3/contracts'
-import { useState, useEffect, useRef } from 'react';
+import { deployVotingProcess} from '../web3/contracts'
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 
@@ -27,35 +27,44 @@ const CreateProcess = () => {
     const [open, setOpen] = useState(false);
     const [transactionResult, setTransactionResult] = useState(null);
 
-    const refValue = useRef(false);
+    // const refValue = useRef(false);
 
-    const createProcess = async (e) => {
-        e.preventDefault();
-        console.log("name: ", name);
-        //format proposals
-        let proposalArray = formatProposals(proposals);
-        //check form inputs
-        if(!isFormValid()){
-            window.alert("Form is not valid");
-            return;
-        }
+   const createProcess = async (e) => {
+    e.preventDefault();
+
+    if (!isFormValid()) {
+        window.alert("Form is not valid");
+        return;
+    }
+
+    try {
         setPending(true);
-        refValue.current = true;
-        //deploy new process contract
-        const result = await deployVotingProcess(name, description, proposalArray,1000000,1000000);
+
+        const proposalArray = formatProposals(proposals);
+        const result = await deployVotingProcess(
+            name,
+            description,
+            proposalArray,
+            1000000,
+            1000000
+        );
+
         setTransactionResult(result);
+        setShow(true);
 
-        refValue.current = false;
+    } catch (err) {
+        console.error(err);
+        window.alert("Transaction failed");
+    } finally {
         setPending(false);
-
-        setShow(true);
     }
+};
+
 
     const isFormValid = () => {
-        if(proposals < 2)
-            return false;
-        return true;
-    }
+    return proposals.split(',').length >= 2;
+};
+
 
     const formatProposals = (input) => {
         let proposals = input.split(',');
@@ -67,9 +76,6 @@ const CreateProcess = () => {
     }
 
 
-    useEffect(() => {
-        // setPending(!pending);
-    }, [pending])
 
     return (  
         <div >
@@ -105,11 +111,27 @@ const CreateProcess = () => {
                     />
                 </div>
                 <div>
-                    <button className="baseButton">Create new process</button>
+                    <button
+  className="baseButton"
+  type="submit"
+  disabled={pending}
+>
+  {pending ? (
+    <>
+      <Spinner
+        animation="border"
+        size="sm"
+        style={{ marginRight: "8px" }}
+      />
+      Creating...
+    </>
+  ) : (
+    "Create new process"
+  )}
+</button>
+
                 </div>
-                {refValue.current == true && <div style={{marginTop: "2em"}}>
-                    <Spinner animation="border" />
-                </div>}
+
             </form>
             <Modal show={show} onHide={handleClose}>
                 <Modal.Header closeButton>

anonymousVoting/clientAnonymousVoting/src/components/modals/AddCandidateModal.js

@@ -1,127 +1,134 @@
 import { useState } from 'react';
 import { Flex, Modal, Button, Card } from "rimble-ui";
 import { ethers } from "ethers";
-import ElectionOrganiser from "../../build/ElectionOrganizer.json";
-import {successtoast, dangertoast } from '../utilities/Toasts';
+import { successtoast, dangertoast } from '../utilities/Toasts';
 import { toast } from "react-toastify";
-import {addProposal} from '../../web3/contracts';
+import { addProposal } from '../../web3/contracts';
 
 export function AddCandidateModal({ electionId }) {
     const [isOpen, setIsOpen] = useState(false);
+
+    // ✅ ONLY name is kept (description removed)
     const [candidateDetail, setCandidateDetail] = useState({
-        name: '',
-        description: ''
+        name: ''
     });
 
+    // ✅ Terms acceptance state
+    const [acceptedTerms, setAcceptedTerms] = useState(false);
 
     const handleCandidateDetailChange = (e) => {
         const { name, value } = e.target;
         setCandidateDetail({
             ...candidateDetail,
             [name]: value
         });
-    }
-
+    };
 
     const handleSubmitCandidate = async (e) => {
-        let id ;
+        let id;
         e.preventDefault();
+
+        // ✅ Enforce terms acceptance
+        if (!acceptedTerms) {
+            toast.error("You must accept the Terms & Conditions");
+            return;
+        }
+
         try {
-
-
-            let tx = await addProposal(electionId,ethers.utils.toUtf8Bytes(candidateDetail.name.trim()));
-
-              await tx.wait();
-              console.log(tx);
-
-            //   successtoast(id, "Candidate Added Successfully")
-
-
-
-          } catch(err) {
-            dangertoast(id ,"Candidate Addition Failed")
+            let tx = await addProposal(
+                electionId,
+                ethers.utils.toUtf8Bytes(candidateDetail.name.trim())
+            );
+
+            await tx.wait();
+
+            setIsOpen(false);
+            setAcceptedTerms(false);
+        } catch (err) {
+            dangertoast(id, "Candidate Addition Failed");
             console.log(err);
-          }
-
-    }
+        }
+    };
 
-    const closeModal = e => {
+    const closeModal = (e) => {
         e.preventDefault();
         setIsOpen(false);
+        setAcceptedTerms(false);
     };
 
-    const openModal = e => {
+    const openModal = (e) => {
         e.preventDefault();
         setIsOpen(true);
     };
 
     return (
         <div>
-            <div onClick={openModal} style={{cursor: "pointer"}}>
-                <font size = '2'>Add Candidate</font>
+            <div onClick={openModal} style={{ cursor: "pointer" }}>
+                <font size="2">Add Candidate</font>
             </div>
-            
+
             <Modal isOpen={isOpen}>
-                <Card width={"90%"} height={"max-content"} p={0} style={{maxWidth: "500px"}}>
+                <Card width="90%" height="max-content" p={0} style={{ maxWidth: "500px" }}>
                     <Button.Text
-                        style={{margin: "0px"}}
+                        style={{ margin: "0px" }}
                         icononly
-                        icon={"Close"}
-                        color={"moon-gray"}
-                        position={"absolute"}
+                        icon="Close"
+                        color="moon-gray"
+                        position="absolute"
                         top={0}
                         right={0}
                         mt={3}
                         mr={3}
                         onClick={closeModal}
                     />
 
-                    <div style={{margin: "10px", maxWidth: "700px", width: "90%"}}>
+                    <div style={{ margin: "10px", maxWidth: "700px", width: "90%" }}>
                         <h5>Add candidates</h5>
-
-                        <br/>
+                        <br />
 
                         <div>
-                            <b>Canidate Name</b>
-                            <br/>
-                            
-                            <input 
-                                className="form-control" 
+                            <b>Candidate Name</b>
+                            <br />
+
+                            <input
+                                className="form-control"
                                 placeholder="Name of the candidate"
                                 name="name"
                                 value={candidateDetail.name}
                                 onChange={handleCandidateDetailChange}
-                                style={{marginTop: "15px"}}
+                                style={{ marginTop: "15px" }}
                             />
-                            <br /><br />
 
-                            <b>Canidate Description</b>
-                            <br/>
-
-                            <textarea
-                                className="form-control" 
-                                placeholder="Name of the candidate"
-                                name="description"
-                                rows={6}
-                                value={candidateDetail.description}
-                                onChange={handleCandidateDetailChange}
-                                style={{marginTop: "15px"}}
-                            /> 
-
                             <br /><br />
+
+                            {/* ✅ Terms & Conditions checkbox */}
+                            <div>
+                                <label style={{ cursor: "pointer" }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={acceptedTerms}
+                                        onChange={(e) => setAcceptedTerms(e.target.checked)}
+                                        style={{ marginRight: "8px" }}
+                                    />
+                                    I accept the Terms & Conditions
+                                </label>
+                            </div>
                         </div>
                     </div>
-
-                    <Flex
-                        px={4}
-                        py={3}
-                        justifyContent={"flex-end"}
-                    >
+
+                    <Flex px={4} py={3} justifyContent="flex-end">
                         <Button.Outline onClick={closeModal}>Cancel</Button.Outline>
-                        <Button ml={3} type="submit" onClick={handleSubmitCandidate}>Confirm</Button>
+                        <Button
+                            ml={3}
+                            type="submit"
+                            onClick={handleSubmitCandidate}
+                            disabled={!acceptedTerms}
+                        >
+                            Confirm
+                        </Button>
                     </Flex>
                 </Card>
             </Modal>
         </div>
     );
-}
+}