diff --git a/index.html b/index.html index c2975299244e3d0f9f053f7e50c0e2446e45c51d..50d27c53cb9482e13e3018e42b847cdd337e330c 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,11 @@ <!doctype html> -<html ng-app> +<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lib/css/index.css"> - <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"> - <script src="lib/js/angular.min.js"></script> + <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"> <script src="lib/js/bower_components/js-sha256/src/sha256.js"></script> + <script src="lib/js/jquery.min.js"></script> <script src="lib/js/index.js"></script> <script src="lib/js/bootstrap.min.js"></script> @@ -18,19 +18,24 @@ <div> <form class="box" method="post" action="" enctype="multipart/form-data"> <div class="title">Stamp</div> - <div class="center_div" id="stamp" ondrop="drop(event)" ondragover="allowDrop(event)"> - <div style="width: 100%; text-align: center; margin-top: 10px" id="stamp_info">Drop file <span class="glyphicon glyphicon-arrow-down"></span></div> + <div class="center_div" id="stamp" ondrop="stamp(event)" ondragover="allowDrop(event)"> + <div style="width: 100%; text-align: center; margin-top: 10px" id="stamp_info">Drop file to stamp <span class="glyphicon glyphicon-arrow-down"></span></div> </div> <div id="ots_div" class="center_div"> </div> <hr> <div class="title">Verify</div> - <div class="center_div" id="verify"> - <textarea id="verify_ots"></textarea> + <div class="center_div verify_div" id="original_file_div" ondrop="drop_original_file(event)" ondragover="allowDrop(event)"> + <input type="hidden" name="hidden_original_file_hash" id="hidden_original_file_hash" /> + <input type="hidden" name="hidden_original_file_name" id="hidden_original_file_name" /> + + <div style="width: 100%; text-align: center; margin-top: 10px" id="original_file_info">1 - Drop original file</div> + </div> + <div class="center_div verify_div" style="margin-top: 5px;" ondrop="drop_ots(event)" ondragover="allowDrop(event)"> + <div style="width: 100%; text-align: center; margin-top: 10px" id="ots_info">2 - Drop OTS file</div> </div> <div class="center_div" style="width: 50%"> - <div id="response"></div> - <button type="button" id="btn_verify">Verify</button> + <div id="response"></div> </div> </form> </div> diff --git a/lib/css/index.css b/lib/css/index.css index 2b0a8f50051e5bed9da1d6d67a19d481815356fc..4ee145c2c38d964b38376fae137f057f7de392a1 100644 --- a/lib/css/index.css +++ b/lib/css/index.css @@ -16,7 +16,7 @@ h1{ height: 200px; } -#verify{ +.verify_div{ border: 1px solid #ccc; width: 50%; height: 200px; diff --git a/lib/js/index.js b/lib/js/index.js index cf872c6376aa784d3ec59b100b225591bc0fe0ce..053b1f1a21e2e40213742605feef8cc477524dc7 100644 --- a/lib/js/index.js +++ b/lib/js/index.js @@ -21,11 +21,11 @@ function allowDrop(e) { e.preventDefault(); } -function drop(e){ +function stamp(e){ e.preventDefault(); - $('#ots_div').html('<img src="' + loader_gif + '">'); - $('#ots_div').show(); + /*$('#ots_div').html('<img src="' + loader_gif + '">'); + $('#ots_div').show();*/ var file = e.dataTransfer.items[0].getAsFile(); @@ -37,8 +37,8 @@ function drop(e){ var hash = sha256.create(); hash.update(file_contents); var file_hash = hash.hex(); - - $('#stamp_info').html(file.name + ' <i class="far fa-file"></i>'); + + $('#stamp_info').html('File name: <b>' + file.name + '</b><br> File hash: <b>' + file_hash + '</b>'); $.ajax({ url: tsa_api + "stamp/", @@ -46,12 +46,30 @@ function drop(e){ data: {"file_hash" : file_hash}, dataType: "json", success: function(response){ - console.log(response); + var ots = ' {"file_hash": "' + file_hash + '", "ots": "' + response.temporay_ots + '"}'; - $('#ots_div').html(ots); - $('#ots_div').show(); + + var saveData = (function () { + var a = document.createElement("a"); + document.body.appendChild(a); + a.style = "display: none"; + return function (data, fileName) { + var json = JSON.stringify(data), + blob = new Blob([json], {type: "octet/stream"}), + url = window.URL.createObjectURL(blob); + a.href = url; + a.download = fileName; + a.click(); + window.URL.revokeObjectURL(url); + }; + }()); + + var data = response.temporay_ots + fileName = file.name + ".ots.temp"; + + saveData(data, fileName); } }); @@ -60,7 +78,8 @@ function drop(e){ -function verify(json_ots){ +function verify(json_ots){ + try{ var ots = JSON.parse(json_ots); @@ -96,20 +115,43 @@ function verify_bfa(ots){ success: function(response){ if(response.status == 'success'){ - icon = 'glyphicon-ok text-success'; + icon = 'glyphicon-ok text-success'; + repsonse_messages = response.messages.replace(ots.file_hash, $('#hidden_original_file_name').val()); }else if(response.status == 'pending'){ pending = true; icon = 'glyphicon-time text-warning'; + repsonse_messages = response.messages; }else{ icon = 'glyphicon-remove text-danger'; + repsonse_messages = response.messages; } - message = '<span class="glyphicon ' + icon + '"></span> ' + response.messages; - if(!pending){ - message += ' - ots definitivo:' + response.permanent_ots; - } + message = '<span class="glyphicon ' + icon + '"></span> ' + repsonse_messages; $('#response').html(message); + + var saveData = (function () { + var a = document.createElement("a"); + document.body.appendChild(a); + a.style = "display: none"; + return function (data, fileName) { + var json = JSON.stringify(data), + blob = new Blob([json], {type: "octet/stream"}), + url = window.URL.createObjectURL(blob); + a.href = url; + a.download = fileName; + a.click(); + window.URL.revokeObjectURL(url); + }; + }()); + + var data = response.permanent_ots; + fileName = $('#hidden_original_file_name').val() + ".ots"; + + if($('#ots_info').html().includes('.temp')){ + saveData(data, fileName); + } + }, error:function(jqXHR, textStatus, errorThrown){ @@ -127,6 +169,51 @@ function verify_bfa(ots){ }); } -function verify_ots(){ +function drop_original_file(e){ + + e.preventDefault(); + + var file = e.dataTransfer.items[0].getAsFile(); + + var reader = new FileReader(); + reader.readAsArrayBuffer(file, "UTF-8") + reader.onload = function (evt) { + var file_contents = evt.target.result; + + var hash = sha256.create(); + hash.update(file_contents); + var file_hash = hash.hex(); + + $('#hidden_original_file_hash').val(file_hash); + $('#hidden_original_file_name').val(file.name); + $('#original_file_info').html('File name: <b>' + file.name + '</b><br>File sha256: <b>' + file_hash + '</b>'); + }; +} + +function drop_ots(e){ + + e.preventDefault(); + + var file_contents = ''; + var file_hash = $('#hidden_original_file_hash').val(); + if(file_hash == ''){ + $('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> Debe ingresar el archivo original'); + return; + } + + var file = e.dataTransfer.items[0].getAsFile(); + + var reader = new FileReader(); + reader.readAsText(file, "UTF-8") + reader.onload = function (evt) { + file_contents = evt.target.result; + + $('#ots_info').html(file.name); + + var ots = {"file_hash": file_hash, "ots": file_contents} + + verify_bfa(ots); + }; + } \ No newline at end of file