Skip to content
Snippets Groups Projects
Commit d1caea2e authored by Otto Zaiser's avatar Otto Zaiser
Browse files

UI para sellar/verificar multiples archivos

parent f7758553
Branches master
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
ui/dist/index.html
+ 1
− 1
View file @ d1caea2e
<!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> <!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 \ No newline at end of file
ui/dist/static/css/tsa2.css
+ 18
− 1
View file @ d1caea2e
...@@ -11,6 +11,21 @@ ...@@ -11,6 +11,21 @@
/* transition: 0.3s; */ /* transition: 0.3s; */
position: relative; 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 { .tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
background-color: #fff; background-color: #fff;
color: #0094d4; color: #0094d4;
...@@ -37,7 +52,9 @@ ...@@ -37,7 +52,9 @@
.tsa2 .dropArea p { .tsa2 .dropArea p {
margin-bottom: 5px; margin-bottom: 5px;
} }
.tsa2 .dropArea ul>li p{
margin-right: 40px;
}
.tsa2 .dropArea:hover { .tsa2 .dropArea:hover {
border-style: solid; border-style: solid;
background: rgba(0, 148, 212, 0.05); background: rgba(0, 148, 212, 0.05);
......
ui/dist/tsa2.js
+ 3
− 3
View file @ d1caea2e
source diff could not be displayed: it is too large. Options to address this: view the blob.
ui/dist/tsa2.js.map
+ 1
− 1
View file @ d1caea2e
This diff is collapsed.
ui/public/index.html
+ 3
− 3
View file @ d1caea2e
...@@ -41,13 +41,13 @@ ...@@ -41,13 +41,13 @@
lb_05="No se ha podido verificar el archivo " lb_05="No se ha podido verificar el archivo "
lb_06="Volver a Sellar o Verificar" lb_06="Volver a Sellar o Verificar"
lb_07="Cargando" lb_07="Cargando"
lb_08="Arrastrá un archivo aquí<br>ó" lb_08="Arrastrá archivos aquí<br>ó"
lb_09="Seleccioná un archivo <span class='sr-only'>para Sellar o Verificar</span>" lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>"
lb_10="Nombre del archivo: " lb_10="Nombre del archivo: "
lb_11="Hash del archivo: " lb_11="Hash del archivo: "
lb_12="Sellar" lb_12="Sellar"
lb_13="Verificar" lb_13="Verificar"
lb_14="Seleccionar otro archivo" lb_14="Seleccionar otros archivos"
></div> ></div>
</div> </div>
</div> </div>
......
ui/public/static/css/tsa2.css
+ 18
− 1
View file @ d1caea2e
...@@ -11,6 +11,21 @@ ...@@ -11,6 +11,21 @@
/* transition: 0.3s; */ /* transition: 0.3s; */
position: relative; 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 { .tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
background-color: #fff; background-color: #fff;
color: #0094d4; color: #0094d4;
...@@ -37,7 +52,9 @@ ...@@ -37,7 +52,9 @@
.tsa2 .dropArea p { .tsa2 .dropArea p {
margin-bottom: 5px; margin-bottom: 5px;
} }
.tsa2 .dropArea ul>li p{
margin-right: 40px;
}
.tsa2 .dropArea:hover { .tsa2 .dropArea:hover {
border-style: solid; border-style: solid;
background: rgba(0, 148, 212, 0.05); background: rgba(0, 148, 212, 0.05);
......
ui/src/App.vue
+ 22
− 1
View file @ d1caea2e
...@@ -16,6 +16,22 @@ ...@@ -16,6 +16,22 @@
</li> </li>
</ul> </ul>
</div> </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"> <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> <p><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span v-html="this.lb_05"></span> <b>{{archivo}}</b></p>
</div> </div>
...@@ -37,6 +53,7 @@ ...@@ -37,6 +53,7 @@
v-on:stamp="onStamp" v-on:stamp="onStamp"
v-on:failed-stamp="onFailedStamp()" v-on:failed-stamp="onFailedStamp()"
v-on:verify="onVerify" v-on:verify="onVerify"
v-on:verify-completed="onVerifyCompleted"
v-on:failed-verify="onFailedVerify()" v-on:failed-verify="onFailedVerify()"
v-on:nombreArchivo="onFilename" v-on:nombreArchivo="onFilename"
/> />
...@@ -87,8 +104,12 @@ ...@@ -87,8 +104,12 @@
this.stamps = stamps this.stamps = stamps
this.state = 'verified' this.state = 'verified'
}, },
onVerifyCompleted(allFiles) {
this.allFiles = allFiles
this.state = 'verify-completed'
},
onFailedVerify() { onFailedVerify() {
this.state = 'failed-verification' this.state = 'failed-verification'
}, },
onStamp(hashStamped) { onStamp(hashStamped) {
this.hashStamped = hashStamped; this.hashStamped = hashStamped;
......
ui/src/components/DropFile.vue
+ 73
− 37
View file @ d1caea2e
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</svg> </svg>
<!-- <img class="center-v" src="static/images/loader.svg" width="100px" height="100px" alt="Cargando"> --> <!-- <img class="center-v" src="static/images/loader.svg" width="100px" height="100px" alt="Cargando"> -->
</div> </div>
<input type="file" id="fileUpload" @change="handleInput" hidden> <input type="file" id="fileUpload" @change="handleInput" multiple hidden>
<div> <div>
<div v-if="uploadedFiles.length == 0"> <div v-if="uploadedFiles.length == 0">
<div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> <div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div>
...@@ -29,19 +29,27 @@ ...@@ -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><button type="button" class="btn btn-primary btn-pill" v-on:click.stop="uploadFile()" v-html="this.lb_09"></button></div>
</div> </div>
<div v-if="uploadedFiles.length > 0" class="file-info"> <div v-if="uploadedFiles.length > 0" class="file-info">
<p> <ul>
<span v-html="this.lb_10"></span> <b> {{ uploadedFiles[0].fileName }}</b>
</p> <li v-for="(value, index) in uploadedFiles" :key="index">
<p class='hash'> <p>
<span v-html="this.lb_11"></span> <b> {{ uploadedFiles[0].hash }}</b> <span v-html="lb_10"></span>
</p> <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> </div>
<!-- <li v-for="(file,index) in uploadedFiles" v-bind:key="index">{{file.fileName}}: {{file.hash}}</li> --> <!-- <li v-for="(file,index) in uploadedFiles" v-bind:key="index">{{file.fileName}}: {{file.hash}}</li> -->
</div> </div>
<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-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>
<div class="gobackLink font_small" v-if="uploadedFiles.length > 0" > <div class="gobackLink font_small" v-if="uploadedFiles.length > 0" >
<a href="#" v-on:click.stop.prevent="goBack" v-html="this.lb_14"></a> <a href="#" v-on:click.stop.prevent="goBack" v-html="this.lb_14"></a>
...@@ -68,8 +76,10 @@ export default { ...@@ -68,8 +76,10 @@ export default {
], ],
data: function() { data: function() {
return { return {
loading: false, loading: false,
uploadedFiles: [], uploadedFiles: [],
verifyCounter: 0,
allHashes: [],
dragActive: false dragActive: false
}; };
}, },
...@@ -87,36 +97,61 @@ export default { ...@@ -87,36 +97,61 @@ export default {
handleInput(e) { handleInput(e) {
if(e.target.files.length > 0){ if(e.target.files.length > 0){
var files = e.target.files var files = e.target.files
this.uploadFiles([files[0]]) this.uploadFiles([files])
} }
}, },
handleDrop(e) { handleDrop(e) {
var files = e.dataTransfer.files; var files = e.dataTransfer.files;
//console.log("Drop files:", files); //console.log("Drop files:", files);
//this.uploadFile(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(){ goBack(){
this.uploadedFiles = []; this.uploadedFiles = [];
document.getElementById("fileUpload").click() document.getElementById("fileUpload").click()
}, },
verify(h) { verify() {
var self = this; var self = this;
let verifyUrl = `${this.apiurl}/verify/`+h for (let i = 0; i < self.uploadedFiles.length; i++) {
self.loading = true
axios.get(verifyUrl).then((res) => { var h = self.allHashes[i];
//console.log(res.data) let verifyUrl = `${this.apiurl}/verify/`+h
if (res.data.stamped) { self.loading = true
self.$emit('verify', res.data.stamps) axios.get(verifyUrl).then((res) => {
this.$router.push('/hash/'+h) //console.log(res.data)
this.$route.params.pathMatch if (res.data.stamped) {
} else { //self.$emit('verify', res.data.stamps)
self.$emit('failed-verify') //this.$router.push('/hash/'+h)
} //this.$route.params.pathMatch
}).catch((e) => { self.uploadedFiles[i].verified = true;
self.$emit('failed-verify') self.uploadedFiles[i].stamps = res.data.stamps;
//console.error(e) self.checkVerify()
}).finally( () => self.loading = false ) } 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() { stamp() {
var self = this; var self = this;
...@@ -124,12 +159,12 @@ export default { ...@@ -124,12 +159,12 @@ export default {
let stampUrl = `${this.apiurl}/stamp` let stampUrl = `${this.apiurl}/stamp`
self.loading = true self.loading = true
axios.post(stampUrl, { axios.post(stampUrl, {
hashes: [self.uploadedFiles[0].hash] hashes: self.allHashes
}).then( }).then(
axios.get(`${this.apiurl}/wait1block`) axios.get(`${this.apiurl}/wait1block`)
.then(() => { .then(() => {
//self.$emit('stamp', self.uploadedFiles[0].hash); //self.$emit('stamp', self.uploadedFiles[0].hash);
this.verify(self.uploadedFiles[0].hash); this.verify();
}) })
).catch((e) => { ).catch((e) => {
//console.error(e) //console.error(e)
...@@ -138,8 +173,8 @@ export default { ...@@ -138,8 +173,8 @@ export default {
}, },
uploadFiles: function(f) { uploadFiles: function(f) {
var self = this; var self = this;
this.loading = true this.loading = true;
function loadFile(file) { function loadFile(file) {
let name = file.name let name = file.name
self.$emit('nombreArchivo', name) self.$emit('nombreArchivo', name)
let reader = new FileReader() let reader = new FileReader()
...@@ -149,17 +184,18 @@ export default { ...@@ -149,17 +184,18 @@ export default {
let hash = SHA256.create() let hash = SHA256.create()
hash.update(contents) hash.update(contents)
let hex = hash.hex() let hex = hash.hex()
// replace for time being // // replace for time being
self.uploadedFiles = [{ self.uploadedFiles.push({
fileName: name, fileName: name,
hash: hex hash: hex
}] });
self.loading = false self.allHashes.push (hex);
self.loading = false;
}; };
reader.readAsArrayBuffer(file, "UTF-8") reader.readAsArrayBuffer(file, "UTF-8")
} }
for (var i = 0; i < f.length; i++) { for (var i = 0; i < f[0].length; i++) {
loadFile(f[i]); loadFile(f[0][i]);
} }
} }
}, },
......
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