Lancaster-University/DEMOS2
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
vince0656 2018-07-17 09:57:09 +01:00
parent 14e475cf3b
commit d4756bb734
5 changed files with 190 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
allauthdemo/polls/views.py
View file

@ -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

10
allauthdemo/templates/polls/event_vote.html
View file

@ -111,9 +111,17 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" style="text-align: center"><strong>Ballot</strong></h4>
<h4 class="modal-title" style="text-align: center"><strong>Please Select a Ballot</strong></h4>
</div>
<div class="modal-body">
<div class="choice-group">
<a id="choice-A" class="btn btn-sq btn-primary">
A
</a>
<a id="choice-B" class="btn btn-sq btn-warning choice">
B
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

46
allauthdemo/views.py
View file

@ -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
'''

19
static/css/main.css
View file

@ -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;
}

208
static/js/event_vote.js
View file

@ -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);
}