{{ cant_vote_reason }}
diff --git a/static/css/main.css b/static/css/main.css index f07dd7c..79df47c 100755 --- a/static/css/main.css +++ b/static/css/main.css @@ -178,4 +178,9 @@ input[type="file"] { .overviewPadding { padding-left: 16px; -} \ No newline at end of file +} + +/* Voting page */ +.big-checkbox { + width: 30px; height: 30px; +} diff --git a/static/js/decrypt_event.js b/static/js/decrypt_event.js index 862acdf..7e6768f 100644 --- a/static/js/decrypt_event.js +++ b/static/js/decrypt_event.js @@ -1,3 +1,59 @@ +//SK checking algorithm - If PK and SK matches, it returns True; otherwise, it returns false. +// Written by Bingsheng Zhang +function skCheck(ctx, params, SK, PK) { + var D = ctx.PAIR.G1mul(params.g1, SK); + return D.equals(PK) +} + +function validateSKFromString(SKStr) { + // Re-create the SK from the string byte definition + let ctx = new CTX("BN254CX"); + + let skBytes = SKStr.split(","); + let sk = new ctx.BIG.fromBytes(skBytes); + + // Re-create the params + let n = new ctx.BIG(); + let g1 = new ctx.ECP(); + let g2 = new ctx.ECP2(); + + n.copy(tempParams.n); + g1.copy(tempParams.g1); + g2.copy(tempParams.g2); + + let params = { + n:n, + g1:g1, + g2:g2 + }; + + // Re-create the trustee PK from the string byte definition + let pkBytes = trustee_pk.split(',').map(function(byteStr) { + return parseInt(byteStr) + }); + + let pk = new ctx.ECP.fromBytes(pkBytes); + + // Check that the SK supplies generates the PK we know about + return skCheck(ctx, params, sk, pk); +} + +function showDialog(titleTxt, bodyTxt) { + var modalDialog = $('#modalDialog'); + var title = modalDialog.find('.modal-title'); + var body = modalDialog.find('.modal-body'); + + title.text(titleTxt); + var bodyText = bodyTxt; + + var p = document.createElement("p"); + p.innerHTML = bodyText; + body.empty(); + body.append( p ); + + modalDialog.modal('show'); +} + function processFileSKChange(event) { var files = event.target.files; @@ -6,7 +62,23 @@ function processFileSKChange(event) { var reader = new FileReader(); reader.onload = function(e) { - $('input#secret-key').val(reader.result); + var SKStr = reader.result; + + // Check that the SK string is not blank + if(SKStr === '') { + // Show a dialog informing the user that they've uploaded a blank file + showDialog('Error', 'The file you have uploaded is blank.'); + } + + const valid = validateSKFromString(SKStr); + + if(valid) { + $('input#secret-key').val(SKStr); + } else { + // Show a dialog informing the user that they've supplied an invalid SK + showDialog('Error', + 'The secret key you have supplied is invalid and doesn\'t match with the recorded public key.'); + } }; reader.readAsText(files[0]); diff --git a/static/js/event_vote.js b/static/js/event_vote.js new file mode 100644 index 0000000..634652e --- /dev/null +++ b/static/js/event_vote.js @@ -0,0 +1,273 @@ +// This should stop people ticking more than the maximum permitted +function updateCheckboxInteractivity() { + var inputs = $("label input[type=checkbox]"); + + if(selectedCount === MAX_SELECTIONS) { + inputs.each(function() { + var input = $(this); + + if(!input.prop('checked')){ + input.prop('disabled', true); + } + }); + } else { + inputs.each(function() { + var input = $(this); + + if(!input.prop('checked')) { + input.prop('disabled', false); + } + }); + } +} + +$("label input[type=checkbox]").change(function() { + // Increment the selectedCount counter if a box has been checked + if(this.checked) { + selectedCount += 1; + } else { + selectedCount -= 1; + + // Just incase this falls below zero to avoid any nasty bugs + if(selectedCount < 0) { + selectedCount = 0; + } + } + + updateCheckboxInteractivity(); +}); + +function dropDownFragsNotZero(frags) { + var valid = false; + + for(var i = 0; i < frags.length; i++) { + var frag = frags[i]; + + if(frag !== "0") { + valid = true; + break; + } + } + + return valid; +} + +function isVotingInputValid() { + var valid = true; + + // First establish if the user's selection count is valid + if(!(selectedCount >= MIN_SELECTIONS && selectedCount <= MAX_SELECTIONS)) { + valid = false; + } + + // 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 + + " 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'); + + var p = document.createElement("p"); + p.innerHTML = errText; + body.empty(); + body.append( p ); + + modalDialog.modal('show'); + return; + } + + return valid; +} + +// Generates a blank vote as a string using the binary encoding scheme +function genBlankVote() { + var vote = ""; + + for(var i = 0; i < OPTION_COUNT; i++) { + vote += "0"; + + if (i !== (OPTION_COUNT - 1)) { + vote += ","; + } + } + + 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 +// does not leak information about how many options the user has selected +function generateBallot() { + // Elliptic curve cryptography params used for encryption of encrypted vote + // fragments + var ctx = new CTX("BN254CX"); + var n = new ctx.BIG(); + var g1 = new ctx.ECP(); + var g2 = new ctx.ECP2(); + + var parameter = $('#event-param').val(); + var tempParams = JSON.parse(JSON.parse(parameter).crypto); + + //copying the values + n.copy(tempParams.n); + g1.copy(tempParams.g1); + g2.copy(tempParams.g2); + + var params = { + n:n, + g1:g1, + g2:g2 + }; + + var tempPK = JSON.parse($('#comb_pk').val()); + var pk = new ctx.ECP(0); + pk.copy(tempPK.PK); + + // Collect together the unencrypted votes (which correspond to selected options) + var checkboxInputs = $("label input[type=checkbox]"); + var unencryptedVotes = []; + checkboxInputs.each(function() { + var checkbox = $(this); + + // Push the selected option values 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 { + unencryptedVotes.push(genBlankVote()); + } + }); + + // Encrypt all of the votes for this ballot + var encryptedVotes = []; + unencryptedVotes.forEach(function(unencryptedVote) { + var encFragments = []; + + // Encrypt each fragment of the unencrypted vote + unencryptedVote.split(',').forEach(function(fragment) { + var cipher = encrypt(params, pk, parseInt(fragment)); + + // Store C1 and C2 from the cipher in the fragment + var c1Bytes = []; + cipher.C1.toBytes(c1Bytes); + + var c2Bytes = []; + cipher.C2.toBytes(c2Bytes); + + encFragments.push({ + C1 : c1Bytes.toString(), + C2 : c2Bytes.toString() + }); + }); + + // Store all fragments in a single 'encrypted vote' + encryptedVotes.push({ + fragments: encFragments + }); + }); + + var ballot = { + encryptedVotes: encryptedVotes + }; + + + return ballot; +} + +$('#gen-ballots-btn').click(function() { + // Ensure that the user selections are valid + if(isVotingInputValid()) { + // Hide the button + $(this).toggleClass('hidden'); + + // Inject the description progress bar which can then be updated by the encrypt btn + $('#progress-bar-description').toggleClass('hidden'); + $('#progress-bar-container').toggleClass('hidden'); + + setTimeout(generateBallotsAndShowUsr, 50); + } +}); + +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!"; + + var p = document.createElement("p"); + p.innerHTML = bodyText; + body.empty(); + body.append( p ); + + modalDialog.modal('show'); +} + +var CSRF = $( "input[name='csrfmiddlewaretoken']" ).val(); +function csrfSafeMethod(method) { + // these HTTP methods do not require CSRF protection + return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); +} + +function sendBallotToServer(ballot) { + $.ajaxSetup({ + beforeSend: function(xhr, settings) { + if (!csrfSafeMethod(settings.type) && !this.crossDomain) { + xhr.setRequestHeader("X-CSRFToken", CSRF); + } + } + }); + + $.ajax({ + type : "POST", + url : window.location, + data : JSON.stringify({ ballot: ballot}), + success : function(){ + voteSuccessfullyReceived(); + } + }); +} + +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); +} + +function generateBallotsAndShowUsr() { + // Generate Ballot A and Ballot B to be displayed to the user + // This fn starts the process + var ballotA = generateBallot(); + + // Update the progress bar once the generation has completed + progressBar.setAttribute("style", "width: 50%;"); + + // This delay allows the execution thread to update the above CSS on the progress bar + setTimeout(function () { + generateBallotB(ballotA); + }, 125); +} \ No newline at end of file