Added length slider to password generator page

gulpfile.js

@@ -93,6 +93,10 @@ gulp.task('lib', ['clean:lib'], function () {
             src: paths.npmDir + 'ngclipboard/dist/ngclipboard.js',
             dest: paths.libDir + 'ngclipboard'
         },
+        {
+            src: paths.npmDir + 'angularjs-slider/dist/rzslider.js',
+            dest: paths.libDir + 'angularjs-slider'
+        },
         {
             src: paths.npmDir + 'clipboard/dist/clipboard.js',
             dest: paths.libDir + 'clipboard'

package.json

@@ -24,6 +24,7 @@
     "clipboard": "1.5.12",
     "merge-stream": "1.0.0",
     "angular-toastr": "2.1.1",
-    "q": "1.4.1"
+    "q": "1.4.1",
+    "angularjs-slider": "5.5.0"
   }
 }

src/popup/app/tools/toolsModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr']);
+    .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'rzModule']);

src/popup/app/tools/toolsPasswordGeneratorController.js

@@ -8,8 +8,27 @@
         popupUtils.initListSectionItemListeners();
         $scope.password = '-';
 
+        $scope.slider = {
+            value: 12,
+            options: {
+                floor: 5,
+                ceil: 64,
+                step: 1,
+                hideLimitLabels: true,
+                hidePointerLabels: true,
+                onChange: function () {
+                    $scope.options.length = $scope.slider.value;
+                    $scope.regenerate();
+                },
+                onEnd: function () {
+                    $scope.saveOptions($scope.options);
+                }
+            }
+        };
+
         $q.when(passwordGenerationService.getOptions()).then(function (options) {
             $scope.options = options;
+            $scope.slider.value = options.length;
             $scope.regenerate();
         });
 

src/popup/app/tools/views/toolsPasswordGenerator.html

@@ -8,8 +8,8 @@
     <div class="title">Generate Password</div>
 </div>
 <div class="content">
-    <div style="margin: 20px; font-size: 20px; text-align: center;">
-        <span id="generated-password">{{password}}</span>
+    <div class="generate-password-block" id="generated-password">
+        {{password}}
     </div>
     <div class="list" style="margin-top: 0;">
         <div class="list-section" style="padding-top: 0;">
@@ -30,6 +30,9 @@
             <div class="list-section-items">
                 <div class="list-section-item list-section-item-slider">
                     <label for="length">Length</label>
+                    <span class="slider-value">{{slider.value}}</span>
+                    <rzslider rz-slider-model="slider.value"
+                              rz-slider-options="slider.options"></rzslider>
                 </div>
                 <div class="list-section-item list-section-item-checkbox">
                     <label for="uppercase">A-Z</label>

src/popup/index.html

@@ -22,6 +22,7 @@
     <script src="../lib/angular-jwt/angular-jwt.js"></script>
     <script src="../lib/angular-toastr/angular-toastr.tpls.js"></script>
     <script src="../lib/ngclipboard/ngclipboard.js"></script>
+    <script src="../lib/angularjs-slider/rzslider.js"></script>
 
     <script src="app/app.js"></script>
     <script src="app/settings.js"></script>

src/popup/less/components.less

@@ -331,6 +331,16 @@
                 text-align: right;
             }
         }
+
+        &.list-section-item-slider {
+            .slider-value {
+                color: @gray-light;
+
+                &:before {
+                    content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0";
+                }
+            }
+        }
     }
 
     &.list-no-selection {
@@ -341,3 +351,12 @@
         }
     }
 }
+
+.generate-password-block {
+    margin: 20px;
+    font-size: 20px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

src/popup/less/plugins.less

@@ -1,4 +1,21 @@
 @import (reference) "variables.less";
+@import "../../../node_modules/angularjs-slider/src/rzslider.less";
+
+/* Slider */
+
+@handleSize: 15px;
+@barDimension: 2px;
+@handleBgColor: @brand-primary;
+@handleInnerColor: @handleBgColor;
+@handleActiveColor: @handleBgColor;
+@handleHoverColor: @handleBgColor;
+@barNormalColor: @border-color-dark;
+
+.list-section-item-slider .rzslider {
+    width: 182px;
+    margin: 9px 0 0 5px;
+    float: right;
+}
 
 /* Toastr */