Merge pull request #385 from mikefranze/election-settings

Random candidate order and voter instruction confirmations

domain_model/ElectionSettings.ts

@@ -22,4 +22,6 @@ export interface ElectionSettings {
     ballot_updates?:	    boolean; //		allows voters to update their ballots before election ends
     public_results?:	    boolean; //		allows public to view results
     time_zone?:           string; // Time zone for displaying election start/end times 
+    random_candidate_order?: boolean; // Randomize order of candidates on the ballot
+    require_instruction_confirmation?: boolean // Require voter to confirm that they've read the instructions in order to vote
   }

frontend/src/components/Election/Election.tsx

@@ -31,7 +31,7 @@ const TempWrapper = ({ authSession }: Props) => {
       <Grid xs={12} sm={8}>
         <Routes>
           <Route path='/' element={<ElectionHome authSession={authSession} electionData={data} fetchElection={refreshElection} />} />
-          <Route path='/vote' element={<VotePage election={data.election} fetchElection={refreshElection} />} />
+          <Route path='/vote' element={<VotePage />} />
           <Route path='/thanks' element={<Thanks election={data.election} />} />
           <Route path='/results' element={<ViewElectionResults election={data.election} />} />
           <Route path='/edit' element={<EditElection authSession={authSession} election={data.election} fetchElection={refreshElection} />} />

frontend/src/components/Election/Voting/VotePage.tsx

@@ -12,6 +12,7 @@ import { Box, Container, Step, StepLabel, Stepper, SvgIcon } from "@mui/material
 import Button from "@mui/material/Button";
 import { usePostBallot } from "../../../hooks/useAPI";
 import FiberManualRecordOutlinedIcon from '@mui/icons-material/FiberManualRecordOutlined';
+import useElection from "../../ElectionContextProvider";
 
 // I'm using the icon codes instead of an import because there was padding I couldn't get rid of
 // https://stackoverflow.com/questions/65721218/remove-material-ui-icon-margin
@@ -36,15 +37,20 @@ function shuffle(array) {
   return array;
 }
 
-const VotePage = ({ election, fetchElection }) => {
+const VotePage = () => {
+
+  const { election } = useElection()
   const makePages = () => {
     // generate ballot pages
-    let pages = election.races.map((race, i) => ({
-      type: "ballot",
-      candidates: shuffle(race.candidates.map(c=> ({...c, score: null}))),
-      voting_method : race.voting_method,
-      race_index: i
-    }))
+    let pages = election.races.map((race, i) => {
+      let candidates = race.candidates.map(c=> ({...c, score: null}))
+      return {
+        type: "ballot",
+        candidates: election.settings.random_candidate_order ? shuffle(candidates) : candidates,
+        voting_method : race.voting_method,
+        race_index: i
+    }
+  })
 
     // determine where to add info pages
     // commented out for now in case we want to return to this

frontend/src/components/ElectionForm/CreateElectionTemplates.tsx

@@ -29,6 +29,8 @@ const CreateElectionTemplates = ({ authSession }: { authSession: IAuthSession })
             ballot_updates: false,
             public_results: true,
             time_zone: DateTime.now().zone.name,
+            random_candidate_order: true,
+            require_instruction_confirmation: false,
         }
     }
 

frontend/src/components/ElectionForm/ElectionSettings.tsx

@@ -65,6 +65,18 @@ export default function ElectionSettings() {
                     <Grid item xs={12} sx={{ m: 0, my: 1, p: 1 }}>
                         <FormControl component="fieldset" variant="standard">
                             <FormGroup>
+                                <FormControlLabel control={
+                                    <Checkbox
+                                        id="candidate-order"
+                                        name="Randomize Candidate Order"
+                                        checked={editedElectionSettings.random_candidate_order}
+                                        onChange={(e) => applySettingsUpdate(settings => { settings.random_candidate_order = e.target.checked })}
+                                    />}
+                                    label="Randomize Candidate Order"
+                                />
+                                <FormHelperText sx={{ pl: 4, mt: -1 }}>
+                                    Randomizes the order of candidates on the ballots.
+                                </FormHelperText>
                                 <FormControlLabel disabled control={
                                     <Checkbox
                                         id="ballot-updates"
@@ -134,7 +146,8 @@ export default function ElectionSettings() {
                                         <Checkbox
                                             id="require-instructions-confirmations"
                                             name="Require Instruction Confirmations"
-                                            checked={false}
+                                            checked={editedElectionSettings.require_instruction_confirmation}
+                                            onChange={(e) => applySettingsUpdate(settings => { settings.require_instruction_confirmation = e.target.checked })}
                                         />}
                                     label="Require Instruction Confirmations"
                                 />

frontend/src/components/ElectionForm/QuickPoll.tsx

@@ -61,6 +61,8 @@ const QuickPoll = ({ authSession }) => {
             },
             ballot_updates: false,
             public_results: true,
+            random_candidate_order: true,
+            require_instruction_confirmation: false,
         }
     }