gift_matcher

<!DOCTYPE html>
<html>
  <head>
    <script>
      const names = ["Will", "Rob", "Joshua", "Joe", "Hungry", "Dance", "Agata"];
      const passcodeHashes =
        ["41b48b722295a63cd22c7c1dcd687e06a755e5716343d6b9775f8a26cd4b137b",
         "b4a9972f5cefa151961e26c1afce1b7dd0e57b1fbc880678b3abebfb578d2c92",
         "a7cdf5d0586b392473dd0cd08c9ba833240006a8a7310bf9bc8bf1aefdfaeadb",
         "a62de7af4c7bcfc37c05dc54f11dbf0bcae54d26a77d73554a42f7fbe9d03cf9",
         "dcc32a14366fb0e19441242cba35522a079ded437b6f0692c4f1094fcbe74453",
         "35084a43186b4fedc5e25bd31e4fbc48fdea4e8576b0d5ca34b59782e1a2cc2f",
         "5e737f891db1175442a39fde73e51d781a545506d71c95477a6deb5988bd7f9a"];
      const matches =
        ["4f82f7041ae65e995e36d24f6131e0ddc961691c08380d00a7fe77c0ed00550c",
         "cb14bf5073ebaf6d9d04b63164b7017b2011d3558fb2f80f9450c9f5de6f6de8",
         "23d2d73543f9d7d92ac704296e5ee744037f5f4c938e21abf2c17002c4e9ba71",
         "6cef4ccc1019d6cee6b9cad39d49cabf808ba2e0665d5832b70c44c09c2dfae0",
         "9b059f912cb56871704877e178f0e926f1ad7d4c27053f11525c2ba8b9a6a5d1",
         "1eda7c08467f73ea38883ee78ec2179177736b9fbf1bf8a21e891a79247ced5d",
         "6dd8b7d7d3c5c4689b33e51b9f10bc6a9be89fe8fa2a127c8c6c03cd05d68ace"];

      /*
       * Converts a string into a hex hash of it
       */
      async function digestMsg(message) {
        const msgUint8 = new TextEncoder().encode(message);
        const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
        const hashArray = Array.from(new Uint8Array(hashBuffer));
        const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
        return hashHex;
      }

      /*
       * Verifies the name.
       */
      function verifyName(nameInput) {
        return names.indexOf(nameInput) !== -1;
      }

      /*
       * Verifies the passcode.
       */
      async function verifyPasscode(passcodeInput, name) {
        if (passcodeInput.length < 3) {
          return false;
        }
        const hash = await digestMsg(passcodeInput);
        const hashIndex = passcodeHashes.indexOf(hash);
        const nameIndex = names.indexOf(name);
        return hashIndex !== -1 && hashIndex === nameIndex;
      }

      /*
       * Does everything.
       */
      async function findMatch() {
        const nameInput = document.getElementById("name").value.trim();
        if (!verifyName(nameInput)) {
          alert("not one of us");
          return;
        }
        const name = nameInput;
        var passcodeInput = document.getElementById("passcode").value.trim();
        const passcodeMatches = await verifyPasscode(passcodeInput, name);
        if (!passcodeMatches) {
          alert("wrong passcode");
          return;
        }
        const nameHash = await digestMsg(name);
        var match = "";
        for (let i = 0; i < names.length; i++) {
          if (matches[i] === nameHash) {
            match = matches[(i + 1) % matches.length];
          }
        }
        for (let i = 0; i < names.length; i++) {
          var candidateHash = await digestMsg(names[i]);
          if (match === candidateHash) {
            //alert("Your match is " + names[i]);
            const result = "Your match is " + names[i];
            console.log(result);
            document.getElementById("result").innerHTML = result;
          }
        }
      }

      /*
       * Prevents default refreshing the page after the match is found
       */
      function preventRefresh() {
        document.getElementById("resultButton").addEventListener("click", function(event){
          event.preventDefault();
          console.log("prevented refresh on button click");
        });
      }
    </script>
  </head>
  <body onload="preventRefresh()">
    <div>
      <form>
        <label for="name">What... is your name?</label><br>
        <input type="text" id="name" name="name" value=""><br>
        <label for="passcode">What... is your passcode?</label><br>
        <input type="text" id="passcode" name="passcode" value=""><br><br>
        <button id="resultButton" onclick="findMatch()">Find your match</button>
      </form>
    </div>
    <div>
      <p id="result"></p>
    </div>
  </body>
</html>