forked from coliff/bootstrap-show-password-toggle
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
134 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| ## Changes | ||
|
|
||
| ### [1.3.2] - 2021-10-31 | ||
| - 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://slackero.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/), [Bootstrap 5](https://slackero.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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| $(function () { | ||
| let ShowPasswordToggles = $('input:password'); | ||
| if (ShowPasswordToggles.length) { | ||
| ShowPasswordToggles.each(function () { | ||
| let $this = $(this); | ||
| $this.addClass('input-password'); | ||
| let $toggleButtonLabels = { | ||
| show: $this.data('show') || 'Show password as plain text. Warning: this will display your password on the screen.', | ||
| hide: $this.data('hide') || 'Hide password.' | ||
| }; | ||
| let $toggleButton = $('<button class="toggle-password" aria-label="" aria-pressed="false"></button>'); | ||
| $toggleButton.on('click', function () { | ||
| if ($this.attr('type') === 'password') { | ||
| $this.attr('type', 'text'); | ||
| $toggleButton.addClass('password-visible'); | ||
| $toggleButton.attr('aria-label', $toggleButtonLabels.hide); | ||
| $toggleButton.attr('aria-pressed', 'true'); | ||
| } else { | ||
| $this.attr('type', 'password'); | ||
| $toggleButton.removeClass('password-visible'); | ||
| $toggleButton.attr('aria-label', $toggleButtonLabels.show); | ||
| $toggleButton.attr('aria-pressed', 'false'); | ||
| } | ||
| }); | ||
| $this.after($toggleButton); | ||
| }); | ||
| } | ||
| }); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Show Password Toggle for Bootstrap 4</title> | ||
| <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"> | ||
| <meta name="monetization" content="$ilp.uphold.com/Epqzn3YGr2MB"> | ||
| <link rel="stylesheet" href="../../css/show-password-toggle.css"> | ||
| </head> | ||
|
|
||
| <body class="bg-light p-3"> | ||
| <form class="mx-auto card p-4 col-12 col-sm-8 col-md-5 col-lg-4 mt-sm-4 mt-md-5" autocomplete="off"> | ||
| <h1 class="h2 mb-4 text-center text-primary">Please sign in</h1> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="email">Email address</label> | ||
| <input type="email" name="email" id="email" class="form-control" required autofocus> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="current-password">Password</label> | ||
| <div class="input-group"> | ||
| <input type="password" | ||
| name="password" | ||
| id="current-password" | ||
| autocomplete="current-password" | ||
| class="form-control rounded" | ||
| spellcheck="false" | ||
| autocapitalize="off" | ||
| required | ||
| data-show="Show password as plain text. Warning: this will display your password on the screen." | ||
| data-hide="Hide password." | ||
| > | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="repeat-password">Password repeat</label> | ||
| <div class="input-group"> | ||
| <input type="password" | ||
| name="password_repeat" | ||
| id="repeat-password" | ||
| autocomplete="current-password" | ||
| class="form-control rounded" | ||
| spellcheck="false" | ||
| autocapitalize="off" | ||
| required | ||
| data-show="Show password as plain text. Warning: this will display your password on the screen." | ||
| data-hide="Hide password." | ||
| > | ||
| </div> | ||
| </div> | ||
|
|
||
| <button class="btn btn-lg btn-primary btn-block mt-3" type="submit"> | ||
| Sign in | ||
| </button> | ||
|
|
||
| </form> | ||
|
|
||
| <p class="my-3 text-center"> | ||
| <a href="https://github.com/slackero/bootstrap-show-password-toggle" class="text-muted"> | ||
| © 2021 | ||
| </a> | ||
| </p> | ||
|
|
||
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | ||
| <script src="../../js/show-password-toggle-jquery.min.js" async></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters