kopia lustrzana https://github.com/robinmoisson/staticrypt
add toggle visibility icon, closes #189
robinmoisson
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"]
|
||||
--template-title Title for the output HTML 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
|
||||
|
|
|
|||
|
|
@ -482,6 +482,16 @@ function parseCommandLineArguments() {
|
|||
describe: "Title for the output HTML 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;
|
||||
|
|
|
|||
|
|
@ -138,13 +138,15 @@ async function runStatiCrypt() {
|
|||
is_remember_enabled: JSON.stringify(isRememberEnabled),
|
||||
js_staticrypt: buildStaticryptJS(),
|
||||
template_button: namedArgs.templateButton,
|
||||
template_color_primary: namedArgs.templateColorPrimary,
|
||||
template_color_secondary: namedArgs.templateColorSecondary,
|
||||
template_error: namedArgs.templateError,
|
||||
template_instructions: namedArgs.templateInstructions,
|
||||
template_placeholder: namedArgs.templatePlaceholder,
|
||||
template_remember: namedArgs.templateRemember,
|
||||
template_title: namedArgs.templateTitle,
|
||||
template_color_primary: namedArgs.templateColorPrimary,
|
||||
template_color_secondary: namedArgs.templateColorSecondary,
|
||||
template_toggle_show: namedArgs.templateToggleShow,
|
||||
template_toggle_hide: namedArgs.templateToggleHide,
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
.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;
|
||||
background: #f2f2f2;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0 0 15px;
|
||||
padding: 15px;
|
||||
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 {
|
||||
|
|
@ -161,13 +183,22 @@
|
|||
<hr class="staticrypt-hr" />
|
||||
|
||||
<form id="staticrypt-form" action="#" method="post">
|
||||
<input
|
||||
id="staticrypt-password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
autofocus
|
||||
/>
|
||||
<div class="staticrypt-password-container">
|
||||
<input
|
||||
id="staticrypt-password"
|
||||
type="password"
|
||||
name="password"
|
||||
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">
|
||||
<input id="staticrypt-remember" type="checkbox" name="remember" />
|
||||
|
|
@ -779,8 +810,10 @@ exports.init = init;
|
|||
return exports;
|
||||
})());
|
||||
const templateError = "Bad password!",
|
||||
templateToggleAltShow = "Show password",
|
||||
templateToggleAltHide = "Hide password",
|
||||
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
|
||||
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
|
||||
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
|
||||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
background: #f2f2f2;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0 0 15px;
|
||||
padding: 15px;
|
||||
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 {
|
||||
|
|
@ -161,13 +183,22 @@
|
|||
<hr class="staticrypt-hr" />
|
||||
|
||||
<form id="staticrypt-form" action="#" method="post">
|
||||
<input
|
||||
id="staticrypt-password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="/*[|template_placeholder|]*/0"
|
||||
autofocus
|
||||
/>
|
||||
<div class="staticrypt-password-container">
|
||||
<input
|
||||
id="staticrypt-password"
|
||||
type="password"
|
||||
name="password"
|
||||
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">
|
||||
<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'
|
||||
const staticryptInitiator = /*[|js_staticrypt|]*/ 0;
|
||||
const templateError = "/*[|template_error|]*/0",
|
||||
templateToggleAltShow = "/*[|template_toggle_show|]*/0",
|
||||
templateToggleAltHide = "/*[|template_toggle_hide|]*/0",
|
||||
isRememberEnabled = /*[|is_remember_enabled|]*/ 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
|
||||
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"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).",
|
||||
"main": "index.js",
|
||||
"files": [
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue