generator bugfixes

app/scripts/util/password-generator.js

@@ -6,31 +6,30 @@ var PasswordGenerator = {
     charRanges: {
         upper: 'ABCDEFGHJKLMNPQRSTUVWXYZ',
         lower: 'abcdefghijkmnpqrstuvwxyz',
-        digits: '23456789',
+        digits: '123456789',
         special: '!@#$%^&*_+-=,./?;:`"~\'\\',
-        brackets: '()[]<>',
+        brackets: '(){}[]<>',
         high: '¡¢£¤¥¦§©ª«¬®¯°±²³´µ¶¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþ',
-        ambiguous: 'O0oIl1'
+        ambiguous: 'O0oIl'
     },
     generate: function(opts) {
         if (!opts || typeof opts.length !== 'number' || opts.length < 0) {
             return '';
         }
-        var pass = '';
         var ranges = Object.keys(this.charRanges)
             .filter(function(r) { return opts[r]; })
             .map(function(r) { return this.charRanges[r]; }, this);
         if (!ranges.length) {
             return '';
         }
-        var randomBytes = kdbxweb.Random.getBytes(opts.length * 2);
-        var pos = 0;
-        while (pass.length < opts.length) {
-            var rangeNum = randomBytes[pos++] % ranges.length;
-            var range = ranges[rangeNum];
-            pass += range[randomBytes[pos++] % range.length];
+        var randomBytes = kdbxweb.Random.getBytes(opts.length);
+        var chars = [];
+        for (var i = 0; i < opts.length; i++) {
+            var range = ranges[i % ranges.length];
+            var rand = Math.round(Math.random() * 1000) + randomBytes[i];
+            chars.push(range[rand % range.length]);
         }
-        return pass;
+        return _.shuffle(chars).join('');
     }
 };
 

app/scripts/views/generator-view.js

@@ -10,6 +10,7 @@ var GeneratorView = Backbone.View.extend({
 
     events: {
         'click': 'click',
+        'mousedown .gen__length-range': 'generate',
         'mousemove .gen__length-range': 'lengthChange',
         'change .gen__length-range': 'lengthChange',
         'change .gen__check input[type=checkbox]': 'checkChange'

app/styles/areas/_generator.scss

@@ -16,6 +16,16 @@
     @include user-select(text);
     font-family: $monospace-font-family;
     margin-top: $base-padding-v;
-    white-space: nowrap;
+    height: 2.5em;
+    text-align: center;
+    white-space: pre;
+    word-wrap: break-word;
+  }
+}
+
+@-moz-document url-prefix() {
+  .gen__result {
+    white-space: pre-wrap;
+    word-break: break-all;
   }
 }

app/styles/base/_forms.scss

@@ -135,7 +135,7 @@ select {
 option {
   @include th {
     background-color: background-color();
-    color: text-border();
+    color: text-color();
   }
 }
 
@@ -161,116 +161,72 @@ input[type=checkbox] {
   }
 }
 
-$thumb-size: 8px;
-$track-width: 100%;
-$track-height: 1px;
-
-@mixin track {
-  @include size(100% 1px);
-  @include th { background: background-color(); }
-  cursor: pointer;
-  border: none;
-}
-
-@mixin thumb {
-  height: 1px;
-  width: 100%;
-  border: none;
-  border-radius: 1px;
-  cursor: pointer;
-  @include th { background: border-color(); }
-}
+$thumb-size: 14px;
 
 &input[type=range] {
   -webkit-appearance: none;
   width: 100%;
   margin: 12px 0;
-  &:focus {
-    outline: none;
-  }
+  padding: 0;
+  &:focus { outline: none; }
   &::-webkit-slider-runnable-track {
+    @include th { background: text-color(); }
     width: 100%;
     height: 1px;
     cursor: pointer;
-    @include th {
-      background: text-color();
-    }
     border-radius: 1px;
     border: none;
   }
   &::-webkit-slider-thumb {
+    @include th { background: text-color(); }
     border: none;
-    height: 14px;
-    width: 14px;
-    border-radius: 14px;
-    @include th {
-      background: text-color();
-    }
+    height: $thumb-size;
+    width: $thumb-size;
+    border-radius: $thumb-size;
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: -6.5px;
   }
-  // &:focus::-webkit-slider-runnable-track {
-  //   @include th { background: active-color(); }
-  // }
   &::-moz-range-track {
+    @include th { background: text-color(); }
     width: 100%;
     height: 1px;
     cursor: pointer;
-    @include th {
-      background: text-color();
-    }
     border-radius: 1px;
     border: none;
   }
   &::-moz-range-thumb {
+    @include th { background: text-color(); }
     border: none;
-    height: 14px;
-    width: 14px;
-    border-radius: 14px;
-    @include th {
-      background: text-color();
-    }
+    height: $thumb-size;
+    width: $thumb-size;
+    border-radius: $thumb-size;
     cursor: pointer;
   }
+  &::-moz-focus-outer {
+    border: 0;
+  }
   &::-ms-track {
     width: 100%;
     height: 1px;
     cursor: pointer;
     background: transparent;
     border-color: transparent;
+    border-width: $thumb-size 0;
     color: transparent;
   }
-  &::-ms-fill-lower {
-    @include th {
-      background: text-color();
-    }
-    border: none;
+  &::-ms-tooltip {
+    display: none;
   }
-  &::-ms-fill-upper {
-    @include th {
-      background: text-color();
-    }
-    border: none;
+  &::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper {
+    @include th { background: text-color(); }
   }
   &::-ms-thumb {
     border: none;
-    height: 14px;
-    width: 14px;
-    border-radius: 14px;
-    @include th {
-      background: text-color();
-    }
+    height: $thumb-size;
+    width: $thumb-size;
+    border-radius: $thumb-size;
     cursor: pointer;
-  }
-  &:focus::-ms-fill-lower {
-    @include th {
-      background: text-color();
-    }
-  }
-  &:focus::-ms-fill-upper {
-    @include th {
-      background: text-color();
-    }
+    @include th { background: text-color(); }
   }
 }

app/styles/base/_variables.scss

@@ -1,6 +1,6 @@
 // Typography
-$base-font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
-$font-family-text-thin: system, -apple-system, ".SFNSText-Light", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+$base-font-family: -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+$font-family-text-thin: -apple-system, ".SFNSText-Light", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
 $heading-font-family: $base-font-family;
 $monospace-font-family: monaco,Consolas,"Lucida Console",monospace;