Rewrite lock module to TypeScript. (#354)

src/popup/app/app.js

@@ -29,6 +29,7 @@ require('../less/popup.less');
 import ComponentsModule from './components/components.module';
 import ToolsModule from './tools/tools.module';
 import ServicesModule from './services/services.module';
+import LockModule from './lock/lock.module';
 
 // Model imports
 import { AttachmentData } from '../../models/data/attachmentData';
@@ -83,7 +84,7 @@ angular
         'bit.vault',
         'bit.settings',
         ToolsModule,
-        'bit.lock'
+        LockModule
     ]);
 
 require('./config');
@@ -127,8 +128,6 @@ require('./settings/settingsEnvironmentController.js');
 require('./tools/toolsPasswordGeneratorController.js');
 require('./tools/toolsPasswordGeneratorHistoryController.js');
 require('./tools/toolsExportController.js');
-require('./lock/lockModule.js');
-require('./lock/lockController.js');
 
 // Bootstrap the angular application
 angular.element(function () {

src/popup/app/config.js

@@ -260,8 +260,7 @@ angular
             })
             .state('lock', {
                 url: '/lock',
-                templateUrl: 'app/lock/views/lock.html',
-                controller: 'lockController',
+                component: 'lock',
                 data: { authorize: true },
                 params: { animation: null }
             });

src/popup/app/lock/lock.component.html

@@ -1,9 +1,9 @@
-<form name="theForm" ng-submit="submit()" bit-form="submitPromise">
+<form name="theForm" ng-submit="$ctrl.submit()" bit-form="submitPromise">
     <div class="header">
         <div class="right">
-            <button type="submit" class="btn btn-link">{{i18n.submit}}</button>
+            <button type="submit" class="btn btn-link">{{$ctrl.i18n.submit}}</button>
         </div>
-        <div class="title">{{i18n.verifyMasterPassword}}</div>
+        <div class="title">{{$ctrl.i18n.verifyMasterPassword}}</div>
     </div>
     <div class="content">
         <div class="list">
@@ -11,15 +11,15 @@
                 <div class="list-section-items">
                     <div class="list-section-item list-section-item-icon-input">
                         <i class="fa fa-lock fa-lg fa-fw"></i>
-                        <label for="master-password" class="sr-only">{{i18n.masterPass}}</label>
-                        <input id="master-password" type="password" name="MasterPassword" placeholder="{{i18n.masterPass}}"
+                        <label for="master-password" class="sr-only">{{$ctrl.i18n.masterPass}}</label>
+                        <input id="master-password" type="password" name="MasterPassword" placeholder="{{$ctrl.i18n.masterPass}}"
                                ng-model="masterPassword">
                     </div>
                 </div>
             </div>
         </div>
         <p class="text-center text-accent">
-            <a ng-click="logOut()" href="">{{i18n.logOut}}</a>
+            <a ng-click="$ctrl.logOut()" href="">{{$ctrl.i18n.logOut}}</a>
         </p>
     </div>
 </form>

src/popup/app/lock/lock.component.ts

@@ -0,0 +1,53 @@
+import CryptoService from '../../../services/crypto.service';
+import UserService from '../../../services/user.service';
+
+import * as template from './lock.component.html';
+
+class LockController {
+    i18n: any;
+
+    constructor(public $scope: any, public $state: any, public i18nService: any,
+                public cryptoService: CryptoService, public toastr: any, public userService: UserService,
+                public SweetAlert: any, public $timeout: any) {
+        this.i18n = i18nService;
+
+        $timeout(() => {
+            document.getElementById('master-password').focus();
+        });
+    }
+
+    logOut() {
+        this.SweetAlert.swal({
+            title: this.i18nService.logOut,
+            text: this.i18nService.logOutConfirmation,
+            showCancelButton: true,
+            confirmButtonText: this.i18nService.yes,
+            cancelButtonText: this.i18nService.cancel,
+        }, (confirmed: boolean) => {
+            if (confirmed) {
+                chrome.runtime.sendMessage({ command: 'logout' });
+            }
+        });
+    }
+
+    async submit() {
+        const email = await this.userService.getEmail();
+        const key = this.cryptoService.makeKey(this.$scope.masterPassword, email);
+        const keyHash = await this.cryptoService.hashPassword(this.$scope.masterPassword, key);
+        const storedKeyHash = await this.cryptoService.getKeyHash();
+
+        if (storedKeyHash && keyHash && storedKeyHash === keyHash) {
+            await this.cryptoService.setKey(key);
+            chrome.runtime.sendMessage({ command: 'unlocked' });
+            this.$state.go('tabs.current');
+        } else {
+            this.toastr.error(this.i18nService.invalidMasterPassword, this.i18nService.errorsOccurred);
+        }
+    }
+}
+
+export const LockComponent = {
+    bindings: {},
+    controller: LockController,
+    template,
+};

src/popup/app/lock/lock.module.ts

@@ -0,0 +1,9 @@
+import * as angular from 'angular';
+import { LockComponent } from './lock.component';
+
+export default angular
+    .module('bit.lock', ['ngAnimate', 'toastr'])
+
+    .component('lock', LockComponent)
+
+    .name;

src/popup/app/lock/lockController.js

@@ -1,46 +0,0 @@
-angular
-    .module('bit.lock')
-
-    .controller('lockController', function ($scope, $state, $analytics, i18nService, cryptoService, toastr,
-        userService, SweetAlert, $timeout) {
-        $scope.i18n = i18nService;
-
-        $timeout(function () {
-            $('#master-password').focus();
-        });
-
-        $scope.logOut = function () {
-            SweetAlert.swal({
-                title: i18nService.logOut,
-                text: i18nService.logOutConfirmation,
-                showCancelButton: true,
-                confirmButtonText: i18nService.yes,
-                cancelButtonText: i18nService.cancel
-            }, function (confirmed) {
-                if (confirmed) {
-                    chrome.runtime.sendMessage({ command: 'logout' });
-                }
-            });
-        };
-
-        $scope.submit = function () {
-            userService.getEmail().then(function (email) {
-                var key = cryptoService.makeKey($scope.masterPassword, email);
-                var keyHash;
-                cryptoService.hashPassword($scope.masterPassword, key).then(function (theKeyHash) {
-                    keyHash = theKeyHash;
-                    return cryptoService.getKeyHash();
-                }).then(function (storedKeyHash) {
-                    if (storedKeyHash && keyHash && storedKeyHash === keyHash) {
-                        cryptoService.setKey(key).then(function () {
-                            chrome.runtime.sendMessage({ command: 'unlocked' });
-                            $state.go('tabs.current');
-                        });
-                    }
-                    else {
-                        toastr.error(i18nService.invalidMasterPassword, i18nService.errorsOccurred);
-                    }
-                });
-            });
-        };
-    });

src/popup/app/lock/lockModule.js

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