Release v1.2.0

- Start script on password input focus
- Updated Dev dependencies
- async loading script in examples

.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

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
 

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."
+      );
+    }
   }
-}
+};

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",

scss/show-password-toggle.scss

@@ -4,7 +4,6 @@
   display: none;
 }
 
-
 button#toggle-password {
   position: absolute;
   top: 3px;

tests/bootstrap4-sign-in/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Show Password Toggle for Bootstrap</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css">
   <meta name="description" content="Show Password Toggle for Bootstrap 4">
   <meta name="author" content="Christian Oliff">
   <meta name="twitter:creator" content="@christianoliff">
@@ -48,7 +48,7 @@ <h1 class="h3 mb-3 text-center">Please sign in</h1>
     </a>
   </p>
 
-  <script src="../../js/show-password-toggle.min.js"></script>
+  <script src="../../js/show-password-toggle.min.js" async></script>
 </body>
 
 </html>

tests/bootstrap5-sign-in/index.html

@@ -51,7 +51,7 @@ <h1 class="h3 mb-3 text-center">Please sign in</h1>
     </a>
   </p>
 
-  <script src="../../js/show-password-toggle.min.js"></script>
+  <script src="../../js/show-password-toggle.min.js" async></script>
 </body>
 
 </html>