kopia lustrzana https://github.com/robinmoisson/staticrypt
add toggle visibility icon, closes #189
rodzic
aed94e3bb0
commit
bc7bccd39a
|
@ -194,6 +194,12 @@ The password argument is optional if `STATICRYPT_PASSWORD` is set in the environ
|
||||||
[string] [default: "Remember me"]
|
[string] [default: "Remember me"]
|
||||||
--template-title Title for the output HTML page.
|
--template-title Title for the output HTML page.
|
||||||
[string] [default: "Protected Page"]
|
[string] [default: "Protected Page"]
|
||||||
|
--template-toggle-hide Alt text for toggling password visibility -
|
||||||
|
"hide" action.
|
||||||
|
[string] [default: "Hide password"]
|
||||||
|
--template-toggle-show Alt text for toggling password visibility -
|
||||||
|
"show" action.
|
||||||
|
[string] [default: "Show password"]
|
||||||
|
|
||||||
|
|
||||||
## HOW STATICRYPT WORKS
|
## HOW STATICRYPT WORKS
|
||||||
|
|
|
@ -482,6 +482,16 @@ function parseCommandLineArguments() {
|
||||||
describe: "Title for the output HTML page.",
|
describe: "Title for the output HTML page.",
|
||||||
default: "Protected Page",
|
default: "Protected Page",
|
||||||
})
|
})
|
||||||
|
.option("template-toggle-hide", {
|
||||||
|
type: "string",
|
||||||
|
describe: 'Alt text for toggling password visibility - "hide" action.',
|
||||||
|
default: "Hide password",
|
||||||
|
})
|
||||||
|
.option("template-toggle-show", {
|
||||||
|
type: "string",
|
||||||
|
describe: 'Alt text for toggling password visibility - "show" action.',
|
||||||
|
default: "Show password",
|
||||||
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
exports.parseCommandLineArguments = parseCommandLineArguments;
|
exports.parseCommandLineArguments = parseCommandLineArguments;
|
||||||
|
|
|
@ -138,13 +138,15 @@ async function runStatiCrypt() {
|
||||||
is_remember_enabled: JSON.stringify(isRememberEnabled),
|
is_remember_enabled: JSON.stringify(isRememberEnabled),
|
||||||
js_staticrypt: buildStaticryptJS(),
|
js_staticrypt: buildStaticryptJS(),
|
||||||
template_button: namedArgs.templateButton,
|
template_button: namedArgs.templateButton,
|
||||||
|
template_color_primary: namedArgs.templateColorPrimary,
|
||||||
|
template_color_secondary: namedArgs.templateColorSecondary,
|
||||||
template_error: namedArgs.templateError,
|
template_error: namedArgs.templateError,
|
||||||
template_instructions: namedArgs.templateInstructions,
|
template_instructions: namedArgs.templateInstructions,
|
||||||
template_placeholder: namedArgs.templatePlaceholder,
|
template_placeholder: namedArgs.templatePlaceholder,
|
||||||
template_remember: namedArgs.templateRemember,
|
template_remember: namedArgs.templateRemember,
|
||||||
template_title: namedArgs.templateTitle,
|
template_title: namedArgs.templateTitle,
|
||||||
template_color_primary: namedArgs.templateColorPrimary,
|
template_toggle_show: namedArgs.templateToggleShow,
|
||||||
template_color_secondary: namedArgs.templateColorSecondary,
|
template_toggle_hide: namedArgs.templateToggleHide,
|
||||||
};
|
};
|
||||||
|
|
||||||
// encode all the files
|
// encode all the files
|
||||||
|
|
|
@ -38,15 +38,37 @@
|
||||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
|
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.staticrypt-form input[type="password"] {
|
.staticrypt-form input[type="password"],
|
||||||
|
input[type="text"] {
|
||||||
|
background: inherit;
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box; /* This ensures padding is included in the total width */
|
||||||
|
font-size: 14px;
|
||||||
|
outline: 0;
|
||||||
|
padding: 15px 30px 15px 15px; /* Adjust the padding to ensure there is space for the icon */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticrypt-password-container {
|
||||||
|
position: relative;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background: #f2f2f2;
|
background: #f2f2f2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
margin: 0 0 15px;
|
margin: 0 0 15px;
|
||||||
padding: 15px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
}
|
||||||
|
|
||||||
|
.staticrypt-toggle-password-visibility {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 20px;
|
||||||
|
opacity: 60%;
|
||||||
|
padding: 13px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.staticrypt-form .staticrypt-decrypt-button {
|
.staticrypt-form .staticrypt-decrypt-button {
|
||||||
|
@ -161,13 +183,22 @@
|
||||||
<hr class="staticrypt-hr" />
|
<hr class="staticrypt-hr" />
|
||||||
|
|
||||||
<form id="staticrypt-form" action="#" method="post">
|
<form id="staticrypt-form" action="#" method="post">
|
||||||
<input
|
<div class="staticrypt-password-container">
|
||||||
id="staticrypt-password"
|
<input
|
||||||
type="password"
|
id="staticrypt-password"
|
||||||
name="password"
|
type="password"
|
||||||
placeholder="Password"
|
name="password"
|
||||||
autofocus
|
placeholder="Password"
|
||||||
/>
|
autofocus
|
||||||
|
/>
|
||||||
|
|
||||||
|
<img
|
||||||
|
class="staticrypt-toggle-password-visibility"
|
||||||
|
alt="Show password"
|
||||||
|
title="Show password"
|
||||||
|
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4LjggNS4xQzI4LjQtMy4xIDEzLjMtMS4yIDUuMSA5LjJTLTEuMiAzNC43IDkuMiA0Mi45bDU5MiA0NjRjMTAuNCA4LjIgMjUuNSA2LjMgMzMuNy00LjFzNi4zLTI1LjUtNC4xLTMzLjdMNTI1LjYgMzg2LjdjMzkuNi00MC42IDY2LjQtODYuMSA3OS45LTExOC40YzMuMy03LjkgMy4zLTE2LjcgMC0yNC42Yy0xNC45LTM1LjctNDYuMi04Ny43LTkzLTEzMS4xQzQ2NS41IDY4LjggNDAwLjggMzIgMzIwIDMyYy02OC4yIDAtMTI1IDI2LjMtMTY5LjMgNjAuOEwzOC44IDUuMXpNMjIzLjEgMTQ5LjVDMjQ4LjYgMTI2LjIgMjgyLjcgMTEyIDMyMCAxMTJjNzkuNSAwIDE0NCA2NC41IDE0NCAxNDRjMCAyNC45LTYuMyA0OC4zLTE3LjQgNjguN0w0MDggMjk0LjVjOC40LTE5LjMgMTAuNi00MS40IDQuOC02My4zYy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM2MwIDEwLjItMi40IDE5LjgtNi42IDI4LjNsLTkwLjMtNzAuOHpNMzczIDM4OS45Yy0xNi40IDYuNS0zNC4zIDEwLjEtNTMgMTAuMWMtNzkuNSAwLTE0NC02NC41LTE0NC0xNDRjMC02LjkgLjUtMTMuNiAxLjQtMjAuMkw4My4xIDE2MS41QzYwLjMgMTkxLjIgNDQgMjIwLjggMzQuNSAyNDMuN2MtMy4zIDcuOS0zLjMgMTYuNyAwIDI0LjZjMTQuOSAzNS43IDQ2LjIgODcuNyA5MyAxMzEuMUMxNzQuNSA0NDMuMiAyMzkuMiA0ODAgMzIwIDQ4MGM0Ny44IDAgODkuOS0xMi45IDEyNi4yLTMyLjVMMzczIDM4OS45eiIvPjwvc3ZnPg=="
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
|
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
|
||||||
<input id="staticrypt-remember" type="checkbox" name="remember" />
|
<input id="staticrypt-remember" type="checkbox" name="remember" />
|
||||||
|
@ -779,8 +810,10 @@ exports.init = init;
|
||||||
return exports;
|
return exports;
|
||||||
})());
|
})());
|
||||||
const templateError = "Bad password!",
|
const templateError = "Bad password!",
|
||||||
|
templateToggleAltShow = "Show password",
|
||||||
|
templateToggleAltHide = "Hide password",
|
||||||
isRememberEnabled = true,
|
isRememberEnabled = true,
|
||||||
staticryptConfig = {"staticryptEncryptedMsgUniqueVariableName":"0aebc39457f31c757cef31f0fa9b2fb0cb4ebe9845a3690ab119002ae21ce5b7b200ded81ad6da56d0f6b98df029102c0913440135cd3f75b84f481ee32aab034c0bb3055168d6c49afd4b59e7189b539b573e6effbd29e403ef3234ab8bd1c2de1cd97a4f94e88c4d632f8648e9d99c7d988723634ce805d021d1d017c3e125e98e58914db31c4cca5a0f6b1f4464d284a48548a1eb5edad8f910aea4d2beee6b811785b556c7ec67c48112f551aa860614faf34887267c6119feda894b3ed8","isRememberEnabled":true,"rememberDurationInDays":0,"staticryptSaltUniqueVariableName":"b93bbaf35459951c47721d1f3eaeb5b9"};
|
staticryptConfig = {"staticryptEncryptedMsgUniqueVariableName":"8e395d6160e79a99ea38ea6115934a9090173fd99186a1cb457b57ea2868ab704e6035e29e2031ce62a11a631efcfeb3565ff471739927d161ac53cec34edb4f9d0fbd7c630651e90c0f3009973d1ac2c04278a5c72622279a43133430862b1ac89dec458421be73f93419606ddbec12aefd3ed5c316f25224826f1baddcb9f247e1fe209608e82946e043de9a4e234ed3c1dfa2f83cfc2e9c3e2467e01322c8a10456e8cf4cc643fa18fd5db58399c3a3f423bc2164c0cd53c3de98be3cd96b","isRememberEnabled":true,"rememberDurationInDays":0,"staticryptSaltUniqueVariableName":"b93bbaf35459951c47721d1f3eaeb5b9"};
|
||||||
|
|
||||||
// you can edit these values to customize some of the behavior of StatiCrypt
|
// you can edit these values to customize some of the behavior of StatiCrypt
|
||||||
const templateConfig = {
|
const templateConfig = {
|
||||||
|
@ -812,6 +845,28 @@ exports.init = init;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// toggle password visibility
|
||||||
|
const toggleIcon = document.querySelector(".staticrypt-toggle-password-visibility");
|
||||||
|
// these two icons are coming from FontAwesome
|
||||||
|
const imgSrcEyeClosed =
|
||||||
|
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4LjggNS4xQzI4LjQtMy4xIDEzLjMtMS4yIDUuMSA5LjJTLTEuMiAzNC43IDkuMiA0Mi45bDU5MiA0NjRjMTAuNCA4LjIgMjUuNSA2LjMgMzMuNy00LjFzNi4zLTI1LjUtNC4xLTMzLjdMNTI1LjYgMzg2LjdjMzkuNi00MC42IDY2LjQtODYuMSA3OS45LTExOC40YzMuMy03LjkgMy4zLTE2LjcgMC0yNC42Yy0xNC45LTM1LjctNDYuMi04Ny43LTkzLTEzMS4xQzQ2NS41IDY4LjggNDAwLjggMzIgMzIwIDMyYy02OC4yIDAtMTI1IDI2LjMtMTY5LjMgNjAuOEwzOC44IDUuMXpNMjIzLjEgMTQ5LjVDMjQ4LjYgMTI2LjIgMjgyLjcgMTEyIDMyMCAxMTJjNzkuNSAwIDE0NCA2NC41IDE0NCAxNDRjMCAyNC45LTYuMyA0OC4zLTE3LjQgNjguN0w0MDggMjk0LjVjOC40LTE5LjMgMTAuNi00MS40IDQuOC02My4zYy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM2MwIDEwLjItMi40IDE5LjgtNi42IDI4LjNsLTkwLjMtNzAuOHpNMzczIDM4OS45Yy0xNi40IDYuNS0zNC4zIDEwLjEtNTMgMTAuMWMtNzkuNSAwLTE0NC02NC41LTE0NC0xNDRjMC02LjkgLjUtMTMuNiAxLjQtMjAuMkw4My4xIDE2MS41QzYwLjMgMTkxLjIgNDQgMjIwLjggMzQuNSAyNDMuN2MtMy4zIDcuOS0zLjMgMTYuNyAwIDI0LjZjMTQuOSAzNS43IDQ2LjIgODcuNyA5MyAxMzEuMUMxNzQuNSA0NDMuMiAyMzkuMiA0ODAgMzIwIDQ4MGM0Ny44IDAgODkuOS0xMi45IDEyNi4yLTMyLjVMMzczIDM4OS45eiIvPjwvc3ZnPg==";
|
||||||
|
const imgSrcEyeOpened =
|
||||||
|
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTI4OCAzMmMtODAuOCAwLTE0NS41IDM2LjgtMTkyLjYgODAuNkM0OC42IDE1NiAxNy4zIDIwOCAyLjUgMjQzLjdjLTMuMyA3LjktMy4zIDE2LjcgMCAyNC42QzE3LjMgMzA0IDQ4LjYgMzU2IDk1LjQgMzk5LjRDMTQyLjUgNDQzLjIgMjA3LjIgNDgwIDI4OCA0ODBzMTQ1LjUtMzYuOCAxOTIuNi04MC42YzQ2LjgtNDMuNSA3OC4xLTk1LjQgOTMtMTMxLjFjMy4zLTcuOSAzLjMtMTYuNyAwLTI0LjZjLTE0LjktMzUuNy00Ni4yLTg3LjctOTMtMTMxLjFDNDMzLjUgNjguOCAzNjguOCAzMiAyODggMzJ6TTE0NCAyNTZhMTQ0IDE0NCAwIDEgMSAyODggMCAxNDQgMTQ0IDAgMSAxIC0yODggMHptMTQ0LTY0YzAgMzUuMy0yOC43IDY0LTY0IDY0Yy03LjEgMC0xMy45LTEuMi0yMC4zLTMuM2MtNS41LTEuOC0xMS45IDEuNi0xMS43IDcuNGMuMyA2LjkgMS4zIDEzLjggMy4yIDIwLjdjMTMuNyA1MS4yIDY2LjQgODEuNiAxMTcuNiA2Ny45czgxLjYtNjYuNCA2Ny45LTExNy42Yy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM3oiLz48L3N2Zz4=";
|
||||||
|
toggleIcon.addEventListener("click", function () {
|
||||||
|
const passwordInput = document.getElementById("staticrypt-password");
|
||||||
|
if (passwordInput.type === "password") {
|
||||||
|
passwordInput.type = "text";
|
||||||
|
toggleIcon.src = imgSrcEyeOpened;
|
||||||
|
toggleIcon.alt = templateToggleAltHide;
|
||||||
|
toggleIcon.title = templateToggleAltHide;
|
||||||
|
} else {
|
||||||
|
passwordInput.type = "password";
|
||||||
|
toggleIcon.src = imgSrcEyeClosed;
|
||||||
|
toggleIcon.alt = templateToggleAltShow;
|
||||||
|
toggleIcon.title = templateToggleAltShow;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// handle password form submission
|
// handle password form submission
|
||||||
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
|
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
|
@ -38,15 +38,37 @@
|
||||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
|
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.staticrypt-form input[type="password"] {
|
.staticrypt-form input[type="password"],
|
||||||
|
input[type="text"] {
|
||||||
|
background: inherit;
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box; /* This ensures padding is included in the total width */
|
||||||
|
font-size: 14px;
|
||||||
|
outline: 0;
|
||||||
|
padding: 15px 30px 15px 15px; /* Adjust the padding to ensure there is space for the icon */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticrypt-password-container {
|
||||||
|
position: relative;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background: #f2f2f2;
|
background: #f2f2f2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
margin: 0 0 15px;
|
margin: 0 0 15px;
|
||||||
padding: 15px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
}
|
||||||
|
|
||||||
|
.staticrypt-toggle-password-visibility {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 20px;
|
||||||
|
opacity: 60%;
|
||||||
|
padding: 13px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.staticrypt-form .staticrypt-decrypt-button {
|
.staticrypt-form .staticrypt-decrypt-button {
|
||||||
|
@ -161,13 +183,22 @@
|
||||||
<hr class="staticrypt-hr" />
|
<hr class="staticrypt-hr" />
|
||||||
|
|
||||||
<form id="staticrypt-form" action="#" method="post">
|
<form id="staticrypt-form" action="#" method="post">
|
||||||
<input
|
<div class="staticrypt-password-container">
|
||||||
id="staticrypt-password"
|
<input
|
||||||
type="password"
|
id="staticrypt-password"
|
||||||
name="password"
|
type="password"
|
||||||
placeholder="/*[|template_placeholder|]*/0"
|
name="password"
|
||||||
autofocus
|
placeholder="/*[|template_placeholder|]*/0"
|
||||||
/>
|
autofocus
|
||||||
|
/>
|
||||||
|
|
||||||
|
<img
|
||||||
|
class="staticrypt-toggle-password-visibility"
|
||||||
|
alt="/*[|template_toggle_show|]*/0"
|
||||||
|
title="/*[|template_toggle_show|]*/0"
|
||||||
|
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4LjggNS4xQzI4LjQtMy4xIDEzLjMtMS4yIDUuMSA5LjJTLTEuMiAzNC43IDkuMiA0Mi45bDU5MiA0NjRjMTAuNCA4LjIgMjUuNSA2LjMgMzMuNy00LjFzNi4zLTI1LjUtNC4xLTMzLjdMNTI1LjYgMzg2LjdjMzkuNi00MC42IDY2LjQtODYuMSA3OS45LTExOC40YzMuMy03LjkgMy4zLTE2LjcgMC0yNC42Yy0xNC45LTM1LjctNDYuMi04Ny43LTkzLTEzMS4xQzQ2NS41IDY4LjggNDAwLjggMzIgMzIwIDMyYy02OC4yIDAtMTI1IDI2LjMtMTY5LjMgNjAuOEwzOC44IDUuMXpNMjIzLjEgMTQ5LjVDMjQ4LjYgMTI2LjIgMjgyLjcgMTEyIDMyMCAxMTJjNzkuNSAwIDE0NCA2NC41IDE0NCAxNDRjMCAyNC45LTYuMyA0OC4zLTE3LjQgNjguN0w0MDggMjk0LjVjOC40LTE5LjMgMTAuNi00MS40IDQuOC02My4zYy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM2MwIDEwLjItMi40IDE5LjgtNi42IDI4LjNsLTkwLjMtNzAuOHpNMzczIDM4OS45Yy0xNi40IDYuNS0zNC4zIDEwLjEtNTMgMTAuMWMtNzkuNSAwLTE0NC02NC41LTE0NC0xNDRjMC02LjkgLjUtMTMuNiAxLjQtMjAuMkw4My4xIDE2MS41QzYwLjMgMTkxLjIgNDQgMjIwLjggMzQuNSAyNDMuN2MtMy4zIDcuOS0zLjMgMTYuNyAwIDI0LjZjMTQuOSAzNS43IDQ2LjIgODcuNyA5MyAxMzEuMUMxNzQuNSA0NDMuMiAyMzkuMiA0ODAgMzIwIDQ4MGM0Ny44IDAgODkuOS0xMi45IDEyNi4yLTMyLjVMMzczIDM4OS45eiIvPjwvc3ZnPg=="
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
|
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
|
||||||
<input id="staticrypt-remember" type="checkbox" name="remember" />
|
<input id="staticrypt-remember" type="checkbox" name="remember" />
|
||||||
|
@ -184,6 +215,8 @@
|
||||||
// these variables will be filled when generating the file - the template format is '/*[|variable_name|]*/0'
|
// these variables will be filled when generating the file - the template format is '/*[|variable_name|]*/0'
|
||||||
const staticryptInitiator = /*[|js_staticrypt|]*/ 0;
|
const staticryptInitiator = /*[|js_staticrypt|]*/ 0;
|
||||||
const templateError = "/*[|template_error|]*/0",
|
const templateError = "/*[|template_error|]*/0",
|
||||||
|
templateToggleAltShow = "/*[|template_toggle_show|]*/0",
|
||||||
|
templateToggleAltHide = "/*[|template_toggle_hide|]*/0",
|
||||||
isRememberEnabled = /*[|is_remember_enabled|]*/ 0,
|
isRememberEnabled = /*[|is_remember_enabled|]*/ 0,
|
||||||
staticryptConfig = /*[|staticrypt_config|]*/ 0;
|
staticryptConfig = /*[|staticrypt_config|]*/ 0;
|
||||||
|
|
||||||
|
@ -217,6 +250,28 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// toggle password visibility
|
||||||
|
const toggleIcon = document.querySelector(".staticrypt-toggle-password-visibility");
|
||||||
|
// these two icons are coming from FontAwesome
|
||||||
|
const imgSrcEyeClosed =
|
||||||
|
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4LjggNS4xQzI4LjQtMy4xIDEzLjMtMS4yIDUuMSA5LjJTLTEuMiAzNC43IDkuMiA0Mi45bDU5MiA0NjRjMTAuNCA4LjIgMjUuNSA2LjMgMzMuNy00LjFzNi4zLTI1LjUtNC4xLTMzLjdMNTI1LjYgMzg2LjdjMzkuNi00MC42IDY2LjQtODYuMSA3OS45LTExOC40YzMuMy03LjkgMy4zLTE2LjcgMC0yNC42Yy0xNC45LTM1LjctNDYuMi04Ny43LTkzLTEzMS4xQzQ2NS41IDY4LjggNDAwLjggMzIgMzIwIDMyYy02OC4yIDAtMTI1IDI2LjMtMTY5LjMgNjAuOEwzOC44IDUuMXpNMjIzLjEgMTQ5LjVDMjQ4LjYgMTI2LjIgMjgyLjcgMTEyIDMyMCAxMTJjNzkuNSAwIDE0NCA2NC41IDE0NCAxNDRjMCAyNC45LTYuMyA0OC4zLTE3LjQgNjguN0w0MDggMjk0LjVjOC40LTE5LjMgMTAuNi00MS40IDQuOC02My4zYy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM2MwIDEwLjItMi40IDE5LjgtNi42IDI4LjNsLTkwLjMtNzAuOHpNMzczIDM4OS45Yy0xNi40IDYuNS0zNC4zIDEwLjEtNTMgMTAuMWMtNzkuNSAwLTE0NC02NC41LTE0NC0xNDRjMC02LjkgLjUtMTMuNiAxLjQtMjAuMkw4My4xIDE2MS41QzYwLjMgMTkxLjIgNDQgMjIwLjggMzQuNSAyNDMuN2MtMy4zIDcuOS0zLjMgMTYuNyAwIDI0LjZjMTQuOSAzNS43IDQ2LjIgODcuNyA5MyAxMzEuMUMxNzQuNSA0NDMuMiAyMzkuMiA0ODAgMzIwIDQ4MGM0Ny44IDAgODkuOS0xMi45IDEyNi4yLTMyLjVMMzczIDM4OS45eiIvPjwvc3ZnPg==";
|
||||||
|
const imgSrcEyeOpened =
|
||||||
|
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTI4OCAzMmMtODAuOCAwLTE0NS41IDM2LjgtMTkyLjYgODAuNkM0OC42IDE1NiAxNy4zIDIwOCAyLjUgMjQzLjdjLTMuMyA3LjktMy4zIDE2LjcgMCAyNC42QzE3LjMgMzA0IDQ4LjYgMzU2IDk1LjQgMzk5LjRDMTQyLjUgNDQzLjIgMjA3LjIgNDgwIDI4OCA0ODBzMTQ1LjUtMzYuOCAxOTIuNi04MC42YzQ2LjgtNDMuNSA3OC4xLTk1LjQgOTMtMTMxLjFjMy4zLTcuOSAzLjMtMTYuNyAwLTI0LjZjLTE0LjktMzUuNy00Ni4yLTg3LjctOTMtMTMxLjFDNDMzLjUgNjguOCAzNjguOCAzMiAyODggMzJ6TTE0NCAyNTZhMTQ0IDE0NCAwIDEgMSAyODggMCAxNDQgMTQ0IDAgMSAxIC0yODggMHptMTQ0LTY0YzAgMzUuMy0yOC43IDY0LTY0IDY0Yy03LjEgMC0xMy45LTEuMi0yMC4zLTMuM2MtNS41LTEuOC0xMS45IDEuNi0xMS43IDcuNGMuMyA2LjkgMS4zIDEzLjggMy4yIDIwLjdjMTMuNyA1MS4yIDY2LjQgODEuNiAxMTcuNiA2Ny45czgxLjYtNjYuNCA2Ny45LTExNy42Yy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM3oiLz48L3N2Zz4=";
|
||||||
|
toggleIcon.addEventListener("click", function () {
|
||||||
|
const passwordInput = document.getElementById("staticrypt-password");
|
||||||
|
if (passwordInput.type === "password") {
|
||||||
|
passwordInput.type = "text";
|
||||||
|
toggleIcon.src = imgSrcEyeOpened;
|
||||||
|
toggleIcon.alt = templateToggleAltHide;
|
||||||
|
toggleIcon.title = templateToggleAltHide;
|
||||||
|
} else {
|
||||||
|
passwordInput.type = "password";
|
||||||
|
toggleIcon.src = imgSrcEyeClosed;
|
||||||
|
toggleIcon.alt = templateToggleAltShow;
|
||||||
|
toggleIcon.title = templateToggleAltShow;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// handle password form submission
|
// handle password form submission
|
||||||
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
|
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "staticrypt",
|
"name": "staticrypt",
|
||||||
"version": "3.4.0",
|
"version": "3.4.1",
|
||||||
"description": "Baed on the [crypto-js](https://github.com/brix/crypto-js) library, StatiCrypt uses AES-256 to encrypt your input with your long password and put it in a HTML file with a password prompt that can decrypted in-browser (client side).",
|
"description": "Baed on the [crypto-js](https://github.com/brix/crypto-js) library, StatiCrypt uses AES-256 to encrypt your input with your long password and put it in a HTML file with a password prompt that can decrypted in-browser (client side).",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"files": [
|
"files": [
|
||||||
|
|
Ładowanie…
Reference in New Issue