Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactored: works for multiple password inputs, fixes regarding autofill… #48

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ Thumbs.db

# Files
package-lock.json
npm-debug.log
npm-debug.log
19 changes: 19 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
## Changes

### [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
- Fixes the problem that autofill hides the toggle icon.
- Added the `aria-pressed` attribute.
- Updated the demos ([Bootstrap 4](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/), [Bootstrap 5](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/))

### [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 `<button>` tags.
- The toggle button works more stable.
- The toggle button is always visible.
20 changes: 11 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,25 @@ A show password as text toggle for Bootstrap forms

```html
<div class="input-group">
<input type="password" class="form-control rounded" required>
<button id="toggle-password" type="button" class="d-none"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
</button>
<input type="password"
class="form-control rounded"
required
data-show="Show password as plain text."
data-hide="Hide password."
>
</div>
```

3. Load the `show-password-toggle.js` after the form
3. Load the `show-password-toggle.min.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

- [Bootstrap 4 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/)
- [Bootstrap 4 Demo with jQuery](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-jquery-sign-in/)
- [Bootstrap 5 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/)

## Browser Support
Expand All @@ -63,8 +66,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](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) or [:empty](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) pseudo-selectors!)
- For browsers without [Element.after()](https://developer.mozilla.org/en-US/docs/Web/API/Element/after#browser_compatibility) load `show-password-toggle-jquery.min.js` instead. jQuery or Cash needs to be loaded before.

## Credits and Thanks

Expand Down
30 changes: 11 additions & 19 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.

3 changes: 1 addition & 2 deletions css/show-password-toggle.min.css

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

Loading