From b4a429b4ab355c3e49b47915db75af7d7349444f Mon Sep 17 00:00:00 2001 From: slackero Date: Sat, 30 Oct 2021 10:16:30 +0300 Subject: [PATCH 01/11] Refactored, release v1.3.0 - Works with multiple `input[type=password]`. - The `aria-label` of the toggle button can be customized adding `data-show` and `data-hide` attributes to the password input. - The toggle button is added by JavaScript, remove existing ` + ``` 3. Load the `show-password-toggle.js` after the form -I highly recommend adding the attributes: `spellcheck="false"`, `autocorrect="off"` and `autocapitalize="off"` to the password input so that when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath). +I highly recommend adding the attributes: `spellcheck="false"` and `autocapitalize="off"` to the password input so that when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath). -You should also add `name="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form. +You should also add `id="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form. ## Demo @@ -59,10 +59,20 @@ Q. **Can I change the show password icon?** A. You could change the icon displayed by replacing the `.input-password[type="password"]` [Base64 encoded](https://yoksel.github.io/url-encoder/) background image. SVG is recommended. +## Changes + +### [1.3.0] - 2021-10-30 +- Works with multiple `input[type=password]`. +- The `aria-label` of the toggle button can be customized adding `data-show` and `data-hide` attributes to the password input. +- The toggle button is added by JavaScript, remove existing ` + + '); + $toggleButton.on('click', function () { + if ($this.attr('type') === 'password') { + $this.attr('type', 'text'); + $toggleButton.addClass('password-visible'); + $toggleButton.attr('aria-label', $toggleButtonLabels.hide); + $toggleButton.attr('aria-pressed', 'true'); + } else { + $this.attr('type', 'password'); + $toggleButton.removeClass('password-visible'); + $toggleButton.attr('aria-label', $toggleButtonLabels.show); + $toggleButton.attr('aria-pressed', 'false'); + } + }); + $this.after($toggleButton); + }); + } +}); diff --git a/js/show-password-toggle-jquery.min.js b/js/show-password-toggle-jquery.min.js new file mode 100644 index 0000000..edd18d3 --- /dev/null +++ b/js/show-password-toggle-jquery.min.js @@ -0,0 +1 @@ +$((function(){let ShowPasswordToggles=$("input:password");if(ShowPasswordToggles.length){ShowPasswordToggles.each((function(){let $this=$(this);$this.addClass("input-password");let $toggleButtonLabels={show:$this.data("show")||"Show password as plain text. Warning: this will display your password on the screen.",hide:$this.data("hide")||"Hide password."};let $toggleButton=$('');$toggleButton.on("click",(function(){if($this.attr("type")==="password"){$this.attr("type","text");$toggleButton.addClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.hide);$toggleButton.attr("aria-pressed","true")}else{$this.attr("type","password");$toggleButton.removeClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.show);$toggleButton.attr("aria-pressed","false")}}));$this.after($toggleButton)}))}})); \ No newline at end of file diff --git a/package.json b/package.json index 4928688..6646329 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,23 @@ { - "name": "@slackero/bootstrap-show-password-toggle", - "version": "1.3.1", + "name": "bootstrap-show-password-toggle", + "version": "1.3.2", "description": "A show password as text toggle for Bootstrap", "keywords": [ "bootstrap", "forms", "password" ], - "homepage": "https://github.com/slackero/bootstrap-show-password-toggle", + "homepage": "https://github.com/coliff/bootstrap-show-password-toggle", "bugs": { - "url": "https://github.com/slackero/bootstrap-show-password-toggle/issues" + "url": "https://github.com/coliff/bootstrap-show-password-toggle/issues" }, "repository": { "type": "git", - "url": "git+https://github.com/slackero/bootstrap-show-password-toggle.git" + "url": "git+https://github.com/coliff/bootstrap-show-password-toggle.git" + }, + "funding": { + "type": "PayPal", + "url": "https://paypal.me/coliff" }, "license": "MIT", "files": [ @@ -34,17 +38,17 @@ "css-compile": "sass --style expanded --embed-sources scss:css", "css-lint": "stylelint \"scss/*.scss\"", "css-minify": "cleancss -O1 --format breakWith=lf --output css/show-password-toggle.min.css css/show-password-toggle.css", - "js-lint": "eslint js/show-password-toggle.js", - "js-minify": "terser --ecma 5 --keep-classnames --keep-fnames --output js/show-password-toggle.min.js -- js/show-password-toggle.js", + "js-lint": "eslint js/show-password-toggle.js js/show-password-toggle-jquery.js", + "js-minify": "terser --ecma 5 --keep-classnames --keep-fnames --output js/show-password-toggle.min.js -- js/show-password-toggle.js && terser --ecma 5 --keep-classnames --keep-fnames --output js/show-password-toggle-jquery.min.js -- js/show-password-toggle-jquery.js", "test": "npm-run-all css-lint js-lint" }, "devDependencies": { - "clean-css-cli": "^5.4.1", + "clean-css-cli": "^5.4.2", "eslint": "^8.1.0", "npm-run-all": "^4.1.5", - "sass": "^1.42.1", - "stylelint": "^13.13.1", - "stylelint-config-twbs-bootstrap": "^2.2.4", + "sass": "^1.43.4", + "stylelint": "13.13.1", + "stylelint-config-twbs-bootstrap": "2.2.4", "terser": "^5.9.0" } } diff --git a/tests/bootstrap4-jquery-sign-in/index.html b/tests/bootstrap4-jquery-sign-in/index.html new file mode 100644 index 0000000..eaf9f98 --- /dev/null +++ b/tests/bootstrap4-jquery-sign-in/index.html @@ -0,0 +1,75 @@ + + + + + + + Show Password Toggle for Bootstrap 4 + + + + + + + + + +
+

Please sign in

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

+ + © 2021 + +

+ + + + + + diff --git a/tests/bootstrap4-sign-in/index.html b/tests/bootstrap4-sign-in/index.html index 772a665..08a188a 100644 --- a/tests/bootstrap4-sign-in/index.html +++ b/tests/bootstrap4-sign-in/index.html @@ -63,7 +63,7 @@

Please sign in

- + © 2021

diff --git a/tests/bootstrap5-sign-in/index.html b/tests/bootstrap5-sign-in/index.html index 988e574..a1a74a9 100644 --- a/tests/bootstrap5-sign-in/index.html +++ b/tests/bootstrap5-sign-in/index.html @@ -63,7 +63,7 @@

Please sign in

- + © 2021

From a4d44767183abea670bddc53150a6e720ed5632b Mon Sep 17 00:00:00 2001 From: slackero Date: Sat, 6 Nov 2021 22:43:33 +0300 Subject: [PATCH 10/11] Added type button, avoid submit on password toggle # Conflicts: # package.json --- js/show-password-toggle-jquery.js | 2 +- js/show-password-toggle-jquery.min.js | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/show-password-toggle-jquery.js b/js/show-password-toggle-jquery.js index c11ccdd..9d654ed 100644 --- a/js/show-password-toggle-jquery.js +++ b/js/show-password-toggle-jquery.js @@ -8,7 +8,7 @@ $(function () { show: $this.data('show') || 'Show password as plain text. Warning: this will display your password on the screen.', hide: $this.data('hide') || 'Hide password.' }; - let $toggleButton = $(''); + let $toggleButton = $(''); $toggleButton.on('click', function () { if ($this.attr('type') === 'password') { $this.attr('type', 'text'); diff --git a/js/show-password-toggle-jquery.min.js b/js/show-password-toggle-jquery.min.js index edd18d3..9efc2d0 100644 --- a/js/show-password-toggle-jquery.min.js +++ b/js/show-password-toggle-jquery.min.js @@ -1 +1 @@ -$((function(){let ShowPasswordToggles=$("input:password");if(ShowPasswordToggles.length){ShowPasswordToggles.each((function(){let $this=$(this);$this.addClass("input-password");let $toggleButtonLabels={show:$this.data("show")||"Show password as plain text. Warning: this will display your password on the screen.",hide:$this.data("hide")||"Hide password."};let $toggleButton=$('');$toggleButton.on("click",(function(){if($this.attr("type")==="password"){$this.attr("type","text");$toggleButton.addClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.hide);$toggleButton.attr("aria-pressed","true")}else{$this.attr("type","password");$toggleButton.removeClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.show);$toggleButton.attr("aria-pressed","false")}}));$this.after($toggleButton)}))}})); \ No newline at end of file +$((function(){let ShowPasswordToggles=$("input:password");if(ShowPasswordToggles.length){ShowPasswordToggles.each((function(){let $this=$(this);$this.addClass("input-password");let $toggleButtonLabels={show:$this.data("show")||"Show password as plain text. Warning: this will display your password on the screen.",hide:$this.data("hide")||"Hide password."};let $toggleButton=$('');$toggleButton.on("click",(function(){if($this.attr("type")==="password"){$this.attr("type","text");$toggleButton.addClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.hide);$toggleButton.attr("aria-pressed","true")}else{$this.attr("type","password");$toggleButton.removeClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.show);$toggleButton.attr("aria-pressed","false")}}));$this.after($toggleButton)}))}})); \ No newline at end of file diff --git a/package.json b/package.json index 6646329..2c367f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-show-password-toggle", - "version": "1.3.2", + "version": "1.3.3", "description": "A show password as text toggle for Bootstrap", "keywords": [ "bootstrap", From 9ededde7253f9d5b33a9ec048bec6dd96be8a5b0 Mon Sep 17 00:00:00 2001 From: slackero Date: Sun, 7 Nov 2021 08:26:50 +0300 Subject: [PATCH 11/11] Text changes --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ca17ee..1b75e51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ ## Changes -### [1.3.2] - 2021-10-31 +### [1.3.3] - 2021-11-06 +- Fixes problem with the toggle button by adding the attribute `type="button"` to the jQuery version of the script. + +### [1.3.2] - 2021-11-06 - Added script working with jQuery or Cash. ### [1.3.1] - 2021-10-31