Issue #239 Verifiability of a vote

web/frontend/src/language/en.json

@@ -160,7 +160,7 @@
     "alreadyVoted2": "on this form.",
     "changeVote": "You can change your vote by simply casting a new vote.",
     "pickCandidate": "Pick a candidate:",
-    "voteSuccess": "Your vote was successfully submitted!",
+    "voteSuccess": "Your vote was successfully submitted! VoteID: ",
     "voteSuccessful": "Vote successful",
     "errorTitle": "Error",
     "actionChange": "Action Change",

web/frontend/src/mocks/handlers.ts

@@ -171,9 +171,12 @@ export const handlers = [
       Voters,
     });
 
+    const BallotID = uid();
+
     return res(
       ctx.status(200),
       ctx.json({
+        BallotID: BallotID,
         Ballot: Ballot,
       })
     );

web/frontend/src/pages/ballot/Show.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import kyber from '@dedis/kyber';
@@ -10,7 +10,6 @@ import { MailIcon } from '@heroicons/react/outline';
 import { useNavigate } from 'react-router';
 
 import useForm from 'components/utils/useForm';
-import usePostCall from 'components/utils/usePostCall';
 import * as endpoints from 'components/utils/Endpoints';
 import { encryptVote } from './components/VoteEncrypt';
 import { voteEncode } from './components/VoteEncode';
@@ -38,24 +37,9 @@ const Ballot: FC = () => {
   const [modalText, setModalText] = useState(t('voteSuccess') as string);
   const [modalTitle, setModalTitle] = useState('');
   const [castVoteLoading, setCastVoteLoading] = useState(false);
-  const sendFetchRequest = usePostCall(setPostError);
 
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (postError !== null) {
-      if (postError.includes('ECONNREFUSED')) {
-        setModalText(t('errorServerDown'));
-      } else {
-        setModalText(t('voteFailure'));
-      }
-      setModalTitle(t('errorTitle'));
-    } else {
-      setModalText(t('voteSuccess'));
-      setModalTitle(t('voteSuccessful'));
-    }
-  }, [postError, t]);
-
   const hexToBytes = (hex: string) => {
     const bytes: number[] = [];
     for (let c = 0; c < hex.length; c += 2) {
@@ -89,7 +73,26 @@ const Ballot: FC = () => {
           'Content-Type': 'Application/json',
         },
       };
-      await sendFetchRequest(endpoints.newFormVote(formID.toString()), newRequest, setShowModal);
+      try {
+        const response = await fetch(endpoints.newFormVote(formID.toString()), newRequest);
+        if (!response.ok) {
+          const txt = await response.text();
+          throw new Error(txt);
+        }
+        const res = await response.json();
+        setModalText(`${t('voteSuccess')}${res.BallotID}`);
+        setModalTitle(t('voteSuccessful'));
+      } catch (error) {
+        setPostError(error.message);
+        if (postError.includes('ECONNREFUSED')) {
+          setModalText(t('errorServerDown'));
+        } else {
+          setModalText(t('voteFailure'));
+        }
+        setModalTitle(t('errorTitle'));
+      }
+
+      setShowModal((prev) => !prev);
     } catch (e) {
       console.log(e);
       setModalText(t('ballotFailure'));