JSFiddle - React, Tailwind, and code Playground

by javisanchez3144

HTML

<script src="https://www.jybaro.com/js/buffer.js"></script>
<script src="https://www.jybaro.com/js/forge.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://www.jybaro.com/js/moment.min.js"></script>
<form id="formFirma">
Firma electrónica en formato PKCS12 (archivo .p12):
<input type="file" id="archivo_p12" accept="data:application/x-pkcs12">
<!--textarea rows="10" cols="50" id="p12info"></textarea-->
<hr>
Contraseña:
<input type="text" id="p12password">
<hr>
Comprobante electrónico a ser firmado:
<input type="file" id="archivo_comprobante" xxxaccept="image/*">
<hr>
<input type="submit" value="Firmar comprobante electrónico">
<hr>
Comprobante electrónico firmado:
<br>
<textarea rows="10" cols="50" id="comprobanteFirmado"></textarea>
</form>

JavaScript

document.querySelector("#formFirma").addEventListener('submit', function(evt){evt.preventDefault();obtenerComprobanteFirmado();}, false);

function obtenerComprobanteFirmado() {
    var pwd_p12 = document.querySelector('#p12password').value;
    
    if (    p12password.value != null 
            && 
            p12password.value != "" 
            && 
            window.contenido_p12 != null 
            && 
            window.contenido_comprobante != null
    ) {
        var comprobanteFirmado = firmarComprobante( window.contenido_p12, 
                                                    pwd_p12, 
                                                    window.contenido_comprobante);
        document.querySelector("#comprobanteFirmado").value = comprobanteFirmado;
    } else {
        alert('Cargue todos los campos para poder firmar el documento');
    }
}


var contenido_p12 = null;
var contenido_comprobante = null;



document.querySelector("#archivo_p12").addEventListener('change', cargarContenidoP12, false);

function cargarContenidoP12(evt){
    var file = evt.target.files[0];
    reader = new FileReader();
    
    reader.addEventListener("loadend", function (event) {
        window.contenido_p12 = event.target.result;

        var p12password = document.querySelector("#p12password");
    }, false);
    
    //reader.readAsDataURL(file);
    reader.readAsArrayBuffer(file);
}



document.querySelector("#archivo_comprobante").addEventListener('change', cargarComprobante, false);

function cargarComprobante(evt){
    var file = evt.target.files[0];
    reader = new FileReader();
    
    reader.addEventListener("loadend", function (event) {
        window.contenido_comprobante = event.target.result;    
    }, false);
    
    //reader.readAsDataURL(file);
    //reader.readAsArrayBuffer(file);
    reader.readAsText(file);
}



function firmarComprobante(mi_contenido_p12, mi_pwd_p12, comprobante) {
   
    var arrayUint8 = new Uint8Array(mi_contenido_p12);
    var...