convert password history to ts. added clear option

src/_locales/en/messages.json

@@ -974,5 +974,8 @@
   },
   "identities": {
     "message": "Identities"
+  },
+  "clear": {
+    "message": "Clear"
   }
 }

src/popup/app/app.js

@@ -108,7 +108,6 @@ require('./vault/vaultAddCipherController.js');
 require('./vault/vaultEditCipherController.js');
 require('./vault/vaultViewCipherController.js');
 require('./vault/vaultAttachmentsController.js');
-require('./tools/toolsPasswordGeneratorHistoryController.js');
 
 // $$ngIsClass fix issue with "class constructors must be invoked with |new|" on Firefox ESR
 // ref: https://github.com/angular/angular.js/issues/14240
@@ -128,6 +127,8 @@ import { ExportController } from './tools/export.component';
 ExportController.$$ngIsClass = true;
 import { PasswordGeneratorController } from './tools/password-generator.component';
 PasswordGeneratorController.$$ngIsClass = true;
+import { PasswordGeneratorHistoryController } from './tools/password-generator-history.component';
+PasswordGeneratorHistoryController.$$ngIsClass = true;
 import { ToolsController } from './tools/tools.component';
 ToolsController.$$ngIsClass = true;
 import { AddFolderController } from './settings/folders/add-folder.component';

src/popup/app/config.js

@@ -170,9 +170,8 @@ angular
                 params: { animation: null, addState: null, editState: null }
             })
             .state('passwordGeneratorHistory', {
-                url: '/history',
-                template: require('./tools/views/toolsPasswordGeneratorHistory.html'),
-                controller: 'toolsPasswordGeneratorHistoryController',
+                url: '/password-generator-history',
+                component: 'passwordGeneratorHistory',
                 data: { authorize: true },
                 params: { animation: null, addState: null, editState: null }
             })

src/popup/app/tools/password-generator-history.component.html

@@ -0,0 +1,29 @@
+<div class="header">
+    <div class="left">
+        <a ng-click="$ctrl.close()" href=""><i class="fa fa-chevron-left"></i> {{$ctrl.i18n.back}}</a>
+    </div>
+    <div class="right">
+        <a ng-click="$ctrl.clear()" href="">{{$ctrl.i18n.clear}}</a>
+    </div>
+    <div class="title">{{$ctrl.i18n.passwordHistory}}</div>
+</div>
+<div class="content">
+    <div class="list">
+        <div class="list-grouped" ng-if="$ctrl.history.length !== 0">
+            <div class="list-grouped-item condensed wrap" ng-repeat="item in $ctrl.history | orderBy: 'date':true">
+                <div class="action-buttons">
+                    <span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyPassword}}"
+                          ngclipboard ngclipboard-error="$ctrl.clipboardError(e)"
+                          ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.password)"
+                          data-clipboard-text="{{item.password}}">
+                        <i class="fa fa-lg fa-clipboard"></i>
+                    </span>
+                </div>
+                <span class="text monospaced">
+                    {{item.password}}
+                </span>
+                <span class="detail">{{item.date | date: 'medium'}}</span>
+            </div>
+        </div>
+    </div>
+</div>

src/popup/app/tools/password-generator-history.component.ts

@@ -0,0 +1,54 @@
+import * as template from './password-generator-history.component.html';
+
+import PasswordHistory from '../../../models/domain/passwordHistory';
+
+export class PasswordGeneratorHistoryController {
+    $transition$: any;
+    history: PasswordHistory[];
+    editState: any;
+    addState: any;
+    i18n: any;
+
+    constructor(private $state: any, private passwordGenerationService: any, private toastr: any,
+        private $analytics: any, private i18nService: any) {
+        this.i18n = i18nService;
+        this.history = passwordGenerationService.getHistory();
+    }
+
+    $onInit() {
+        const params = this.$transition$.params('to');
+        this.addState = params.addState;
+        this.editState = params.editState;
+    }
+
+    clear() {
+        this.history = [];
+        this.passwordGenerationService.clear();
+    }
+
+    clipboardError(e: any, password: any) {
+        this.toastr.info(this.i18nService.browserNotSupportClipboard);
+    }
+
+    clipboardSuccess(e: any) {
+        this.$analytics.eventTrack('Copied Historical Password');
+        e.clearSelection();
+        this.toastr.info(this.i18nService.passwordCopied);
+    }
+
+    close() {
+        this.$state.go('^.passwordGenerator', {
+            animation: 'out-slide-right',
+            addState: this.addState,
+            editState: this.editState,
+        });
+    }
+}
+
+export const PasswordGeneratorHistoryComponent = {
+    bindings: {
+        $transition$: '<',
+    },
+    controller: PasswordGeneratorHistoryController,
+    template,
+};

src/popup/app/tools/tools.module.ts

@@ -1,5 +1,6 @@
 import * as angular from 'angular';
 import { ExportComponent } from './export.component';
+import { PasswordGeneratorHistoryComponent } from './password-generator-history.component';
 import { PasswordGeneratorComponent } from './password-generator.component';
 import { ToolsComponent } from './tools.component';
 
@@ -7,6 +8,7 @@ export default angular
     .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'oitozero.ngSweetAlert'])
 
     .component('tools', ToolsComponent)
+    .component('passwordGeneratorHistory', PasswordGeneratorHistoryComponent)
     .component('passwordGenerator', PasswordGeneratorComponent)
     .component('export', ExportComponent)
 

src/popup/app/tools/toolsPasswordGeneratorHistoryController.js

@@ -1,30 +0,0 @@
-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/toolsPasswordGeneratorHistory.html

@@ -1,25 +0,0 @@
-<div class="header">
-    <div class="left">
-        <a ng-click="close()" href=""><i class="fa fa-chevron-left"></i> {{i18n.back}}</a>
-    </div>
-    <div class="title">{{i18n.passwordHistory}}</div>
-</div>
-<div class="content">
-    <div class="list">
-        <div class="list-grouped" ng-if="passwords.length !== 0">
-            <div class="list-grouped-item 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: 'medium'}}</span>
-            </div>
-        </div>
-    </div>
-</div>

src/services/passwordGeneration.service.ts

@@ -205,7 +205,7 @@ export default class PasswordGenerationService {
         if (this.history == null || this.history.length === 0) {
             return Promise.resolve([]);
         }
-        
+
         const promises = this.history.map(async (item) => {
             const encrypted = await this.cryptoService.encrypt(item.password);
             return new PasswordHistory(encrypted.encryptedString, item.date);