abdus/secure-email-static-site.html

## secure-email-static-site.html
<html>
  <body>
    <form action="">
      <input
        type="email"
        id="email"
        name="email"
        placeholder="mail@abdus.xyz"
      />
      <br />
      <input type="text" id="name" name="name" placeholder="Abdus" /> <br />
      <textarea
        name="message"
        id="message"
        cols="30"
        rows="10"
        placeholder="Your awesome message"
      ></textarea
      ><br />
      <input type="submit" value="Encrypt and Send" />
    </form>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/openpgp/4.6.2/openpgp.min.js"
      integrity="sha256-txcrHjb7Yt1zrebRnGkk5OwDkoBrvJTjvJx5b7qBtWc="
      crossorigin="anonymous"
    ></script>

    <script>
      const public_key = `-----BEGIN PGP PUBLIC KEY BLOCK-----

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
=YccN
-----END PGP PUBLIC KEY BLOCK-----
`;

      async function encrypt(message) {
        const enc_message = await openpgp.encrypt({
          message: openpgp.message.fromText(message),
          armor: true,
          publicKeys: (await openpgp.key.readArmored(public_key)).keys,
        });

        sendMail(enc_message.data);
      }

      document.querySelector('form').addEventListener('submit', e => {
        // dom manipulation
        const sender = {
          name: document.querySelector('#name').value,
          email: document.querySelector('#email').value,
          message: document.querySelector('#message').value,
        };

        // prevent page from reload on form submit
        e.preventDefault();

        // finally call our encrypt function
        encrypt(`${sender.name} <${sender.email}> \n\n\n ${sender.message}`);
      });

      function sendMail(encrypted_message) {
        fetch('https://formspree.io/xyyyywgd', {
          method: 'POST',
          mode: 'no-cors',
          body: JSON.stringify({
            message: encrypted_message,
          }),
        })
          .then(console.log)
          .catch(console.log);
      }
    </script>
  </body>
</html>
	<html>
	<body>
	<form action="">
	<input
	type="email"
	id="email"
	name="email"
	placeholder="mail@abdus.xyz"
	/>
	<br />
	<input type="text" id="name" name="name" placeholder="Abdus" /> <br />
	<textarea
	name="message"
	id="message"
	cols="30"
	rows="10"
	placeholder="Your awesome message"
	></textarea
	><br />
	<input type="submit" value="Encrypt and Send" />
	</form>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/openpgp/4.6.2/openpgp.min.js"
	integrity="sha256-txcrHjb7Yt1zrebRnGkk5OwDkoBrvJTjvJx5b7qBtWc="
	crossorigin="anonymous"
	></script>

	<script>
	const public_key = `-----BEGIN PGP PUBLIC KEY BLOCK-----

	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
	=YccN
	-----END PGP PUBLIC KEY BLOCK-----
	`;

	async function encrypt(message) {
	const enc_message = await openpgp.encrypt({
	message: openpgp.message.fromText(message),
	armor: true,
	publicKeys: (await openpgp.key.readArmored(public_key)).keys,
	});

	sendMail(enc_message.data);
	}

	document.querySelector('form').addEventListener('submit', e => {
	// dom manipulation
	const sender = {
	name: document.querySelector('#name').value,
	email: document.querySelector('#email').value,
	message: document.querySelector('#message').value,
	};

	// prevent page from reload on form submit
	e.preventDefault();

	// finally call our encrypt function
	encrypt(`${sender.name} <${sender.email}> \n\n\n ${sender.message}`);
	});

	function sendMail(encrypted_message) {
	fetch('https://formspree.io/xyyyywgd', {
	method: 'POST',
	mode: 'no-cors',
	body: JSON.stringify({
	message: encrypted_message,
	}),
	})
	.then(console.log)
	.catch(console.log);
	}
	</script>
	</body>
	</html>