From 191e629b3a039f180c2ded658ebad7b8b0aa91cc Mon Sep 17 00:00:00 2001
From: Dan Wheeler <dan@dropbox.com>
Date: Thu, 29 Oct 2015 16:22:37 -0700
Subject: [PATCH] add password feedback to demo

---
 demo/demo.coffee | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/demo/demo.coffee b/demo/demo.coffee
index 4ec683ee..6e8fcedf 100644
--- a/demo/demo.coffee
+++ b/demo/demo.coffee
@@ -11,6 +11,7 @@ p@$$word
 123456
 123456789
 11111111
+zxcvbnm,./
 love88
 angel08
 monkey13
@@ -94,14 +95,15 @@ results_tmpl = '''
   <tr>
     <td>score: </td>
     <td>{{score}} / 4</td>
-  <tr>
-    <td colspan="3">guess times:</td>
-  </tr>
-  {{& guess_times_display}}
   <tr>
     <td>function runtime (ms): </td>
     <td colspan="2">{{calc_time}}</td>
   </tr>
+  <tr>
+    <td colspan="3">guess times:</td>
+  </tr>
+  {{& guess_times_display}}
+  {{& feedback_display }}
   <tr>
     <td colspan="3"><strong>match sequence:</strong></td>
   </tr>
@@ -132,6 +134,25 @@ guess_times_tmpl = '''
   </tr>
 '''
 
+feedback_tmpl = '''
+{{#warning}}
+<tr>
+  <td>warning: </td>
+  <td colspan="2">{{warning}}</td>
+</tr>
+{{/warning}}
+{{#has_suggestions}}
+<tr>
+  <td style="vertical-align: top">suggestions:</td>
+  <td colspan="2">
+    {{#suggestions}}
+    - {{.}} <br />
+    {{/suggestions}}
+  </td>
+</tr>
+{{/has_suggestions}}
+'''
+
 props_tmpl = '''
 <div class="match-sequence">
 {{#sequence}}
@@ -274,12 +295,15 @@ round_logs = (r) ->
 
 requirejs ['../dist/zxcvbn'], (zxcvbn) ->
   $ ->
+    window.zxcvbn = zxcvbn
     results_lst = []
     for password in test_passwords.split('\n') when password
       r = zxcvbn(password)
       round_logs(r)
       r.sequence_display = Mustache.render(props_tmpl, r)
       r.guess_times_display = Mustache.render(guess_times_tmpl, r.crack_times_display)
+      r.feedback.has_suggestions = r.feedback.suggestions.length > 0
+      r.feedback_display = Mustache.render(feedback_tmpl, r.feedback)
       results_lst.push r
 
     rendered = Mustache.render(results_tmpl, {
@@ -299,6 +323,8 @@ requirejs ['../dist/zxcvbn'], (zxcvbn) ->
         round_logs(r)
         r.sequence_display = Mustache.render(props_tmpl, r)
         r.guess_times_display = Mustache.render(guess_times_tmpl, r.crack_times_display)
+        r.feedback.has_suggestions = r.feedback.suggestions.length > 0
+        r.feedback_display = Mustache.render(feedback_tmpl, r.feedback)
         results = {results: [r]}
         rendered = Mustache.render(results_tmpl, results)
         $('#search-results').html(rendered)