Password Overlay

Minggu, 26 April 2015

Tabel Konten

Di sini, JavaScript btoa digunakan untuk menyembunyikan teks, sedangkan atob digunakan untuk mengembalikan teks yang tersembunyi tersebut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Password Overlay Test</title>

    <style>
    .body {
      padding:10% 0;
      text-align:center;
    }
    .overlay {
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:9999;
      background-color:black;
      color:white;
      padding:10% 0;
      text-align:center;
    }
    </style>

  </head>
  <body>

    <div id="protect-body" class="body">Content goes here…</div>
    <div id="protect-overlay" class="overlay">
      <form action="#">
        <input name="answer" type="password" placeholder="Password?"/> <button type="submit">Open</button>
      </form>
    </div>

    <script>
    // https://developer.mozilla.org/En/DOM/Window.btoa
    // https://developer.mozilla.org/en/DOM/window.atob
    // to get the obfuscated text, use `console.log(btoa('your text goes here'))`
    // `aSBsb3ZlIHlvdQ==` => `i love you`
    (function() {
        var o = document.getElementById('protect-overlay');
        o.getElementsByTagName('form')[0].onsubmit = function() {
            if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
                o.style.display = "none"; // passed!
            } else {
                alert('Wrong password!');
            }
            return false;
        };
    })();
    </script>

  </body>
</html>