docs/encrypt.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Encrypt by @mryhryki/simple-encryption</title>
    <style>
        * {
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
        }

        main {
            margin: 0 auto;
            max-width: 960px;
            padding: 1rem;
        }

        label {
            align-items: center;
            display: flex;
            flex-direction: row;
            width: 100vw;
        }

        select, input[type="text"], textarea {
            padding: 0.5rem;
            display: block;
            flex-grow: 1;
            width: 100%;
        }

        input[type="submit"] {
            text-align: center;
            padding: 0.5rem 1rem;
            font-size: 1.2rem;
        }
    </style>
  </head>
  <body>
    <main>
      <h1>Encrypt by <a href="https://github.com/mryhryki/simple-encryption" target="_blank" rel="noreferrer noopener">@mryhryki/simple-encryption</a></h1>
      <form id="encryption-form">
        <p>
          <label>
            <div>Crypt Algorithem</div>
            <select id="crypt-algorithem">
              <option value="AES-GCM">AES-GCM (Recommended)</option>
              <option value="AES-CBC">AES-CBC</option>
            </select>
          </label>
        </p>
        <p>
          <label>
            <div>Secret Key (Required)</div>
            <input id="secret-key" type="text"/>
          </label>
          <button type="button" id="generate-secret-key">Generate random</button>
        </p>
        <p>
          <label>
            <div>Initial Vector (Optional)</div>
            <input id="initial-vector" type="text"/>
          </label>
          <button type="button" id="generate-initial-vector">Generate random</button>
        </p>
        <p>
          <label>
            <div>Plain Text (Required)</div>
            <textarea id="plain-text" rows="10"></textarea>
          </label>
          <button type="button" id="generate-plain-text">Append random UUID</button>
        </p>
        <p style="text-align: center;">
          <input type="submit" value="&#x1f510; ENCRYPT"/>
        </p>
      </form>
      <p>
        <label>
          <div>Encrypted Data</div>
          <textarea id="encrypted-data" rows="10" disabled></textarea>
        </label>
      </p>
    </main>

    <script id="elements">
      const cryptAlgorithemSelect = document.getElementById("crypt-algorithem")

      const secretKeyInput = document.getElementById("secret-key")
      const generateSecretKeyButton = document.getElementById("generate-secret-key")
      generateSecretKeyButton.addEventListener("click", () => {
        secretKeyInput.value = randomHex(64)
      })

      const initialVectorInput = document.getElementById("initial-vector")
      const generateInitialVectorButton = document.getElementById("generate-initial-vector")
      generateInitialVectorButton.addEventListener("click", () => {
        initialVectorInput.value = randomHex(32)
      })

      const plainTextInput = document.getElementById("plain-text")
      const generatePlainTextButton = document.getElementById("generate-plain-text")
      generatePlainTextButton.addEventListener("click", () => {
        plainTextInput.value = `${plainTextInput.value}${crypto.randomUUID()}\n`
      })

      const encryptedDataInput = document.getElementById("encrypted-data")

      const encryptionForm = document.getElementById("encryption-form")
      encryptionForm.addEventListener('submit', (event) => {
        event.preventDefault();

        const alg = cryptAlgorithemSelect.value
        const key = secretKeyInput.value.trim()
        const iv = initialVectorInput.value.trim() || randomHex(32)
        const text = plainTextInput.value.trim()

        if (alg === '') return alert('Crypt Algorithem is required')
        if (key === '') return alert('Secret Key is required')
        if (text === '') return alert('Plain Text is required');

        encrypt({alg, key, iv, text})
          .then((result) => {
            encryptedDataInput.value = JSON.stringify(result, null, 2)
          })
          .catch(alert)
      })
    </script>

    <script id="common">
      const HexCharacters = "0123456789abcdef";
      const randomHex = (length) => {
        const array = new Uint8Array(length / 2)
        crypto.getRandomValues(array)
        return Array.from(array).map((n) => [
            HexCharacters.at(Math.floor(n / HexCharacters.length)), //
            HexCharacters.at(n % HexCharacters.length),
          ].join("")
        ).join("");
      }

      const encrypt = async ({alg, key, iv, text}) => {
        const {encrypt} = await import("https://cdn.skypack.dev/@mryhryki/simple-encryption")
        return await encrypt({alg, key, iv, plainData: new TextEncoder().encode(text)})
      }
    </script>
  </body>
</html>