{"id":334,"date":"2018-09-09T17:08:47","date_gmt":"2018-09-09T17:08:47","guid":{"rendered":"http:\/\/www.canchito-dev.com\/public\/blog\/?p=334"},"modified":"2021-05-02T13:45:51","modified_gmt":"2021-05-02T13:45:51","slug":"bootstrap-password-toggler","status":"publish","type":"post","link":"http:\/\/www.canchito-dev.com\/public\/blog\/2018\/09\/09\/bootstrap-password-toggler\/","title":{"rendered":"Bootstrap Password Toggler"},"content":{"rendered":"<div class=\"perfect-pullquote vcard pullquote-align-full pullquote-border-placement-left\"><blockquote><p><\/p>\n<p>jQuery plugin for showing\/hiding password with Bootstrap<\/p>\n<p><\/p><\/blockquote><\/div>\n<div>\n  <a class=\"donate-with-crypto\"\n     href=\"https:\/\/commerce.coinbase.com\/checkout\/faf64f90-2e80-46ee-aeba-0fde14cbeb46\"><br \/>\n    Buy Me a Coffee<br \/>\n  <\/a><br \/>\n  <script src=\"https:\/\/commerce.coinbase.com\/v1\/checkout.js?version=201807\">\n  <\/script>\n<\/div>\n<section id=\"introduction\" class=\"body-section\"><!-- introduction --><\/p>\n<div class=\"page-header-doc\">\n<p><!-- page-header-doc --><\/p>\n<h1>Introduction<\/h1>\n<\/div>\n<p><!-- page-header-doc --><\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\"><strong>Bootstrap Password Toggler<\/strong> is a very simple but effective jQuery plugin for showing\/hiding password. It fully support Bootstrap v4.<\/p>\n<\/section>\n<p><!-- introduction --><\/p>\n<section id=\"download\" class=\"body-section\"><!-- \"download\" --><\/p>\n<div class=\"page-header-doc\">\n<p><!-- page-header-doc --><\/p>\n<h1>Download &amp; Contribute<\/h1>\n<\/div>\n<p><!-- page-header-doc --><\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">Help us find bugs, add new features or simply just feel free to use it. Download <strong>Bootstrap Password Toggler<\/strong> from our\u00a0<a href=\"https:\/\/github.com\/canchito-dev\/bootstrap-password-toggler\">GitHub<\/a> site.<\/p>\n<p style=\"text-align: justify;\">If you would like to become an active contributor to this project please follow these simple steps:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"text-align: justify;\">Fork it<\/li>\n<li style=\"text-align: justify;\">Create your feature branch<\/li>\n<li style=\"text-align: justify;\">Commit your changes<\/li>\n<li style=\"text-align: justify;\">Push to the branch<\/li>\n<li style=\"text-align: justify;\">Create new Pull Request<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/section>\n<p><!-- \"download\" --><\/p>\n<section id=\"license\" class=\"body-section\"><!-- license --><\/p>\n<div class=\"page-header-doc\">\n<p><!-- page-header-doc --><\/p>\n<h1>License<\/h1>\n<\/div>\n<p><!-- page-header-doc --><\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">The MIT License (MIT)<\/p>\n<p style=\"text-align: justify;\">Copyright (c) 2017, canchito-dev<\/p>\n<p style=\"text-align: justify;\">Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files\u00a0(the \u201cSoftware\u201d), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge,\u00a0publish, distribute, sublicense, and\/or sell copies of the Software, and to permit persons to whom the Software is furnished to do\u00a0so, subject to the following conditions:<\/p>\n<p style=\"text-align: justify;\">The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.<\/p>\n<p style=\"text-align: justify;\">THE SOFTWARE IS PROVIDED \u201cAS IS\u201d, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\u00a0MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE\u00a0FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br \/>\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<\/p>\n<\/section>\n<p><!-- license --><\/p>\n<section id=\"haters\" class=\"body-section\"><!-- haters --><\/p>\n<div class=\"page-header-doc\">\n<p><!-- page-header-doc --><\/p>\n<h1>Dear haters, trolls and everything-sucks-people&#8230;<\/h1>\n<\/div>\n<p><!-- page-header-doc --><\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">This project started as a way of helping me understand and learn about jQuery plugin. It might not perfectly coded, but it was developed\u00a0with all the good intentions at heart.<\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">This is a totally unpaid and voluntary project, developed during my free-time and shared on GitHub. It can be used for private or commercially,\u00a0without a cost. There is only one simple request, do not bash or complain. If you don&#8217;t like it, don&#8217;t use it.<\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">If you find an issue, please fill free and open a ticket, we will try to solve it as soon as possible. If you would like to become an active\u00a0contributor to this project, even better.<\/p>\n<\/section>\n<p><!-- contribute --><\/p>\n<section id=\"userguide\" class=\"body-section\"><!-- userguide --><\/p>\n<div class=\"page-header-doc\">\n<p><!-- page-header-doc --><\/p>\n<h1>User Guide<\/h1>\n<\/div>\n<p><!-- page-header-doc --><\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">The plugin can be used with <code>input<\/code> elements. Typically password fields. There are two ways to initialize the plugin: (1) via attributes;\u00a0(2) via JavaScript.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input\u00a0class=\"form-control\"\u00a0id=\"password\"\u00a0name=\"password\"\u00a0placeholder=\"Password\"\u00a0data-toggle=\"password\"&gt;<\/pre>\n<h2 class=\"text-justify\"><strong class=\"text-info\">Via Data Attributes<\/strong><\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input\u00a0data-toggle=\"password\"&gt;<\/pre>\n<h2 class=\"text-justify\"><strong class=\"text-info\">Via JavaScript<\/strong><\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$('#password').password();<\/pre>\n<h2 class=\"text-justify\"><strong class=\"text-info\">Options<\/strong><\/h2>\n<p class=\"text-justify\">Options can be passed via data attributes or JavaScript.<\/p>\n<table class=\"table table-condensed table-striped table-hover table-bordered\">\n<thead>\n<tr>\n<th>Name<\/th>\n<th>Attribute<\/th>\n<th>type<\/th>\n<th>default<\/th>\n<th>description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>&#8211;<\/td>\n<td>data-toggle<\/td>\n<td>String<\/td>\n<td>password<\/td>\n<td>Enables password plugin without writing JavaScript<\/td>\n<\/tr>\n<tr>\n<td>append<\/td>\n<td>data-append<\/td>\n<td>String<\/td>\n<td>right<\/td>\n<td>Appends the show\/hide icon. Possible values are &#8216;right&#8217; or &#8216;left&#8217;<\/td>\n<\/tr>\n<tr>\n<td>tooltip<\/td>\n<td>data-tooltip<\/td>\n<td>String<\/td>\n<td>Show\/Hide password<\/td>\n<td>The tooltip of show\/hide icon<\/td>\n<\/tr>\n<tr>\n<td>iconPrefix<\/td>\n<td>data-icon-prefix<\/td>\n<td>String<\/td>\n<td>fa<\/td>\n<td>Base eye icon class<\/td>\n<\/tr>\n<tr>\n<td>iconShow<\/td>\n<td>data-icon-show<\/td>\n<td>String<\/td>\n<td>fa-eye<\/td>\n<td>Open eye icon<\/td>\n<\/tr>\n<tr>\n<td>iconHide<\/td>\n<td>data-icon-hide<\/td>\n<td>String<\/td>\n<td>fa-eye-slash<\/td>\n<td>Close eye icon<\/td>\n<\/tr>\n<tr>\n<td>debug<\/td>\n<td>data-debug<\/td>\n<td>Boolean<\/td>\n<td>true<\/td>\n<td>Enables\/Disable debugging mode<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"text-justify\" style=\"text-align: justify;\">By default, the icons used are from <a href=\"http:\/\/fontawesome.io\/\">Font Awesome<\/a>.<\/p>\n<p class=\"text-justify\" style=\"text-align: justify;\">When the debug mode is enabled, the plugin will log in the console the event&#8217;s related information.<\/p>\n<p class=\"text-justify\"><strong class=\"text-info\">Events<\/strong><\/p>\n<p class=\"text-justify\">Additionally, the plugin exposes some events.<\/p>\n<table class=\"table table-condensed table-striped table-hover table-bordered\">\n<thead>\n<tr>\n<th>Event Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.password<\/td>\n<td>This event fires immediately when a request to show the password is sent<\/td>\n<\/tr>\n<tr>\n<td>shown.bs.password<\/td>\n<td>This event fires immediately after the password has been shown<\/td>\n<\/tr>\n<tr>\n<td>hide.bs.password<\/td>\n<td>This event is fired immediately when a request to hide the password is sent<\/td>\n<\/tr>\n<tr>\n<td>hidden.bs.password<\/td>\n<td>This event is fired immediately after the password has been hidden<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><!-- userguide --><\/p>\n<\/section>\n<h1>Other Contributions<\/h1>\n<p style=\"text-align: justify;\">As an open source enthusiastic, I like to share my projects. Hoping that they will be useful to anybody, just as other projects have been to me. The projects can be downloaded from my <a href=\"https:\/\/github.com\/canchito-dev\">GitHub<\/a> repository. Below is a short list of some of my contributions.<\/p>\n<ul class=\"fa-ul list-docs\">\n<li><i class=\"fa-li fa fa-check-square\"><\/i><a class=\"list-group-item\" href=\"http:\/\/canchito-dev.com\/projects\/bpt\">Bootstrap Password Toggler<\/a><\/li>\n<li><i class=\"fa-li fa fa-check-square\"><\/i><a class=\"list-group-item\" href=\"http:\/\/www.canchito-dev.com\/public\/blog\/2017\/04\/22\/build-a-rest-api-with-spring\/\">Build a REST API with Spring<\/a><\/li>\n<li><i class=\"fa-li fa fa-check-square\"><\/i><a class=\"list-group-item\" href=\"http:\/\/canchito-dev.com\/projects\/cwm\">Canchito Workflow Manager<\/a><\/li>\n<li><i class=\"fa-li fa fa-check-square\"><\/i><a class=\"list-group-item\" href=\"http:\/\/www.canchito-dev.com\/public\/blog\/2017\/04\/30\/integrate-activiti-bpm-with-spring\/\">Integrate Activiti with Spring<\/a><\/li>\n<li><i class=\"fa-li fa fa-check-square\"><\/i><a class=\"list-group-item\" href=\"http:\/\/canchito-dev.com\/projects\/mfm\">MINI-FRAMEWORK-MVC<\/a><\/li>\n<li><i class=\"fa-li fa fa-check-square\"><\/i><a href=\"https:\/\/github.com\/canchito-dev\">More&#8230;<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>jQuery plugin for showing\/hiding password with Bootstrap<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[53,46,52,50,47,51,45],"tags":[57,49,54,56,10,55,48],"class_list":["post-334","post","type-post","status-publish","format-standard","hentry","category-bootstrap","category-contribution","category-javascript","category-jquery","category-open-source","category-plugin","category-project","tag-bootstrap","tag-contribution","tag-javascript","tag-jquery","tag-open-source","tag-plugin","tag-project"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p8EwXo-5o","jetpack-related-posts":[{"id":15,"url":"http:\/\/www.canchito-dev.com\/public\/blog\/2017\/04\/16\/build-a-project-with-spring-initializer-or-spring-tool-suite\/","url_meta":{"origin":334,"position":0},"title":"Build a project with Spring Initializr or Spring Tool Suite&#x2122;","author":"canchitodev","date":"April 16, 2017","format":false,"excerpt":"This guide walks you through using Spring Initializr or Spring Tool Suite\u2122 for building a simple Java project compatible with Maven and Spring.","rel":"","context":"In &quot;Spring&quot;","block_context":{"text":"Spring","link":"http:\/\/www.canchito-dev.com\/public\/blog\/category\/spring\/"},"img":{"alt_text":"CANCHITO-DEV: Spring Initializr by Pivotal","src":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2017\/04\/spring_initializr.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2017\/04\/spring_initializr.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2017\/04\/spring_initializr.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2017\/04\/spring_initializr.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2017\/04\/spring_initializr.png?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2017\/04\/spring_initializr.png?resize=1400%2C800 4x"},"classes":[]},{"id":263,"url":"http:\/\/www.canchito-dev.com\/public\/blog\/2018\/06\/11\/spring-boot-actuator-production-ready-features\/","url_meta":{"origin":334,"position":1},"title":"Spring Boot Actuator &#8211; Production-ready features","author":"canchitodev","date":"June 11, 2018","format":false,"excerpt":"In this post, we\u2019re going to introduce Spring Boot Actuator, by first covering the basics. Afterwards,\u00a0you will create a Spring project and learn how to use, configure and extend this monitoring tool.","rel":"","context":"In &quot;Actuator&quot;","block_context":{"text":"Actuator","link":"http:\/\/www.canchito-dev.com\/public\/blog\/category\/actuator\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":361,"url":"http:\/\/www.canchito-dev.com\/public\/blog\/2019\/07\/22\/spring-cloud-config-server-and-client-side-support-for-externalized-configuration\/","url_meta":{"origin":334,"position":2},"title":"Spring Cloud Config &#8211; Server and client-side support for externalized configuration","author":"canchitodev","date":"July 22, 2019","format":false,"excerpt":"Want to learn how to manage your application configuration in a distributed environment? Learn how to do it with Spring Cloud Config.","rel":"","context":"In &quot;Spring&quot;","block_context":{"text":"Spring","link":"http:\/\/www.canchito-dev.com\/public\/blog\/category\/spring\/"},"img":{"alt_text":"CANCHITO-DEV: Spring Boot Config - Server and client-side support for externalized configuration","src":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2019\/07\/Spring-Boot-Config-Server-and-client-side-support-for-externalized-configuration.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2019\/07\/Spring-Boot-Config-Server-and-client-side-support-for-externalized-configuration.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2019\/07\/Spring-Boot-Config-Server-and-client-side-support-for-externalized-configuration.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2019\/07\/Spring-Boot-Config-Server-and-client-side-support-for-externalized-configuration.png?resize=700%2C400 2x"},"classes":[]},{"id":419,"url":"http:\/\/www.canchito-dev.com\/public\/blog\/2020\/06\/27\/triggerable-custom-service-tasks-in-flowable\/","url_meta":{"origin":334,"position":3},"title":"Triggerable Custom Service Tasks in Flowable","author":"canchitodev","date":"June 27, 2020","format":false,"excerpt":"In this tutorial, we will be implementing a triggerable custom service task in Flowable. A triggerable task, is one that when it is reached, it is executes its business logic, but once done, it enters a wait state. In order to leave this state, it must be triggered.","rel":"","context":"In &quot;Flowable&quot;","block_context":{"text":"Flowable","link":"http:\/\/www.canchito-dev.com\/public\/blog\/category\/flowable\/"},"img":{"alt_text":"CANCHITO-DEV: Spring Initializr","src":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr.png?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr.png?resize=1400%2C800 4x"},"classes":[]},{"id":322,"url":"http:\/\/www.canchito-dev.com\/public\/blog\/2018\/09\/09\/canchito-workflow-manager-cwm\/","url_meta":{"origin":334,"position":4},"title":"Canchito Workflow Manager (CWM)","author":"canchitodev","date":"September 9, 2018","format":false,"excerpt":"Flowable BPM turned into a workflow manager with features such as file transfer via FTP and Samba, integration with Amazon Web Service, file transcodification and analysis using FFmpeg and MediaInfo, and more..","rel":"","context":"In &quot;BPM&quot;","block_context":{"text":"BPM","link":"http:\/\/www.canchito-dev.com\/public\/blog\/category\/bpm\/"},"img":{"alt_text":"CANCHITO-DEV: Task Queue Service","src":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2018\/09\/canchito_dev_task_queue_service.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":471,"url":"http:\/\/www.canchito-dev.com\/public\/blog\/2020\/06\/27\/flowable-custom-engine-configuration\/","url_meta":{"origin":334,"position":5},"title":"Customizing Flowable Engine","author":"canchitodev","date":"June 27, 2020","format":false,"excerpt":"In this article, we will go into detail on how to customize Flowable's engine. Three changes to the engine will be done: (1) Change the database connection by modifying the data source and adding custom data source properties. (2)Use a strong UUID generator. (3)Implement a custom event handler.","rel":"","context":"In &quot;BPM&quot;","block_context":{"text":"BPM","link":"http:\/\/www.canchito-dev.com\/public\/blog\/category\/bpm\/"},"img":{"alt_text":"CANCHITO-DEV: Spring Initializr","src":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr-1024x674.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr-1024x674.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.canchito-dev.com\/public\/blog\/wp-content\/uploads\/2020\/05\/initializr-1024x674.png?resize=525%2C300 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/posts\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":3,"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":545,"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions\/545"}],"wp:attachment":[{"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.canchito-dev.com\/public\/blog\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}