# HG changeset patch
# User Dan
# Date 1235958087 18000
# Node ID 4f85ab095cc8d3170a03d357b0d8765bfe61b6cd
# Parent  2114640729a5c32389e6662d733aff57ffec8225
Added visual feedback for key entry

diff -r 2114640729a5 -r 4f85ab095cc8 plugins/yubikey/field.png
Binary file plugins/yubikey/field.png has changed
diff -r 2114640729a5 -r 4f85ab095cc8 plugins/yubikey/yubikey.css
--- a/plugins/yubikey/yubikey.css	Sun Mar 01 20:41:17 2009 -0500
+++ b/plugins/yubikey/yubikey.css	Sun Mar 01 20:41:27 2009 -0500
@@ -34,3 +34,24 @@
   padding-left: 18px;
 }
 
+div.yubikey_bar {
+  width: 88px;
+  height: 88px;
+  margin: 4px auto;
+  text-align: center;
+  background-image: url(./field.png);
+  background-repeat: no-repeat;
+}
+
+div.yubikey_bar > img {
+  width: 0px;
+  height: 88px;
+  background-image: url(./field.png);
+  background-repeat: no-repeat;
+  background-position: -44px -88px;
+}
+
+div.yubikey_bar > img.yubikey_bar_error {
+  width: 88px !important;
+  background-position: 0px -176px !important;
+}
diff -r 2114640729a5 -r 4f85ab095cc8 plugins/yubikey/yubikey.js
--- a/plugins/yubikey/yubikey.js	Sun Mar 01 20:41:17 2009 -0500
+++ b/plugins/yubikey/yubikey.js	Sun Mar 01 20:41:27 2009 -0500
@@ -33,6 +33,12 @@
   mp.innerHTML = '';
   mp.style.textAlign = 'center';
   mp.innerHTML = '<h3>' + $lang.get('yubiauth_msg_please_touch_key') + '</h3>';
+  var progress = document.createElement('div');
+  $(progress).addClass('yubikey_bar');
+  var progimg = document.createElement('img');
+  progimg.src = cdnPath + '/images/spacer.gif';
+  progress.appendChild(progimg);
+  mp.appendChild(progress);
   var ta = document.createElement('input');
   ta.submitted = false;
   $(ta)
@@ -54,6 +60,12 @@
           this.submitted = true;
           yk_handle_submit(this);
         }
+        else
+        {
+          $('div.yubikey_bar > img', this.parentNode)
+            .css('width', String(this.value.length * 2) + 'px')
+            .css('background-position', String(this.value.length - 44) + 'px -88px');
+        }
         e.preventDefault();
         e.stopPropagation();
       });
@@ -66,7 +78,9 @@
         }, 50);
     }, 750);
   var info = document.createElement('p');
-  info.innerHTML = $lang.get('yubiauth_msg_close_instructions');
+  $(info)
+    .html($lang.get('yubiauth_msg_close_instructions'))
+    .css('margin-top', '0');
   mp.appendChild(info);
 }
 
@@ -78,7 +92,8 @@
       {
         yk_mb_construct(ta.parentNode);
       }, 1000);
-    ta.previousSibling.innerHTML = $lang.get('yubiauth_msg_invalid_chars');
+    $('h3', ta.parentNode).text($lang.get('yubiauth_msg_invalid_chars'));
+    $('div.yubikey_bar > img', this.parentNode).addClass('yubikey_bar_error');
     return false;
   }
   
@@ -114,10 +129,10 @@
 
 function yk_login_validate_reqs(ta)
 {
-  ta.parentNode.removeChild(ta.nextSibling);
+  $(ta.parentNode).remove('p');
   yubikey_otp_current = ta.value;
   
-  ta.previousSibling.innerHTML = $lang.get('yubiauth_msg_validating_otp');
+  $('h3', ta.parentNode).text($lang.get('yubiauth_msg_validating_otp'));
   
   ajaxPost(makeUrlNS('Special', 'Yubikey'), 'get_flags=' + ta.value.substr(0, 12), function(ajax)
     {
@@ -129,7 +144,7 @@
           handle_invalid_json(ajax.responseText);
           return false;
         }
-        ta.previousSibling.innerHTML = $lang.get('yubiauth_msg_otp_valid');
+        $('h3', ta.parentNode).text($lang.get('yubiauth_msg_otp_valid'));
         var response = parseJSON(ajax.responseText);
         if ( response.mode == 'error' )
         {