From bc7bccd39a6a6ba13962915d1a80110330d74ee8 Mon Sep 17 00:00:00 2001 From: robinmoisson Date: Wed, 17 Apr 2024 15:15:52 +0200 Subject: [PATCH] add toggle visibility icon, closes #189 --- README.md | 6 +++ cli/helpers.js | 10 +++++ cli/index.js | 6 ++- example/encrypted/example.html | 77 +++++++++++++++++++++++++++++----- lib/password_template.html | 75 ++++++++++++++++++++++++++++----- package.json | 2 +- 6 files changed, 152 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index a3c7306..61c499d 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/cli/helpers.js b/cli/helpers.js index 5291146..5cc65d4 100644 --- a/cli/helpers.js +++ b/cli/helpers.js @@ -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; diff --git a/cli/index.js b/cli/index.js index 9245e52..00cd8c3 100755 --- a/cli/index.js +++ b/cli/index.js @@ -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 diff --git a/example/encrypted/example.html b/example/encrypted/example.html index 4113448..7ddb720 100644 --- a/example/encrypted/example.html +++ b/example/encrypted/example.html @@ -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 @@
- +
+ + + Show password +