pwd js

index.html

@@ -47,7 +47,41 @@
       <section>
         <section
          data-separator="^--$"
-         data-markdown="slides/password.md"></section>
+         data-markdown="slides/password.md">
+        </section>
+        <section id='passwordTest'>
+          <p>Vediamo quanto sei bravo/a ad inventare una password:</p>
+          <input type="password"
+            v-model='password'
+            @input='checkStrength'
+            :class="['score' + estimationScore]"/>
+            <button :disabled="estimationScore!==4"> ➜</button>
+            <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>:
+            </p>
+    
+        <li v-for="s in sequence">
+          <span v-if="s.pattern=='bruteforce'"> {{s.token}} forza bruta</span>
+          <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>
+          <span v-else-if="s.pattern=='sequence'"> {{s.token}} sequenze: ({{s.sequence_name}})</span>
+          <span v-else-if="s.pattern=='spatial'"> {{s.token}} sequenze spaziali: ({{s.graph}})</span>
+          <span v-else-if="s.pattern=='repeat'"> {{s.token}} ripetizione: ({{s.base_token}})</span>
+          <span v-else-if="s.pattern=='date'"> {{s.token}} data {{s.day}}/{{s.month}}/{{s.year}}</span>
+          <span v-else-if="s.pattern=='regex'"> {{s.token}} pattern {{s.regex_name}}</span>
+          <span v-else> {{s}}</span>
+
+          <script src='js/moment.js'></script>
+          <script src='js/vue.min.js'></script>
+          <script src='js/zxcvbn.js'></script>
+          <script src='js/password.js'></script>
+        </section>
       </section>
       <section>
         <section

js/password.js

@@ -0,0 +1,22 @@
+moment.locale('it');
+var app = new Vue({
+  el: '#passwordTest',
+  data: {
+    password: '',
+    estimationScore: 0,
+    score: ['inutile', 'pessima', 'brutta', 'così così', 'buona'],
+    scoreColor: 'red',
+    slowCrackTime: '',
+    fastCrackTime: '',
+    sequence: [],
+  },
+  methods: {
+    checkStrength (e) {
+      var estimation = zxcvbn(this.password, ['diocane', 'dioporco', 'porcodio', 'madonnacane'])
+      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;
+        },
+  }
+})

slides/password.md

@@ -94,5 +94,3 @@ Per le poche passphrase che non possiamo salvare usiamo i seguenti accorgimenti:
 notes:
 il `4` del primo punto e' un numero a caso.
 esempio live di scelta passphrase.
---
-<iframe width='100%' height="500px" src='http://fugadalcontrollo.org/test/password'/>