pagecrypt - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

CHANGELOG.md

 # Changelog for `pagecrypt`
 
+## 5.2.0 - 2021-08-15
+
+Added dark mode as new default theme since it probably is what the primary audience prefers. Also added a bug fix for magic links to preserve the URL and allow hosting the output HTML files on other routes than `/`.
+
+### Features
+
+- feature(ui): Add dark mode design by default.
+- feature(tests): Improve testing framework and simplify development
+- feature(tests): Update tests to use new dark template
+- feature(tests): Greatly improve testing DX by automating several manual steps and displaying everything neatly in the browser.
+- feature(build): Simplify package builds to greatly improve DX
+
+### Fixes
+
+- fix(ui): Ensure full page URL except the hash is preserved when using magic links.
+- fix(tests): Improve testing html file
+- fix(package): Update dev command for consistency
+- fix(package): Automatically remove whitespace from new decrypt template builds
+- chore(deps): Update deps to latest minor and patch versions.
+
+---
+
 ## 5.1.0 - 2021-07-30
@@ -4,0 +26,0 @@

cli.js

@@ -32,12 +32,12 @@ #!/usr/bin/env node
     <meta name="viewport" content="width=device-width, initial-scale=1">\r
-    <meta name="robots" content="noindex, nofollow">\r
+    <meta name="robots" content="noindex, nofollow">
     <title>Protected Page</title>\r
-    <script type="module">var e,t;var n={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},a=function(e,t){return function(e,t,n){var a;if(void 0===n&&(n={}),!t.codes){t.codes={};for(var r=0;r<t.chars.length;++r)t.codes[t.chars[r]]=r}if(!n.loose&&e.length*t.bits&7)throw new SyntaxError("Invalid padding");for(var i=e.length;"="===e[i-1];)if(--i,!(n.loose||(e.length-i)*t.bits&7))throw new SyntaxError("Invalid padding");for(var o=new(null!=(a=n.out)?a:Uint8Array)(i*t.bits/8|0),s=0,c=0,d=0,l=0;l<i;++l){var u=t.codes[e[l]];if(void 0===u)throw new SyntaxError("Invalid character "+e[l]);c=c<<t.bits|u,(s+=t.bits)>=8&&(s-=8,o[d++]=255&c>>s)}if(s>=t.bits||255&c<<8-s)throw new SyntaxError("Unexpected end of data");return o}(e,n,t)};const r=document.querySelector.bind(document),[i,o,s,c,d]=["input","header","#msg","form","#load"].map(r);let l,u,w;document.addEventListener("DOMContentLoaded",(async()=>{const e=r("pre").innerText;if(!e)return i.disabled=!0,void v("No encrypted payload.");const t=a(e);l=t.slice(0,32),u=t.slice(32,48),w=t.slice(48),location.hash&&(i.value=location.hash.slice(1),history.replaceState(null,"",".")),sessionStorage.k||i.value?await p():(f(d),y(c),o.classList.replace("hidden","flex"),i.focus())}));const h=(null==(e=window.crypto)?void 0:e.subtle)||(null==(t=window.crypto)?void 0:t.webkitSubtle);function y(e){e.classList.remove("hidden")}function f(e){e.classList.add("hidden")}function v(e){s.innerText=e,o.classList.add("text-red-600")}async function p(){d.lastElementChild.innerText="Decrypting...",f(o),f(c),y(d),await async function(e){return new Promise((t=>setTimeout(t,e)))}(60);try{const e=await async function({salt:e,iv:t,ciphertext:n},a){const r=new TextDecoder,i=sessionStorage.k?await async function(e){return h.importKey("jwk",e,"AES-GCM",!0,["decrypt"])}(JSON.parse(sessionStorage.k)):await async function(e,t){const n=new TextEncoder,a=await h.importKey("raw",n.encode(t),"PBKDF2",!1,["deriveKey"]);return await h.deriveKey({name:"PBKDF2",salt:e,iterations:2e6,hash:"SHA-256"},a,{name:"AES-GCM",length:256},!0,["decrypt"])}(e,a),o=new Uint8Array(await h.decrypt({name:"AES-GCM",iv:t},i,n));if(!o)throw"Malformed data";return sessionStorage.k=JSON.stringify(await h.exportKey("jwk",i)),r.decode(o)}({salt:l,iv:u,ciphertext:w},i.value);document.write(e),document.close()}catch(e){f(d),y(c),o.classList.replace("hidden","flex"),sessionStorage.k?sessionStorage.removeItem("k"):v("Wrong password."),i.value="",i.focus()}}h||(v("Please use a modern browser."),i.disabled=!0),c.addEventListener("submit",(async e=>{e.preventDefault(),await p()}));<\/script>\r
-    <style>/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.mx-auto{margin-left:auto;margin-right:auto}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.hidden{display:none}.h-screen{height:100vh}.h-28{height:7rem}.h-full{height:100%}.h-6{height:1.5rem}.w-full{width:100%}.w-6{width:1.5rem}.max-w-sm{max-width:24rem}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(253,230,138,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pt-40{padding-top:10rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-extralight{font-weight:200}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-opacity-100{--tw-text-opacity:1}.placeholder-black::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.placeholder-black:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.placeholder-black::placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.loading{pointer-events:none;width:2em;height:2em;border:.15em solid transparent;border-color:#e2e8f0;border-top-color:#2563eb;border-radius:50%;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.focus\\:border-black:focus{--tw-border-opacity:1;border-color:rgba(0,0,0,var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}</style>\r
+    <script type="module">var e,t;var n={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},a=function(e,t){return function(e,t,n){var a;if(void 0===n&&(n={}),!t.codes){t.codes={};for(var r=0;r<t.chars.length;++r)t.codes[t.chars[r]]=r}if(!n.loose&&e.length*t.bits&7)throw new SyntaxError("Invalid padding");for(var i=e.length;"="===e[i-1];)if(--i,!(n.loose||(e.length-i)*t.bits&7))throw new SyntaxError("Invalid padding");for(var o=new(null!=(a=n.out)?a:Uint8Array)(i*t.bits/8|0),s=0,c=0,d=0,l=0;l<i;++l){var u=t.codes[e[l]];if(void 0===u)throw new SyntaxError("Invalid character "+e[l]);c=c<<t.bits|u,(s+=t.bits)>=8&&(s-=8,o[d++]=255&c>>s)}if(s>=t.bits||255&c<<8-s)throw new SyntaxError("Unexpected end of data");return o}(e,n,t)};const r=document.querySelector.bind(document),[i,o,s,c,d]=["input","header","#msg","form","#load"].map(r);let l,u,w;document.addEventListener("DOMContentLoaded",(async()=>{const e=r("pre").innerText;if(!e)return i.disabled=!0,void v("No encrypted payload.");const t=a(e);if(l=t.slice(0,32),u=t.slice(32,48),w=t.slice(48),location.hash){const e=new URL(window.location.href);i.value=e.hash.slice(1),e.hash="",history.replaceState(null,"",e.toString())}sessionStorage.k||i.value?await p():(y(d),f(c),o.classList.replace("hidden","flex"),i.focus())}));const h=(null==(e=window.crypto)?void 0:e.subtle)||(null==(t=window.crypto)?void 0:t.webkitSubtle);function f(e){e.classList.remove("hidden")}function y(e){e.classList.add("hidden")}function v(e){s.innerText=e,o.classList.add("text-red-600")}async function p(){d.lastElementChild.innerText="Decrypting...",y(o),y(c),f(d),await async function(e){return new Promise((t=>setTimeout(t,e)))}(60);try{const e=await async function({salt:e,iv:t,ciphertext:n},a){const r=new TextDecoder,i=sessionStorage.k?await async function(e){return h.importKey("jwk",e,"AES-GCM",!0,["decrypt"])}(JSON.parse(sessionStorage.k)):await async function(e,t){const n=new TextEncoder,a=await h.importKey("raw",n.encode(t),"PBKDF2",!1,["deriveKey"]);return await h.deriveKey({name:"PBKDF2",salt:e,iterations:2e6,hash:"SHA-256"},a,{name:"AES-GCM",length:256},!0,["decrypt"])}(e,a),o=new Uint8Array(await h.decrypt({name:"AES-GCM",iv:t},i,n));if(!o)throw"Malformed data";return sessionStorage.k=JSON.stringify(await h.exportKey("jwk",i)),r.decode(o)}({salt:l,iv:u,ciphertext:w},i.value);document.write(e),document.close()}catch(e){y(d),f(c),o.classList.replace("hidden","flex"),sessionStorage.k?sessionStorage.removeItem("k"):v("Wrong password."),i.value="",i.focus()}}h||(v("Please use a modern browser."),i.disabled=!0),c.addEventListener("submit",(async e=>{e.preventDefault(),await p()}));<\/script>
+    <style>/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a8a29e}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a8a29e}input::placeholder,textarea::placeholder{opacity:1;color:#a8a29e}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(231,229,228,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.mx-auto{margin-left:auto;margin-right:auto}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.table{display:table}.hidden{display:none}.h-screen{height:100vh}.h-28{height:7rem}.h-full{height:100%}.h-6{height:1.5rem}.w-full{width:100%}.w-6{width:1.5rem}.max-w-sm{max-width:24rem}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgba(68,64,60,var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgba(41,37,36,var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(254,240,138,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(250,250,249,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(231,229,228,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pt-40{padding-top:10rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-extralight{font-weight:200}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgba(220,38,38,var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-opacity-100{--tw-text-opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.loading{pointer-events:none;width:2em;height:2em;border:.15em solid transparent;border-color:#fff;border-right-width:.1em;border-radius:50%;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:475px){.xs\\:text-base{font-size:1rem;line-height:1.5rem}}</style>
   </head>\r
 <body>\r
-    <main class="bg-yellow-200 w-full h-screen items-start tracking-wide p-4 pt-40 font-light">\r
-        <div class="max-w-sm w-full bg-gray-50 p-4 rounded-sm shadow-2xl mx-auto h-28">\r
+    <main class="bg-black w-full h-screen items-start tracking-wide p-4 pt-40 font-light text-white">\r
+        <div class="max-w-sm w-full bg-gray-800 p-4 rounded-sm mx-auto h-28">\r
             <div id="load" class="flex items-center justify-center h-full">\r
-                <p class="loading w-6 h-6 mr-4"></p><p>Loading...</p>\r
+                <p class="loading w-6 h-6 mr-4"></p><p class="text-lg">Loading...</p>\r
             </div>\r
@@ -48,10 +48,10 @@ <header class="hidden gap-2 mb-4 items-center">\r
                 </svg>\r
-                <p id="msg" class="text-sm">This page is password protected.</p>\r
+                <p id="msg" class="text-sm xs:text-base">This page is password protected.</p>\r
             </header>\r
             <form class="hidden">\r
-                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus placeholder="Password" class="font-extralight bg-gray-200 flex w-full py-2 px-4 tracking-wider rounded-sm focus:outline-none text-black placeholder-black text-opacity-100 focus:border-black border" />\r
+                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus class="font-extralight flex w-full py-2 px-4 tracking-wider rounded-sm focus:outline-none border border-gray-700 bg-gray-800" />\r
             </form>\r
         </div>\r
         <a href="https://github.com/Greenheart/pagecrypt" class="fixed bottom-0 right-0 p-4">Created with <span class="font-semibold">PageCrypt</span></a>\r
-    </main>\r
+    </main>
     <!--ENCRYPTED PAYLOAD-->\r
@@ -116,3 +116,3 @@ </body>\r
 var name = "pagecrypt";
-var version = "5.1.0";
+var version = "5.2.0";
 
@@ -119,0 +119,0 @@ // src/cli.ts

core.js

@@ -23,12 +23,12 @@ // src/core.ts
     <meta name="viewport" content="width=device-width, initial-scale=1">\r
-    <meta name="robots" content="noindex, nofollow">\r
+    <meta name="robots" content="noindex, nofollow">
     <title>Protected Page</title>\r
-    <script type="module">var e,t;var n={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},a=function(e,t){return function(e,t,n){var a;if(void 0===n&&(n={}),!t.codes){t.codes={};for(var r=0;r<t.chars.length;++r)t.codes[t.chars[r]]=r}if(!n.loose&&e.length*t.bits&7)throw new SyntaxError("Invalid padding");for(var i=e.length;"="===e[i-1];)if(--i,!(n.loose||(e.length-i)*t.bits&7))throw new SyntaxError("Invalid padding");for(var o=new(null!=(a=n.out)?a:Uint8Array)(i*t.bits/8|0),s=0,c=0,d=0,l=0;l<i;++l){var u=t.codes[e[l]];if(void 0===u)throw new SyntaxError("Invalid character "+e[l]);c=c<<t.bits|u,(s+=t.bits)>=8&&(s-=8,o[d++]=255&c>>s)}if(s>=t.bits||255&c<<8-s)throw new SyntaxError("Unexpected end of data");return o}(e,n,t)};const r=document.querySelector.bind(document),[i,o,s,c,d]=["input","header","#msg","form","#load"].map(r);let l,u,w;document.addEventListener("DOMContentLoaded",(async()=>{const e=r("pre").innerText;if(!e)return i.disabled=!0,void v("No encrypted payload.");const t=a(e);l=t.slice(0,32),u=t.slice(32,48),w=t.slice(48),location.hash&&(i.value=location.hash.slice(1),history.replaceState(null,"",".")),sessionStorage.k||i.value?await p():(f(d),y(c),o.classList.replace("hidden","flex"),i.focus())}));const h=(null==(e=window.crypto)?void 0:e.subtle)||(null==(t=window.crypto)?void 0:t.webkitSubtle);function y(e){e.classList.remove("hidden")}function f(e){e.classList.add("hidden")}function v(e){s.innerText=e,o.classList.add("text-red-600")}async function p(){d.lastElementChild.innerText="Decrypting...",f(o),f(c),y(d),await async function(e){return new Promise((t=>setTimeout(t,e)))}(60);try{const e=await async function({salt:e,iv:t,ciphertext:n},a){const r=new TextDecoder,i=sessionStorage.k?await async function(e){return h.importKey("jwk",e,"AES-GCM",!0,["decrypt"])}(JSON.parse(sessionStorage.k)):await async function(e,t){const n=new TextEncoder,a=await h.importKey("raw",n.encode(t),"PBKDF2",!1,["deriveKey"]);return await h.deriveKey({name:"PBKDF2",salt:e,iterations:2e6,hash:"SHA-256"},a,{name:"AES-GCM",length:256},!0,["decrypt"])}(e,a),o=new Uint8Array(await h.decrypt({name:"AES-GCM",iv:t},i,n));if(!o)throw"Malformed data";return sessionStorage.k=JSON.stringify(await h.exportKey("jwk",i)),r.decode(o)}({salt:l,iv:u,ciphertext:w},i.value);document.write(e),document.close()}catch(e){f(d),y(c),o.classList.replace("hidden","flex"),sessionStorage.k?sessionStorage.removeItem("k"):v("Wrong password."),i.value="",i.focus()}}h||(v("Please use a modern browser."),i.disabled=!0),c.addEventListener("submit",(async e=>{e.preventDefault(),await p()}));<\/script>\r
-    <style>/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.mx-auto{margin-left:auto;margin-right:auto}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.hidden{display:none}.h-screen{height:100vh}.h-28{height:7rem}.h-full{height:100%}.h-6{height:1.5rem}.w-full{width:100%}.w-6{width:1.5rem}.max-w-sm{max-width:24rem}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(253,230,138,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pt-40{padding-top:10rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-extralight{font-weight:200}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-opacity-100{--tw-text-opacity:1}.placeholder-black::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.placeholder-black:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.placeholder-black::placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.loading{pointer-events:none;width:2em;height:2em;border:.15em solid transparent;border-color:#e2e8f0;border-top-color:#2563eb;border-radius:50%;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.focus\\:border-black:focus{--tw-border-opacity:1;border-color:rgba(0,0,0,var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}</style>\r
+    <script type="module">var e,t;var n={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},a=function(e,t){return function(e,t,n){var a;if(void 0===n&&(n={}),!t.codes){t.codes={};for(var r=0;r<t.chars.length;++r)t.codes[t.chars[r]]=r}if(!n.loose&&e.length*t.bits&7)throw new SyntaxError("Invalid padding");for(var i=e.length;"="===e[i-1];)if(--i,!(n.loose||(e.length-i)*t.bits&7))throw new SyntaxError("Invalid padding");for(var o=new(null!=(a=n.out)?a:Uint8Array)(i*t.bits/8|0),s=0,c=0,d=0,l=0;l<i;++l){var u=t.codes[e[l]];if(void 0===u)throw new SyntaxError("Invalid character "+e[l]);c=c<<t.bits|u,(s+=t.bits)>=8&&(s-=8,o[d++]=255&c>>s)}if(s>=t.bits||255&c<<8-s)throw new SyntaxError("Unexpected end of data");return o}(e,n,t)};const r=document.querySelector.bind(document),[i,o,s,c,d]=["input","header","#msg","form","#load"].map(r);let l,u,w;document.addEventListener("DOMContentLoaded",(async()=>{const e=r("pre").innerText;if(!e)return i.disabled=!0,void v("No encrypted payload.");const t=a(e);if(l=t.slice(0,32),u=t.slice(32,48),w=t.slice(48),location.hash){const e=new URL(window.location.href);i.value=e.hash.slice(1),e.hash="",history.replaceState(null,"",e.toString())}sessionStorage.k||i.value?await p():(y(d),f(c),o.classList.replace("hidden","flex"),i.focus())}));const h=(null==(e=window.crypto)?void 0:e.subtle)||(null==(t=window.crypto)?void 0:t.webkitSubtle);function f(e){e.classList.remove("hidden")}function y(e){e.classList.add("hidden")}function v(e){s.innerText=e,o.classList.add("text-red-600")}async function p(){d.lastElementChild.innerText="Decrypting...",y(o),y(c),f(d),await async function(e){return new Promise((t=>setTimeout(t,e)))}(60);try{const e=await async function({salt:e,iv:t,ciphertext:n},a){const r=new TextDecoder,i=sessionStorage.k?await async function(e){return h.importKey("jwk",e,"AES-GCM",!0,["decrypt"])}(JSON.parse(sessionStorage.k)):await async function(e,t){const n=new TextEncoder,a=await h.importKey("raw",n.encode(t),"PBKDF2",!1,["deriveKey"]);return await h.deriveKey({name:"PBKDF2",salt:e,iterations:2e6,hash:"SHA-256"},a,{name:"AES-GCM",length:256},!0,["decrypt"])}(e,a),o=new Uint8Array(await h.decrypt({name:"AES-GCM",iv:t},i,n));if(!o)throw"Malformed data";return sessionStorage.k=JSON.stringify(await h.exportKey("jwk",i)),r.decode(o)}({salt:l,iv:u,ciphertext:w},i.value);document.write(e),document.close()}catch(e){y(d),f(c),o.classList.replace("hidden","flex"),sessionStorage.k?sessionStorage.removeItem("k"):v("Wrong password."),i.value="",i.focus()}}h||(v("Please use a modern browser."),i.disabled=!0),c.addEventListener("submit",(async e=>{e.preventDefault(),await p()}));<\/script>
+    <style>/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a8a29e}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a8a29e}input::placeholder,textarea::placeholder{opacity:1;color:#a8a29e}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(231,229,228,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.mx-auto{margin-left:auto;margin-right:auto}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.table{display:table}.hidden{display:none}.h-screen{height:100vh}.h-28{height:7rem}.h-full{height:100%}.h-6{height:1.5rem}.w-full{width:100%}.w-6{width:1.5rem}.max-w-sm{max-width:24rem}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgba(68,64,60,var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgba(41,37,36,var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(254,240,138,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(250,250,249,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(231,229,228,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pt-40{padding-top:10rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-extralight{font-weight:200}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgba(220,38,38,var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-opacity-100{--tw-text-opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.loading{pointer-events:none;width:2em;height:2em;border:.15em solid transparent;border-color:#fff;border-right-width:.1em;border-radius:50%;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:475px){.xs\\:text-base{font-size:1rem;line-height:1.5rem}}</style>
   </head>\r
 <body>\r
-    <main class="bg-yellow-200 w-full h-screen items-start tracking-wide p-4 pt-40 font-light">\r
-        <div class="max-w-sm w-full bg-gray-50 p-4 rounded-sm shadow-2xl mx-auto h-28">\r
+    <main class="bg-black w-full h-screen items-start tracking-wide p-4 pt-40 font-light text-white">\r
+        <div class="max-w-sm w-full bg-gray-800 p-4 rounded-sm mx-auto h-28">\r
             <div id="load" class="flex items-center justify-center h-full">\r
-                <p class="loading w-6 h-6 mr-4"></p><p>Loading...</p>\r
+                <p class="loading w-6 h-6 mr-4"></p><p class="text-lg">Loading...</p>\r
             </div>\r
@@ -39,10 +39,10 @@ <header class="hidden gap-2 mb-4 items-center">\r
                 </svg>\r
-                <p id="msg" class="text-sm">This page is password protected.</p>\r
+                <p id="msg" class="text-sm xs:text-base">This page is password protected.</p>\r
             </header>\r
             <form class="hidden">\r
-                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus placeholder="Password" class="font-extralight bg-gray-200 flex w-full py-2 px-4 tracking-wider rounded-sm focus:outline-none text-black placeholder-black text-opacity-100 focus:border-black border" />\r
+                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus class="font-extralight flex w-full py-2 px-4 tracking-wider rounded-sm focus:outline-none border border-gray-700 bg-gray-800" />\r
             </form>\r
         </div>\r
         <a href="https://github.com/Greenheart/pagecrypt" class="fixed bottom-0 right-0 p-4">Created with <span class="font-semibold">PageCrypt</span></a>\r
-    </main>\r
+    </main>
     <!--ENCRYPTED PAYLOAD-->\r
@@ -49,0 +49,0 @@ </body>\r

index.js

@@ -27,12 +27,12 @@ // src/index.ts
     <meta name="viewport" content="width=device-width, initial-scale=1">\r
-    <meta name="robots" content="noindex, nofollow">\r
+    <meta name="robots" content="noindex, nofollow">
     <title>Protected Page</title>\r
-    <script type="module">var e,t;var n={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},a=function(e,t){return function(e,t,n){var a;if(void 0===n&&(n={}),!t.codes){t.codes={};for(var r=0;r<t.chars.length;++r)t.codes[t.chars[r]]=r}if(!n.loose&&e.length*t.bits&7)throw new SyntaxError("Invalid padding");for(var i=e.length;"="===e[i-1];)if(--i,!(n.loose||(e.length-i)*t.bits&7))throw new SyntaxError("Invalid padding");for(var o=new(null!=(a=n.out)?a:Uint8Array)(i*t.bits/8|0),s=0,c=0,d=0,l=0;l<i;++l){var u=t.codes[e[l]];if(void 0===u)throw new SyntaxError("Invalid character "+e[l]);c=c<<t.bits|u,(s+=t.bits)>=8&&(s-=8,o[d++]=255&c>>s)}if(s>=t.bits||255&c<<8-s)throw new SyntaxError("Unexpected end of data");return o}(e,n,t)};const r=document.querySelector.bind(document),[i,o,s,c,d]=["input","header","#msg","form","#load"].map(r);let l,u,w;document.addEventListener("DOMContentLoaded",(async()=>{const e=r("pre").innerText;if(!e)return i.disabled=!0,void v("No encrypted payload.");const t=a(e);l=t.slice(0,32),u=t.slice(32,48),w=t.slice(48),location.hash&&(i.value=location.hash.slice(1),history.replaceState(null,"",".")),sessionStorage.k||i.value?await p():(f(d),y(c),o.classList.replace("hidden","flex"),i.focus())}));const h=(null==(e=window.crypto)?void 0:e.subtle)||(null==(t=window.crypto)?void 0:t.webkitSubtle);function y(e){e.classList.remove("hidden")}function f(e){e.classList.add("hidden")}function v(e){s.innerText=e,o.classList.add("text-red-600")}async function p(){d.lastElementChild.innerText="Decrypting...",f(o),f(c),y(d),await async function(e){return new Promise((t=>setTimeout(t,e)))}(60);try{const e=await async function({salt:e,iv:t,ciphertext:n},a){const r=new TextDecoder,i=sessionStorage.k?await async function(e){return h.importKey("jwk",e,"AES-GCM",!0,["decrypt"])}(JSON.parse(sessionStorage.k)):await async function(e,t){const n=new TextEncoder,a=await h.importKey("raw",n.encode(t),"PBKDF2",!1,["deriveKey"]);return await h.deriveKey({name:"PBKDF2",salt:e,iterations:2e6,hash:"SHA-256"},a,{name:"AES-GCM",length:256},!0,["decrypt"])}(e,a),o=new Uint8Array(await h.decrypt({name:"AES-GCM",iv:t},i,n));if(!o)throw"Malformed data";return sessionStorage.k=JSON.stringify(await h.exportKey("jwk",i)),r.decode(o)}({salt:l,iv:u,ciphertext:w},i.value);document.write(e),document.close()}catch(e){f(d),y(c),o.classList.replace("hidden","flex"),sessionStorage.k?sessionStorage.removeItem("k"):v("Wrong password."),i.value="",i.focus()}}h||(v("Please use a modern browser."),i.disabled=!0),c.addEventListener("submit",(async e=>{e.preventDefault(),await p()}));<\/script>\r
-    <style>/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.mx-auto{margin-left:auto;margin-right:auto}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.hidden{display:none}.h-screen{height:100vh}.h-28{height:7rem}.h-full{height:100%}.h-6{height:1.5rem}.w-full{width:100%}.w-6{width:1.5rem}.max-w-sm{max-width:24rem}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(253,230,138,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pt-40{padding-top:10rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-extralight{font-weight:200}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-opacity-100{--tw-text-opacity:1}.placeholder-black::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.placeholder-black:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.placeholder-black::placeholder{--tw-placeholder-opacity:1;color:rgba(0,0,0,var(--tw-placeholder-opacity))}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.loading{pointer-events:none;width:2em;height:2em;border:.15em solid transparent;border-color:#e2e8f0;border-top-color:#2563eb;border-radius:50%;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.focus\\:border-black:focus{--tw-border-opacity:1;border-color:rgba(0,0,0,var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}</style>\r
+    <script type="module">var e,t;var n={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},a=function(e,t){return function(e,t,n){var a;if(void 0===n&&(n={}),!t.codes){t.codes={};for(var r=0;r<t.chars.length;++r)t.codes[t.chars[r]]=r}if(!n.loose&&e.length*t.bits&7)throw new SyntaxError("Invalid padding");for(var i=e.length;"="===e[i-1];)if(--i,!(n.loose||(e.length-i)*t.bits&7))throw new SyntaxError("Invalid padding");for(var o=new(null!=(a=n.out)?a:Uint8Array)(i*t.bits/8|0),s=0,c=0,d=0,l=0;l<i;++l){var u=t.codes[e[l]];if(void 0===u)throw new SyntaxError("Invalid character "+e[l]);c=c<<t.bits|u,(s+=t.bits)>=8&&(s-=8,o[d++]=255&c>>s)}if(s>=t.bits||255&c<<8-s)throw new SyntaxError("Unexpected end of data");return o}(e,n,t)};const r=document.querySelector.bind(document),[i,o,s,c,d]=["input","header","#msg","form","#load"].map(r);let l,u,w;document.addEventListener("DOMContentLoaded",(async()=>{const e=r("pre").innerText;if(!e)return i.disabled=!0,void v("No encrypted payload.");const t=a(e);if(l=t.slice(0,32),u=t.slice(32,48),w=t.slice(48),location.hash){const e=new URL(window.location.href);i.value=e.hash.slice(1),e.hash="",history.replaceState(null,"",e.toString())}sessionStorage.k||i.value?await p():(y(d),f(c),o.classList.replace("hidden","flex"),i.focus())}));const h=(null==(e=window.crypto)?void 0:e.subtle)||(null==(t=window.crypto)?void 0:t.webkitSubtle);function f(e){e.classList.remove("hidden")}function y(e){e.classList.add("hidden")}function v(e){s.innerText=e,o.classList.add("text-red-600")}async function p(){d.lastElementChild.innerText="Decrypting...",y(o),y(c),f(d),await async function(e){return new Promise((t=>setTimeout(t,e)))}(60);try{const e=await async function({salt:e,iv:t,ciphertext:n},a){const r=new TextDecoder,i=sessionStorage.k?await async function(e){return h.importKey("jwk",e,"AES-GCM",!0,["decrypt"])}(JSON.parse(sessionStorage.k)):await async function(e,t){const n=new TextEncoder,a=await h.importKey("raw",n.encode(t),"PBKDF2",!1,["deriveKey"]);return await h.deriveKey({name:"PBKDF2",salt:e,iterations:2e6,hash:"SHA-256"},a,{name:"AES-GCM",length:256},!0,["decrypt"])}(e,a),o=new Uint8Array(await h.decrypt({name:"AES-GCM",iv:t},i,n));if(!o)throw"Malformed data";return sessionStorage.k=JSON.stringify(await h.exportKey("jwk",i)),r.decode(o)}({salt:l,iv:u,ciphertext:w},i.value);document.write(e),document.close()}catch(e){y(d),f(c),o.classList.replace("hidden","flex"),sessionStorage.k?sessionStorage.removeItem("k"):v("Wrong password."),i.value="",i.focus()}}h||(v("Please use a modern browser."),i.disabled=!0),c.addEventListener("submit",(async e=>{e.preventDefault(),await p()}));<\/script>
+    <style>/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a8a29e}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a8a29e}input::placeholder,textarea::placeholder{opacity:1;color:#a8a29e}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(231,229,228,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.mx-auto{margin-left:auto;margin-right:auto}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.table{display:table}.hidden{display:none}.h-screen{height:100vh}.h-28{height:7rem}.h-full{height:100%}.h-6{height:1.5rem}.w-full{width:100%}.w-6{width:1.5rem}.max-w-sm{max-width:24rem}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgba(68,64,60,var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgba(41,37,36,var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(254,240,138,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(250,250,249,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(231,229,228,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pt-40{padding-top:10rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-extralight{font-weight:200}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgba(220,38,38,var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-opacity-100{--tw-text-opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.loading{pointer-events:none;width:2em;height:2em;border:.15em solid transparent;border-color:#fff;border-right-width:.1em;border-radius:50%;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:475px){.xs\\:text-base{font-size:1rem;line-height:1.5rem}}</style>
   </head>\r
 <body>\r
-    <main class="bg-yellow-200 w-full h-screen items-start tracking-wide p-4 pt-40 font-light">\r
-        <div class="max-w-sm w-full bg-gray-50 p-4 rounded-sm shadow-2xl mx-auto h-28">\r
+    <main class="bg-black w-full h-screen items-start tracking-wide p-4 pt-40 font-light text-white">\r
+        <div class="max-w-sm w-full bg-gray-800 p-4 rounded-sm mx-auto h-28">\r
             <div id="load" class="flex items-center justify-center h-full">\r
-                <p class="loading w-6 h-6 mr-4"></p><p>Loading...</p>\r
+                <p class="loading w-6 h-6 mr-4"></p><p class="text-lg">Loading...</p>\r
             </div>\r
@@ -43,10 +43,10 @@ <header class="hidden gap-2 mb-4 items-center">\r
                 </svg>\r
-                <p id="msg" class="text-sm">This page is password protected.</p>\r
+                <p id="msg" class="text-sm xs:text-base">This page is password protected.</p>\r
             </header>\r
             <form class="hidden">\r
-                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus placeholder="Password" class="font-extralight bg-gray-200 flex w-full py-2 px-4 tracking-wider rounded-sm focus:outline-none text-black placeholder-black text-opacity-100 focus:border-black border" />\r
+                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus class="font-extralight flex w-full py-2 px-4 tracking-wider rounded-sm focus:outline-none border border-gray-700 bg-gray-800" />\r
             </form>\r
         </div>\r
         <a href="https://github.com/Greenheart/pagecrypt" class="fixed bottom-0 right-0 p-4">Created with <span class="font-semibold">PageCrypt</span></a>\r
-    </main>\r
+    </main>
     <!--ENCRYPTED PAYLOAD-->\r
@@ -53,0 +53,0 @@ </body>\r

package.json

 {
     "name": "pagecrypt",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "description": "Easily add client-side password-protection to your Single Page Applications and HTML files.",
@@ -5,0 +5,0 @@ "main": "./index.js",

README.md

@@ -180,8 +180,15 @@ # 🔐 PageCrypt - Password Protected Single Page Applications and HTML files
 
-`npm test` will run basic tests for JS API and CLI. See the passwords used in your terminal. Verify test results by opening the `test/out-*.html` files in your browser and entering the password matching the file.
+First do one of the following:
 
-To test how `pagecrypt/core` works with encryption in browser environments, run `cd test && npm run test:browser-core`. Then download the encrypted sample file and use the "actual" password that's printed to the screen to verify it works. The generated password just shows that the password generation works.
+- `npm test` to run the tests.
+- `npm run test:build` to first build a new version of `pagecrypt` and then run the tests.
 
+Then run `npm run verify` in another terminal and verify the test results at http://localhost:3000.
+
+On the test results page you will find links to open output files in new tabs, buttons to copy passwords, and a special `#` link to verify that magic links decrypt the page immediately when the page loads.
+
+To test `pagecrypt/core` and verify encryption in the browser, use the button at the bottom of the list. Download the file and then copy the password by clicking the button again to decrypt it. If you save the file to the same directory as the other generated files, you can use the links just like for other results. Use the reset button to encrypt another file.
+
 ---
 
 **Welcome to submit issues and pull requests!**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72286

increased by25.8%

Number of package files

11

increased by10%

Lines of code

431

increased by0.7%

Number of lines in readme file

194

increased by3.74%

No dependency changes