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

* Convert controller to TS.

* Remove $scope and move methods into class.

* Convert tools to component.
This commit is contained in:
Oscar Hinton 2017-11-02 13:02:14 +01:00 committed by Kyle Spearrin
parent 555648ede4
commit a66e32590b
8 changed files with 81 additions and 65 deletions

View File

@ -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');

View File

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

View File

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

View File

@ -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,
};

View File

@ -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;

View File

@ -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/' });
}
});
};
});

View File

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

View File

@ -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="detail">{{i18n.passGenInfo}}</span>
<span class="text">{{$ctrl.i18n.passGen}}</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="detail">{{i18n.bitWebVaultInfo}}</span>
<span class="text">{{$ctrl.i18n.bitWebVault}}</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="detail">{{i18n.bitIosVaultInfo}}</span>
<span class="text">{{$ctrl.i18n.bitIosVault}}</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="detail">{{i18n.bitAndrVaultInfo}}</span>
<span class="text">{{$ctrl.i18n.bitAndrVault}}</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="detail">{{i18n.shareVaultInfo}}</span>
<span class="text">{{$ctrl.i18n.shareVault}}</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="detail">{{i18n.importItemsInfo}}</span>
<span class="text">{{$ctrl.i18n.importItems}}</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="detail">{{i18n.exportVaultInfo}}</span>
<span class="text">{{$ctrl.i18n.exportVault}}</span>
<span class="detail">{{$ctrl.i18n.exportVaultInfo}}</span>
</a>
</div>
</div>