Add support for custom decryption HTML templates

[Greenheart]

Add option to use a custom HTML template, and use the JS decryption code together with any html template that provides the right elements like a password form.

Or export the decryption helpers and let users create custom templates with more control.

If anyone wants this feature, feel free to submit a PR implementing this! 😊

---

Notes from initial research:

• To allow custom HTML templates to be provided, they need to contain a few key elements used by pagecrypt (like the <pre> element for writing/reading the encrypted data), and a script tag to handle the decryption logic.
• The core decrypt library need to be updated to support custom HTML templates, as well as adding test coverage.
• Ideally, this should be possible to accomplish without breaking changes to other use cases, but we'll see.
• An interesting approach might be to move decrypt functionality to the core pagecrypt library. This could then be reusable utility functions that could be imported into custom templates as well as the official HTML template. This would need to be documented in the README to be easy to use.
• By moving the core encryption and decryption logic into the same library, we would be able to reuse the critical config and make it easier to keep them in sync.
• The core decryption functionality is really just decryptFile({ salt, iv, ciphertext }, password) which would expose a simple API. Or perhaps even better decryptFile(encryptedBase64Data, password), and letting the core decrypt function take care of base64 conversion, parsing the raw bytes, and then decrypting. This would be a nice separation between presentation and decryption logic.
• A question is what to do with magic link support (a core feature) and sessionStorage support for caching keys during the same session. Perhaps there is a way to allow users to implement these features for their custom templates in some way.
• Based on https://github.com/frehner/modern-guide-to-packaging-js-library, maybe we don't have to ship custom HTML but only custom CSS could be enough. Even though it might be nice with full control of the HTML and CSS, it should be possible to use some kind of syntax for variable substitution to combine a custom HTML template with the encrypted payload.
  • Building on this idea - what if the decryption template HTML and CSS was a separate export that would only be imported if users don't provide their own template?

[quintenbuijs2006]

I currently have a website that i want the pagecrypt on but i would like it to look more like my site, this is how my website looks: https://prnt.sc/AChehinQfhXX so i would like it to look more like that. Is that possible? And how can i do that. I have forked the project.

[quintenbuijs2006]

I used the command npx pagecrypt index.html encrypted-index.html mypassword

[quintenbuijs2006]

?