Skip to content

Commit

Permalink
Release v1.2.0
Browse files Browse the repository at this point in the history
- Start script on password input focus
- Updated Dev dependencies
- async loading script in examples
  • Loading branch information
coliff committed Oct 7, 2021
1 parent bfa9eee commit f093f00
Show file tree
Hide file tree
Showing 11 changed files with 44 additions and 35 deletions.
14 changes: 9 additions & 5 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions css/show-password-toggle.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/show-password-toggle.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/show-password-toggle.min.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 22 additions & 17 deletions js/show-password-toggle.js
Original file line number Diff line number Diff line change
@@ -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."
);
}
}
}
};
2 changes: 1 addition & 1 deletion js/show-password-toggle.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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\"",
Expand All @@ -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",
Expand Down
1 change: 0 additions & 1 deletion scss/show-password-toggle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
display: none;
}


button#toggle-password {
position: absolute;
top: 3px;
Expand Down
4 changes: 2 additions & 2 deletions tests/bootstrap4-sign-in/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion tests/bootstrap5-sign-in/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit f093f00

Please sign in to comment.