Merge pull request swapmyvote#978 from stevebaxter/feature/issue-824-…

…initial-sign-up
aspiers · Jul 4, 2024 · 78c57e6 · 78c57e6
2 parents 4abedd8 + 6752105
commit 78c57e6
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 44 deletions.
diff --git a/app/views/home/_swap_form.html.haml b/app/views/home/_swap_form.html.haml
@@ -1,22 +1,24 @@
 .plain-pattern.border-bottom
   .container.text-center
-    %p.choose-party
-      Which party would you most like to vote for?
-      = select :user, :preferred_party_id, nil, {}, {form: 'login-form'} do
-        %option(disabled=true selected=true) ...
-        = options_for_select(@parties.map {|p| [ p.name, p.id ]}, selected: @preferred_party_id)
-    %p.choose-party
-      When we find someone to vote for your party in #{election_constituency_other},
-      which party could you vote for in exchange?
-      = select :user, :willing_party_id, nil, {}, {form: 'login-form'} do
-        %option(disabled=true selected=true) ...
-        = options_for_select(@parties.map {|p| [ p.name, p.id ]}, selected: @willing_party_id)
-    %p
-      %a.btn.btn-lg.btn-primary{ onclick: "submit_modal(); return false", href: "#" } Swap My Vote!
-    %p.small.subdued
-      We will match you with someone who will
-      cast your preferred vote in a different area where it could count for more.
-      In return, you will cast their preferred vote in your area.
+    = form_with url: sign_in_path, id: "login-form", local: true do
+      %p.choose-party
+        Which party would you most like to vote for?
+        = select :user, :preferred_party_id, nil, {}, {form: 'login-form'} do
+          %option(disabled=true selected=true) ...
+          = options_for_select(@parties.map {|p| [ p.name, p.id ]}, selected: @preferred_party_id)
+      %p.choose-party
+        When we find someone to vote for your party in #{election_constituency_other},
+        which party could you vote for in exchange?
+        = select :user, :willing_party_id, nil, {}, {form: 'login-form'} do
+          %option(disabled=true selected=true) ...
+          = options_for_select(@parties.map {|p| [ p.name, p.id ]}, selected: @willing_party_id)
+      %p
+        %button{ formmethod: :post, onclick: "return checkForm()", class: "btn btn-lg btn-primary" }
+          Swap My Vote!
+      %p.small.subdued
+        We will match you with someone who will
+        cast your preferred vote in a different area where it could count for more.
+        In return, you will cast their preferred vote in your area.
 
 .background-pattern.border-bottom
   .container
@@ -33,16 +35,18 @@
       %li If your partner agrees to the swap, it is confirmed. We’ll help you connect with each other, so if you like, you can introduce yourselves.
 
 :javascript
-  function submit_modal() {
+  function checkForm() {
     preferred_party_id = $("select[name='user[preferred_party_id]']").val();
     willing_party_id = $("select[name='user[willing_party_id]']").val();
     if (preferred_party_id == null || willing_party_id == null) {
       $(".js-blank-error-modal").modal();
+      return false;
     } else if (preferred_party_id == willing_party_id) {
       $(".js-equal-party-error-modal").modal();
-    } else {
-       window.location.assign("#{sign_up_path}")
+      return false;
     }
+
+    return true;
   }
 
 .modal.js-blank-error-modal{ tabindex: "-1", role: "dialog" }

diff --git a/spec/views/home/__snapshots__/_open_and_voting_by_election.snap b/spec/views/home/__snapshots__/_open_and_voting_by_election.snap
@@ -18,7 +18,7 @@ constituency.
 </div>
 <div class='plain-pattern border-bottom'>
 <div class='container text-center'>
-<p class='choose-party'>
+<form id="login-form" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" /><p class='choose-party'>
 Which party would you most like to vote for?
 <select form="login-form" name="user[preferred_party_id]" id="user_preferred_party_id"><option disabled selected>...</option>
 <option value="1">Green</option>
@@ -30,14 +30,16 @@ which party could you vote for in exchange?
 <option value="1">Green</option>
 </select></p>
 <p>
-<a class='btn btn-lg btn-primary' href='#' onclick='submit_modal(); return false'>Swap My Vote!</a>
+<button class='btn btn-lg btn-primary' formmethod='post' onclick='return checkForm()'>
+Swap My Vote!
+</button>
 </p>
 <p class='small subdued'>
 We will match you with someone who will
 cast your preferred vote in a different area where it could count for more.
 In return, you will cast their preferred vote in your area.
 </p>
-</div>
+</form></div>
 </div>
 <div class='background-pattern border-bottom'>
 <div class='container'>
@@ -52,16 +54,18 @@ We’ll find you a list of people with the complementary preferences. Pick one p
 </div>
 </div>
 <script>
-  function submit_modal() {
+  function checkForm() {
     preferred_party_id = $("select[name='user[preferred_party_id]']").val();
     willing_party_id = $("select[name='user[willing_party_id]']").val();
     if (preferred_party_id == null || willing_party_id == null) {
       $(".js-blank-error-modal").modal();
+      return false;
     } else if (preferred_party_id == willing_party_id) {
       $(".js-equal-party-error-modal").modal();
-    } else {
-       window.location.assign("/users/sign_up")
+      return false;
     }
+
+    return true;
   }
 </script>
 <div class='modal js-blank-error-modal' role='dialog' tabindex='-1'>

diff --git a/spec/views/home/__snapshots__/_open_and_voting_general.snap b/spec/views/home/__snapshots__/_open_and_voting_general.snap
@@ -18,7 +18,7 @@ constituency.
 </div>
 <div class='plain-pattern border-bottom'>
 <div class='container text-center'>
-<p class='choose-party'>
+<form id="login-form" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" /><p class='choose-party'>
 Which party would you most like to vote for?
 <select form="login-form" name="user[preferred_party_id]" id="user_preferred_party_id"><option disabled selected>...</option>
 <option value="1">Green</option>
@@ -30,14 +30,16 @@ which party could you vote for in exchange?
 <option value="1">Green</option>
 </select></p>
 <p>
-<a class='btn btn-lg btn-primary' href='#' onclick='submit_modal(); return false'>Swap My Vote!</a>
+<button class='btn btn-lg btn-primary' formmethod='post' onclick='return checkForm()'>
+Swap My Vote!
+</button>
 </p>
 <p class='small subdued'>
 We will match you with someone who will
 cast your preferred vote in a different area where it could count for more.
 In return, you will cast their preferred vote in your area.
 </p>
-</div>
+</form></div>
 </div>
 <div class='background-pattern border-bottom'>
 <div class='container'>
@@ -53,16 +55,18 @@ The recent polls by their name can help you see where your vote might make most
 </div>
 </div>
 <script>
-  function submit_modal() {
+  function checkForm() {
     preferred_party_id = $("select[name='user[preferred_party_id]']").val();
     willing_party_id = $("select[name='user[willing_party_id]']").val();
     if (preferred_party_id == null || willing_party_id == null) {
       $(".js-blank-error-modal").modal();
+      return false;
     } else if (preferred_party_id == willing_party_id) {
       $(".js-equal-party-error-modal").modal();
-    } else {
-       window.location.assign("/users/sign_up")
+      return false;
     }
+
+    return true;
   }
 </script>
 <div class='modal js-blank-error-modal' role='dialog' tabindex='-1'>

diff --git a/spec/views/home/__snapshots__/_open_pre_elections_by_election.snap b/spec/views/home/__snapshots__/_open_pre_elections_by_election.snap
@@ -14,7 +14,7 @@ constituency.
 </div>
 <div class='plain-pattern border-bottom'>
 <div class='container text-center'>
-<p class='choose-party'>
+<form id="login-form" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" /><p class='choose-party'>
 Which party would you most like to vote for?
 <select form="login-form" name="user[preferred_party_id]" id="user_preferred_party_id"><option disabled selected>...</option>
 <option value="1">Green</option>
@@ -26,14 +26,16 @@ which party could you vote for in exchange?
 <option value="1">Green</option>
 </select></p>
 <p>
-<a class='btn btn-lg btn-primary' href='#' onclick='submit_modal(); return false'>Swap My Vote!</a>
+<button class='btn btn-lg btn-primary' formmethod='post' onclick='return checkForm()'>
+Swap My Vote!
+</button>
 </p>
 <p class='small subdued'>
 We will match you with someone who will
 cast your preferred vote in a different area where it could count for more.
 In return, you will cast their preferred vote in your area.
 </p>
-</div>
+</form></div>
 </div>
 <div class='background-pattern border-bottom'>
 <div class='container'>
@@ -48,16 +50,18 @@ We’ll find you a list of people with the complementary preferences. Pick one p
 </div>
 </div>
 <script>
-  function submit_modal() {
+  function checkForm() {
     preferred_party_id = $("select[name='user[preferred_party_id]']").val();
     willing_party_id = $("select[name='user[willing_party_id]']").val();
     if (preferred_party_id == null || willing_party_id == null) {
       $(".js-blank-error-modal").modal();
+      return false;
     } else if (preferred_party_id == willing_party_id) {
       $(".js-equal-party-error-modal").modal();
-    } else {
-       window.location.assign("/users/sign_up")
+      return false;
     }
+
+    return true;
   }
 </script>
 <div class='modal js-blank-error-modal' role='dialog' tabindex='-1'>

diff --git a/spec/views/home/__snapshots__/_open_pre_elections_general.snap b/spec/views/home/__snapshots__/_open_pre_elections_general.snap
@@ -14,7 +14,7 @@ constituency.
 </div>
 <div class='plain-pattern border-bottom'>
 <div class='container text-center'>
-<p class='choose-party'>
+<form id="login-form" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" /><p class='choose-party'>
 Which party would you most like to vote for?
 <select form="login-form" name="user[preferred_party_id]" id="user_preferred_party_id"><option disabled selected>...</option>
 <option value="1">Green</option>
@@ -26,14 +26,16 @@ which party could you vote for in exchange?
 <option value="1">Green</option>
 </select></p>
 <p>
-<a class='btn btn-lg btn-primary' href='#' onclick='submit_modal(); return false'>Swap My Vote!</a>
+<button class='btn btn-lg btn-primary' formmethod='post' onclick='return checkForm()'>
+Swap My Vote!
+</button>
 </p>
 <p class='small subdued'>
 We will match you with someone who will
 cast your preferred vote in a different area where it could count for more.
 In return, you will cast their preferred vote in your area.
 </p>
-</div>
+</form></div>
 </div>
 <div class='background-pattern border-bottom'>
 <div class='container'>
@@ -48,16 +50,18 @@ We’ll find you a list of people with the complementary preferences. Pick one p
 </div>
 </div>
 <script>
-  function submit_modal() {
+  function checkForm() {
     preferred_party_id = $("select[name='user[preferred_party_id]']").val();
     willing_party_id = $("select[name='user[willing_party_id]']").val();
     if (preferred_party_id == null || willing_party_id == null) {
       $(".js-blank-error-modal").modal();
+      return false;
     } else if (preferred_party_id == willing_party_id) {
       $(".js-equal-party-error-modal").modal();
-    } else {
-       window.location.assign("/users/sign_up")
+      return false;
     }
+
+    return true;
   }
 </script>
 <div class='modal js-blank-error-modal' role='dialog' tabindex='-1'>