From 42200e30a3d0f277ef2367db36cee2e698b22624 Mon Sep 17 00:00:00 2001 From: Patricio Kumagae <pkumagae@boletinoficial.gov.ar> Date: Thu, 4 Oct 2018 11:15:45 -0300 Subject: [PATCH] Cambios de estilos --- index.html | 177 +++++++++++++++++++------ lib/css/style.css | 291 ++++++++++++++++++++++++++++++++++++++++++ lib/images/loader.svg | 16 +++ lib/images/logo.svg | 1 + lib/js/index.js | 282 ++++++++++++++++++++++++++-------------- 5 files changed, 632 insertions(+), 135 deletions(-) create mode 100644 lib/css/style.css create mode 100644 lib/images/loader.svg create mode 100644 lib/images/logo.svg diff --git a/index.html b/index.html index f176bca..06689de 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,148 @@ <!doctype html> <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/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> - <title>BFA</title> - </head> - <body> - <div class="row"> - <h1>BFA</h1> +<head> + <title>Sello de Tiempo - Blockchain Federal Argentina</title> + <meta charset="utf-8"> + <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel="stylesheet"> + <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"> + <link rel="stylesheet" type="text/css" href="lib/css/style.css"> + <meta name="MobileOptimized" content="width" /> + <meta name="HandheldFriendly" content="true" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> +</head> +<body> + <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="lib/images/logo.svg" alt="Blockchain Federal Argentina"> + </a> + <!-- Descomentar en caso de agregar menú para volver a BFA.ar + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + --> + </div> + <!-- <div id="navbar-collapse" class="navbar-collapse collapse"> + <nav role="navigation"> + <ul class="menu nav navbar-nav navbar-right"> + <li> + <a href="/">Ir a BFA.ar</a> + </li> + </ul> + </nav> + </div> + --> </div> - <div> - <form class="box" method="post" action="" enctype="multipart/form-data"> - <div class="title">Stamp</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> + </nav> + <main> + <div class="container"> + <h1>Sello de Tiempo</h1> + <p>El servicio de Sello de Tiempo de BFA permite demostrar digitalmente que el contenido de cualquier documento existió en un momento y que desde entonces, no ha cambiado.</p> + <ul class="nav nav-tabs nav-justified" role="tablist"> + <li role="presentation" class="active"><a href="#tab_1" aria-controls="tab_1" role="tab" + data-toggle="tab">1. Sellar</a></li> + <li role="presentation"><a href="#tab_2" aria-controls="tab_2" role="tab" data-toggle="tab">2. Obtener recibo</a></li> + <li role="presentation"><a href="#tab_3" aria-controls="tab_3" role="tab" data-toggle="tab">Verificar</a></li> + </ul> + <form class="box tab-content" method="post" action="" enctype="multipart/form-data"> + <div role="tabpanel" class="tab-pane active" id="tab_1"> + <h2>Paso 1: Iniciar sellado</h2> + <p>Seleccioná un archivo para generar un Sello de Tiempo. El servicio generará un <i>hash</i> (un + código criptográfico asociado a dicho documento) y lo enviará a la blockchain. A continuación, + se descargará automáticamente un recibo digital <b>temporario</b> (.rd.temp) que luego podrás + usar para obtener el recibo digital <b>definitivo</b> (.rd) en la pestaña <i>Obtener recibo</i>.</p> + <p>Importante: El documento seleccionado nunca se sube a la red, garantizando su privacidad.</p> + <div id="selectOriginalArea_1" class="dropArea" ondrop="dropStamp(event)" ondragover="allowDrop(event)"> + <div id="originalInfo_1" class="replacedTxt"> + <div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> + <div class="droptxt">Arrastrá un archivo aquÃ<br>ó</div> + </div> + <div><button type="button" id="selectOriginal_1" class="btn btn-primary btn-pill">Seleccioná un archivo <span class="sr-only">para Sellar</span></button></div> + </div> + <input type="file" id="fileUploadOriginal_1" hidden/> + <!-- <div id="ots_div" class="loading"></div> --> + <div id="response_1" role="alert"></div> + </div> + <div role="tabpanel" class="tab-pane certificadoTab" id="tab_2"> + <h2>Paso 2: Obtener recibo digital definitivo</h2> + <p>Para obtener el recibo definitivo (.rd) de un Sello de Tiempo se debe tener el documento original y el recibo digital temporario (.rd.temp). Al seleccionar ambos archivos, el recibo se descargará automáticamente y podrás visualizar en este sitio el dÃa y la hora en que el hash del documento original fue sellado en la Blockchain Federal Argentina.</p> + <input type="hidden" name="hidden_original_file_hash_2" id="hidden_original_file_hash_2" /> + <input type="hidden" name="hidden_original_file_name_2" id="hidden_original_file_name_2" /> + <div class="row"> + <div class="col-md-6"> + <h3>Seleccioná el archivo original</h3> + <div id="selectOriginalArea_2" class="dropArea" ondrop="dropOriginalFile(event)" + ondragover="allowDrop(event)"> + <div id="originalInfo_2" class="replacedTxt"> + <div><span class=" glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> + <div class="droptxt">Arrastrá el archivo <b>original</b> aquÃ<br>ó</div> + </div> + <div><button type="button" id="selectOriginal_2" class="btn btn-primary btn-pill">Seleccioná un archivo <span class="sr-only">original</span></button></div> + </div> + <input type="file" id="fileUploadOriginal_2" hidden/> + </div> + <div class="col-md-6"> + <h3>Seleccioná el recibo digital temporario</h3> + <div id="selectReciboArea_2" class="dropArea" ondrop="dropOTSFile(event)" ondragover="allowDrop(event)"> + <div class="replacedTxt"> + <div id="reciboInfo_2"></div> + <div id="reciboInstructions_2"> + <div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> + <div class="droptxt">Arrastrá el archivo <b>.rd.temp</b> aquÃ<br>ó</div> + </div> + </div> + <div><button type="button" id="selectRecibo_2" class="btn btn-primary btn-pill">Seleccioná un archivo <span class="sr-only">.rd.temp</span></button></div> + </div> + <input type="file" id="fileUploadRecibo_2" hidden/> + </div> + </div> + <div id="response_2" role="alert"></div> </div> - <div id="ots_div" class="center_div"> - </div> - <hr> - <div class="title">Verify</div> - <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 role="tabpanel" class="tab-pane verificarTab" id="tab_3"> + <h2>Verificar un sello de tiempo</h2> + <p>Para verificar un Sello de Tiempo se debe tener el documento original y el recibo digital definitivo (.rd). Podrá verificar el dÃa y la hora en que el hash del documento original fue sellado en la Blockchain Federal Argentina.</p> + <input type="hidden" name="hidden_original_file_hash_3" id="hidden_original_file_hash_3" /> + <input type="hidden" name="hidden_original_file_name_3" id="hidden_original_file_name_3" /> + <div class="row"> + <div class="col-md-6"> + <h3>Seleccioná el archivo original</h3> + <div id="selectOriginalArea_3" class="dropArea dropAreaVerify" ondrop="dropOriginalFile(event)" + ondragover="allowDrop(event)"> + <div id="originalInfo_3" class="replacedTxt"> + <div><span class=" glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> + <div class="droptxt">Arrastrá el archivo <b>original</b> aquÃ<br>ó</div> + </div> + <div><button type="button" id="selectOriginal_3" class="btn btn-success btn-pill">Seleccioná un archivo <span class="sr-only">original</span></button></div> + </div> + <input type="file" id="fileUploadOriginal_3" hidden/> + </div> + <div class="col-md-6"> + <h3>Seleccioná el recibo digital definitivo</h3> + <div id="selectReciboArea_3" class="dropArea dropAreaVerify" ondrop="dropOTSFile(event)" ondragover="allowDrop(event)"> + <div class="replacedTxt"> + <div id="reciboInfo_3"></div> + <div id="reciboInstructions_3"> + <div><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> + <div class="droptxt">Arrastrá el archivo <b>.rd</b> aquÃ<br>ó</div> + </div> + </div> + <div><button type="button" id="selectRecibo_3" class="btn btn-success btn-pill">Seleccioná un archivo <span class="sr-only">.rd</span></button></div> + </div> + <input type="file" id="fileUploadRecibo_3" hidden/> + </div> + </div> + <div id="response_3" role="alert"></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 .rd or .rd.temp file</div> - </div> - <div class="center_div" style="width: 50%"> - <div id="response"></div> - </div> </form> - </div> - </body> + </div> + </main> +</body> +<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> </html> \ No newline at end of file diff --git a/lib/css/style.css b/lib/css/style.css new file mode 100644 index 0000000..98be6af --- /dev/null +++ b/lib/css/style.css @@ -0,0 +1,291 @@ +html { + font-size: 0.9em; +} + +body { + font-family: 'Raleway', sans-serif; + font-size: 1.125em; + background-color: #ffffff; + line-height: 1.45; + margin-top: 0; +} + +h1, +h2, +h3, +h4 { + margin: 1.414em 0 0.5em; + font-weight: bold; + line-height: 1.2; +} + +h1 { + margin-top: 20px; + font-size: 2.441em; +} + +h2 { + font-size: 1.953em; +} + +h3 { + font-size: 1.563em; + margin-top: 10px; +} + +h4 { + font-size: 1.25em; +} + +small, +.font_small { + font-size: 0.8em; +} + +p { + margin-bottom: 20px; +} + +.btn-pill { + border-radius: 50px; +} + +.navbar-default { + background-color: #ffffff; + border-color: #e7e7e7; +} + +.navbar-brand { + height: 130px; +} + +.dropArea { + border: 1px dashed #0094D4; + background-color: #ffffff; + padding: 50px; + text-align: center; + -webkit-border-radius: 5px; + border-radius: 5px; + transition: 0.3s; +} + +.hash { + word-wrap: break-word; +} + +.replacedTxt { + margin-bottom: 20px; +} + +.dropArea p { + margin-bottom: 5px; +} + +.dropAreaVerify { + border: 1px dashed #4cae4c; +} + +.dropArea:hover { + background-color: #f0f7ff; + border-style: solid; +} + +.dropAreaVerify:hover { + background-color: #e5fce5; + border-style: solid; +} + +.dropArea .droptxt { + font-size: 1.2em; + margin-bottom: -5px; +} + +.dropArea .glyphicon-cloud-upload { + font-size: 8em; + margin-bottom: 40px; + color: #ccc; +} + +@media screen and (max-width: 768px) { + .dropArea .glyphicon-cloud-upload { + font-size: 4em; + margin-bottom: 20px; + } + + .dropArea { + padding: 20px; + } +} + +.loading { + background-color: #0094D4; + margin-top: 5px; + display: none; + padding: 10px; + text-align: center; + -webkit-border-radius: 5px; + border-radius: 5px; +} +[hidden]{ + display: none !important; +} + +.btn-lg { + min-width: 200px; +} + +.tab-pane { + background-color: #f8f8f8; + border: 1px solid #ddd; + border-top: 0px; + padding: 40px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ + background-color: #f8f8f8; +} +@media screen and (min-width: 768px) { + .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover{ + border-bottom-color: #f8f8f8; + } +} +.tab-pane h2 { + margin-top: 0px; +} +.nav-tabs { + font-size: 1.953em; +} + +.alert { + margin-top: 15px; +} + +@media screen and (max-width: 768px) { + .tab-pane { + border-top: 1px solid #ddd; + } +} + +@media screen and (max-width: 992px) { + h3 { + margin-top: 30px; + } + + .nav-tabs { + font-size: 1.5em; + } +} + +@media screen and (max-width: 1200px) { + .dropArea .droptxt { + font-size: 1em; + margin-bottom: 15px; + } +} + + +.navbar-header .logo img { + height: 100px; + width: 140px; +} +.navbar .logo { + margin-right: -15px; + padding-left: 15px; + padding-right: 15px; +} + +@media screen and (min-width: 768px){ + .navbar .logo { + margin-right: 0; + padding-left: 0; + } +} + +.navbar-default { + background-color: #fff; + border-color: #e7e7e7; + padding-top: 30px; +} + +.navbar-default .navbar-nav li>a { + color: #0094D4; + font-weight: 400; + font-size: 1.25em; +} + +.navbar-default .navbar-nav>.active>a, +.navbar-default .navbar-nav>.active>a:hover, +.navbar-default .navbar-nav>.active>a:focus { + color: #2e2f30; + background-color: transparent; + border-bottom: 2px solid #2e2f30; +} + +@media (min-width: 768px) { + .navbar-default .navbar-nav li>a { + color: #0094D4; + padding-bottom: 8px; + padding-left: 4px; + padding-right: 4px; + margin-left: 20px; + border-bottom: 2px solid transparent; + } + + .navbar-default .navbar-nav li>a:hover, + .navbar-default .navbar-nav li>a:focus { + color: #0094D4; + border-bottom: 2px solid #0094D4; + } + + .navbar-default .navbar-nav li:last-child>a:hover, + .navbar-default .navbar-nav li:last-child>a:focus { + color: #0094D4; + background-color: #fff; + } +} + +.navbar-default .navbar-toggle { + border-color: #0094D4; +} + +.navbar-default .navbar-toggle .icon-bar { + background-color: #0094D4; +} + +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #0094D4; +} + +.navbar-default .navbar-toggle:hover .icon-bar, +.navbar-default .navbar-toggle:focus .icon-bar { + background-color: #fff; +} + +.navbar-default .menu { + margin-top: 40px; +} + +@media (max-width: 768px) { + + .navbar-default .navbar-nav li>a:hover, + .navbar-default .navbar-nav li>a:focus { + color: #0094D4; + text-decoration: underline; + } + .navbar-default { + padding-top: 0px; + } + + .navbar-default .navbar-collapse { + -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); + background-color: #fff; + } + + .navbar-default .menu { + margin-top: 0; + } + +} diff --git a/lib/images/loader.svg b/lib/images/loader.svg new file mode 100644 index 0000000..c7532a5 --- /dev/null +++ b/lib/images/loader.svg @@ -0,0 +1,16 @@ + <svg 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" + width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> + <path opacity="0.2" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 + s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 + c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/> + <path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 + C22.32,8.481,24.301,9.057,26.013,10.047z"> + <animateTransform attributeType="xml" + attributeName="transform" + type="rotate" + from="0 20 20" + to="360 20 20" + dur="0.5s" + repeatCount="indefinite"/> + </path> + </svg> \ No newline at end of file diff --git a/lib/images/logo.svg b/lib/images/logo.svg new file mode 100644 index 0000000..1b5b167 --- /dev/null +++ b/lib/images/logo.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.31 100"><defs><style>.c{fill:#5c5c60}</style><radialGradient id="a" cx="69.48" cy="64.25" r="48.74" gradientTransform="matrix(1.39 0 0 1.39 -27.38 -19.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#84d0d0"/><stop offset="1" stop-color="#6a9ad1"/></radialGradient></defs><title>Blockchain Federal Argentina</title><path fill="#e5b449" d="M69.65 53.63a14.47 14.47 0 0 0-14.47 14.48h28.95a14.48 14.48 0 0 0-14.48-14.48z"/><path fill="url(#a)" d="M1.61 68.11V55.32l22.14 12.79L45.9 55.32v12.79h1.61V54.39l22.14-12.78L91.8 54.39v13.72h1.61V54.39L104.48 48l10.27-5.93v26h1.61v-26l21.34 12.32v13.72h1.61V53.47l-23-13.25v-26.5L92.6 0 69.65 13.25 46.7 0 23 13.72v26.5L0 53.47v14.64zm91.8-65.79l21.34 12.32v24.65L93.41 27zm20.53 38.36l-10.26 5.93L92.6 53 71.26 40.68 92.6 28.36zm-43.48-26L91.8 2.32V27L70.46 39.29zm-1.61 25.54L47.51 52.54V27.89l21.34-12.32zM46.7 1.86L68 14.18 46.7 26.5 25.36 14.18zM24.56 15.57L45.9 27.89v24.65l-10.27-5.93-11.07-6.39zm-.81 26L34.83 48l10.27 5.93-21.35 12.32L2.41 53.93z"/><path d="M.09 73.53H5.6c2.66 0 4.58 1.47 4.58 4a3.68 3.68 0 0 1-2 3.39 3.79 3.79 0 0 1 2.59 3.81c0 3-2.3 4.48-5.06 4.48H.09zm5.51 6.62a2.23 2.23 0 0 0 2.32-2.39 2.16 2.16 0 0 0-2.36-2.32H2.3v4.71zm.25 7.21a2.5 2.5 0 0 0 2.7-2.68A2.56 2.56 0 0 0 5.83 82H2.3v5.38zM14.43 73.53h2.21v13.83h7.05v1.91h-9.26zM33.25 73.26a7.93 7.93 0 0 1 8.07 8 8.09 8.09 0 1 1-16.17 0 8 8 0 0 1 8.1-8zm0 14.25a6 6 0 0 0 5.8-6.22 5.82 5.82 0 1 0-11.63 0 6 6 0 0 0 5.83 6.22zM51.47 73.26a8.11 8.11 0 0 1 5.73 2.07L56.11 77a7.2 7.2 0 0 0-4.55-1.71 5.71 5.71 0 0 0-5.82 6 5.91 5.91 0 0 0 5.84 6.22 7.11 7.11 0 0 0 4.86-2.05L57.63 87a8.47 8.47 0 0 1-6.12 2.5 8.14 8.14 0 0 1 0-16.28zM61 73.53h2.21v6.62l6.32-6.62H72L65.06 81l7.21 8.23h-2.5l-6.54-7.22v7.22H61zM80.9 73.33a8 8 0 0 1 5.65 2l-.83 1.13A7.37 7.37 0 0 0 81 74.75a6.27 6.27 0 0 0-6.31 6.56c0 3.75 2.63 6.8 6.35 6.8A7.35 7.35 0 0 0 86.08 86l.92 1.11a8.36 8.36 0 0 1-6 2.43 7.89 7.89 0 0 1-8-8.21 7.77 7.77 0 0 1 7.9-8zM90.32 73.59h1.54v7.14H101v-7.14h1.54v15.68H101v-7.16h-9.1v7.16h-1.58zM114.79 84.28h-6.32l-1.78 5h-1.63l5.75-15.68h1.66l5.75 15.68h-1.63zm-3.17-9.06s-.34 1.3-.6 2l-2.1 5.69h5.4l-2.06-5.69c-.26-.73-.6-2-.6-2zM120.78 73.59h1.54v15.68h-1.54zM126.87 73.59h1.5l8 11.29c.53.78 1.29 2.12 1.29 2.12s-.13-1.29-.13-2.12V73.59h1.54v15.68h-1.49l-8-11.28c-.54-.78-1.3-2.12-1.3-2.12s.13 1.29.13 2.12v11.28h-1.54zM0 94.19h3v.5H.58v2.15h2.1v.5H.58v2.56H0zM7.88 94.19h3.22v.5H8.44v2.08h2.17v.51H8.44v2.12h2.81v.5H7.88zM16.21 94.19h1.84a2.86 2.86 0 1 1 0 5.71h-1.84zM18 99.4a2.36 2.36 0 0 0 0-4.71h-1.23v4.71zM25.91 94.19h3.22v.5h-2.66v2.08h2.17v.51h-2.17v2.12h2.8v.5h-3.36zM34.23 94.19h1.69a2.73 2.73 0 0 1 1.08.15 1.67 1.67 0 0 1-.22 3l.14.23 1.25 2.3h-.65l-1.29-2.4h-1.44v2.4h-.56zM36.15 97a1.18 1.18 0 0 0 .61-2.16 1.61 1.61 0 0 0-.81-.14h-1.16V97zM45.84 98.08h-2.3l-.65 1.82h-.59l2.09-5.71H45l2.09 5.71h-.59zm-1.15-3.3l-.22.74-.77 2.07h2l-.75-2.07a9.7 9.7 0 0 1-.22-.74zM51.71 94.19h.56v5.21h2.65v.5h-3.21zM68.29 98.08H66l-.66 1.82h-.59l2.1-5.71h.6l2.1 5.71H69zm-1.15-3.3s-.12.47-.22.74l-.76 2.07h2l-.74-2.07a9.7 9.7 0 0 1-.22-.74zM74.17 94.19h1.69a2.7 2.7 0 0 1 1.07.15 1.67 1.67 0 0 1-.22 3l.15.23 1.24 2.3h-.64l-1.29-2.4h-1.44v2.4h-.56zM76.08 97a1.06 1.06 0 0 0 1.13-1.16 1.05 1.05 0 0 0-.52-1 1.61 1.61 0 0 0-.81-.14h-1.15V97zM85.45 94.09a3.08 3.08 0 0 1 2 .67l-.3.42a2.82 2.82 0 0 0-1.71-.57 2.44 2.44 0 0 0 0 4.87 2.49 2.49 0 0 0 1.8-.84v-1h-1v-.51h1.51v2.77h-.52v-.43-.24a2.56 2.56 0 0 1-1.86.77 2.83 2.83 0 0 1-2.8-3 2.87 2.87 0 0 1 2.88-2.91zM92.8 94.19H96v.5h-2.64v2.08h2.17v.51h-2.17v2.12h2.8v.5H92.8zM101.12 94.19h.55l2.92 4.11c.19.29.47.77.47.77V94.19h.56v5.71H105l-2.92-4.11c-.19-.28-.47-.77-.47-.77V99.9h-.57zM112.21 94.69h-2v-.5h4.66v.5h-2v5.21h-.56zM119.39 94.19h.61v5.71h-.56zM125.29 94.19h.55l2.92 4.11c.19.29.47.77.47.77s-.05-.47-.05-.77v-4.11h.57v5.71h-.55l-2.92-4.11c-.19-.28-.47-.77-.47-.77V99.9h-.56zM137.92 98.08h-2.3L135 99.9h-.59l2.09-5.71h.6l2.1 5.71h-.59zm-1.16-3.3s-.12.47-.21.74l-.77 2.07h2l-.78-2.07a9.7 9.7 0 0 1-.22-.74z" class="c"/></svg> \ No newline at end of file diff --git a/lib/js/index.js b/lib/js/index.js index ab28258..538c4ef 100644 --- a/lib/js/index.js +++ b/lib/js/index.js @@ -1,193 +1,277 @@ -$(document).ready(function(){ - $('#btn_verify').click(function(){ +var tsa_api = 'https://tsaapi.bfa.ar/api/tsa/'; +var loader_gif = 'lib/images/loader.svg'; +var ots_api = ''; +var deadline_date = new Date('2018-09-03 00:00:00'); +var current_date = new Date(); +var whash = window.location.hash; +var currentTab = whash.substring(5, 6); + +$(function () { + whash && $('ul.nav a[href="' + whash + '"]').tab('show'); + $('.nav-tabs a').click(function (e) { + $(this).tab('show'); + var scrollmem = $('body').scrollTop() || $('html').scrollTop(); + whash = this.hash; + currentTab = whash.substring(5, 6); + window.location.hash = whash; + $('html,body').scrollTop(scrollmem); + }); - $('#response').html('<img src="' + loader_gif + '">'); - if($('#verify_ots').val() == ''){ - $('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> Debe ingresar el comprobante'); + for (let i = 1; i < 4; i++) { + $('#selectOriginal_' + i+', #selectOriginalArea_' + i).on('click', function () { + $('#fileUploadOriginal_' + i).click(); + return false; + }); + if (i == 1) { + $('#fileUploadOriginal_' + i).change( + function () { + var file = $(this).prop('files')[0]; + stamp(file); + } + ); + } else { + $('#fileUploadOriginal_' + i).change( + function () { + var file = $(this).prop('files')[0]; + original_file_check(file); + } + ); + $('#selectRecibo_' + i+', #selectReciboArea_' + i).on('click', function () { + $('#fileUploadRecibo_' + i).click(); + return false; + }); + $('#fileUploadRecibo_' + i).change( + function () { + var file = $(this).prop('files')[0]; + ots_check(file); + } + ); } + } - verify($('#verify_ots').val()); - }); }); -var tsa_api = 'https://tsaapi.bfa.ar/api/tsa/'; -var loader_gif = 'lib/images/ajax-loader.gif'; -var ots_api = ''; -var deadline_date = new Date('2018-09-03 00:00:00'); -var current_date = new Date(); - function allowDrop(e) { e.preventDefault(); } -function stamp(e){ +function dropStamp(e) { e.preventDefault(); + var file = e.dataTransfer.items[0].getAsFile(); + stamp(file); +} - var file = e.dataTransfer.items[0].getAsFile(); - - var reader = new FileReader(); - reader.readAsArrayBuffer(file, "UTF-8") +function stamp(file) { + 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(); - - $('#stamp_info').html('File name: <b>' + file.name + '</b><br> File hash: <b>' + file_hash + '</b>'); + + $('#originalInfo_1').html('<p>Nombre del archivo: <b>' + file.name + '</b></p><p>Hash del archivo: <b><span class="hash">' + file_hash + '</span></b></p>'); + $('#selectOriginal_1').html('Seleccioná otro archivo <span class="sr-only">para marcar</span>'); + $.ajax({ url: tsa_api + "stamp/", type: "POST", - data: {"file_hash" : file_hash}, - dataType: "json", - success: function(response){ - + data: { + "file_hash": file_hash + }, + dataType: "json", + success: function (response) { + var ots = ' {"file_hash": "' + file_hash + '", "rd": "' + response.temporary_ots + '"}'; 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 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.temporary_rd fileName = file.name + ".rd.temp"; - saveData(data, fileName); + saveData(data, fileName); } }); - } + } } -function verify_bfa(ots){ + +function verify_bfa(ots) { var pending = false; var message = ''; + $('#response_' + currentTab).removeClass(); + $.ajax({ url: tsa_api + "verify/", type: "POST", - data: {"file_hash" : ots.file_hash, "rd": ots.rd}, + data: { + "file_hash": ots.file_hash, + "rd": ots.rd + }, dataType: "json", - success: function(response){ + success: function (response) { - if(response.status == 'success'){ - icon = 'glyphicon-ok text-success'; - repsonse_messages = response.messages.replace(ots.file_hash, $('#hidden_original_file_name').val()); - }else if(response.status == 'pending'){ + if (response.status == 'success') { + icon = 'glyphicon-ok'; + st = 'alert alert-success'; + response_messages = response.messages.replace(ots.file_hash, $('#hidden_original_file_name_' + currentTab).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> ' + repsonse_messages; - - $('#response').html(message); - - if(!pending){ + icon = 'glyphicon-time'; + st = 'alert alert-warning'; + response_messages = response.messages; + } else { + icon = 'glyphicon-remove'; + st = 'alert alert-danger'; + response_messages = response.messages; + } + + message = '<span class="glyphicon ' + icon + '" aria-hidden="true"></span> ' + response_messages; + + + $('#response_' + currentTab).addClass(st); + $('#response_' + currentTab).html(message); + + if (!pending) { 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"}), + 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_rd; - fileName = $('#hidden_original_file_name').val() + ".rd"; + var data = response.permanent_rd; + fileName = $('#hidden_original_file_name_' + currentTab).val() + ".rd"; - if($('#ots_info').html().includes('.temp')){ - saveData(data, fileName); + if (currentTab == '2') { + ms = 'Seleccioná otro archivo <span class="sr-only">.rd.temp</span>'; + } else if (currentTab == '3') { + ms = 'Seleccioná otro archivo <span class="sr-only">.rd</span>'; } + + $('#selectRecibo_' + currentTab).html(ms); + $('#reciboInstructions_' + currentTab).hide(); + + if ($('#reciboInfo_' + currentTab).html().includes('.temp')) { + saveData(data, fileName); + } + } - - + + }, - error:function(jqXHR, textStatus, errorThrown){ + error: function (jqXHR, textStatus, errorThrown) { - responseText = 'No se encontró el archivo'; + responseText = 'El recibo digital no corresponde al documento seleccionado.'; - if(errorThrown == 'timeout'){ - responseText = 'No se pudo conectar a la Blockchain'; + if (errorThrown == 'timeout') { + responseText = 'No se pudo conectar a Blockchain Federal Argentina'; } - - $('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> ' + responseText); + if (whash == '#certificado-tab') { + rp_id = "#response_cert"; + } else { + rp_id = "#response"; + } + $('#response_' + currentTab).html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> ' + responseText); + $('#response_' + currentTab).addClass('alert alert-danger'); }, - timeout:5000 - + timeout: 5000 + }); } -function drop_original_file(e){ +function dropOriginalFile(e) { e.preventDefault(); + var file = e.dataTransfer.items[0].getAsFile(); + original_file_check(file); +} + - var file = e.dataTransfer.items[0].getAsFile(); - - var reader = new FileReader(); - reader.readAsArrayBuffer(file, "UTF-8") +function original_file_check(file) { + $('#response_' + currentTab).html(''); + $('#response_' + currentTab).removeClass(); + $('#reciboInfo_' + currentTab).html(''); + $('#reciboInstructions_' + currentTab).show(); + 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>'); + $('#hidden_original_file_hash_' + currentTab).val(file_hash); + $('#hidden_original_file_name_' + currentTab).val(file.name); + + $('#originalInfo_' + currentTab).html('<p>Nombre del archivo: <b>' + file.name + '</b></p><p>Hash del archivo: <b><span class="hash">' + file_hash + '</span></b></p>'); + $('#selectOriginal_' + currentTab).html('Seleccioná otro archivo <span class="sr-only">original</span>'); }; } -function drop_ots(e){ - +function dropOTSFile(e) { e.preventDefault(); + var file = e.dataTransfer.items[0].getAsFile(); + ots_check(file); +} +function ots_check(file) { + $('#response_' + currentTab).html(''); + $('#response_' + currentTab).removeClass(); 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'); + var file_hash = $('#hidden_original_file_hash_' + currentTab).val(); + if (file_hash == '') { + $('#response_' + currentTab).html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Debe ingresar el archivo original'); + $('#response_' + currentTab).addClass('alert alert-danger'); return; } - - var file = e.dataTransfer.items[0].getAsFile(); - - var reader = new FileReader(); - reader.readAsText(file, "UTF-8") + var reader = new FileReader(); + reader.readAsText(file, "UTF-8") reader.onload = function (evt) { - file_contents = evt.target.result; - - $('#ots_info').html(file.name); + file_contents = evt.target.result; + $('#reciboInstructions_' + currentTab).hide(); + $('#reciboInfo_' + currentTab).html(file.name); - var ots = {"file_hash": file_hash, "rd": file_contents} + var ots = { + "file_hash": file_hash, + "rd": file_contents + } verify_bfa(ots); }; - - } \ No newline at end of file -- GitLab