Merge pull request #147 from aion-dk/verifier-linguo

Aligning language with Mark.It
aion-dk · Mar 15, 2022 · 04d6380 · 04d6380
2 parents a4dc2d6 + 2212828
commit 04d6380
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 32 deletions.
diff --git a/public/files/app.js b/public/files/app.js
@@ -11,7 +11,7 @@ $(document).ready(() => {
     verifier.findBallot(address).then((response) => {
       const verifyKeyView = $("#submitVerifierKey");
       verifyKeyView.find("#verification-code").text(response.address);
-      
+
       verifyKeyView.collapse("show");
 
       verifier.pollForSpoilRequest().then((spoilRequestAddress) => {
@@ -24,7 +24,7 @@ $(document).ready(() => {
             var el = $("#choices")
             el.html()
             Object.keys(selections).forEach(key => {
-                el.append(`<li>Contest: ${key} - Choice: ${selections[key]}</li>`)
+              el.append(`<li>Contest: ${key} - Choice: ${selections[key]}</li>`)
             })
 
             $('#showChoices').collapse("show");

diff --git a/public/index.html b/public/index.html
@@ -11,45 +11,70 @@
   </head>
 
   <body>
-    <div class="text-center mb-12">
-      <form id="findBallot" action="#">
-        <div class="text-center mb-4">
-          <h1 class="h3 mb-3 font-weight-normal">AVX Verifier</h1>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 text-center">
+          <h1 class="font-weight-normal">Welcome to the VerifyMyBallot Site.</h1>
 
-          <p>Insert the 'Ballot Checking Code' found on your Mobile Voting App, to verify your choices. This process will spoil and invalidate your votes.</p>
+          <p>Use this site to perform a ballot check and confirm your ballot was recorded and sealed correctly.</p>
         </div>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <h2>Step-by-Step Instructions</h1>
+          <p>It's simple. Follow these 4 simple steps:</p>
 
-        <div class="form-label-group">
-          <input type="text" id="verifier-code" name="verifier[code]" class="form-control" placeholder="Verifier Cofe" required />
+          <ol>
+            <li>Enter the ballot checking code displayed in the Mark.It app.</li>
+            <li>Click or tap <b>ENTER</b>.</li>
+            <li>Tap the <b>CODE ENTERED</b> button in the Mark.It app.</li>
+            <li>A passkey will display in both the Mark.It app and below. Confirm the passkeys match on both screens. Tap <b>YES</b> in the Mark.It app to confirm.</li>
+            <li>Your ballot will be displayed below. Review your choices and confirm in the Mark.It app whether it looks correct.</li>
+          </ol>
         </div>
 
-        <button class="btn btn-lg btn-primary btn-block" type="submit" id="tracking-btn">Find Ballot</button>
-      </form>
+        <div class="col-sm-12 col-md-6">
+          <div class="container-fluid">
+            <form id="findBallot" action="#">
+              <div class="text-center mb-4">
+                <span>Enter Ballot Checking Code:</span>
+              </div>
 
-      <hr>
-
-      <form id="submitVerifierKey" class="collapse" action="#">
-        <div class="text-center mb-4">
-          <h2 class="h3 mb-3 font-weight-normal">Ballot found!</h2>
-        </div>
-        <div class="form-label-group">
-          <span>Please confirm the following code in the voting application, so the process can continue.</span>
-          <br>
-          <span id="verification-code">Waiting for you to spoil the ballot in the voting app</span>
-        </div>
-      </form>
+              <div class="form-label-group">
+                <input type="text" id="verifier-code" name="verifier[code]" class="form-control" required />
+              </div>
 
-      <hr>
+              <button id="tracking-btn" class="btn btn-lg btn-primary btn-block" type="submit">ENTER</button>
+            </form>
 
-      <div id="showChoices" class="collapse">
-        <div class="text-center mb-4">
-          <h2 class="h3 mb-3 font-weight-normal">Ballot</h2>
-        </div>
+            <hr>
 
-        <div class="form-label-group">
-          <ol id="choices">
-            <li class="template">Waiting for you to confirm the code matches in the voting app</li>
-          </ol>
+            <form id="submitVerifierKey" class="collapse" action="#">
+              <div class="text-center mb-4">
+                <h2 class="h3 mb-3 font-weight-normal">Ballot found!</h2>
+              </div>
+
+              <div class="form-label-group">
+                <p>Does the passkey displayed above match the passkey displayed in the Mark.It app? Tap <b>Yes</b> or <b>No</b> in the Mark.It app.</p>
+                <p>Your unsealed ballot will then display below.</p>
+              </div>
+            </form>
+
+            <hr>
+
+            <div id="showChoices" class="collapse">
+              <div class="text-center mb-4">
+                <h2 class="h3 mb-3 font-weight-normal">Ballot</h2>
+              </div>
+
+              <div class="form-label-group">
+                <span class="template">Here is your unsealed ballot:</span>
+
+                <ol id="choices"></ol>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>