Permalink
Browse files

Added show-password project example.

  • Loading branch information...
1 parent 8f34c87 commit 5fa0da3dd4584d25cfd30835aadaac5a51c70640 @mtodd committed Aug 1, 2009
Showing with 186 additions and 0 deletions.
  1. +76 −0 projects/show-password/README.textile
  2. +70 −0 projects/show-password/index.html
  3. +40 −0 projects/show-password/show-password.js
@@ -0,0 +1,76 @@
+h1. Show Password
+
+A jQuery plugin to change a password field to a regular text input field and
+vice versa.
+
+h2. Motivation
+
+Jakob Nielsen's recent article
+"Stop Passowrd Masking":http://www.useit.com/alertbox/passwords.html raises
+concerns over the negative usability implications of masking password fields
+on the web. He summarizes:
+
+<blockquote>
+ Usability suffers when users type in passwords and the only feedback they get
+ is a row of bullets. Typically, masking passwords doesn't even increase
+ security, but it does cost you business due to login failures.
+</blockquote>
+
+I don't agree with every point, but I appreciate the value of enabling the user
+to make the decision instead of restricting them wholeheartedly.
+
+This is my attempt to provide a simple way for password to text input field
+toggling.
+
+h2. Usage
+
+<pre><code>
+ $("#show-password").showPasswordToggle(
+ ["password", "confirm-password"],
+ { reveal: "show-password-toggle" });
+</code></pre>
+
+* #show-password is the checkbox (or otherwise) that calls fires a change
+ event to toggle password fields from password to text type inputs.
+* an array of fields that are to be toggled from password to text types.
+* options hash including:
+** reveal: an element to reveal when the plugin loads (in order to not reveal
+ the toggle checkbox unless jQuery is supported, etc)
+
+h2. Demo
+
+http://mtodd.github.com/show-password/example.html
+
+h2. Requirements
+
+* jQuery 1.3+
+
+h2. License
+
+show-password is licensed under the MIT License:
+
+Copyright (c) 2009 Matt Todd (http://maraby.org/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+h2. Credit
+
+Inspired by the Chroma-Hash library by mattt:
+http://github.com/mattt/Chroma-Hash
+Demo design directly copied from Chroma-Hash.
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="author" content="Matt Todd">
+ <meta name="description" content="show-password">
+ <title>show-password Demo</title>
+ <script src="http://www.google.com/jsapi"></script>
+ <script type="text/javascript" charset="utf-8">
+ google.load("jquery", "1.3.2", {uncompressed:true});
+ // google.load("jqueryui", "1.7.2");
+ </script>
+ <script src="show-password.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $("#show-password").showPasswordToggle(["password", "confirm-password"], { reveal: "show-password-toggle" });
+ });
+ // $(document).ready(function() {
+ // $("input:password").chromaHash({number: 3});
+ // $("#username").focus();
+ // });
+ </script>
+ <style type="text/css" media="screen">
+ body{background:#ddd;font-size:1.3em;font-family:"Helvetica",Helvetica,sans-serif;}
+ h1,h2{text-align:center;}
+ h1{color:#222;text-shadow:1px 1px 1px #ddd;margin-bottom:0.5em;}
+ h2{color:#888;width:70%;margin:0.5em auto 30px auto;font-family:"Palantino",Georgia;font-size:80%;font-style:italic;font-weight:normal;}
+ p,label{text-shadow:1px 1px 1px #f2f2f2;}
+ label{color:#444;display:block;font-variant:small-caps;text-transform:lowercase;}
+ p{font-size:87%;color:#444;}
+ input{width:440px;font-size:1.5em;margin-bottom:0.75em;}
+ .explanation{text-align:center;}
+ a{color:#444;}
+ a:hover{background:#ddd;}
+ a:visited{color:#565656;}
+ a:active{color:#fff;background:#444;text-shadow:none;}
+ fieldset{width:440px;margin:10px auto;border:none;}
+ hr{border:0px transparent solid;border-top:1px #fdfdfd solid;border-bottom:1px #ddd solid;margin:20px 0 30px 0;}
+ .container{padding:30px;width:480px;margin:100px auto;background:#fff;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-webkit-box-shadow:1px 0px 5px #666;-khtml-box-sizing:content-box;box-sizing:content-box;}
+ #show-password{display:inline;width:0.5em;}
+ #show-password-label{display:inline;}
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <h1>show-password</h1>
+ <h2>A jQuery plugin to change a password field to a regular text input field and vice versa</h2>
+ <fieldset>
+ <label>Username</label>
+ <input type="text" name="username" value="" id="username">
+
+ <label>Password</label>
+ <input type="password" name="password" value="asdf" id="password">
+
+ <label>Confirm Password</label>
+ <input type="password" name="confirm-password" value="asdf" id="confirm-password">
+
+ <div id="show-password-toggle" style="display: none;">
+ <input id="show-password" type="checkbox" />
+ <label for="show-password" id="show-password-label">Show Password</label>
+ </div>
+ </fieldset>
+
+ <hr/>
+ <div class="explanation">
+ <p>Learn more and fork it for yourself at <tt><a href="http://github.com/mtodd/show-password/">http://github.com/mtodd/show-password/</a></tt></p>
+ </div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,40 @@
+/*
+ * show-password : A jQuery plugin to change a password field to a regular text input field and vice versa
+ * http://github.com/mtodd/show-password/
+ *
+ * Copyright (C) 2009 Matt Todd
+ * Licensed under the MIT licenses.
+ */
+
+(function($){
+ $.fn.extend({
+ showPasswordToggle: function(fields, options) {
+ if(options == undefined) options = {};
+
+ var obj = $(this);
+
+ // $.each(fields, function(i) { alert(typeof fields[i]); })
+
+ if(options.reveal != undefined) {
+ $("#"+options.reveal).show();
+ }
+
+ return this.each(function() {
+
+ obj.each(function(e) {
+ obj.bind('change', function(e) {
+ $.each(fields, function(i) {
+ field = $("#"+fields[i]);
+ if(field.attr('type') == "text"){ new_type = "password"; } else { new_type = "text"; }
+ new_field = field.clone();
+ new_field.attr("id", fields[i]);
+ new_field.attr("type", new_type);
+ field.replaceWith(new_field);
+ });
+ });
+ });
+
+ });
+ }
+ });
+})(jQuery);

0 comments on commit 5fa0da3

Please sign in to comment.