From 2b24d8622397d825dfad85a6881f816543afaaf0 Mon Sep 17 00:00:00 2001 From: peteruithoven Date: Mon, 24 Feb 2014 15:10:26 +0100 Subject: [PATCH] Show password --- css/main.css | 2 + index.html | 5 +- js/NetworkPanel.js | 9 +-- js/libs/jquery.showpassword.js | 113 +++++++++++++++++++++++++++++++++ 4 files changed, 119 insertions(+), 10 deletions(-) create mode 100644 js/libs/jquery.showpassword.js diff --git a/css/main.css b/css/main.css index 5fb99f4..43a0e98 100644 --- a/css/main.css +++ b/css/main.css @@ -131,11 +131,13 @@ form div { form input[type="text"], form input[type="number"], form input[type="password"] { border: 1px solid rgb(144, 192, 255); margin-right: 5px; + margin-bottom: 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 130px; + } form .button { display: inline-block; diff --git a/index.html b/index.html index cd6d2a4..ed06203 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@ + @@ -62,9 +63,9 @@
-
+
- +

diff --git a/js/NetworkPanel.js b/js/NetworkPanel.js index a47bdad..f7064fc 100644 --- a/js/NetworkPanel.js +++ b/js/NetworkPanel.js @@ -45,7 +45,6 @@ function NetworkPanel() { var _btnListNetworks; var _passwordSettings; var _passwordField; - var _showPassword; var _btnConnect; var _statusTextField; @@ -64,7 +63,6 @@ function NetworkPanel() { _btnListNetworks = _element.find("#listNetworks"); _passwordSettings = _element.find("#passwordSettings"); _passwordField = _element.find("#phrase"); - _showPassword = _element.find("#showPassword"); _btnConnect = _element.find("#btnConnect"); _statusTextField = _element.find("#statusText"); @@ -72,7 +70,7 @@ function NetworkPanel() { _btnListNetworks.on('touchstart mousedown',showNetworkSelector); _btnConnect.on('touchstart mousedown',_self.connectToNetwork); _networkSelector.change(networkSelectorChanged); - _showPassword.change(showPassWordToggle); + _passwordField.showPassword(); _statusChangeHandler = statusChangeHandler; @@ -95,11 +93,6 @@ function NetworkPanel() { var selectedOption = $(this).find("option:selected"); _self.selectNetwork(selectedOption.val()); }; - function showPassWordToggle() { - var type = (_showPassword.prop('checked'))? "text" : "password"; - //console.log(" type: ",type); - _passwordField.attr("type",type); - }; this.retrieveStatus = function(completeHandler) { //console.log(_self.id,"NetworkPanel:retrieveStatus"); diff --git a/js/libs/jquery.showpassword.js b/js/libs/jquery.showpassword.js new file mode 100644 index 0000000..0f46783 --- /dev/null +++ b/js/libs/jquery.showpassword.js @@ -0,0 +1,113 @@ +/* +* @name Show Password +* @descripton +* @version 1.3 +* @requires Jquery 1.5 +* +* @author Jan Jarfalk +* @author-email jan.jarfalk@unwrongest.com +* @author-website http://www.unwrongest.com +* +* @special-thanks Michel Gratton +* +* @licens MIT License - http://www.opensource.org/licenses/mit-license.php +*/ +(function($){ + $.fn.extend({ + showPassword: function(c) { + + // Setup callback object + var callback = {'fn':null,'args':{}} + callback.fn = c; + + // Clones passwords and turn the clones into text inputs + var cloneElement = function( element ) { + + var $element = $(element); + + $clone = $(""); + + // Name added for JQuery Validation compatibility + // Element name is required to avoid script warning. + $clone.attr({ + 'type' : 'text', + 'class' : $element.attr('class'), + 'style' : $element.attr('style'), + 'size' : $element.attr('size'), + 'name' : $element.attr('name')+'-clone', + 'tabindex' : $element.attr('tabindex') + }); + + return $clone; + + }; + + // Transfers values between two elements + var update = function(a,b){ + b.val(a.val()); + }; + + // Shows a or b depending on checkbox + var setState = function( checkbox, a, b ){ + + if(checkbox.is(':checked')){ + update(a,b); + b.show(); + a.hide(); + } else { + update(b,a); + b.hide(); + a.show(); + } + + }; + + return this.each(function() { + + var $input = $(this), + $checkbox = $($input.data('typetoggle')); + + // Create clone + var $clone = cloneElement($input); + $clone.insertAfter($input); + + // Set callback arguments + if(callback.fn){ + callback.args.input = $input; + callback.args.checkbox = $checkbox; + callback.args.clone = $clone; + } + + + + $checkbox.bind('click', function() { + setState( $checkbox, $input, $clone ); + }); + + $input.bind('keyup', function() { + update( $input, $clone ) + }); + + $clone.bind('keyup', function(){ + update( $clone, $input ); + + // Added for JQuery Validation compatibility + // This will trigger validation if it's ON for keyup event + $input.trigger('keyup'); + + }); + + // Added for JQuery Validation compatibility + // This will trigger validation if it's ON for blur event + $clone.bind('blur', function() { $input.trigger('focusout'); }); + + setState( $checkbox, $input, $clone ); + + if( callback.fn ){ + callback.fn( callback.args ); + } + + }); + } + }); +})(jQuery);