From d4756bb734b092e11d03641e2fa5a011037b2cb9 Mon Sep 17 00:00:00 2001 From: vince0656 Date: Tue, 17 Jul 2018 09:57:09 +0100 Subject: [PATCH] Added ballot choice UI that allows the user to choose between 2 generated ballots whilst showing the ballot's hash. When the user makes their choice, then the ballot is sent to server --- allauthdemo/polls/views.py | 2 +- allauthdemo/templates/polls/event_vote.html | 10 +- allauthdemo/views.py | 46 +---- static/css/main.css | 19 +- static/js/event_vote.js | 208 +++++++++++++++----- 5 files changed, 190 insertions(+), 95 deletions(-) diff --git a/allauthdemo/polls/views.py b/allauthdemo/polls/views.py index a6c8235..7bc00b9 100755 --- a/allauthdemo/polls/views.py +++ b/allauthdemo/polls/views.py @@ -334,7 +334,7 @@ def event_trustee_decrypt(request, event_id): # TODO: Combine partial decryptions and gen results combine_decryptions_and_tally.delay(event) - messages.add_message(request, messages.SUCCESS, 'Your secret key has been successfully submitted') + messages.add_message(request, messages.SUCCESS, 'Your partial decryptions have been successfully submitted') return HttpResponseRedirect(reverse("user_home")) # Without an access key, the client does not have permission to access this page diff --git a/allauthdemo/templates/polls/event_vote.html b/allauthdemo/templates/polls/event_vote.html index 6fa1c6c..d186ad3 100755 --- a/allauthdemo/templates/polls/event_vote.html +++ b/allauthdemo/templates/polls/event_vote.html @@ -111,9 +111,17 @@
-

Ballot

+

Please Select a Ballot

+
+ + A + + + B + +
diff --git a/allauthdemo/views.py b/allauthdemo/views.py index b2c7c05..e91f735 100755 --- a/allauthdemo/views.py +++ b/allauthdemo/views.py @@ -1,68 +1,28 @@ from django.template import RequestContext -from django.shortcuts import render_to_response, render from django.contrib.auth.decorators import login_required -from django.http import HttpResponseRedirect from django.views import generic from allauthdemo.polls.models import Event -from django.shortcuts import get_object_or_404, render, render_to_response +from django.shortcuts import render_to_response + @login_required def member_index(request): return render_to_response("member/member-index.html", RequestContext(request)) -#def member_events(request): - #self.publisher = get_object_or_404(Publisher, name=self.args[0]) - #return Book.objects.filter(publisher=self.publisher) - #return render_to_response("member/member-events.html", RequestContext(request)) - class MemberEvents(generic.ListView): model = Event template_name = 'member/member-events.html' def get_context_data(self, **kwargs): context = super(MemberEvents, self).get_context_data(**kwargs) - #self.object.organisers.filter(email=self.request.user.email()) # no check needed for anon, as url should make sure we're logged in! return context def get_queryset(self): - #self.publisher = get_object_or_404(Publisher, name=self.args[0]) return self.request.user.organisers.all() + @login_required def member_action(request): return render_to_response("member/member-action.html", RequestContext(request)) - - - - -''' - -class EventListView(generic.ListView): - - model = Event - - def get_context_data(self, **kwargs): - context = super(EventListView, self).get_context_data(**kwargs) - #context['now'] = timezone.now() - return context - - def get_context_data(self, **kwargs): - context = super(EventDetailView, self).get_context_data(**kwargs) - context['is_organiser'] = ((not self.request.user.is_anonymous()) and (self.object.users.filter(email=self.request.user.email).exists())) - #context['now'] = timezone.now() - return context - -class PollDetailView(generic.DetailView): - - model = Poll - - def get_context_data(self, **kwargs): - context = super(PollDetailView, self).get_context_data(**kwargs) - #context['now'] = timezone.now() - context['form'] = VoteForm(instance=self.object) - context['poll_count'] = self.object.event.polls.all().count() - return context - -''' diff --git a/static/css/main.css b/static/css/main.css index 79df47c..475ae38 100755 --- a/static/css/main.css +++ b/static/css/main.css @@ -182,5 +182,22 @@ input[type="file"] { /* Voting page */ .big-checkbox { - width: 30px; height: 30px; + width: 30px !important; height: 30px; } + +.btn-sq { + width: 125px !important; + height: 125px !important; + font-size: 16px; + line-height: 115px; + text-align: center; +} + +.choice { + margin-left: 2em; +} + +.choice-group { + width: 54%; + margin: 0 auto; +} \ No newline at end of file diff --git a/static/js/event_vote.js b/static/js/event_vote.js index 88c8e89..6de7a42 100644 --- a/static/js/event_vote.js +++ b/static/js/event_vote.js @@ -1,3 +1,18 @@ +function showDialogWithText(titleTxt, bodyTxt) { + var modalDialog = $('#modalDialog'); + var title = modalDialog.find('.modal-title'); + var body = modalDialog.find('.modal-body'); + + title.text(titleTxt); + + var p = document.createElement("p"); + p.innerHTML = bodyTxt; + body.empty(); + body.append( p ); + + modalDialog.modal('show'); +} + // This should stop people ticking more than the maximum permitted function updateCheckboxInteractivity() { var inputs = $("label input[type=checkbox]"); @@ -52,21 +67,13 @@ function isVotingInputValid() { // This will highlight when people haven't selected enough options if(!valid) { - var modalDialog = $('#modalDialog'); - var title = modalDialog.find('.modal-title'); - var body = modalDialog.find('.modal-body'); - var errText = "You've only selected " + selectedCount + let errText = "You've only selected " + selectedCount + " option(s). The minimum number you need to select is " + MIN_SELECTIONS + " and the maximum is " + MAX_SELECTIONS + ". Please go back and correct this."; - title.text('Voting Error'); + let titleTxt = 'Voting Error'; - var p = document.createElement("p"); - p.innerHTML = errText; - body.empty(); - body.append( p ); - - modalDialog.modal('show'); + showDialogWithText(titleTxt, errText); return; } @@ -88,7 +95,6 @@ function genBlankVote() { return vote; } -var progress = 0; var progressBar = document.getElementById("progress-bar"); // Based on the user's vote in the current poll, this generates a ballot which @@ -125,15 +131,21 @@ function generateBallot() { checkboxInputs.each(function() { var checkbox = $(this); - // Push the selected option values to an array + // Push the selected option values (ones that have been checked) to an array if(checkbox.prop('checked')) { unencryptedVotes.push(checkbox.val()); } - // For whatever hasn't been selected, push a blank vote to the array - else { + }); + + // If there is a dif between the num selected and the max allowed, push blank votes to the array to pad this + // to prevent information leakage + if(unencryptedVotes.length < MAX_SELECTIONS) { + let blankVotesToPush = MAX_SELECTIONS - unencryptedVotes.length; + + for(let i = 0; i < blankVotesToPush; i++) { unencryptedVotes.push(genBlankVote()); } - }); + } // Encrypt all of the votes for this ballot var encryptedVotes = []; @@ -163,12 +175,9 @@ function generateBallot() { }); }); - var ballot = { + return { encryptedVotes: encryptedVotes }; - - - return ballot; } $('#gen-ballots-btn').click(function() { @@ -181,28 +190,19 @@ $('#gen-ballots-btn').click(function() { $('#progress-bar-description').toggleClass('hidden'); $('#progress-bar-container').toggleClass('hidden'); - setTimeout(generateBallotsAndShowUsr, 50); + setTimeout(generateBallotsAndShowUsr, 25); } }); function voteSuccessfullyReceived() { - var modalDialog = $('#modalDialog'); - var title = modalDialog.find('.modal-title'); - var body = modalDialog.find('.modal-body'); - - title.text('Vote Successfully Received'); - var bodyText = "Thank you for voting!"; + let titleTxt = 'Vote Successfully Received'; + let bodyText = "Thank you for voting!"; if(POLL_NUM !== POLL_COUNT) { bodyText += " You can vote on the next poll by closing down this dialog and clicking 'Next Poll'."; } - var p = document.createElement("p"); - p.innerHTML = bodyText; - body.empty(); - body.append( p ); - - modalDialog.modal('show'); + showDialogWithText(titleTxt, bodyText); } var CSRF = $( "input[name='csrfmiddlewaretoken']" ).val(); @@ -230,25 +230,135 @@ function sendBallotToServer(ballot) { }); } +var bytestostring = function(b) { + var s = ""; + var len = b.length; + var ch; + for (var i = 0; i < len; i++) { + ch = b[i]; + s += ((ch >>> 4) & 15).toString(16); + s += (ch & 15).toString(16); + } + return s; +}; + +var stringtobytes = function(s) { + var b = []; + for (var i = 0; i < s.length; i++) { + b.push(s.charCodeAt(i)); + } + return b; +}; + +function SHA256Hash(bytes, toStr) { + var ctx = new CTX(); + + var R = []; + var H = new ctx.HASH256(); + + H.process_array(bytes); + R = H.hash(); + + if (R.length === 0) { + return null; + } + + if(toStr) { + // If toStr is true we return the stringified version of the bytes of the hash + return bytestostring(R); + } else { + // If toStr is false we return the bytes of the hash + return R; + } +} + +// FAO Ben: Called once the ballot has been sent to the back-end and dialog has closed +function onAfterBallotSend() { + // TODO: FAO Ben: Implement QR func here. + // TODO: Currently, there is a dialog already implemented in the event_vote.html page which is + // TODO: used for voting error information but could be used to display the QR code using JS in + // TODO: a similar way that showBallotChoiceDialog does. +} + +function processBallotSelection(selection, selectionHash, successFn) { + // Dispatch the ballot to the server + sendBallotToServer(selection); + + // Close the choice selection dialog + var modalDialog = $('#modalDialog'); + modal.modal('hide'); + + // Call the successfn currently with the selection hash but this may not be needed + successFn(selectionHash); +} + +function showBallotChoiceDialog(ballotA, ballotB) { + // Output hashes of the 2 ballots + const BALLOT_A_HASH = SHA256Hash(stringtobytes(JSON.stringify(ballotA)), true); + const BALLOT_B_HASH = SHA256Hash(stringtobytes(JSON.stringify(ballotB)), true); + + // With the ballots and their hashes generated, we can display the ballot choice dialog + var modalDialog = $('#modalDialog'); + var title = modalDialog.find('.modal-title'); + var body = modalDialog.find('.modal-body'); + body.empty(); + title.text('Please Select a Ballot'); + + // Generate the body of the dialog which consists of a button for A and for B as well as their hashes + var choiceGroupDiv = document.createElement('div'); + choiceGroupDiv.setAttribute('class', 'choice-group'); + + var btnChoiceA = document.createElement('a'); + btnChoiceA.setAttribute('id', 'choice-A'); + btnChoiceA.setAttribute('class', 'btn btn-sq btn-primary'); + btnChoiceA.innerHTML = 'A'; + choiceGroupDiv.append(btnChoiceA); + + var btnChoiceB = document.createElement('a'); + btnChoiceB.setAttribute('id', 'choice-B'); + btnChoiceB.setAttribute('class', 'btn btn-sq btn-warning choice'); + btnChoiceB.innerHTML = 'B'; + choiceGroupDiv.append(btnChoiceB); + + // ---------------------------------------------- + + var hashGroupDiv = document.createElement('div'); + var br = document.createElement('br'); + hashGroupDiv.append( br ); + + var hashA = document.createElement("span"); + hashA.innerHTML = "Hash A: " + BALLOT_A_HASH; + hashGroupDiv.append( hashA ); + + var br2 = document.createElement('br'); + hashGroupDiv.append( br2 ); + + var hashB = document.createElement("span"); + hashB.innerHTML = "Hash B: " + BALLOT_B_HASH; + hashGroupDiv.append( hashB ); + + // ----------------------------------------------- + + body.append(choiceGroupDiv); + body.append(hashGroupDiv); + + modalDialog.modal('show'); + + // Register callback functions for the selection of either A or B + $('#choice-A').click(function(e) { + processBallotSelection(ballotA, BALLOT_A_HASH, onAfterBallotSend); + }); + + $('#choice-B').click(function(e) { + processBallotSelection(ballotB, BALLOT_B_HASH, onAfterBallotSend); + }); +} + function generateBallotB(ballotA) { var ballotB = generateBallot(); progressBar.setAttribute("style", "width: 100%;"); - var ballots = { - A : ballotA, - B : ballotB - }; - - // TODO: Implement ballot choice UI and QR func here. At the moment the code automatically - // TODO: submits the first ballot (as if the user selected it) to the server but this needs updating. - // TODO: Currently, there is a dialog already implemented in the event_vote.html page which is - // TODO: used for voting error information but could be used to display the ballot choices. - // This delay allows the execution thread to update the above CSS on the progress bar - var selectedBallot = ballots.A; - - setTimeout(function () { - sendBallotToServer(selectedBallot); - }, 50); + showBallotChoiceDialog(ballotA, ballotB); } function generateBallotsAndShowUsr() { @@ -262,5 +372,5 @@ function generateBallotsAndShowUsr() { // This delay allows the execution thread to update the above CSS on the progress bar setTimeout(function () { generateBallotB(ballotA); - }, 125); + }, 150); } \ No newline at end of file