better password level

public/stylesheets/style.css

@@ -36,3 +36,42 @@ code {
   background-color: black;
   width: 100%;
 }
+
+input {
+  height: 20px;
+  margin: 10px;
+  padding: 5px;
+  width: 300px;
+  transition: border-color .8s, background-color .8s;
+  color: black;
+}
+
+.score0 {
+  background-color: #ff222288;
+  border: 2px solid red;
+}
+
+.score1 {
+  background-color: #ff5716cc;
+  border: 2px solid #ff6644;
+}
+
+.score2 {
+  background-color: #ff9955;
+  border: 2px solid #ffcc88;
+}
+
+.score3 {
+  background-color: #0067FF;
+  border: 2px solid #6496ff;
+}
+
+.score4 {
+  background-color: #33dd33;
+  border: 2px solid #99FF00;
+}
+
+button {
+  cursor: pointer;
+  height: 34px;
+}

views/password.pug

@@ -3,30 +3,61 @@ extends layout
 block content
   p.
     Bla bla bla qui devi scegliere una buona password
+    cosa puoi provare:
 
-  input#password(type="password", name="password")
-  p#crackTime
-  p#feedback
-  p#sequence
+  li cia0Antaniqwer10102018
+  li Tr0ub4dour&3
+  br
+  #app
+    input(
+      type='password',
+      v-model='password', 
+      @input='checkStrength'
+      :class="['score' + estimationScore]"
+    )
+    button(:disabled="estimationScore!==4") ➜
+    p(v-if='password.length>2').
+      Questa password è {{score[estimationScore]}}, dopo un sequestro uno bravo
+      ci mette più o meno <b>{{slowCrackTime}}</b> a scoprirla,
+      la CIA circa <b>{{fastCrackTime}}</b>:
     
-  a#vinto(style="visibility: hidden") vinto
+    li(v-for="s in sequence")
+      span(v-if="s.pattern=='bruteforce'") {{s.token}} forza bruta
+      span(v-else-if="s.pattern=='dictionary'").
+        {{s.token}} dizionario: {{s.dictionary_name}} 
+        {{s.reversed?'(invertita ' + s.matched_word + ')':''}}
+        {{s.l33t?'(con sostituzione ' + s.sub_display +')':''}}
+        {{s.uppercase_variations>1?'(con maiuscola)':''}}
+      span(v-else-if="s.pattern=='sequence'") {{s.token}} sequenze: ({{s.sequence_name}})
+      span(v-else-if="s.pattern=='spatial'") {{s.token}} sequenze spaziali: ({{s.graph}})
+      span(v-else-if="s.pattern=='repeat'") {{s.token}} ripetizione: ({{s.base_token}})
+      span(v-else-if="s.pattern=='date'") {{s.token}} data {{s.day}}/{{s.month}}/{{s.year}}
+      span(v-else-if="s.pattern=='regex'") {{s.token}} pattern {{s.regex_name}}
+      span(v-else) {{s}}
 
-  script(src="/js/zxcvbn.js")
+  script(src='/js/vue.min.js')
+  script(src='/js/zxcvbn.js')
+  script(src='/js/moment.js')
   script.
-    var crackTime = document.getElementById('crackTime')
-    var feedback = document.getElementById('feedback')
-    var sequence = document.getElementById('sequence')
-    var vinto = document.getElementById('vinto')
-
-    document.getElementById('password').oninput = function(ev, t) {
-      var ret = zxcvbn(this.value)
-      console.log(ret)
-      crackTime.innerHTML = 'A craccarla ci metto circa ' + ret.crack_times_display.offline_slow_hashing_1e4_per_second;
-      feedback.innerHTML = ret.feedback.suggestions.join(', ')
-      sequence.innerHTML = ret.sequence.map(s => s.pattern).join(' ,')
-      if (ret.score === 4){
-        vinto.style.visibility = 'visible';
-      } else {
-        vinto.style.visibility = 'hidden';
+    moment.locale('it');
+    var app = new Vue({
+      el: '#app',
+      data: {
+        password: '',
+        estimationScore: 0,
+        score: ['inutile', 'pessima', 'brutta', 'così così', 'buona'],
+        scoreColor: 'red',
+        slowCrackTime: '',
+        fastCrackTime: '',
+        sequence: [],
+      },
+      methods: {
+        checkStrength (e) {
+          var estimation = zxcvbn(this.password)
+          this.estimationScore = estimation.score;
+          this.slowCrackTime = moment.duration(estimation.crack_times_seconds.offline_slow_hashing_1e4_per_second, 'seconds').humanize();
+          this.fastCrackTime = moment.duration(estimation.crack_times_seconds.offline_fast_hashing_1e10_per_second, 'seconds').humanize();
+          this.sequence = estimation.sequence;
+        }
       }
-    }
+    })