coliff / bootstrap-show-password-toggle Goto Github PK

View Code? Open in Web Editor NEW

36.0 3.0 17.0 364 KB

A show password as text toggle for Bootstrap forms

License: MIT License

JavaScript 11.15% HTML 47.03% SCSS 41.83%

bootstrap forms password-toggle bootstrap-forms hacktoberfest

bootstrap-show-password-toggle's Introduction

Bootstrap Show Password Toggle

A show password as text toggle for Bootstrap forms

Native-looking UI
Vanilla JavaScript with no dependencies
Base64 encoded SVG icons (no external images or fonts required)
Graceful fallback for browsers with JavaScript disabled
Works with Bootstrap 4 and 5
Supports dark mode (Bootstrap 5 only)
Only 1KB gzipped

Quick Start

Download the latest release
Clone the repo git clone https://github.com/coliff/bootstrap-show-password-toggle.git
Install with npm npm install bootstrap-show-password-toggle
Install with yarn yarn add bootstrap-show-password-toggle

Usage

Include the show-password-toggle.min.css in your CSS
Wrap the password input in an input-group div as follows:

<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>
</div>

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).

You should also add name="current-password" and autocomplete="current-password" to help browsers autocomplete the form.

Demo

Browser Support

Works well with all the browsers supported by Bootstrap

FAQS

Q. Can I change the show password icon?

A. Yes you can change the icon displayed by replacing the .input-password[type="password"] Base64 encoded background image. SVG is recommended.

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!)

Credits and Thanks

MDO and Bootstrap team for the icons
Sam Dutton at Google for the idea and initial JavaScript from the 'Sign-in form Best Practices' article
BrowserStack for providing the infrastructure that allows us to test in real browsers

bootstrap-show-password-toggle's People

Contributors

Stargazers

Watchers

Forkers

pdt1984 ericus20 sferaestrategiadigital safwat-fathi slackero tonywong11373 yamunavsaneesh rommea dan-jensen nekirik rishabh3231 gani2267 pwijason hanziegal ritesh17rb rod773

bootstrap-show-password-toggle's Issues

Icon not showing

Thanks for your great work - I've downloaded CSS and JS file via
https://raw.githubusercontent.com/coliff/bootstrap-show-password-toggle/master/css/show-password-toggle.css
but the icon is not rendered in the password field and only a gray rectangular is shown in Chrome browser.

Same is happening with min.css as well.

I do use the following bootstrap files:

Do I miss something?

Btw: https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/ does not render the icon in Chrome as well.

Thanks

Can the tool be used on multiple form fields

Is there a way to use this tool on multiple password fields per page.
Could the name of the field be a parameter somehow?

Thanks

Content Security Policy Error Fix

My project uses the content security policy and it refuses to load the image with the next error message:

"Refused to load the image 'data:image/svg+xml,%3Csvg' "

So to fix this I had to use the next tag:

<meta http-equiv="Content-Security-Policy" content="
        default-src 'none';
        style-src 'self' 'unsafe-inline';
        img-src 'self' data:;
        " />

Enhanced accessibility

As stated in Nicolas Steenhout's post regarding hide/how password feature, a little change could improve accessibility quite a lot: add aria-pressed attribute, being true | false — no need for the switch role, see Toggle Button's example on Inclusive Component by Heydon Pickering.

Thanks for such feature, it's really handy :)

Add Bootstrap 5 tests/examples/docs

Add Dark Mode Support

Bootstrap 5.3 will add dark mode support so it'd be great if this toggle supported dark mode.

Not positioning properly with form validation io.

When a form validation is included in project and the state of the input field results to valid, the form validation includes a check at the same position which is right next to each other.

Can the toggle be placed in front for that matter?

I had to modify the css to get it the way I want it to be. is there a way to dynamically handle this?

Hide toggle on Edge (Chromium) as it has a native ‘show-password’ toggle

Microsoft Edge has a built-in 'show-password' toggle which initiates on the initial input.

We could potentially rely on user-agent detection to hide 'bootstrap-show-password-toggle' on Edge so only the native toggle is visible.

multiple on one page

I think from a 30 second peek at the code that this can only be used for one input on the page because it is targeting the button by a specific ID. Or am I wrong?