Merge pull request #265 from dedis/239-verifiability-show-vote-hash-after-casting-a-vote

Issue #239 Verifiability of a vote

Author: aelalamy42

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

@@ -170,7 +170,15 @@ export const handlers = [
       Voters,
     });
 
-    return res(ctx.status(200), ctx.json({ Status: 0, Token: fakeToken }));
+    const BallotID = uid();
+
+    return res(
+      ctx.status(200),
+      ctx.json({
+        BallotID: BallotID,
+        Ballot: Ballot,
+      })
+    );
   }),
 
   rest.put(endpoints.editForm(':FormID'), async (req, res, ctx) => {

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';
@@ -33,29 +32,13 @@ const Ballot: FC = () => {
 
   const [userErrors, setUserErrors] = useState('');
   const edCurve = kyber.curve.newCurve('edwards25519');
-  const [postError, setPostError] = useState('');
   const [showModal, setShowModal] = useState(false);
   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 +72,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();
+        const id = res.BallotID || 'Not Implemented Yet, see issue 240';
+        setModalText(`${t('voteSuccess')} ${id}`);
+        setModalTitle(t('voteSuccessful'));
+      } catch (error) {
+        if (error.message.includes('ECONNREFUSED')) {
+          setModalText(t('errorServerDown'));
+        } else {
+          setModalText(t('voteFailure'));
+        }
+        setModalTitle(t('errorTitle'));
+      }
+
+      setShowModal((prev) => !prev);
     } catch (e) {
       console.log(e);
       setModalText(t('ballotFailure'));