[Typescript] Convert tools page to TS (#344)

* Convert controller to TS.

* Remove $scope and move methods into class.

* Convert tools to component.

src/popup/app/app.js

@@ -28,6 +28,7 @@ require('../less/libs.less');
 require('../less/popup.less');
 
 import ComponentsModule from './components/components.module';
+import ToolsModule from './tools/tools.module';
 
 // Model imports
 import { AttachmentData } from '../../models/data/attachmentData';
@@ -80,7 +81,7 @@ angular
         'bit.current',
         'bit.vault',
         'bit.settings',
-        'bit.tools',
+        ToolsModule,
         'bit.lock'
     ]);
 
@@ -126,8 +127,6 @@ require('./settings/settingsAddFolderController.js');
 require('./settings/settingsEditFolderController.js');
 require('./settings/settingsPremiumController.js');
 require('./settings/settingsEnvironmentController.js');
-require('./tools/toolsModule.js');
-require('./tools/toolsController.js');
 require('./tools/toolsPasswordGeneratorController.js');
 require('./tools/toolsPasswordGeneratorHistoryController.js');
 require('./tools/toolsExportController.js');

src/popup/app/components/componentsModule.js

@@ -1,2 +0,0 @@
-angular
-    .module('bit.components', []);

src/popup/app/config.js

@@ -124,8 +124,8 @@
             })
             .state('tabs.tools', {
                 url: '/tools',
-                templateUrl: 'app/tools/views/tools.html',
+                //component: 'tools',
-                controller: 'toolsController'
+                template: '<tools></tools>'
             })
 
             .state('viewFolder', {

src/popup/app/tools/tools.component.ts

@@ -0,0 +1,50 @@
+import UtilsService from '../../../services/utils.service';
+import * as template from './views/tools.html';
+
+class ToolsController {
+    showExport: boolean;
+    i18n: any;
+
+    constructor(private SweetAlert: any, private i18nService: any,
+        private $analytics: any, private utilsService: UtilsService) {
+
+        this.i18n = i18nService;
+        this.showExport = !utilsService.isEdge();
+    }
+
+    launchWebVault(createOrg: any) {
+        this.$analytics.eventTrack('Launch Web Vault' + (createOrg ? ' For Share' : ''));
+        chrome.tabs.create({ url: 'https://vault.bitwarden.com/#/' + (createOrg ? '?org=free' : '') });
+    }
+
+    launchAndroid() {
+        this.$analytics.eventTrack('Launch Android');
+        chrome.tabs.create({ url: 'https://play.google.com/store/apps/details?id=com.x8bit.bitwarden' });
+    }
+
+    launchiOS() {
+        this.$analytics.eventTrack('Launch iOS');
+        chrome.tabs.create({ url: 'https://itunes.apple.com/us/app/bitwarden-free-password-manager/id1137397744?mt=8' });
+    }
+
+    launchImport() {
+        this.SweetAlert.swal({
+            title: this.i18nService.importItems,
+            text: this.i18nService.importItemsConfirmation,
+            showCancelButton: true,
+            confirmButtonText: this.i18nService.yes,
+            cancelButtonText: this.i18nService.cancel
+        }, (confirmed: boolean) => {
+            if (confirmed) {
+                this.$analytics.eventTrack('Launch Web Vault For Import');
+                chrome.tabs.create({ url: 'https://help.bitwarden.com/article/import-data/' });
+            }
+        });
+    };
+}
+
+export const ToolsComponent = {
+    bindings: {},
+    controller: ToolsController,
+    template,
+};

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

@@ -0,0 +1,7 @@
+import * as angular from 'angular';
+import { ToolsComponent } from './tools.component';
+
+export default angular
+    .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'oitozero.ngSweetAlert'])
+    .component('tools', ToolsComponent) 
+    .name;

src/popup/app/tools/toolsController.js

@@ -1,36 +0,0 @@
-angular
-    .module('bit.tools')
-
-    .controller('toolsController', function ($scope, SweetAlert, i18nService, $analytics, utilsService) {
-        $scope.i18n = i18nService;
-        $scope.showExport = !utilsService.isEdge();
-        $scope.launchWebVault = function (createOrg) {
-            $analytics.eventTrack('Launch Web Vault' + (createOrg ? ' For Share' : ''));
-            chrome.tabs.create({ url: 'https://vault.bitwarden.com/#/' + (createOrg ? '?org=free' : '') });
-        };
-
-        $scope.launchiOS = function () {
-            $analytics.eventTrack('Launch iOS');
-            chrome.tabs.create({ url: 'https://itunes.apple.com/us/app/bitwarden-free-password-manager/id1137397744?mt=8' });
-        };
-
-        $scope.launchAndroid = function () {
-            $analytics.eventTrack('Launch Android');
-            chrome.tabs.create({ url: 'https://play.google.com/store/apps/details?id=com.x8bit.bitwarden' });
-        };
-
-        $scope.launchImport = function () {
-            SweetAlert.swal({
-                title: i18nService.importItems,
-                text: i18nService.importItemsConfirmation,
-                showCancelButton: true,
-                confirmButtonText: i18nService.yes,
-                cancelButtonText: i18nService.cancel
-            }, function (confirmed) {
-                if (confirmed) {
-                    $analytics.eventTrack('Launch Web Vault For Import');
-                    chrome.tabs.create({ url: 'https://help.bitwarden.com/article/import-data/' });
-                }
-            });
-        };
-    });

src/popup/app/tools/toolsModule.js

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

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

@@ -2,7 +2,7 @@
     <div class="left">
         <a href="" ng-click="main.expandVault()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>
     </div>
-    <div class="title">{{i18n.tools}}</div>
+    <div class="title">{{$ctrl.i18n.tools}}</div>
 </div>
 <div class="content content-tabs">
     <div class="list">
@@ -10,38 +10,38 @@
             <div class="list-section-items">
                 <a class="list-section-item wrap" ui-sref="passwordGenerator({animation: 'in-slide-up'})">
                     <span class="leading-icon" style="color: #eba776;"><i class="fa fa-refresh fa-fw"></i></span>
-                    <span class="text">{{i18n.passGen}}</span>
+                    <span class="text">{{$ctrl.i18n.passGen}}</span>
-                    <span class="detail">{{i18n.passGenInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.passGenInfo}}</span>
                 </a>
-                <a class="list-section-item wrap" href="" ng-click="launchWebVault()">
+                <a class="list-section-item wrap" href="" ng-click="$ctrl.launchWebVault()">
                     <span class="leading-icon" style="color: #5bb630;"><i class="fa fa-globe fa-fw"></i></span>
-                    <span class="text">{{i18n.bitWebVault}}</span>
+                    <span class="text">{{$ctrl.i18n.bitWebVault}}</span>
-                    <span class="detail">{{i18n.bitWebVaultInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.bitWebVaultInfo}}</span>
                 </a>
-                <a class="list-section-item wrap" href="" ng-click="launchiOS()">
+                <a class="list-section-item wrap" href="" ng-click="$ctrl.launchiOS()">
                     <span class="leading-icon" style="color: #999999;"><i class="fa fa-apple fa-fw"></i></span>
-                    <span class="text">{{i18n.bitIosVault}}</span>
+                    <span class="text">{{$ctrl.i18n.bitIosVault}}</span>
-                    <span class="detail">{{i18n.bitIosVaultInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.bitIosVaultInfo}}</span>
                 </a>
-                <a class="list-section-item wrap" href="" ng-click="launchAndroid()">
+                <a class="list-section-item wrap" href="" ng-click="$ctrl.launchAndroid()">
                     <span class="leading-icon" style="color: #a4c639;"><i class="fa fa-android fa-fw"></i></span>
-                    <span class="text">{{i18n.bitAndrVault}}</span>
+                    <span class="text">{{$ctrl.i18n.bitAndrVault}}</span>
-                    <span class="detail">{{i18n.bitAndrVaultInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.bitAndrVaultInfo}}</span>
                 </a>
-                <a class="list-section-item wrap" href="" ng-click="launchWebVault(true)">
+                <a class="list-section-item wrap" href="" ng-click="$ctrl.launchWebVault(true)">
                     <span class="leading-icon" style="color: #8977af;"><i class="fa fa-share-alt fa-fw"></i></span>
-                    <span class="text">{{i18n.shareVault}}</span>
+                    <span class="text">{{$ctrl.i18n.shareVault}}</span>
-                    <span class="detail">{{i18n.shareVaultInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.shareVaultInfo}}</span>
                 </a>
-                <a class="list-section-item wrap" href="" ng-click="launchImport()">
+                <a class="list-section-item wrap" href="" ng-click="$ctrl.launchImport()">
                     <span class="leading-icon" style="color: #6fc2ff;"><i class="fa fa-cloud-upload fa-fw"></i></span>
-                    <span class="text">{{i18n.importItems}}</span>
+                    <span class="text">{{$ctrl.i18n.importItems}}</span>
-                    <span class="detail">{{i18n.importItemsInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.importItemsInfo}}</span>
                 </a>
                 <a class="list-section-item wrap" ui-sref="export({animation: 'in-slide-up'})" ng-if="showExport">
                     <span class="leading-icon" style="color: #ff6f6f;"><i class="fa fa-cloud-download fa-fw"></i></span>
-                    <span class="text">{{i18n.exportVault}}</span>
+                    <span class="text">{{$ctrl.i18n.exportVault}}</span>
-                    <span class="detail">{{i18n.exportVaultInfo}}</span>
+                    <span class="detail">{{$ctrl.i18n.exportVaultInfo}}</span>
                 </a>
             </div>
         </div>