Commit d1caea2e authored by Otto Zaiser's avatar Otto Zaiser

UI para sellar/verificar multiples archivos

parent f7758553
<!DOCTYPE html><html lang=es><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel=stylesheet><link rel=stylesheet href=static/css/bootstrap.min.css><link rel=stylesheet href=static/css/style.css><link rel=stylesheet href=static/css/tsa2.css><title>Sello de Tiempo - Blockchain Federal Argentina</title><link href=tsa2.js rel=preload as=script></head><body><noscript><b>Lo sentimos pero el sello de tiempo no funciona sin JavaScript. Por favor, habilitalo para continuar.</b></noscript><nav id=navbar role=banner class="navbar navbar-default"><div class=container><div class=navbar-header><a class="logo navbar-btn pull-left" href=/ rel=home><img id=logo src=static/images/logo.svg alt="Blockchain Federal Argentina"></a></div></div></nav><main><div class=container><div class=tsa2><h1>Sello de Tiempo</h1><p>El servicio de Sello de Tiempo de BFA permite demostrar que el contenido de cualquier documento digital existió en un momento y que desde entonces, no ha cambiado. Al sellar un archivo, cualquiera podrá verificar el día y la hora en que su hash fue almacenado en Blockchain Federal Argentina. Tené en cuenta que el documento seleccionado nunca se sube a la red, garantizando su privacidad.</p><p class=font_small><a href=https://bfa.ar/sello>Si tenés un archivo con Recibo Digital (.rd) verificalo aquí</a></p><div id=app apiurl=http://200.108.146.180:3000 lb_00=" El archivo " lb_01=" fue enviado con éxito para ser sellado" lb_02="Se ha producido un error al intentar sellar " lb_03=" se encuentra sellado por: " lb_04=" en el bloque " lb_05="No se ha podido verificar el archivo " lb_06="Volver a Sellar o Verificar" lb_07=Cargando lb_08="Arrastrá un archivo aquí<br>ó" lb_09="Seleccioná un archivo <span class='sr-only'>para Sellar o Verificar</span>" lb_10="Nombre del archivo: " lb_11="Hash del archivo: " lb_12=Sellar lb_13=Verificar lb_14="Seleccionar otro archivo"></div></div></div><script src=tsa2.js></script></main></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang=es><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel=stylesheet><link rel=stylesheet href=static/css/bootstrap.min.css><link rel=stylesheet href=static/css/style.css><link rel=stylesheet href=static/css/tsa2.css><title>Sello de Tiempo - Blockchain Federal Argentina</title><link href=tsa2.js rel=preload as=script></head><body><noscript><b>Lo sentimos pero el sello de tiempo no funciona sin JavaScript. Por favor, habilitalo para continuar.</b></noscript><nav id=navbar role=banner class="navbar navbar-default"><div class=container><div class=navbar-header><a class="logo navbar-btn pull-left" href=/ rel=home><img id=logo src=static/images/logo.svg alt="Blockchain Federal Argentina"></a></div></div></nav><main><div class=container><div class=tsa2><h1>Sello de Tiempo</h1><p>El servicio de Sello de Tiempo de BFA permite demostrar que el contenido de cualquier documento digital existió en un momento y que desde entonces, no ha cambiado. Al sellar un archivo, cualquiera podrá verificar el día y la hora en que su hash fue almacenado en Blockchain Federal Argentina. Tené en cuenta que el documento seleccionado nunca se sube a la red, garantizando su privacidad.</p><p class=font_small><a href=https://bfa.ar/sello>Si tenés un archivo con Recibo Digital (.rd) verificalo aquí</a></p><div id=app apiurl=http://200.108.146.180:3000 lb_00=" El archivo " lb_01=" fue enviado con éxito para ser sellado" lb_02="Se ha producido un error al intentar sellar " lb_03=" se encuentra sellado por: " lb_04=" en el bloque " lb_05="No se ha podido verificar el archivo " lb_06="Volver a Sellar o Verificar" lb_07=Cargando lb_08="Arrastrá archivos aquí<br>ó" lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>" lb_10="Nombre del archivo: " lb_11="Hash del archivo: " lb_12=Sellar lb_13=Verificar lb_14="Seleccionar otros archivos"></div></div></div><script src=tsa2.js></script></main></body></html>
\ No newline at end of file
......@@ -11,6 +11,21 @@
/* transition: 0.3s; */
position: relative;
}
.tsa2 .dropArea ul>li{
border-bottom: 1px solid #ccc;;
list-style: none;
padding: 10px 0;
position: relative;
}
.tsa2 .dropArea ul>li .remover{
position: absolute;
top: 10px;
right: 0;
}
.tsa2 .dropArea ul>li:last-child{
border-bottom: none;
}
.tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
background-color: #fff;
color: #0094d4;
......@@ -37,7 +52,9 @@
.tsa2 .dropArea p {
margin-bottom: 5px;
}
.tsa2 .dropArea ul>li p{
margin-right: 40px;
}
.tsa2 .dropArea:hover {
border-style: solid;
background: rgba(0, 148, 212, 0.05);
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -41,13 +41,13 @@
lb_05="No se ha podido verificar el archivo "
lb_06="Volver a Sellar o Verificar"
lb_07="Cargando"
lb_08="Arrastrá un archivo aquí<br>ó"
lb_09="Seleccioná un archivo <span class='sr-only'>para Sellar o Verificar</span>"
lb_08="Arrastrá archivos aquí<br>ó"
lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>"
lb_10="Nombre del archivo: "
lb_11="Hash del archivo: "
lb_12="Sellar"
lb_13="Verificar"
lb_14="Seleccionar otro archivo"
lb_14="Seleccionar otros archivos"
></div>
</div>
</div>
......
......@@ -11,6 +11,21 @@
/* transition: 0.3s; */
position: relative;
}
.tsa2 .dropArea ul>li{
border-bottom: 1px solid #ccc;;
list-style: none;
padding: 10px 0;
position: relative;
}
.tsa2 .dropArea ul>li .remover{
position: absolute;
top: 10px;
right: 0;
}
.tsa2 .dropArea ul>li:last-child{
border-bottom: none;
}
.tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
background-color: #fff;
color: #0094d4;
......@@ -37,7 +52,9 @@
.tsa2 .dropArea p {
margin-bottom: 5px;
}
.tsa2 .dropArea ul>li p{
margin-right: 40px;
}
.tsa2 .dropArea:hover {
border-style: solid;
background: rgba(0, 148, 212, 0.05);
......
......@@ -16,6 +16,22 @@
</li>
</ul>
</div>
<div v-if="state=='verify-completed'">
<div v-for="(value, index) in allFiles" :key="index">
<div v-if="value.verified" class="success-verify alert alert-success" role="alert">
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <span v-html="lb_00"></span> <b>{{value.fileName}}</b> <span v-html="lb_03"></span></p>
<ul>
<li v-for="(stamp, index) in value.stamps" :key="index">
<b>{{ stamp.whostamped }}</b> <span v-html="lb_04"></span> <b>{{ stamp.blocknumber }}</b> {{ convertTime(stamp.blocktimestamp) }}
</li>
</ul>
</div>
<div v-else class="fail-verify alert alert-danger" role="alert" >
<p><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span v-html="lb_05"></span> <b>{{value.fileName}}</b></p>
</div>
</div>
</div>
<div v-if="state=='failed-verification'" class="fail-verify alert alert-danger">
<p><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span v-html="this.lb_05"></span> <b>{{archivo}}</b></p>
</div>
......@@ -37,6 +53,7 @@
v-on:stamp="onStamp"
v-on:failed-stamp="onFailedStamp()"
v-on:verify="onVerify"
v-on:verify-completed="onVerifyCompleted"
v-on:failed-verify="onFailedVerify()"
v-on:nombreArchivo="onFilename"
/>
......@@ -87,8 +104,12 @@
this.stamps = stamps
this.state = 'verified'
},
onVerifyCompleted(allFiles) {
this.allFiles = allFiles
this.state = 'verify-completed'
},
onFailedVerify() {
this.state = 'failed-verification'
this.state = 'failed-verification'
},
onStamp(hashStamped) {
this.hashStamped = hashStamped;
......
......@@ -21,7 +21,7 @@
</svg>
<!-- <img class="center-v" src="static/images/loader.svg" width="100px" height="100px" alt="Cargando"> -->
</div>
<input type="file" id="fileUpload" @change="handleInput" hidden>
<input type="file" id="fileUpload" @change="handleInput" multiple hidden>
<div>
<div v-if="uploadedFiles.length == 0">
<div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div>
......@@ -29,19 +29,27 @@
<div><button type="button" class="btn btn-primary btn-pill" v-on:click.stop="uploadFile()" v-html="this.lb_09"></button></div>
</div>
<div v-if="uploadedFiles.length > 0" class="file-info">
<p>
<span v-html="this.lb_10"></span> <b> {{ uploadedFiles[0].fileName }}</b>
</p>
<p class='hash'>
<span v-html="this.lb_11"></span> <b> {{ uploadedFiles[0].hash }}</b>
</p>
<ul>
<li v-for="(value, index) in uploadedFiles" :key="index">
<p>
<span v-html="lb_10"></span>
<b> {{ value.fileName }}</b>
</p>
<p class='hash font_small'>
<span v-html="lb_11"></span>
<b> {{ value.hash }}</b>
</p>
<button class="btn btn-default remover" v-on:click="removeFile"><span class="glyphicon glyphicon-trash text-danger " aria-hidden="true"></span> <span class="sr-only">Remover archivo</span></button>
</li>
</ul>
</div>
<!-- <li v-for="(file,index) in uploadedFiles" v-bind:key="index">{{file.fileName}}: {{file.hash}}</li> -->
</div>
<div>
<button class="btn btn-lg btn-primary btn-pill" v-if="uploadedFiles.length > 0" v-on:click="stamp()" v-html="this.lb_12"></button>
<button class="btn btn-lg btn-success btn-pill" v-if="uploadedFiles.length > 0" v-on:click="verify(uploadedFiles[0].hash)" v-html="this.lb_13"></button>
<button class="btn btn-lg btn-success btn-pill" v-if="uploadedFiles.length > 0" v-on:click="verify()" v-html="this.lb_13"></button>
</div>
<div class="gobackLink font_small" v-if="uploadedFiles.length > 0" >
<a href="#" v-on:click.stop.prevent="goBack" v-html="this.lb_14"></a>
......@@ -68,8 +76,10 @@ export default {
],
data: function() {
return {
loading: false,
loading: false,
uploadedFiles: [],
verifyCounter: 0,
allHashes: [],
dragActive: false
};
},
......@@ -87,36 +97,61 @@ export default {
handleInput(e) {
if(e.target.files.length > 0){
var files = e.target.files
this.uploadFiles([files[0]])
this.uploadFiles([files])
}
},
handleDrop(e) {
var files = e.dataTransfer.files;
//console.log("Drop files:", files);
//this.uploadFile(files);
this.uploadFiles([files[0]]);
this.uploadFiles([files]);
},
removeFile(e) {
//Lo saca del array pero no del input
var li = e.target.closest('li');
var nodes = Array.from( li.closest('ul').children );
var index = nodes.indexOf( li );
this.uploadedFiles.splice(index, 1);
},
goBack(){
this.uploadedFiles = [];
document.getElementById("fileUpload").click()
},
verify(h) {
verify() {
var self = this;
let verifyUrl = `${this.apiurl}/verify/`+h
self.loading = true
axios.get(verifyUrl).then((res) => {
//console.log(res.data)
if (res.data.stamped) {
self.$emit('verify', res.data.stamps)
this.$router.push('/hash/'+h)
this.$route.params.pathMatch
} else {
self.$emit('failed-verify')
}
}).catch((e) => {
self.$emit('failed-verify')
//console.error(e)
}).finally( () => self.loading = false )
for (let i = 0; i < self.uploadedFiles.length; i++) {
var h = self.allHashes[i];
let verifyUrl = `${this.apiurl}/verify/`+h
self.loading = true
axios.get(verifyUrl).then((res) => {
//console.log(res.data)
if (res.data.stamped) {
//self.$emit('verify', res.data.stamps)
//this.$router.push('/hash/'+h)
//this.$route.params.pathMatch
self.uploadedFiles[i].verified = true;
self.uploadedFiles[i].stamps = res.data.stamps;
self.checkVerify()
} else {
//self.$emit('failed-verify')
self.uploadedFiles[i].verified = false;
self.checkVerify()
}
}).catch((e) => {
//self.$emit('failed-verify')
//console.error(e)
self.uploadedFiles[i].verified = false;
self.checkVerify()
}).finally( () => self.loading = false )
}
//self.$emit('verify-completed', self.uploadedFiles)
},
checkVerify(){
var self = this;
self.verifyCounter++;
if (self.verifyCounter == self.uploadedFiles.length) self.$emit('verify-completed', self.uploadedFiles)
},
stamp() {
var self = this;
......@@ -124,12 +159,12 @@ export default {
let stampUrl = `${this.apiurl}/stamp`
self.loading = true
axios.post(stampUrl, {
hashes: [self.uploadedFiles[0].hash]
hashes: self.allHashes
}).then(
axios.get(`${this.apiurl}/wait1block`)
.then(() => {
//self.$emit('stamp', self.uploadedFiles[0].hash);
this.verify(self.uploadedFiles[0].hash);
this.verify();
})
).catch((e) => {
//console.error(e)
......@@ -138,8 +173,8 @@ export default {
},
uploadFiles: function(f) {
var self = this;
this.loading = true
function loadFile(file) {
this.loading = true;
function loadFile(file) {
let name = file.name
self.$emit('nombreArchivo', name)
let reader = new FileReader()
......@@ -149,17 +184,18 @@ export default {
let hash = SHA256.create()
hash.update(contents)
let hex = hash.hex()
// replace for time being
self.uploadedFiles = [{
// // replace for time being
self.uploadedFiles.push({
fileName: name,
hash: hex
}]
self.loading = false
});
self.allHashes.push (hex);
self.loading = false;
};
reader.readAsArrayBuffer(file, "UTF-8")
}
for (var i = 0; i < f.length; i++) {
loadFile(f[i]);
for (var i = 0; i < f[0].length; i++) {
loadFile(f[0][i]);
}
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment