Alert from frontend errors in critical paths (decidim#10937)

* Alert from frontend errors in critical paths * Revert "Alert from frontend errors in critical paths" This reverts commit b7fad87. * Show a failure page when the vote errored * Fix election feedback URL * Fix eslint offense * Use election_feedback_path with vote if there's any * Fix show error message for the new show/hide API --------- Co-authored-by: Txus Bach <me@txus.io>
Platoniq · Jul 28, 2023 · 894d19e · 894d19e
1 parent 584bb2a
commit 894d19e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 62 deletions.
diff --git a/decidim-elections/app/packs/src/decidim/elections/voter/new-vote.js b/decidim-elections/app/packs/src/decidim/elections/voter/new-vote.js
@@ -24,70 +24,75 @@ $(async () => {
       // Get the vote component and bind it to all UI events
       const voteComponent = component($voteWrapper);
 
-      await voteComponent.bindEvents({
-        onBindEncryptButton(onEventTriggered) {
-          $("[id='next-encrypting']").on("click", onEventTriggered);
-        },
-        onStart() {},
-        onVoteEncryption(validVoteFn) {
-          const getFormData = (formData) => {
-            return formData.serializeArray().reduce((acc, { name, value }) => {
-              if (!acc[name]) {
-                acc[name] = [];
-              }
-              acc[name] = [...acc[name], `${name}_${value}`];
-              return acc;
-            }, {});
-          };
-          const formData = getFormData($voteWrapper.find(".answer_input"));
-          validVoteFn(formData, ballotStyleId);
-        },
-        castOrAuditBallot({ encryptedData, encryptedDataHash }) {
-          $voteWrapper.find("#step-encrypting").attr("hidden", true);
-          $ballotHash.text(encryptedDataHash);
+      try {
+        await voteComponent.bindEvents({
+          onBindEncryptButton(onEventTriggered) {
+            $("[id='next-encrypting']").on("click", onEventTriggered);
+          },
+          onStart() {},
+          onVoteEncryption(validVoteFn) {
+            const getFormData = (formData) => {
+              return formData.serializeArray().reduce((acc, { name, value }) => {
+                if (!acc[name]) {
+                  acc[name] = [];
+                }
+                acc[name] = [...acc[name], `${name}_${value}`];
+                return acc;
+              }, {});
+            };
+            const formData = getFormData($voteWrapper.find(".answer_input"));
+            validVoteFn(formData, ballotStyleId);
+          },
+          castOrAuditBallot({ encryptedData, encryptedDataHash }) {
+            $voteWrapper.find("#step-encrypting").attr("hidden", true);
+            $ballotHash.text(encryptedDataHash);
 
-          // show the next step
-          $voteWrapper.find("#step-ballot_decision").attr("hidden", false);
-          // simulates a toggle click, in order to update the wizard step
-          document.dispatchEvent(new Event("on:toggle"));
+            // show the next step
+            $voteWrapper.find("#step-ballot_decision").attr("hidden", false);
+            // simulates a toggle click, in order to update the wizard step
+            document.dispatchEvent(new Event("on:toggle"));
 
-          const $form = $("form.new_vote");
-          $("#vote_encrypted_data", $form).val(encryptedData);
-          $("#vote_encrypted_data_hash", $form).val(encryptedDataHash);
-        },
-        onBindAuditBallotButton(onEventTriggered) {
-          $("#audit_ballot").on("click", onEventTriggered);
-        },
-        onBindCastBallotButton(onEventTriggered) {
-          $("#cast_ballot").on("click", onEventTriggered);
-        },
-        onAuditBallot(auditedData, auditedDataFileName) {
-          const vote = JSON.stringify(auditedData);
-          const link = document.createElement("a");
-          $voteWrapper.find("#cast_ballot").attr("hidden", true);
-          $voteWrapper.find("#back").attr("hidden", false);
-          questionsComponent.voteCasted = true;
+            const $form = $("form.new_vote");
+            $("#vote_encrypted_data", $form).val(encryptedData);
+            $("#vote_encrypted_data_hash", $form).val(encryptedDataHash);
+          },
+          onBindAuditBallotButton(onEventTriggered) {
+            $("#audit_ballot").on("click", onEventTriggered);
+          },
+          onBindCastBallotButton(onEventTriggered) {
+            $("#cast_ballot").on("click", onEventTriggered);
+          },
+          onAuditBallot(auditedData, auditedDataFileName) {
+            const vote = JSON.stringify(auditedData);
+            const link = document.createElement("a");
+            $voteWrapper.find("#cast_ballot").attr("hidden", true);
+            $voteWrapper.find("#back").attr("hidden", false);
+            questionsComponent.voteCasted = true;
 
-          link.setAttribute("href", `data:text/plain;charset=utf-8,${vote}`);
-          link.setAttribute("download", auditedDataFileName);
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-        },
-        onAuditComplete() {
-          console.log("Audit completed");
-        },
-        onCastBallot() {
-          questionsComponent.voteCasted = true;
-          $("#cast_ballot").prop("disabled", true);
-        },
-        onCastComplete() {
-          console.log("Cast completed");
-        },
-        onInvalid() {
-          console.log("Something went wrong.");
-        }
-      });
+            link.setAttribute("href", `data:text/plain;charset=utf-8,${vote}`);
+            link.setAttribute("download", auditedDataFileName);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          },
+          onAuditComplete() {
+            console.log("Audit completed");
+          },
+          onCastBallot() {
+            questionsComponent.voteCasted = true;
+            $("#cast_ballot").prop("disabled", true);
+          },
+          onCastComplete() {
+            console.log("Cast completed");
+          },
+          onInvalid() {
+            console.log("Something went wrong.");
+          }
+        });
+      } catch (error) {
+        console.error(error);
+        questionsComponent.errored();
+      }
     }
 
     if (isPreview) {

diff --git a/decidim-elections/app/packs/src/decidim/elections/voter/vote_questions.component.js b/decidim-elections/app/packs/src/decidim/elections/voter/vote_questions.component.js
@@ -35,6 +35,11 @@ export default class VoteQuestionsComponent {
     this.updateWizardSteps(this.$currentStep.attr("id"));
   }
 
+  errored() {
+    this.$currentStep.attr("hidden", true);
+    this.$currentStep = this.$voteWrapper.find("#failed").attr("hidden", false);
+  }
+
   toggleContinueButton() {
     // ignore the button if the step is not a question
     if (!this.isQuestion(this.$currentStep.attr("id"))) {

diff --git a/decidim-elections/app/views/decidim/elections/votes/_show_failed.html.erb b/decidim-elections/app/views/decidim/elections/votes/_show_failed.html.erb
@@ -17,6 +17,10 @@
 
   <p class="election-question__description">
     <%= t("decidim.elections.votes.confirmed.experience") %>
-    <%= link_to t("decidim.elections.votes.confirmed.feedback"), election_feedback_path(election, hash: vote.encrypted_vote_hash, token: params[:token]) %>
+    <% if vote %>
+      <%= link_to t("decidim.elections.votes.confirmed.feedback"), election_feedback_path(election, hash: vote.encrypted_vote_hash, token: params[:token]) %>
+    <% else %>
+      <%= link_to t("decidim.elections.votes.confirmed.feedback"), election_feedback_path(election) %>
+    <% end %>
   </p>
 </div>
diff --git a/decidim-elections/app/views/decidim/elections/votes/new.html.erb b/decidim-elections/app/views/decidim/elections/votes/new.html.erb
@@ -80,6 +80,10 @@
     <div id="step-ballot_decision" hidden>
       <%= render("new_ballot_decision_step") %>
     </div>
+
+    <div id="failed" hidden>
+      <%= render("show_failed") %>
+    </div>
   </div>
 
   <%= render "decidim/elections/shared/broken_promises_modal" %>