setup and stub out password generator page

src/popup/app/config.js

@@ -28,75 +28,83 @@
         $httpProvider.interceptors.push('jwtInterceptor');
 
         $urlRouterProvider.otherwise(function ($injector, $location) {
-            var $state = $injector.get("$state");
+            var $state = $injector.get('$state');
-            $state.go("login");
+            $state.go('login');
         });
 
         $stateProvider
             .state('login', {
-                url: "/login",
+                url: '/login',
                 controller: 'accountsLoginController',
-                templateUrl: "app/accounts/views/accountsLogin.html",
+                templateUrl: 'app/accounts/views/accountsLogin.html',
                 data: { authorize: false },
                 params: { animation: null }
             })
             .state('twoFactor', {
-                url: "/two-factor",
+                url: '/two-factor',
                 controller: 'accountsLoginController',
-                templateUrl: "app/accounts/views/accountsLoginTwoFactor.html",
+                templateUrl: 'app/accounts/views/accountsLoginTwoFactor.html',
                 data: { authorize: false },
                 params: { animation: null }
             })
 
             .state('tabs', {
-                url: "/tab",
+                url: '/tab',
                 abstract: true,
-                templateUrl: "app/global/tabs.html",
+                templateUrl: 'app/global/tabs.html',
                 data: { authorize: true },
                 params: { animation: null }
             })
                 .state('tabs.current', {
-                    url: "/current",
+                    url: '/current',
-                    templateUrl: "app/current/views/current.html",
+                    templateUrl: 'app/current/views/current.html',
                     controller: 'currentController'
                 })
                 .state('tabs.vault', {
-                    url: "/vault",
+                    url: '/vault',
-                    templateUrl: "app/vault/views/vault.html",
+                    templateUrl: 'app/vault/views/vault.html',
                     controller: 'vaultController',
                     params: { scrollY: 0, searchText: null }
                 })
                 .state('tabs.settings', {
-                    url: "/settings",
+                    url: '/settings',
-                    templateUrl: "app/settings/views/settings.html",
+                    templateUrl: 'app/settings/views/settings.html',
                     controller: 'settingsController'
                 })
                 .state('tabs.tools', {
-                    url: "/tools",
+                    url: '/tools',
-                    templateUrl: "app/tools/views/tools.html",
+                    templateUrl: 'app/tools/views/tools.html',
                     controller: 'toolsController'
                 })
 
             .state('viewSite', {
-                url: "/view-site?siteId",
+                url: '/view-site?siteId',
-                templateUrl: "app/vault/views/vaultViewSite.html",
+                templateUrl: 'app/vault/views/vaultViewSite.html',
                 controller: 'vaultViewSiteController',
                 data: { authorize: true },
                 params: { animation: null, returnScrollY: 0, returnSearchText: null }
             })
             .state('addSite', {
-                url: "/add-site",
+                url: '/add-site',
-                templateUrl: "app/vault/views/vaultAddSite.html",
+                templateUrl: 'app/vault/views/vaultAddSite.html',
                 controller: 'vaultAddSiteController',
                 data: { authorize: true },
                 params: { animation: null, returnScrollY: 0, returnSearchText: null, name: null, uri: null }
             })
             .state('editSite', {
-                url: "/edit-site?siteId",
+                url: '/edit-site?siteId',
-                templateUrl: "app/vault/views/vaultEditSite.html",
+                templateUrl: 'app/vault/views/vaultEditSite.html',
                 controller: 'vaultEditSiteController',
                 data: { authorize: true },
                 params: { animation: null, fromView: true, returnScrollY: 0, returnSearchText: null }
+            })
+
+            .state('passwordGenerator', {
+                url: '/password-generator',
+                templateUrl: 'app/tools/views/toolsPasswordGenerator.html',
+                controller: 'toolsPasswordGeneratorController',
+                data: { authorize: true },
+                params: { animation: null, fromAdd: false, fromEdit: null }
             });
     })
     .run(function ($rootScope, userService, loginService, tokenService, $state) {

src/popup/app/current/currentController.js

@@ -16,12 +16,14 @@ angular
                 tabId = tabs[0].id;
             }
             else {
+                $scope.loaded = true;
                 return;
             }
 
             domain = tldjs.getDomain(url);
             $scope.sites = [];
             if (!domain) {
+                $scope.loaded = true;
                 return;
             }
 

src/popup/app/tools/toolsPasswordGeneratorController.js

@@ -0,0 +1,6 @@
+angular
+    .module('bit.tools')
+
+    .controller('toolsPasswordGeneratorController', function ($scope, $state, $stateParams) {
+        popupUtils.initListSectionItemListeners();
+    });

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

@@ -5,7 +5,7 @@
     <div class="list">
         <div class="list-section">
             <div class="list-section-items">
-                <a class="list-section-item wrap" href="#">
+                <a class="list-section-item wrap" href="" ui-sref="passwordGenerator({animation: 'in-slide-up'})">
                     <span class="leading-icon"><i class="fa fa-refresh fa-fw"></i></span>
                     <span class="text">Password Generator</span>
                     <span class="detail">Automatically generate strong, unique passwords for your logins.</span>

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

@@ -0,0 +1,72 @@
+<div class="header">
+    <div class="left">
+        <a ng-click="close()" href="">Close</a>
+    </div>
+    <div class="right">
+        <a ng-click="select()" href="">Select</a>
+    </div>
+    <div class="title">Generate Password</div>
+</div>
+<div class="content">
+    <div style="margin: 20px; font-size: 20px; text-align: center;">
+        <span id="generated-password">*&Houhdasdy87</span>
+    </div>
+    <div class="list" style="margin-top: 0;">
+        <div class="list-section" style="padding-top: 0;">
+            <div class="list-section-items">
+                <a class="list-section-item" href="#">
+                    Regenerate Password
+                </a>
+                <a class="list-section-item" href="#">
+                    Copy Password
+                </a>
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-header">
+                Options
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item list-section-item-slider">
+                    <label for="length">Length</label>
+                </div>
+                <div class="list-section-item list-section-item-checkbox">
+                    <label for="uppercase">A-Z</label>
+                    <input id="uppercase" type="checkbox">
+                </div>
+                <div class="list-section-item list-section-item-checkbox">
+                    <label for="lowercase">a-z</label>
+                    <input id="lowercase" type="checkbox">
+                </div>
+                <div class="list-section-item list-section-item-checkbox">
+                    <label for="numbers">0-9</label>
+                    <input id="numbers" type="checkbox">
+                </div>
+                <div class="list-section-item list-section-item-checkbox">
+                    <label for="special">!@#$%^&*</label>
+                    <input id="special" type="checkbox">
+                </div>
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-items">
+                <div class="list-section-item list-section-item-input">
+                    <label for="min-numbers">Minimum Numbers</label>
+                    <input id="min-numbers" type="number" min="0" max="5">
+                </div>
+                <div class="list-section-item list-section-item-input">
+                    <label for="min-special">Minimum Special</label>
+                    <input id="min-special" type="number" min="0" max="5">
+                </div>
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-items">
+                <div class="list-section-item list-section-item-checkbox">
+                    <label for="ambiguous">Avoid Ambiguous Characters</label>
+                    <input id="ambiguous" type="checkbox">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/popup/app/vault/views/vaultAddSite.html

@@ -17,19 +17,19 @@
                 </div>
                 <div class="list-section-items">
                     <div class="list-section-item">
-                        <label for="name">Name</label>
+                        <label for="name" class="item-label">Name</label>
                         <input id="name" type="text" name="Name" ng-model="site.name" bit-field>
                     </div>
                     <div class="list-section-item">
-                        <label for="uri">URI</label>
+                        <label for="uri" class="item-label">URI</label>
                         <input id="uri" type="text" name="Uri" ng-model="site.uri" bit-field>
                     </div>
                     <div class="list-section-item">
-                        <label for="username">Username</label>
+                        <label for="username" class="item-label">Username</label>
                         <input id="username" type="text" name="Username" ng-model="site.username" bit-field>
                     </div>
                     <div class="list-section-item">
-                        <label for="password">Password</label>
+                        <label for="password" class="item-label">Password</label>
                         <input id="password" type="password" name="Password" ng-model="site.password" bit-field>
                     </div>
                     <a class="list-section-item" href="#">
@@ -41,7 +41,7 @@
             <div class="list-section">
                 <div class="list-section-items">
                     <div class="list-section-item">
-                        <label for="folder">Folder</label>
+                        <label for="folder" class="item-label">Folder</label>
                         <select id="folder" name="FolderId" ng-model="site.folderId" bit-field>
                             <option ng-repeat="folder in folders | orderBy: ['name']" value="{{folder.id}}">{{folder.name}}</option>
                         </select>

src/popup/app/vault/views/vaultEditSite.html

@@ -17,19 +17,19 @@
                 </div>
                 <div class="list-section-items">
                     <div class="list-section-item">
-                        <label for="name">Name</label>
+                        <label for="name" class="item-label">Name</label>
                         <input id="name" type="text" name="Name" ng-model="site.name" bit-field>
                     </div>
                     <div class="list-section-item">
-                        <label for="uri">URI</label>
+                        <label for="uri" class="item-label">URI</label>
                         <input id="uri" type="text" name="Uri" ng-model="site.uri" bit-field>
                     </div>
                     <div class="list-section-item">
-                        <label for="username">Username</label>
+                        <label for="username" class="item-label">Username</label>
                         <input id="username" type="text" name="Username" ng-model="site.username" bit-field>
                     </div>
                     <div class="list-section-item">
-                        <label for="password">Password</label>
+                        <label for="password" class="item-label">Password</label>
                         <input id="password" type="password" name="Password" ng-model="site.password" bit-field>
                     </div>
                     <a class="list-section-item" href="#">
@@ -41,7 +41,7 @@
             <div class="list-section">
                 <div class="list-section-items">
                     <div class="list-section-item">
-                        <label for="folder">Folder</label>
+                        <label for="folder" class="item-label">Folder</label>
                         <select id="folder" name="FolderId" ng-model="site.folderId" bit-field>
                             <option ng-repeat="folder in folders | orderBy: ['name']" value="{{folder.id}}">{{folder.name}}</option>
                         </select>

src/popup/index.html

@@ -62,6 +62,7 @@
 
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>
+    <script src="app/tools/toolsPasswordGeneratorController.js"></script>
 </head>
 <body ng-controller="mainController as main" class="{{main.animation}}">
     <div ui-view class="main-view"></div>

src/popup/less/components.less

@@ -251,7 +251,7 @@
             display: block;
         }
 
-        label, .item-label {
+        .item-label {
             font-size: @font-size-small;
             color: @gray-light;
             display: block;
@@ -298,7 +298,7 @@
             }
         }
 
-        &.list-section-item-checkbox {
+        &.list-section-item-checkbox, &.list-section-item-input, &.list-section-item-slider {
             label {
                 font-size: @font-size-base;
                 color: @text-color;
@@ -306,13 +306,27 @@
                 width: initial;
                 font-weight: normal;
                 float: left;
+                margin: 0;
             }
+        }
 
+        &.list-section-item-checkbox {
             input[type="checkbox"] {
                 float: right;
                 display: inline-block;
             }
         }
+
+        &.list-section-item-input {
+            input {
+                float: right;
+                display: inline-block;
+                border: none;
+                background: none;
+                width: 100px;
+                text-align: right;
+            }
+        }
     }
 
     &.list-no-selection {