diff --git a/.github/dependabot.yml b/.github/dependabot.yml index ff472a0..e91cae9 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,7 +1,11 @@ version: 2 updates: -- package-ecosystem: npm - directory: "/" - schedule: - interval: monthly - versioning-strategy: increase + - package-ecosystem: npm + directory: "/" + schedule: + interval: monthly + versioning-strategy: increase + - package-ecosystem: github-actions + directory: "/" + schedule: + interval: monthly diff --git a/README.md b/README.md index d497447..1cbaaca 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ A. You could change the icon displayed by replacing the `.input-password[type="p ## Known Issues - If the browser autofills the password input then the user-agent will apply `background-image: none !important`. -- The password input requires the use of the `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank pseudo-selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank)!) +- The password input requires the use of the `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) or [:empty](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) pseudo-selectors!) ## Credits and Thanks diff --git a/css/show-password-toggle.css b/css/show-password-toggle.css index dad3043..7365857 100644 --- a/css/show-password-toggle.css +++ b/css/show-password-toggle.css @@ -24,10 +24,10 @@ button#toggle-password:focus { } .input-password { - padding-right: calc(1.5em + .75rem); + padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat; - background-position: right calc(.375em + .1875rem) center; - background-size: calc(.75em + .375rem) calc(.75em + .375rem); + background-position: right calc(0.375em + 0.1875rem) center; + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .input-password[type=password]:valid { diff --git a/css/show-password-toggle.css.map b/css/show-password-toggle.css.map index 7da5a14..930e56f 100644 --- a/css/show-password-toggle.css.map +++ b/css/show-password-toggle.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/show-password-toggle.scss"],"names":[],"mappings":"AAEA;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"show-password-toggle.css","sourcesContent":["// hide default password reveal icon in Edge\n// https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control\n::-ms-reveal {\n display: none;\n}\n\n\nbutton#toggle-password {\n position: absolute;\n top: 3px;\n right: 4px;\n z-index: 9;\n width: 28px;\n height: 30px;\n background: 0;\n border: 0;\n}\n\nbutton#toggle-password:active,\nbutton#toggle-password:focus,\nbutton#toggle-password:hover {\n cursor: pointer;\n}\n\nbutton#toggle-password:focus {\n outline: none !important;\n}\n\n.input-password {\n padding-right: calc(1.5em + .75rem);\n background-repeat: no-repeat;\n background-position: right calc(.375em + .1875rem) center;\n background-size: calc(.75em + .375rem) calc(.75em + .375rem);\n}\n\n.input-password[type=\"password\"]:valid {\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\") !important;\n}\n\n.input-password[type=\"text\"]:valid {\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\n}\n"]} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/show-password-toggle.scss"],"names":[],"mappings":"AAEA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"show-password-toggle.css","sourcesContent":["// hide default password reveal icon in Edge\r\n// https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control\r\n::-ms-reveal {\r\n display: none;\r\n}\r\n\r\nbutton#toggle-password {\r\n position: absolute;\r\n top: 3px;\r\n right: 4px;\r\n z-index: 9;\r\n width: 28px;\r\n height: 30px;\r\n background: 0;\r\n border: 0;\r\n}\r\n\r\nbutton#toggle-password:active,\r\nbutton#toggle-password:focus,\r\nbutton#toggle-password:hover {\r\n cursor: pointer;\r\n}\r\n\r\nbutton#toggle-password:focus {\r\n outline: none !important;\r\n}\r\n\r\n.input-password {\r\n padding-right: calc(1.5em + .75rem);\r\n background-repeat: no-repeat;\r\n background-position: right calc(.375em + .1875rem) center;\r\n background-size: calc(.75em + .375rem) calc(.75em + .375rem);\r\n}\r\n\r\n.input-password[type=\"password\"]:valid {\r\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\") !important;\r\n}\r\n\r\n.input-password[type=\"text\"]:valid {\r\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\r\n}\r\n"]} \ No newline at end of file diff --git a/css/show-password-toggle.min.css.map b/css/show-password-toggle.min.css.map index 399bd6a..537280e 100644 --- a/css/show-password-toggle.min.css.map +++ b/css/show-password-toggle.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["css\\show-password-toggle.css"],"names":[],"mappings":"AAAA,aACE,QAAS,KAGX,uBACE,SAAU,SACV,IAAK,IACL,MAAO,IACP,QAAS,EACT,MAAO,KACP,OAAQ,KACR,WAAY,EACZ,OAAQ,EAGV,8BACA,6BACA,6BACE,OAAQ,QAGV,6BACE,QAAS,YAGX,gBACE,cAAe,qBACf,kBAAmB,UACnB,oBAAqB,MAAM,wBAAwB,OACnD,gBAAiB,sBAAsB,sBAGzC,qCACE,iBAAkB,27BAGpB,iCACE,iBAAkB","sourcesContent":["::-ms-reveal {\n display: none;\n}\n\nbutton#toggle-password {\n position: absolute;\n top: 3px;\n right: 4px;\n z-index: 9;\n width: 28px;\n height: 30px;\n background: 0;\n border: 0;\n}\n\nbutton#toggle-password:active,\nbutton#toggle-password:focus,\nbutton#toggle-password:hover {\n cursor: pointer;\n}\n\nbutton#toggle-password:focus {\n outline: none !important;\n}\n\n.input-password {\n padding-right: calc(1.5em + .75rem);\n background-repeat: no-repeat;\n background-position: right calc(.375em + .1875rem) center;\n background-size: calc(.75em + .375rem) calc(.75em + .375rem);\n}\n\n.input-password[type=password]:valid {\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\") !important;\n}\n\n.input-password[type=text]:valid {\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\n}\n\n/*# sourceMappingURL=show-password-toggle.css.map */\n"]} \ No newline at end of file +{"version":3,"sources":["css\\show-password-toggle.css"],"names":[],"mappings":"AAAA,aACE,QAAS,KAGX,uBACE,SAAU,SACV,IAAK,IACL,MAAO,IACP,QAAS,EACT,MAAO,KACP,OAAQ,KACR,WAAY,EACZ,OAAQ,EAGV,8BACA,6BACA,6BACE,OAAQ,QAGV,6BACE,QAAS,YAGX,gBACE,cAAe,qBACf,kBAAmB,UACnB,oBAAqB,MAAM,wBAA0B,OACrD,gBAAiB,sBAAwB,sBAG3C,qCACE,iBAAkB,27BAGpB,iCACE,iBAAkB","sourcesContent":["::-ms-reveal {\n display: none;\n}\n\nbutton#toggle-password {\n position: absolute;\n top: 3px;\n right: 4px;\n z-index: 9;\n width: 28px;\n height: 30px;\n background: 0;\n border: 0;\n}\n\nbutton#toggle-password:active,\nbutton#toggle-password:focus,\nbutton#toggle-password:hover {\n cursor: pointer;\n}\n\nbutton#toggle-password:focus {\n outline: none !important;\n}\n\n.input-password {\n padding-right: calc(1.5em + 0.75rem);\n background-repeat: no-repeat;\n background-position: right calc(0.375em + 0.1875rem) center;\n background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);\n}\n\n.input-password[type=password]:valid {\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\") !important;\n}\n\n.input-password[type=text]:valid {\n background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\n}\n\n/*# sourceMappingURL=show-password-toggle.css.map */\n"]} \ No newline at end of file diff --git a/js/show-password-toggle.js b/js/show-password-toggle.js index 1776a2f..1ffc55b 100644 --- a/js/show-password-toggle.js +++ b/js/show-password-toggle.js @@ -1,18 +1,23 @@ -document.querySelector("[type='password']").classList.add("input-password"); -document.getElementById("toggle-password").classList.remove("d-none"); -const passwordInput = document.querySelector("[type='password']"); -const togglePasswordButton = document.getElementById("toggle-password"); -togglePasswordButton.addEventListener("click", togglePassword); -function togglePassword() { - if (passwordInput.type === "password") { - passwordInput.type = "text"; - togglePasswordButton.setAttribute("aria-label", "Hide password."); - } else { - passwordInput.type = "password"; - togglePasswordButton.setAttribute( - "aria-label", - "Show password as plain text. " + - "Warning: this will display your password on the screen." - ); +var ShowPasswordToggle = document.querySelector("[type='password']"); +ShowPasswordToggle.onclick = function () { + document.querySelector("[type='password']").classList.add("input-password"); + document.getElementById("toggle-password").classList.remove("d-none"); + + const passwordInput = document.querySelector("[type='password']"); + const togglePasswordButton = document.getElementById("toggle-password"); + + togglePasswordButton.addEventListener("click", togglePassword); + function togglePassword() { + if (passwordInput.type === "password") { + passwordInput.type = "text"; + togglePasswordButton.setAttribute("aria-label", "Hide password."); + } else { + passwordInput.type = "password"; + togglePasswordButton.setAttribute( + "aria-label", + "Show password as plain text. " + + "Warning: this will display your password on the screen." + ); + } } -} +}; diff --git a/js/show-password-toggle.min.js b/js/show-password-toggle.min.js index 023013d..c50e844 100644 --- a/js/show-password-toggle.min.js +++ b/js/show-password-toggle.min.js @@ -1 +1 @@ -document.querySelector("[type='password']").classList.add("input-password");document.getElementById("toggle-password").classList.remove("d-none");const passwordInput=document.querySelector("[type='password']");const togglePasswordButton=document.getElementById("toggle-password");togglePasswordButton.addEventListener("click",togglePassword);function togglePassword(){if(passwordInput.type==="password"){passwordInput.type="text";togglePasswordButton.setAttribute("aria-label","Hide password.")}else{passwordInput.type="password";togglePasswordButton.setAttribute("aria-label","Show password as plain text. "+"Warning: this will display your password on the screen.")}} \ No newline at end of file +var ShowPasswordToggle=document.querySelector("[type='password']");ShowPasswordToggle.onclick=function(){document.querySelector("[type='password']").classList.add("input-password");document.getElementById("toggle-password").classList.remove("d-none");const passwordInput=document.querySelector("[type='password']");const togglePasswordButton=document.getElementById("toggle-password");togglePasswordButton.addEventListener("click",togglePassword);function togglePassword(){if(passwordInput.type==="password"){passwordInput.type="text";togglePasswordButton.setAttribute("aria-label","Hide password.")}else{passwordInput.type="password";togglePasswordButton.setAttribute("aria-label","Show password as plain text. "+"Warning: this will display your password on the screen.")}}}; \ No newline at end of file diff --git a/package.json b/package.json index 9e18a7f..a96cca3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-show-password-toggle", - "version": "1.1.0", + "version": "1.2.0", "description": "A show password as text toggle for Bootstrap", "keywords": [ "bootstrap", @@ -30,6 +30,7 @@ ], "author": "Christian Oliff (https://christianoliff.com)", "scripts": { + "build": "npm-run-all css-lint css-compile css-minify js-lint js-minify", "css": "npm-run-all css-lint css-compile css-minify", "css-compile": "sass --style expanded --source-map --embed-sources scss:css", "css-lint": "stylelint \"scss/*.scss\"", @@ -40,7 +41,7 @@ }, "devDependencies": { "clean-css-cli": "^5.4.1", - "eslint": "^7.29.0", + "eslint": "^7.32.0", "npm-run-all": "^4.1.5", "sass": "^1.42.1", "stylelint": "^13.13.1", diff --git a/scss/show-password-toggle.scss b/scss/show-password-toggle.scss index fc1c141..ff70ef9 100644 --- a/scss/show-password-toggle.scss +++ b/scss/show-password-toggle.scss @@ -4,7 +4,6 @@ display: none; } - button#toggle-password { position: absolute; top: 3px; diff --git a/tests/bootstrap4-sign-in/index.html b/tests/bootstrap4-sign-in/index.html index 9f566de..926d7cc 100644 --- a/tests/bootstrap4-sign-in/index.html +++ b/tests/bootstrap4-sign-in/index.html @@ -5,7 +5,7 @@