Added show-password project example.

mtodd · Aug 1, 2009 · 5fa0da3 · 5fa0da3
1 parent 8f34c87
commit 5fa0da3
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 0 deletions.
diff --git a/projects/show-password/README.textile b/projects/show-password/README.textile
@@ -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.
diff --git a/projects/show-password/index.html b/projects/show-password/index.html
@@ -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>
diff --git a/projects/show-password/show-password.js b/projects/show-password/show-password.js
@@ -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);