Show password

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;

index.html

@@ -18,6 +18,7 @@
 
   <script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
   <script src="js/libs/spin.min.js" type="text/javascript"></script>
+	<script src="js/libs/jquery.showpassword.js" type="text/javascript"></script>
 	<script src="js/api/NetworkAPI.js" type="text/javascript"></script>
 	<script src="js/api/ConnectAPI.js" type="text/javascript"></script>
 	<script src="js/NetworkPanel.js" type="text/javascript"></script>
@@ -62,9 +63,9 @@
 			<label for="phrase" id="phraseLabel">Password:</label>
 		</div>
 		<div>
-			<input type="password" name="" id="phrase"><br/>
+			<input type="password" name="" id="phrase" data-typetoggle='#showPassword' ><br/>
 			<input id="showPassword" type="checkbox" name="showPassword" value="showPassword">
-			<label for="showPassword" id="showPasswordLabel" class="inline">show password</label>
+			<label for="showPassword" class="inline">show password</label>
 		</div>
 	</div>
 	<br/>

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");

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 = $("<input />");
+					
+				// 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);