From b2579194580122264f6242415dcf2119d168189f Mon Sep 17 00:00:00 2001 From: robinmoisson Date: Wed, 19 Apr 2023 11:19:37 +0200 Subject: [PATCH] formatting --- index.html | 1154 ++++++++++++++++++++++++++-------------------------- 1 file changed, 582 insertions(+), 572 deletions(-) diff --git a/index.html b/index.html index e2fc90b..019d390 100644 --- a/index.html +++ b/index.html @@ -1,193 +1,256 @@ - + - - - StatiCrypt: Password protect static HTML - - - - - + label.no-style { + font-weight: normal; + } + + - -
-
-
-

- StatiCrypt -
- - + +
+
+
+

+ StatiCrypt +
+ + +
+
+ Password protect a static HTML page +

+

+ StatiCrypt uses AES-256 with WebCrypto to encrypt your html string with your long password, in + your browser (client side). +

+

+ Download your encrypted string in a HTML page with a password prompt you can upload anywhere + (see example). +

+

+ The tool is also available as + a CLI on NPM and is + open source on GitHub. +

+
+ +

+ + ► HOW IT WORKS + +

+ +
+
+
+
+
+
+
+ + +
+ +
+ + +
+ +
+ +
+ +

+ + More options +

+ + + +
+
+
+ +
+
+

Encrypted HTML

+

+ Download html file with password prompt +

+ 
Your encrypted string
-
- Password protect a static HTML page -

-

- StatiCrypt uses AES-256 with WebCrypto to encrypt your html string with your long password, in your browser (client side). -

-

- Download your encrypted string in a HTML page with a password prompt you can upload anywhere (see example). -

-

- The tool is also available as a CLI on NPM and is open source on GitHub. -

-
- -

- - ► HOW IT WORKS - -

- -
-
-
-
-
-
- - -
-
- - -
+ -
- -
- -

- + More options -

- - - -
-
-
- -
-
-

Encrypted HTML

-

Download html file with password prompt

- 
-Your encrypted string
-
-
-
- - - - +})()); + - +})()); + - +})()); + - +})()); + - + trackEvent("generate_encrypted"); - + // update instruction textarea value with CKEDITOR content + // (see https://stackoverflow.com/questions/3147670/ckeditor-update-textarea) + CKEDITOR.instances["template_instructions"].updateElement(); + + const unencrypted = document.getElementById("unencrypted_html").value, + password = document.getElementById("password").value; + + const salt = cryptoEngine.generateRandomSalt(); + const encryptedMsg = await encode(unencrypted, password, salt); + + const templateButton = document.getElementById("template_button").value, + templateInstructions = document.getElementById("template_instructions").value, + isRememberEnabled = document.getElementById("remember").checked, + templateTitle = document.getElementById("template_title").value.trim(), + templatePlaceholder = document.getElementById("template_placeholder").value.trim(), + rememberDurationInDays = document.getElementById("remember_in_days").value || 0, + templateRemember = document.getElementById("template_remember").value; + + const data = { + staticrypt_config: { + encryptedMsg, + isRememberEnabled, + rememberDurationInDays, + salt, + }, + is_remember_enabled: JSON.stringify(isRememberEnabled), + js_staticrypt: getScriptAsString("staticrypt"), + template_button: templateButton ? templateButton : "DECRYPT", + template_instructions: templateInstructions || "", + template_placeholder: templatePlaceholder || "Password", + template_remember: templateRemember || "Remember me", + template_title: templateTitle || "Protected Page", + }; + + document.getElementById("encrypted_html_display").textContent = encryptedMsg; + + setFileToDownload(data); + }); + + document.getElementById("toggle-extra-option").addEventListener("click", function (e) { + e.preventDefault(); + document.getElementById("extra-options").classList.toggle("hidden"); + }); + + let isConceptShown = false; + document.getElementById("toggle-concept").addEventListener("click", function (e) { + e.preventDefault(); + + isConceptShown = !isConceptShown; + + document.getElementById("toggle-concept-sign").innerText = isConceptShown ? "▼" : "►"; + + document.getElementById("concept").classList.toggle("hidden"); + }); + + /** + * Browser specific download code. + */ + document.getElementById("download-link").addEventListener("click", function (e) { + // only register the click event if there is actually a generated file + if (htmlToDownload) { + trackEvent("download_encrypted"); + } + + const isIE = navigator.userAgent.indexOf("MSIE") !== -1 || !!document.documentMode === true; // >= 10 + const isEdge = navigator.userAgent.indexOf("Edge") !== -1; + + // download with MS specific feature + if (htmlToDownload && (isIE || isEdge)) { + e.preventDefault(); + const blobObject = new Blob([htmlToDownload]); + window.navigator.msSaveOrOpenBlob(blobObject, "encrypted.html"); + } + + return true; + }); + +