Cool js function password matching and show/hide passwords

[Nathron]

Was trying to think of something witty to say kinda like an infomercial but meh. Anyway checks your passwords as you type them and gives a cool checkbox/red x depending on if passwords match or not. Also have a function in the same package that shows/hides passwords you've typed into those boxes. If your on a private computer in your home or perhaps in your office/cubicle theirs really no need for client sided password hiding. Unless you have some kind of screen capture spyware running or a key logger and if that be the case they were going to get it eventually.

 

the js

{literal}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#p1").css({display:'inline-block'});
jQuery("#p2").css({display:'inline-block'});
jQuery("#spass").click(function(){
var pass = jQuery("#newpw").val();
var pass2 = jQuery("#newpw2").val();
var style = jQuery("#newpw").attr('style');
var style2 = jQuery("#pw1").attr('style');
if(jQuery("#newpw").attr('type') == 'password'){
jQuery("#spass").val('Hide Passwords');
var newp1 = '<input type="text" name="password" id="newpw" size="20" value="'+pass+'" style="'+style+'">';
var newp2 = '<input type="text" name="password2" id="newpw2" size="20" value="'+pass2+'" style="'+style+'">';
jQuery("#newpw").replaceWith(newp1);
jQuery("#newpw2").replaceWith(newp2);
jQuery("#p1").attr('style',style2);
jQuery("#p2").attr('style',style2);
jQuery("#newpw2").keyup(function(){matchpass();});
jQuery("#newpw").keyup(function(){clearpass(); pwordStrEvent();});
} else {
jQuery("#spass").val('Show Passwords');
var newp1 = '<input type="password" name="password" id="newpw" size="20" value="'+pass+'" style="'+style+'">';
var newp2 = '<input type="password" name="password2" id="newpw2" size="20" value="'+pass2+'" style="'+style+'">';
jQuery("#newpw").replaceWith(newp1);
jQuery("#newpw2").replaceWith(newp2);
jQuery("#p1").attr('style',style2);
jQuery("#p2").attr('style',style2);
jQuery("#newpw2").keyup(function(){matchpass();});
jQuery("#newpw").keyup(function(){clearpass(); pwordStrEvent();});
}
});
jQuery("#newpw2").keyup(function(){matchpass();});
jQuery("#newpw").keyup(function(){clearpass();});
});

function pwordStrEvent(){
var pwvalue = jQuery("#newpw").val();
       var pwstrength = getPasswordStrength(pwvalue);
       jQuery("#pwstrength").html("Strong");
       jQuery("#pwstrengthpos").css("background-color","#33CC00");
       if (pwstrength<75) {
           jQuery("#pwstrength").html("Moderate");
           jQuery("#pwstrengthpos").css("background-color","#ff6600");
       }
       if (pwstrength<30) {
           jQuery("#pwstrength").html("Weak");
           jQuery("#pwstrengthpos").css("background-color","#cc0000");
       }
       jQuery("#pwstrengthpos").css("width",pwstrength);
       jQuery("#pwstrengthneg").css("width",100-pwstrength);
}
function matchpass(){
var pass = jQuery("#newpw").val();
var pass2 = jQuery("#newpw2").val();
if(pass.length > 0){
if(pass2 == pass){
jQuery("#newpw").css({backgroundColor:'#51AE2D', color:'#fff'});
jQuery("#newpw2").css({backgroundColor:'#51AE2D', color:'#fff'});
jQuery("#p1").css({marginLeft:'2px',display:'inline-block',backgroundImage:'url(\'templates/orderforms/{/literal}{$carttpl}{literal}/images/gcheck.png\')',width:'16px'});
jQuery("#p2").css({marginLeft:'2px',display:'inline-block',backgroundImage:'url(\'templates/orderforms/{/literal}{$carttpl}{literal}/images/gcheck.png\')',width:'16px'});
} else {
jQuery("#newpw").css({backgroundColor:'#FF9494', color:'#fff'});
jQuery("#newpw2").css({backgroundColor:'#FF9494', color:'#fff'});
jQuery("#p1").css({marginLeft:'2px',display:'inline-block',backgroundImage:'url(\'templates/orderforms/{/literal}{$carttpl}{literal}/images/rex.png\')',width:'16px'});
jQuery("#p2").css({marginLeft:'2px',display:'inline-block',backgroundImage:'url(\'templates/orderforms/{/literal}{$carttpl}{literal}/images/rex.png\')',width:'16px'});
}
}
}

function clearpass(){
jQuery("#newpw2").val('');
jQuery("#newpw").css({backgroundColor:'', color:''});
jQuery("#newpw2").css({backgroundColor:'', color:''});
jQuery("#p1").css({display:'inline-block', marginLeft:'',backgroundImage:'', width:''});
jQuery("#p2").css({display:'inline-block', marginLeft:'',backgroundImage:'', width:''});
}
</script>
{/literal}

 

html

<tr><td>{$LANG.clientareapassword}</td><td><input type="password" name="password" id="newpw" size="20" value="{$password}" /><div id="p1"> </div></td></tr>
<tr><td>{$LANG.clientareaconfirmpassword}</td><td><input type="password" name="password2" id="newpw2" size="20" value="{$password2}" /><div id="p2"> </div></td></tr>
<tr><td></td><td align="center"><input id="spass" type="button" value="Show Passwords"></td></tr>

 

Put this in whatever template you want just the id's have to match, ill upload the icons I used in the attachments. You can of course use your own if you want. Also it's a very unclean mess well especially the show hide but mostly because type is a protected attribute so I had to grab all the attributes of the element and anything styled around the element. Duplicate the password boxes copying the values over from the other elements replace them then rebind any events to them. Did tons of testing though and its ugly but it definitely works. I don't even want to imagine what that would be in pure js lol.