decidim-elections 0.27.5 → 0.28.0.rc4

data/app/packs/src/decidim/elections/trustee/tally.js

@@ -13,131 +13,135 @@ import { TrusteeWrapperAdapter as ElectionGuardTrusteeWrapperAdapter } from "@de
 
 $(() => {
   // UI Elements
-  const $tally = $(".trustee-step");
-  const $startButton = $tally.find(".start");
-  const getStepRow = (step) => {
-    return $(`#${step.replace(".", "-")}`);
-  };
-  const $restoreModal = $("#show-restore-modal");
-  const $restoreButton = $restoreModal.find(".upload-election-keys");
-  const $backButton = $tally.find(".back");
-  const TRUSTEE_AUTHORIZATION_EXPIRATION_TIME_IN_HOURS = 2;
-
-  // Data
-  const bulletinBoardClientParams = {
-    apiEndpointUrl: $tally.data("apiEndpointUrl")
-  };
-  const electionUniqueId = `${$tally.data("authoritySlug")}.${$tally.data(
-    "electionId"
-  )}`;
-  const authorityPublicKeyJSON = JSON.stringify(
-    $tally.data("authorityPublicKey")
-  );
-  const schemeName = $tally.data("schemeName");
-
-  const trusteeContext = {
-    uniqueId: $tally.data("trusteeSlug"),
-    publicKeyJSON: JSON.stringify($tally.data("trusteePublicKey"))
-  };
-  const trusteeIdentificationKeys = new IdentificationKeys(
-    trusteeContext.uniqueId,
-    trusteeContext.publicKeyJSON
-  );
-  let currentStep = null;
-
-  // Use the correct trustee wrapper adapter
-  let trusteeWrapperAdapter = null;
-
-  if (schemeName === "dummy") {
-    trusteeWrapperAdapter = new DummyTrusteeWrapperAdapter({
-      trusteeId: trusteeContext.uniqueId
-    });
-  } else if (schemeName === "electionguard") {
-    trusteeWrapperAdapter = new ElectionGuardTrusteeWrapperAdapter({
-      trusteeId: trusteeContext.uniqueId,
-      workerUrl: "/assets/electionguard/webworker.js"
-    });
-  } else {
-    throw new Error(`Voting scheme ${schemeName} not supported.`);
-  }
+  const $tally = $("#trustee-step");
+  const trusteeStep = $tally.data("currentStep")
+
+  if ($tally.length && trusteeStep === "tally_started") {
+    const $startButton = $tally.find("#start");
+    const $backButton = $tally.find("#back");
+
+    const getStepRow = (step) => {
+      return $(`#${step.replace(".", "-")}`);
+    };
+
+    const TRUSTEE_AUTHORIZATION_EXPIRATION_TIME_IN_HOURS = 2;
+
+    // Data
+    const bulletinBoardClientParams = {
+      apiEndpointUrl: $tally.data("apiEndpointUrl")
+    };
+    const electionUniqueId = `${$tally.data("authoritySlug")}.${$tally.data(
+      "electionId"
+    )}`;
+    const authorityPublicKeyJSON = JSON.stringify(
+      $tally.data("authorityPublicKey")
+    );
+    const schemeName = $tally.data("schemeName");
+
+    const trusteeContext = {
+      uniqueId: $tally.data("trusteeSlug"),
+      publicKeyJSON: JSON.stringify($tally.data("trusteePublicKey"))
+    };
+    const trusteeIdentificationKeys = new IdentificationKeys(
+      trusteeContext.uniqueId,
+      trusteeContext.publicKeyJSON
+    );
+    let currentStep = null;
+
+    // Use the correct trustee wrapper adapter
+    let trusteeWrapperAdapter = null;
+
+    if (schemeName === "dummy") {
+      trusteeWrapperAdapter = new DummyTrusteeWrapperAdapter({
+        trusteeId: trusteeContext.uniqueId
+      });
+    } else if (schemeName === "electionguard") {
+      trusteeWrapperAdapter = new ElectionGuardTrusteeWrapperAdapter({
+        trusteeId: trusteeContext.uniqueId,
+        workerUrl: "/assets/electionguard/webworker.js"
+      });
+    } else {
+      throw new Error(`Voting scheme ${schemeName} not supported.`);
+    }
 
-  // Use the tally component and bind all UI events
-  const component = new TallyComponent({
-    authorityPublicKeyJSON,
-    trusteeUniqueId: trusteeContext.uniqueId,
-    trusteeIdentificationKeys,
-    trusteeWrapperAdapter
-  });
-
-  const bindComponentEvents = async () => {
-    await component.setupElection({
-      bulletinBoardClientParams,
-      electionUniqueId,
-      authorizationExpirationTimestamp:
-        Math.ceil(Number(new Date()) / 1000) +
-        TRUSTEE_AUTHORIZATION_EXPIRATION_TIME_IN_HOURS * 3600
+    // Use the tally component and bind all UI events
+    const component = new TallyComponent({
+      authorityPublicKeyJSON,
+      trusteeUniqueId: trusteeContext.uniqueId,
+      trusteeIdentificationKeys,
+      trusteeWrapperAdapter
     });
 
-    await component.bindEvents({
-      onEvent(event) {
-        let messageIdentifier = MessageIdentifier.parse(
-          event.message.messageId
-        );
+    const bindComponentEvents = async () => {
+      await component.setupElection({
+        bulletinBoardClientParams,
+        electionUniqueId,
+        authorizationExpirationTimestamp:
+          Math.ceil(Number(new Date()) / 1000) +
+          TRUSTEE_AUTHORIZATION_EXPIRATION_TIME_IN_HOURS * 3600
+      });
 
-        if (event.type === MESSAGE_RECEIVED) {
-          if (currentStep && currentStep !== messageIdentifier.typeSubtype) {
-            const $previousStep = getStepRow(currentStep);
-            $previousStep.attr("data-step-status", "completed");
-          }
-          currentStep = messageIdentifier.typeSubtype;
+      await component.bindEvents({
+        onEvent(event) {
+          let messageIdentifier = MessageIdentifier.parse(
+            event.message.messageId
+          );
+
+          if (event.type === MESSAGE_RECEIVED) {
+            if (currentStep && currentStep !== messageIdentifier.typeSubtype) {
+              const $previousStep = getStepRow(currentStep);
+              $previousStep.attr("data-step-status", "completed");
+            }
+            currentStep = messageIdentifier.typeSubtype;
 
-          const $currentStep = getStepRow(currentStep);
-          if ($currentStep.data("step-status") !== "completed") {
-            $currentStep.attr("data-step-status", "processing");
+            const $currentStep = getStepRow(currentStep);
+            if ($currentStep.data("step-status") !== "completed") {
+              $currentStep.attr("data-step-status", "processing");
+            }
           }
+        },
+        onBindStartButton(onEventTriggered) {
+          $startButton.on("click", onEventTriggered);
+        },
+        onStart() {
+          $startButton.prop("disabled", true);
+        },
+        onComplete() {
+          const $allSteps = $(".step_status");
+          $allSteps.attr("data-step-status", "completed");
+
+          $startButton.attr("hidden", true);
+          $backButton.attr("hidden", false);
+
+          $.ajax({
+            method: "PATCH",
+            url: $tally.data("updateElectionStatusUrl"),
+            contentType: "application/json",
+            data: JSON.stringify({
+              status: "tally_started"
+            }),
+            headers: {
+              "X-CSRF-Token": $("meta[name=csrf-token]").attr("content")
+            }
+          });
+        },
+        onTrusteeNeedsToBeRestored() {
+          window.Decidim.currentDialogs["show-restore-modal"].open()
+        },
+        onBindRestoreButton(onEventTriggered) {
+          $("#restore-button-input").on("change", onEventTriggered);
+        },
+        onRestore() {
+          window.Decidim.currentDialogs["show-restore-modal"].close()
         }
-      },
-      onBindStartButton(onEventTriggered) {
-        $startButton.on("click", onEventTriggered);
-      },
-      onStart() {
-        $startButton.prop("disabled", true);
-      },
-      onComplete() {
-        const $allSteps = $(".step_status");
-        $allSteps.attr("data-step-status", "completed");
-
-        $startButton.addClass("hide");
-        $backButton.removeClass("hide");
-
-        $.ajax({
-          method: "PATCH",
-          url: $tally.data("updateElectionStatusUrl"),
-          contentType: "application/json",
-          data: JSON.stringify({
-            status: "tally_started"
-          }),
-          headers: {
-            "X-CSRF-Token": $("meta[name=csrf-token]").attr("content")
-          }
-        });
-      },
-      onTrusteeNeedsToBeRestored() {
-        $restoreModal.foundation("open");
-      },
-      onBindRestoreButton(onEventTriggered) {
-        $restoreButton.on("change", ".restore-button-input", onEventTriggered);
-      },
-      onRestore() {
-        $restoreModal.foundation("close");
+      });
+      $startButton.prop("disabled", false);
+    };
+
+    trusteeIdentificationKeys.present(async (exists) => {
+      if (exists) {
+        await bindComponentEvents();
       }
     });
-    $startButton.prop("disabled", false);
-  };
-
-  trusteeIdentificationKeys.present(async (exists) => {
-    if (exists) {
-      await bindComponentEvents();
-    }
-  });
+  }
 });

data/app/packs/src/decidim/elections/trustee/trustee_zone.js

@@ -4,7 +4,7 @@ import { IdentificationKeys } from "@decidim/decidim-bulletin_board";
 
 $(() => {
   function identificationKeys() {
-    const $form = $(".trustee_zone form");
+    const $form = $("#trustee_zone form");
     const $trusteeSlug = $("#trustee_slug", $form);
     const $trusteePublicKey = $("#trustee_public_key", $form);
 
@@ -12,8 +12,9 @@ $(() => {
       $trusteeSlug.val(),
       $trusteePublicKey.val()
     );
+
     if (!window.trusteeIdentificationKeys.browserSupport) {
-      $("#not_supported_browser").addClass("visible");
+      $("#not_supported_browser").attr("hidden", false);
       return;
     }
 
@@ -28,23 +29,24 @@ $(() => {
           $trusteePublicKey.val(
             JSON.stringify(window.trusteeIdentificationKeys.publicKey)
           );
-          $submit.addClass("visible");
+          $submit.attr("hidden", false);
+          $generate.attr("hidden", true);
         }).
         catch(() => {
           alert($generate.data("error"));
         });
     });
 
-    $("button.hollow", $submit).click(() => {
+    $("button", $submit).click(() => {
       $trusteePublicKey.val("");
-      $submit.removeClass("visible");
+      $submit.attr("hidden", true);
     });
 
     $("button", $upload).click(() => {
       window.trusteeIdentificationKeys.
         upload().
         then(() => {
-          $upload.addClass("hide");
+          $upload.attr("hidden", true);
         }).
         catch((errorMessage) => {
           alert($upload.data(errorMessage));
@@ -52,7 +54,7 @@ $(() => {
     });
 
     window.trusteeIdentificationKeys.present((result) => {
-      $upload.toggleClass("hide", result);
+      $upload.attr("hidden", result);
     });
   }
 

data/app/packs/src/decidim/elections/voter/casting-vote.js

@@ -4,14 +4,16 @@ import "src/decidim/elections/broken_promises_handler";
 import { Client } from "@decidim/decidim-bulletin_board";
 
 $(async () => {
-  const $castingVoteWrapper = $(".casting-vote-wrapper");
+  const $castingVoteWrapper = $("#casting-vote-wrapper");
 
-  const bulletinBoardClient = new Client({
-    apiEndpointUrl: $castingVoteWrapper.data("apiEndpointUrl")
-  });
-  const messageId = $castingVoteWrapper.data("messageId");
+  if ($castingVoteWrapper.length) {
+    const bulletinBoardClient = new Client({
+      apiEndpointUrl: $castingVoteWrapper.data("apiEndpointUrl")
+    });
+    const messageId = $castingVoteWrapper.data("messageId");
 
-  await bulletinBoardClient.waitForPendingMessageToBeProcessed(messageId);
+    await bulletinBoardClient.waitForPendingMessageToBeProcessed(messageId);
 
-  $("form.update_vote_status").trigger("submit");
+    $("form.update_vote_status").trigger("submit");
+  }
 });

data/app/packs/src/decidim/elections/voter/new-vote.js

@@ -1,83 +1,104 @@
+/* eslint-disable no-inner-declarations */
+/* eslint-disable require-jsdoc */
+/* eslint-disable func-style */
 /* eslint-disable no-console */
 import VoteQuestionsComponent from "src/decidim/elections/voter/vote_questions.component";
-// The voting component might come from set-preview.js or setup-vote.js, it depends if it's a preview
-// so in the view template we load the component and attach it to window
-const { setupVoteComponent } = window.Decidim;
 
 $(async () => {
   // UI Elements
-  const $voteWrapper = $(".vote-wrapper");
-  const $ballotHash = $voteWrapper.find(".ballot-hash");
-  const ballotStyleId = $voteWrapper.data("ballotStyleId");
+  const $voteWrapper = $("#vote-wrapper");
 
-  // Use the questions component
-  const questionsComponent = new VoteQuestionsComponent($voteWrapper);
-  questionsComponent.init();
-  $(document).on("on.zf.toggler", () => {
-    // continue and back btn
+  if ($voteWrapper.length) {
+    const $ballotHash = $voteWrapper.find("#ballot-hash");
+    const ballotStyleId = $voteWrapper.data("ballotStyleId");
+    const isPreview = $voteWrapper.data("previewMode");
+
+    // Use the questions component
+    const questionsComponent = new VoteQuestionsComponent($voteWrapper);
     questionsComponent.init();
-  });
 
-  // Get the vote component and bind it to all UI events
-  const voteComponent = setupVoteComponent($voteWrapper);
-  await voteComponent.bindEvents({
-    onBindEncryptButton(onEventTriggered) {
-      $(".button.confirm").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("#encrypting").addClass("hide");
-      $ballotHash.text(encryptedDataHash);
-      $voteWrapper.find("#ballot_decision").removeClass("hide");
+    // Activates the events associated to the forms after show a new step
+    $(document).on("on:toggle", () => questionsComponent.init());
+
+    async function setup(component) {
+      // Get the vote component and bind it to all UI events
+      const voteComponent = component($voteWrapper);
+
+      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);
 
-      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(".button.cast_ballot").addClass("hide");
-      $voteWrapper.find(".button.back").removeClass("hide");
-      questionsComponent.voteCasted = true;
+            // 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;
+
+            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();
+      }
+    }
 
-      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.");
+    if (isPreview) {
+      import("./setup-preview").then(({ default: module }) => setup(module))
+    } else {
+      import("./setup-vote").then(({ default: module }) => setup(module))
     }
-  });
+  }
 });

data/app/packs/src/decidim/elections/voter/setup-preview.js

@@ -73,7 +73,3 @@ export default function setupVoteComponent($voteWrapper) {
     voterUniqueId
   });
 }
-
-window.Decidim = window.Decidim || {};
-window.Decidim.setupVoteComponent = setupVoteComponent;
-

data/app/packs/src/decidim/elections/voter/setup-vote.js

@@ -47,7 +47,3 @@ export default function setupVoteComponent($voteWrapper) {
     voterWrapperAdapter
   });
 }
-
-window.Decidim = window.Decidim || {};
-window.Decidim.setupVoteComponent = setupVoteComponent;
-

data/app/packs/src/decidim/elections/voter/verify-vote.js

@@ -4,8 +4,13 @@
 import { Client } from "@decidim/decidim-bulletin_board";
 
 $(() => {
-  const $voteVerifyWrapper = $(".verify-vote-wrapper");
-  const $verifySubmitButton = $voteVerifyWrapper.find("a.focus__next.confirm");
+  const $voteVerifyWrapper = $("#verify-vote-wrapper");
+
+  if (!$voteVerifyWrapper.length) {
+    return
+  }
+
+  const $verifySubmitButton = $voteVerifyWrapper.find("[type=submit]");
 
   let $formData = $voteVerifyWrapper.find(".vote-identifier");
 
@@ -33,11 +38,11 @@ $(() => {
   }
 
   function hideSuccessCallout() {
-    $voteVerifyWrapper.find(".verify-vote-success").addClass("hide");
+    $voteVerifyWrapper.find("#verify-vote-success").attr("hidden", true);
   }
 
   function hideErrorCallout() {
-    $voteVerifyWrapper.find(".verify-vote-error").addClass("hide");
+    $voteVerifyWrapper.find("#verify-vote-error").attr("hidden", true);
   }
 
   $verifySubmitButton.on("click", (event) => {
@@ -58,10 +63,10 @@ $(() => {
       then((result) => {
         if (result) {
           hideErrorCallout();
-          $voteVerifyWrapper.find(".verify-vote-success").removeClass("hide");
+          $voteVerifyWrapper.find("#verify-vote-success").attr("hidden", false);
         } else {
           hideSuccessCallout();
-          $voteVerifyWrapper.find(".verify-vote-error").removeClass("hide");
+          $voteVerifyWrapper.find("#verify-vote-error").attr("hidden", false);
         }
       });
   }