History of generated passwords (#310)

* Save last 5 passwords.

* Move password history to seperate page.

* Use the util helpers for accessing the local storage.

* Change close to back for password history. Remove unused html.

* Change orderBy to use the date instead of magic array.

* Move historyService to background.

* Add passwords generated from shortcut and contextmenu to history.

* Fix return to edit/add not working in password generator history.

* Change password icon to clipboard.

* Change link to password history to use on-click.

* Clear password generator history on logout.

* Code style fix.

* Add new .wrap class for wrapping long text. Fix password icon.

src/popup/app/config.js

@@ -171,6 +171,13 @@
                 data: { authorize: true },
                 params: { animation: null, addState: null, editState: null }
             })
+            .state('passwordGeneratorHistory', {
+                url: '/history',
+                templateUrl: 'app/tools/views/toolsPasswordGeneratorHistory.html',
+                controller: 'toolsPasswordGeneratorHistoryController',
+                data: { authorize: true },
+                params: { animation: null, addState: null, editState: null }
+            })
             .state('export', {
                 url: '/export',
                 templateUrl: 'app/tools/views/toolsExport.html',

src/popup/app/tools/toolsPasswordGeneratorController.js

@@ -57,6 +57,7 @@
         };
 
         $scope.clipboardSuccess = function (e) {
+            passwordGenerationService.addHistory(e.text);
             $analytics.eventTrack('Copied Generated Password');
             e.clearSelection();
             toastr.info(i18nService.passwordCopied);
@@ -79,6 +80,14 @@
             dismiss();
         };
 
+        $scope.goHistory = function () {
+            $state.go('^.passwordGeneratorHistory', {
+                animation: 'in-slide-left',
+                addState: $stateParams.addState,
+                editState: $stateParams.editState
+            });
+        };
+
         function dismiss() {
             if (addState) {
                 $state.go('addCipher', {

src/popup/app/tools/toolsPasswordGeneratorHistoryController.js

@@ -0,0 +1,31 @@
+angular
+    .module('bit.tools')
+
+    .controller('toolsPasswordGeneratorHistoryController', function (
+        $scope, $state, $stateParams, toastr, $analytics, i18nService, passwordGenerationService) {
+        $scope.i18n = i18nService;
+
+        $scope.passwords = passwordGenerationService.getHistory();
+
+        $scope.clipboardError = function (e, password) {
+            toastr.info(i18n.browserNotSupportClipboard);
+        };
+
+        $scope.clipboardSuccess = function (e) {
+            $analytics.eventTrack('Copied Generated Password');
+            e.clearSelection();
+            toastr.info(i18nService.passwordCopied);
+        };
+
+        $scope.close = function () {
+            dismiss();
+        };
+
+        function dismiss() {
+            $state.go('^.passwordGenerator', {
+                animation: 'out-slide-right',
+                addState: $stateParams.addState,
+                editState: $stateParams.editState
+            });
+        }
+    });

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

@@ -21,6 +21,10 @@
                    ngclipboard-success="clipboardSuccess(e)" data-clipboard-text="{{password}}">
                     {{i18n.copyPassword}}
                 </a>
+                <a class="list-section-item text-primary" href="" ng-click="goHistory()">
+                    {{i18n.viewPasswordHistory}}
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
             </div>
         </div>
         <div class="list-section">

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

@@ -0,0 +1,27 @@
+<div class="header">
+    <div class="left">
+        <a ng-click="close()" href="">{{i18n.back}}</a>
+    </div>
+    <div class="title">{{i18n.generatePasswordHistory}}</div>
+</div>
+<div class="content">
+    <div class="list" style="margin-top: 0;">
+        <div class="list-section" ng-if="passwords.length !== 0">
+            <div class="list-section-items">
+                <div class="list-section-item list-section-item-checkbox condensed wrap" ng-repeat="password in passwords | orderBy: 'date':true">
+                    <div class="action-buttons">
+                        <span class="btn-list" stop-prop stop-click title="{{i18n.copyPassword}}" ngclipboard
+                              ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
+                              data-clipboard-text="{{password.password}}">
+                            <i class="fa fa-lg fa-clipboard"></i>
+                        </span>
+                    </div>
+                    <span class="text monospaced">
+                        {{password.password}}
+                    </span>
+                    <span class="detail">{{password.date | date}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/popup/index.html

@@ -111,6 +111,7 @@
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>
     <script src="app/tools/toolsPasswordGeneratorController.js"></script>
+    <script src="app/tools/toolsPasswordGeneratorHistoryController.js"></script>
     <script src="app/tools/toolsExportController.js"></script>
 
     <script src="app/lock/lockModule.js"></script>

src/popup/less/components.less

@@ -428,6 +428,10 @@
             }
         }
 
+        &.wrap {
+            overflow-wrap: break-word;
+        }
+
         input:not([type="checkbox"]), select, textarea {
             border: none;
             width: 100%;