Subversion Repositories ESP8266_P1_Meter

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
    #about {color:lightgray};
    body {background-color: #f5f5f5; font-family: Arial, sans-serif;}
    header, footer {padding: 10px; background-color: #024c5b; color: #fff; width: 50%; text-align: center;}
    header {margin-top: 40px;}
    label {display: block; margin: 5px;}
    input[type="text"], input[type="password"], input[type="email"] {width: 80%; padding: 8px; border: 1px solid #ddd; border-radius: 3px;}
    button[type="submit"] {margin-top: 20px; width: 50%; min-width: 60px; padding: 10px; background-color: #607D8B; color: white; border: none; cursor: pointer;}
    button[type="submit"]:hover, .nav {background-color: #16729F;}
    .container {display: flex; flex-direction: column; align-items: center; min-height: 100vh;}
    .custom-container {padding: 10px; width: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background-color: #ffffff;}  
    .content {padding: 20px; display: flex; flex-direction: column;}
    .center {text-align: center};
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>ESP32 RFID Logs - Login</h1> 
    </header>
    <div class="custom-container">
      <div class="content">
        <form id="loginForm" class="center">
          <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
          </div>
          <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
          </div>
          <button type="submit">Login</button>
        </form>
      </div>
    </div>
    <footer class="footer">
      <div class="has-text-centered">
        <p> RFID Log &copy; 2025. All rights reserved.</p>
        <a id=about target=_blank rel=noopener href="https://github.com/cotestatnt/async-esp-fs-webserver">Created with https://github.com/cotestatnt/async-esp-fs-webserver</a>
      </div>
    </footer>
  </div>

  <script>
    // To avoid sharing plain text between client and server, 
    // send SHA256 of password input text (based on https://geraintluff.github.io/sha256/)
    function sha256(ascii) {
      var rightRotate = (value, amount) => (value >>> amount) | (value << (32 - amount));
      var mathPow = Math.pow, maxWord = mathPow(2, 32), lengthProperty = 'length', result = '', words = [], asciiBitLength = ascii[lengthProperty] * 8;
      var hash = sha256.h = sha256.h || [], k = sha256.k = sha256.k || [], primeCounter = k[lengthProperty];
      var isComposite = {};
      for (var candidate = 2; primeCounter < 64; candidate++) {
        if (!isComposite[candidate]) {
          for (i = 0; i < 313; i += candidate) isComposite[i] = candidate;
          hash[primeCounter] = (mathPow(candidate, .5) * maxWord) | 0;
          k[primeCounter++] = (mathPow(candidate, 1 / 3) * maxWord) | 0;
        }
      }
      ascii += '\x80';
      while (ascii[lengthProperty] % 64 - 56) ascii += '\x00';
      for (i = 0; i < ascii[lengthProperty]; i++) {
        j = ascii.charCodeAt(i);
        if (j >> 8) return;
        words[i >> 2] |= j << ((3 - i) % 4) * 8;
      }
      words[words[lengthProperty]] = ((asciiBitLength / maxWord) | 0);
      words[words[lengthProperty]] = (asciiBitLength);
      for (j = 0; j < words[lengthProperty];) {
        var w = words.slice(j, j += 16);
        var oldHash = hash.slice(0, 8);
        for (i = 0; i < 64; i++) {
          var i2 = i + j, w15 = w[i - 15], w2 = w[i - 2];
          var a = hash[0], e = hash[4];
          var temp1 = hash[7] + (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) + ((e & hash[5]) ^ ((~e) & hash[6])) + k[i] +
              (w[i] = (i < 16) ? w[i] : (w[i - 16] + (rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15 >>> 3)) + w[i - 7] +
                  (rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2 >>> 10))) | 0);

          var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) + ((a & hash[1]) ^ (a & hash[2]) ^ (hash[1] & hash[2]));
          hash = [(temp1 + temp2) | 0].concat(hash);
          hash[4] = (hash[4] + temp1) | 0;
        }
        for (i = 0; i < 8; i++) hash[i] = (hash[i] + oldHash[i]) | 0;
      }
      for (i = 0; i < 8; i++)
        for (j = 3; j + 1; j--)
          result += ((hash[i] >> (j * 8)) & 255).toString(16).padStart(2, '0');
      return result;
    };

   document.getElementById('loginForm').addEventListener('submit', async function(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const hash = sha256(password);
  
    // 1. Effettua il login con POST
    const postResponse = await fetch('/rfid', {
      method: 'POST',
      body: new URLSearchParams({ username, hash }),
    });
  
    if (!postResponse.ok) {
      alert("Login fallito");
      return;
    }
  
    // 2. Se il POST ha successo, invia una richiesta PUT
    const putResponse = await fetch('/rfid', {
      method: 'PUT',
      body: new URLSearchParams({ username, hash }),
    });
  
    if (putResponse.ok) {
      // 3. Estrai l'HTML dalla risposta e sostituisci l'intero documento
      const html = await putResponse.text();
      
      // Apri un nuovo documento e scrivi l'HTML ricevuto
      document.open();
      document.write(html);
      document.close(); // Forza l'esecuzione degli script
      // history.pushState({}, "", "/rfid"); 
    } else {
      alert("Errore durante l'operazione PUT");
    }
  });
  </script>
</body>
</html>