source: portal_2019/php/sign.php @ 956d737

devportal
Last change on this file since 956d737 was 956d737, checked in by Angelo Osorio <danielking.321@…>, 5 years ago

agregada la validación al formulario
  • Property mode set to 100644
File size: 6.1 KB
Line 
1<!DOCTYPE html>
2<html lang="es">
3<head>
4  <?php require_once "./url.php" ?>
5
6  <!-- Metadata & Essential styles and scripts -->
7  <?php require_once "./headEssential.php" ?>
8  <?php require_once "./gen_keys.php"; ?>
9
10</head>
11<body>
12
13  <!-- Header -->
14  <?php require_once "./header.php" ?>
15
16  <!-- Navbar -->
17  <?php require_once "./navbar.php" ?>
18
19  <!-- Main -->
20  <main class="container">
21    <div id="operation">
22      <ul id="tabs-operation" class="nav nav-tabs mt-6" data-tabs="tabs">
23        <li class="nav-item">
24          <a class="nav-link" href="<?php returnURL(); ?>">Firmar con token</a>
25        </li>
26        <li>
27          <a class="nav-link active" href="<?php returnURL(); ?>/php/sign.php">Firmar con .p12</a>
28        </li>
29        <li>
30          <a class="nav-link" href="<?php returnURL(); ?>/">Verificar</a>
31        </li>
32      </ul>
33
34      <div id="operation-tab-content" class="tab-content py-4">
35        <input id="pubkey" type="hidden" value=" <?php echo $_SESSION['public_key_pem'] ?>">
36        <section class="container-fluid">
37          <div class="row">
38            <div class="col-12 px-0">
39              <h2 class="text-center py-3 font-weight-bold text-dark">
40                Firmar Electrónicamente <span class="text-primary">PKCS12</span>
41              </h2>
42            </div>
43          </div>
44
45          <div class="row">
46            <div class="col-10 offset-1 col-md-8 offset-md-2 pt-4">
47              <form id="form-sign" action="./run_script.php" method="POST" enctype="multipart/form-data">
48
49                <div class="input-group pb-3">
50                  <div class="custom-file">
51                    <input id="pdf" class="custom-file-input" type="file" name="pdf" accept=".pdf" required
52                           tabindex="1" />
53                    <label class="custom-file-label" for="pdf">Seleccionar PDF</label>
54                  </div>
55                </div>
56
57                <div class="input-group pb-3">
58                  <div class="custom-file">
59                    <input id="pkcs12" class="custom-file-input" type="file" name="pkcs12" accept=".p12" required
60                           tabindex="2" />
61                    <label class="custom-file-label" for="pkcs12">Seleccionar certificado PKCS12</label>
62                  </div>
63                </div>
64
65                <div class="form-group">
66                  <input id="phasepass" class="form-control" type="password" aria-describedby="passHelp"
67                         required tabindex="3" placeholder="Contraseña del certificado" />
68                  <small id="passHelp" class="form-text text-muted">Esta contraseña no será guardada en el servidor.</small>
69                  <input id="password" name="password" type="hidden" />
70                </div>
71
72                <div class="form-group text-center">
73                  <input id="sign-button" class="btn btn-primary btn-block" name="submit" type="submit" value="Firmar"
74                         tabindex="4" />
75                </div>
76
77              </form>
78            </div>
79          </div>
80
81        </section>
82      </div>
83    </div>
84  </main>
85
86  <!-- Footer -->
87  <?php require_once "./footer.php" ?>
88
89  <script src="../js/jsencrypt.min.js"></script>
90  <script>
91    (function() {
92      /**
93       * Función para imprimir los nombres en los label de los input[type=file]
94       */
95      var files, fileLabel, signButton, signValidation, formSign;
96
97      formSign = document.getElementById('form-sign');
98      files = document.querySelectorAll('.custom-file-input');
99      fileLabel = document.querySelectorAll('.custom-file-input ~ .custom-file-label');
100      signButton = document.getElementById('sign-button');
101      signValidation = [2, 2];
102
103      function validateExtension(name, ext){
104        let buscarElemento = name.indexOf(ext);
105        return buscarElemento;
106      }
107
108      for (var i = 0; i <= files.length -1; i++) {
109        files[i].addEventListener('change', function() {
110          let backslack = this.value.lastIndexOf("\\") + 1;
111          let namePDF = this.value.slice(backslack, this.value.length);
112          this.nextElementSibling.innerText = namePDF;
113        });
114      }
115
116      // Validación que el primer input sea un pdf
117      files[0].addEventListener('change', function() {
118        let backslack = this.value.lastIndexOf("\\") + 1;
119        let namePDF = this.value.slice(backslack, this.value.length);
120        let validation = validateExtension(namePDF, "pdf");
121
122        if (validation == -1){
123          this.nextElementSibling.classList.add("border-danger");
124          this.nextElementSibling.classList.add("text-danger");
125          this.nextElementSibling.innerText = namePDF + " no es un archivo PDF";
126          signValidation[0] = 1;
127        } else {
128          this.nextElementSibling.classList.remove("border-danger");
129          this.nextElementSibling.classList.remove("text-danger");
130          signValidation[0] = 0;
131        }
132      });
133
134      files[1].addEventListener('change', function() {
135        let backslack = this.value.lastIndexOf("\\") + 1;
136        let namePDF = this.value.slice(backslack, this.value.length);
137        let validation = validateExtension(namePDF, "p12");
138
139        if (validation == -1){
140          this.nextElementSibling.classList.add("border-danger");
141          this.nextElementSibling.classList.add("text-danger");
142          signValidation[1] = 1;
143
144          this.nextElementSibling.innerText = namePDF + " no es un archivo p12";
145        } else {
146          this.nextElementSibling.classList.remove("border-danger");
147          this.nextElementSibling.classList.remove("text-danger");
148          signValidation[1] = 0;
149        }
150
151      });
152      // Valida que los
153      formSign.addEventListener('submit', function(event){
154        if (signValidation[0] != 0 || signValidation[1] != 0){
155          event.preventDefault();
156        }
157      });
158
159    })();
160
161    (function() {
162    /**
163     * Función para encriptar la frase de paso
164     */
165      document.getElementById('phasepass').addEventListener('change', function() {
166        var encrypt = new JSEncrypt();
167        encrypt.setPublicKey(document.getElementById("pubkey").value);
168        document.getElementById("password").value = encrypt.encrypt(this.value);
169      });
170    })();
171
172  </script>
173</body>
174</html>
Note: See TracBrowser for help on using the repository browser.