Commit d06cefe5 authored by Otto Zaiser's avatar Otto Zaiser

Cambios de UI: timer/query

parent bcdf1ca9
<!DOCTYPE html><html lang=en><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://localhost:3000></div></div></div><script src=tsa2.js></script></main></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang=en><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 timer=5></div></div></div><script src=tsa2.js></script></main></body></html>
\ No newline at end of file
......@@ -116,7 +116,9 @@
margin-top: 15px;
text-align: left;
}
.tsa2 .gobackLink{
margin-top: 20px;
}
.tsa2 .alert p{
margin-bottom: 0;
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -1918,12 +1918,40 @@
"dev": true
},
"axios": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
"follow-redirects": "1.5.10",
"is-buffer": "^2.0.2"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"is-buffer": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
"integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-code-frame": {
......@@ -4885,6 +4913,7 @@
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
"integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
"dev": true,
"requires": {
"debug": "^3.2.6"
},
......@@ -4893,6 +4922,7 @@
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
......@@ -6308,7 +6338,8 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
},
"is-callable": {
"version": "1.1.4",
......@@ -7246,7 +7277,8 @@
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
},
"multicast-dns": {
"version": "6.2.3",
......@@ -10864,6 +10896,11 @@
"vue-style-loader": "^4.1.0"
}
},
"vue-router": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz",
"integrity": "sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
......@@ -8,10 +8,11 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"axios": "^0.19.0",
"core-js": "^2.6.5",
"js-sha256": "^0.9.0",
"vue": "^2.6.10"
"vue": "^2.6.10",
"vue-router": "^3.0.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
......
......@@ -32,7 +32,7 @@
<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://localhost:3000"></div>
<div id="app" apiurl="http://200.108.146.180:3000" timer="5"></div>
</div>
</div>
</body>
......
......@@ -116,7 +116,9 @@
margin-top: 15px;
text-align: left;
}
.tsa2 .gobackLink{
margin-top: 20px;
}
.tsa2 .alert p{
margin-bottom: 0;
}
......
<template>
<div id="app">
<div id="app">
<div>
<div v-if="state == 'stamped'" class="dropAreasuccess-stamp alert alert-success" role="alert">
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> El archivo <b>{{archivo}}</b> fue sellado con éxito en el bloque
<span v-for="stamp in stamps" v-bind:key="stamp.stamper"><b>{{ stamp.block }}</b> el {{ convertTime(stamp.blocktimestamp) }}</span>
</p>
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> El archivo <b>{{archivo}}</b> fue enviado con éxito para ser sellado.</p>
</div>
<div v-if="state=='failed-stamp'" class="fail-stamp alert alert-danger" role="alert">
<p><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Se ha producido un error al intentar sellar el archivo <b>{{archivo}}</b>
......@@ -27,7 +25,7 @@
</div>
<DropFile
:apiurl="apiurl"
:hash="hash"
:timer="timer"
v-if="state == 'visible-drop'"
v-on:stamp="onStamp"
v-on:failed-stamp="onFailedStamp()"
......@@ -43,31 +41,35 @@
export default {
name: 'app',
props: ['apiurl','hash'],
props: ['apiurl','timer'],
computed: {
hash () {
return this.$route.params.hash
}
},
data: function() {
return {
state: 'visible-drop',
state: 'visible-drop',
archivo: '',
stamps: []
}
},
methods: {
continuar() {
// history.pushState('', '', '/');
window.location.search = ''
this.$router.push('/')
this.$route.params.pathMatch
this.state = 'visible-drop'
},
onVerify(stamps) {
this.state = 'verified'
this.stamps = stamps
this.state = 'verified'
},
onFailedVerify() {
this.state = 'failed-verification'
},
onStamp(stamps) {
onStamp(hashStamped) {
this.hashStamped = hashStamped;
this.state = 'stamped'
this.stamps = stamps
},
onFailedStamp() {
this.state = 'failed-stamp'
......
<template>
<!-- @dragover.prevent @dragover="handleDragStart()" -->
<div class="dropArea" @drop.prevent @drop="handleDrop($event)" aria-live="polite">
<div class="dropArea" @drop.prevent @drop="handleDrop($event)" aria-live="polite">
<div id="dropzone" class="overlay pulse" style="visibility: hidden;"></div>
<div class="loading overlay" v-if="loading">
<svg aria-label="Cargando" class="center-v" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
......@@ -42,7 +41,10 @@
<div>
<button class="btn btn-lg btn-primary btn-pill" v-if="uploadedFiles.length > 0" v-on:click="stamp()">Sellar</button>
<button class="btn btn-lg btn-success btn-pill" v-if="uploadedFiles.length > 0" v-on:click="verify()">Verificar</button>
<button class="btn btn-lg btn-success btn-pill" v-if="uploadedFiles.length > 0" v-on:click="verify(uploadedFiles[0].hash)">Verificar</button>
</div>
<div class="gobackLink font_small" v-if="uploadedFiles.length > 0" >
<a href="#" v-on:click="goBack()">Seleccionar otro archivo</a>
</div>
</div>
</template>
......@@ -54,7 +56,7 @@ import axios from "axios"
export default {
/* eslint-disable */
name: 'DropFile',
props: ['apiurl','hash'],
props: ['apiurl','timer'],
data: function() {
return {
loading: false,
......@@ -63,8 +65,8 @@ export default {
};
},
created: function () {
console.log('Aca ta el hash '+this.hash);
if(this.hash != null) this.verifyHash()
var h = this.$route.params.hash;
if(h != undefined) this.verify(h)
},
methods: {
uploadFile() {
......@@ -80,11 +82,12 @@ export default {
//this.uploadFile(files);
this.uploadFiles([files[0]]);
},
verify() {
goBack(){
this.uploadedFiles = [];
},
verify(h) {
var self = this;
let hash = self.uploadedFiles[0].hash
let verifyUrl = `${this.apiurl}/verify/${hash}`
let verifyUrl = `${this.apiurl}/verify/`+h
self.loading = true
axios.get(verifyUrl).then((res) => {
//console.log(res.data)
......@@ -106,46 +109,18 @@ export default {
axios.post(stampUrl, {
hashes: [self.uploadedFiles[0].hash]
}).then((res) => {
//console.log(res.data)
//self.$emit('stamp');
this.verifyStamp();
self.waitToVerify();
//self.$emit('stamp', self.uploadedFiles[0].hash);
//this.verify(self.uploadedFiles[0].hash);
}).catch((e) => {
//console.error(e)
self.$emit('failed-stamp')
}).finally( () => self.loading = false )
})
},
verifyStamp() {
waitToVerify(){
var self = this;
let hash = self.uploadedFiles[0].hash
let verifyUrl = `${this.apiurl}/verify/${hash}`
self.loading = true
axios.get(verifyUrl).then((res) => {
//console.log(res.data)
if (res.data.stamped) {
self.$emit('stamp', res.data.stamps)
} else {
self.$emit('failed-stamp')
}
}).catch((e) => {
self.$emit('failed-stamp')
//console.error(e)
}).finally( () => self.loading = false )
},
verifyHash() {
var self = this;
let verifyUrl = `${this.apiurl}/verify/${this.hash}`
self.loading = true
axios.get(verifyUrl).then((res) => {
//console.log(res.data)
if (res.data.stamped) {
self.$emit('verify', res.data.stamps)
} else {
self.$emit('failed-verify')
}
}).catch((e) => {
self.$emit('failed-verify')
//console.error(e)
}).finally( () => self.loading = false )
var t = this.timer * 1000;
setTimeout(function(){ self.verify(self.uploadedFiles[0].hash) }, t);
},
uploadFiles: function(f) {
var self = this;
......
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
routes: [
{
path: '/'
},
{
path: '/hash/:hash',
component: App
}
]
});
new Vue({
router,
render(h) {
return h(App, {
return h(App, {
props: {
apiurl: this.$el.attributes.apiurl.value,
hash: new URLSearchParams(window.location.search).get('hash')
timer: this.$el.attributes.timer.value,
}
})
}
......
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