v0.2 release with support for Salts and minimum character length

Author: mattt

History.markdown

@@ -0,0 +1,13 @@
+Chroma-Hash Version History
+===========================
+
+## Version 0.2 [2009-8-4]
+
+- [New] Salt: Added parameter for salt to be applied for hash function
+- [New] Grayscale: Added parameter to specify minimum number of characters of input needed for colors to appear. Under that length, bars appear in grayscale.
+- [Bugfix] "Color change effects pause on lost focus" (mikehamer)
+- [Changed] Tag-line is now "A sexy, secure visualization of password field input"
+
+## Version 0.1
+
+Initial release.

README.markdown

@@ -1,7 +1,7 @@
 Chroma-Hash
 ===========
 
-## A sexy, non-reversable live visualization of password field input
+## A sexy, secure visualization of password field input
 
 *In a tweet*: Chroma-Hash is a jQuery plugin that dynamically visualizes secure text-field values using ambient color bars
 
@@ -17,10 +17,12 @@ Try it out at: <tt>[http://mattt.github.com/Chroma-Hash/](http://mattt.github.co
 ## Usage
 
 <code>
-  $("input:password").chromaHash({number: 3});
+  $("input:password").chromaHash({bars: 3, salt:"7be82b35cb0199120eea35a4507c9acf", minimum:6});
 </code>
 
-- <tt>number</tt> parameter controls the number of bars displayed (1,2,3, or 4)
+- <tt>bars</tt> number of bars displayed (1,2,3, or 4)
+- <tt>salt</tt> value to be appended when calculating hash function
+- <tt>minimum</tt> minimum number of characters needed for grayscale bars to be displayed in color
 
 ## Requirements
 - jQuery 1.3+

chroma-hash.js

@@ -36,52 +36,54 @@
                       return $(this).attr('for') == id;
                   });
         };
+        
+        var trigger = function(e) {
+          if($(this).val() == "" ){
+            chromaHashesForElement(this).animate({backgroundColor: "#ffffff"});
+            return;
+          }
+          
+          height     = $(this).height();
+          position   = $(this).position();
+          width      = $(this).outerWidth();
+
+          chromaHashesForElement(this).each(function(i) {
+            $(this).css({position:   'absolute',
+                         left:       position.left + width - 2,
+                         top:        position.top,
+                         height:     height + "px",
+                         width:      8 + "px",
+                         margin:     5 + "px",
+                         marginLeft: -8 * (i + 1) + "px"
+                        });
+          });
+          
+          var id     = $(this).attr('id');
+          var md5    = hex_md5('' + $(this).val() + ':' + o.salt);
+          var colors = md5.match(/([\dABCDEF]{6})/ig);
+          $(".chroma-hash").stop();
+          
+          if($(this).val().length < o.minimum) {             
+            chromaHashesForElement(this).each(function(i) {
+              var g = (parseInt(colors[i], 0x10) % 0xF).toString(0x10);
+              $(this).animate({backgroundColor:"#" + g + g + g});
+            });
+          }
+          else {
+            chromaHashesForElement(this).each(function(i) {
+              $(this).animate({backgroundColor:"#" + colors[i]});
+            });
+          }
+        };
 
         obj.each(function(e) {
           for(c in colors) {
             $(this).after('<label for="' + $(this).attr('id') + '" class="' + colors[c] + ' chroma-hash"></label>');
           }
 
-          $(this).keyup(function(e){
-            if($(this).val() == "" ){
-              chromaHashesForElement(this).animate({backgroundColor: "#ffffff"});
-              return;
-            }
-            
-            height     = $(this).height();
-            position   = $(this).position();
-            width      = $(this).outerWidth();
-
-            chromaHashesForElement(this).each(function(i) {
-              $(this).css({position:   'absolute',
-                           left:       position.left + width - 2,
-                           top:        position.top,
-                           height:     height + "px",
-                           width:      8 + "px",
-                           margin:     5 + "px",
-                           marginLeft: -8 * (i + 1) + "px"
-                          }
-                    );
-              });
-            
-              var id     = $(this).attr('id');
-              var md5    = hex_md5('' + $(this).val() + ':' + o.salt);
-              var colors = md5.match(/([\dABCDEF]{6})/ig);
-              $(".chroma-hash").stop();
-              
-              if($(this).val().length < o.minimum) {             
-                chromaHashesForElement(this).each(function(i) {
-                  var g = (parseInt(colors[i], 0x10) % 0xF).toString(0x10);
-                  $(this).animate({backgroundColor:"#" + g + g + g});
-                });
-              }
-              else {
-                chromaHashesForElement(this).each(function(i) {
-                  $(this).animate({backgroundColor:"#" + colors[i]});
-                });
-              }
-            });
-          });
+          $(this).bind('keyup', trigger);
+          $(this).bind('blur', trigger);
+        });
 
           /*
            * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message

example.html

@@ -5,7 +5,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="author" content="Mattt Thompson">
-  <meta name="description" content="Chroma-Hash is a sexy, non-reversable live visualization of password field input">
+  <meta name="description" content="Chroma-Hash is a sexy, secure visualization of password field input">
 	<title>Chroma-Hash Demo</title>
   <script src="http://www.google.com/jsapi"></script>
   <script type="text/javascript" charset="utf-8">
@@ -15,18 +15,18 @@
 	<script src="chroma-hash.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript" charset="utf-8">
 	  $(document).ready(function() {
-      $("input:password").chromaHash({number: 3});
+      $("input:password").chromaHash({bars: 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;}
+    h2{color:#888;width:80%;margin:0.5em auto 30px auto;font-family:"Palantino",Georgia;font-size:80%;font-style:italic;font-weight:normal;}
+    p,label, span{text-shadow:1px 1px 1px #f2f2f2;}
     label{color:#444;display:block;font-variant:small-caps;text-transform:lowercase;}
-    p{font-size:87%;color:#444;}
+    p{font-size:77%;color:#444;}
     input{width:440px;font-size:1.5em;margin-bottom:0.75em;}
     .explanation{text-align:center;}
     a{color:#444;}
@@ -35,30 +35,38 @@
     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;
+    .container, .footer{width:480px;}
+    .container{padding:30px 30px;margin:100px auto 30px 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;
     }
+    .footer{margin:0 auto;display:block;color:#555;text-align:center;font-size:0.6em;}
+    .footer span{display:block;line-height:1.5em;}
 	</style>
 </head>
 
 <body>
+  <a href="http://github.com/mattt/Chroma-Hash/">
+    <img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
+  </a>
   <div class="container">
     <h1>Chroma-Hash</h1>
-    <h2>a sexy, non-reversible live visualization of password field input</h2>
+    <h2>a sexy, secure visualization of password field input</h2>
     <fieldset>
       <label>Username</label>
       <input type="text" name="username" value="" id="username">
-
       <label>Password</label>
       <input type="password" name="password" value="" id="password">
-
       <label>Confirm Password</label>
       <input type="password" name="confirm-password" value="" id="confirm-password">
     </fieldset>
-    
     <hr/>
     <div class="explanation">
-      <p>Learn more and fork it for yourself at <tt><a href="http://github.com/mattt/Chroma-Hash/">http://github.com/mattt/Chroma-Hash/</a></tt></p>
+      <p>Looking for some more explanation? Have some feedback?<br/>Check out <a href="http://mattt.me/2009/07/chroma-hash-a-belated-introduction/">my blog post about Chroma-Hash</a></p>
     </div>
   </div>
+  <div class="footer">
+    <span class="copyright">&copy; <a href="http://twitter.com/mattt" title="@mattt" rel="me">Mattt Thompson</a> - Released Under an MIT License</span>
+    <span class="version">Last Revised: August 4, 2009</span>
+  </div>
+      
 </body>
-</html>
+</html>