update jslib

That was the last of them, sorry for all the pull request spams :P

.gitignore

@@ -4,6 +4,7 @@ node_modules
 npm-debug.log
 vwd.webinfo
 dist/
+css/
 *.crx
 *.pem
 build/

README.md

@@ -14,9 +14,9 @@ Supported directories:
 
 The application is written using Electron with Angular and installs on Windows, macOS, and Linux distributions.
 
-<a href="https://help.bitwarden.com/article/directory-sync/#download-and-install"><img src="https://imgur.com/SLv9paA.png" width="500" height="113"></a>
+[![Platforms](https://imgur.com/SLv9paA.png "Windows, macOS, and Linux")](https://help.bitwarden.com/article/directory-sync/#download-and-install)
 
-![Directory Connector](http://imgur.com/I6FjN4j.png "Dashboard")
+![Directory Connector](https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/directory-connector-macos.png "Dashboard")
 
 # Build/Run
 

gulpfile.js

@@ -0,0 +1,31 @@
+const gulp = require('gulp');
+const googleWebFonts = require('gulp-google-webfonts');
+const del = require('del');
+
+const paths = {
+    cssDir: './src/css/',
+};
+
+function clean() {
+    return del([paths.cssDir]);
+}
+
+function webfonts() {
+    return gulp.src('./webfonts.list')
+        .pipe(googleWebFonts({
+            fontsDir: 'webfonts',
+            cssFilename: 'webfonts.css',
+            format: 'woff',
+        }))
+        .pipe(gulp.dest(paths.cssDir));
+}
+
+// ref: https://github.com/angular/angular/issues/22524
+function cleanupAotIssue() {
+    return del(['./node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts']);
+}
+
+gulp.task('clean', clean);
+gulp.task('cleanupAotIssue', cleanupAotIssue);
+gulp.task('webfonts', ['clean'], webfonts);
+gulp.task('prebuild:renderer', ['webfonts', 'cleanupAotIssue']);

package.json

@@ -26,8 +26,8 @@
     "lint:fix": "tslint src/**/*.ts --fix",
     "build": "concurrently -n Main,Rend -c yellow,cyan \"npm run build:main\" \"npm run build:renderer\"",
     "build:main": "webpack --config webpack.main.js",
-    "build:renderer": "webpack --config webpack.renderer.js",
-    "build:renderer:watch": "webpack --config webpack.renderer.js --watch",
+    "build:renderer": "gulp prebuild:renderer && webpack --config webpack.renderer.js",
+    "build:renderer:watch": "gulp prebuild:renderer && webpack --config webpack.renderer.js --watch",
     "electron": "npm run build:main && concurrently -k -n Main,Rend -c yellow,cyan \"electron --inspect=5858 ./build --watch\" \"npm run build:renderer:watch\"",
     "clean:dist": "rimraf ./dist/*",
     "pack:lin": "npm run clean:dist && build --linux --x64 -p never",
@@ -107,68 +107,73 @@
     }
   },
   "devDependencies": {
-    "@angular/compiler-cli": "5.2.0",
-    "@microsoft/microsoft-graph-types": "^1.2.0",
-    "@ngtools/webpack": "1.10.2",
-    "@types/keytar": "^4.0.1",
+    "@angular/compiler-cli": "^6.1.7",
+    "@microsoft/microsoft-graph-types": "^1.4.0",
+    "@ngtools/webpack": "^6.2.1",
     "@types/ldapjs": "^1.0.3",
-    "@types/lowdb": "^1.0.1",
-    "@types/lunr": "2.1.5",
-    "@types/node": "8.0.19",
-    "@types/node-forge": "0.7.1",
-    "@types/webcrypto": "0.0.28",
-    "clean-webpack-plugin": "^0.1.17",
-    "concurrently": "3.5.1",
-    "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^0.28.7",
-    "electron": "2.0.2",
-    "electron-builder": "^20.8.1",
-    "electron-rebuild": "1.7.3",
-    "electron-reload": "1.2.2",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
+    "@types/lowdb": "^1.0.5",
+    "@types/lunr": "^2.1.6",
+    "@types/node-forge": "^0.7.5",
+    "@types/papaparse": "^4.5.3",
+    "@types/semver": "^5.5.0",
+    "@types/source-map": "0.5.2",
+    "@types/webcrypto": "^0.0.28",
+    "@types/webpack": "^4.4.11",
+    "clean-webpack-plugin": "^0.1.19",
+    "concurrently": "^4.0.1",
+    "copy-webpack-plugin": "^4.5.2",
+    "css-loader": "^1.0.0",
+    "del": "^3.0.0",
+    "electron": "2.0.11",
+    "electron-builder": "^20.25.0",
+    "electron-rebuild": "1.8.1",
+    "electron-reload": "1.2.5",
+    "extract-text-webpack-plugin": "next",
+    "file-loader": "^2.0.0",
     "font-awesome": "4.7.0",
-    "google-fonts-webpack-plugin": "^0.4.4",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "gulp": "^3.9.1",
+    "gulp-google-webfonts": "^2.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
     "node-loader": "^0.6.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.3",
     "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
-    "ts-loader": "^3.5.0",
-    "tslint": "^5.9.1",
-    "tslint-loader": "^3.5.3",
-    "typescript": "^2.7.1",
-    "webpack": "^3.10.0",
-    "webpack-merge": "^4.1.0",
-    "webpack-node-externals": "^1.6.0"
+    "sass-loader": "^7.1.0",
+    "ts-loader": "^5.1.0",
+    "tslint": "^5.11.0",
+    "tslint-loader": "^3.6.0",
+    "typescript": "^2.7.2",
+    "webpack": "^4.18.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4",
+    "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
-    "@angular/animations": "5.2.0",
-    "@angular/common": "5.2.0",
-    "@angular/compiler": "5.2.0",
-    "@angular/core": "5.2.0",
-    "@angular/forms": "5.2.0",
-    "@angular/http": "5.2.0",
-    "@angular/platform-browser": "5.2.0",
-    "@angular/platform-browser-dynamic": "5.2.0",
-    "@angular/router": "5.2.0",
-    "@angular/upgrade": "5.2.0",
-    "@microsoft/microsoft-graph-client": "1.0.0",
-    "@okta/okta-sdk-nodejs": "1.1.0",
-    "angular2-toaster": "4.0.2",
-    "angulartics2": "5.0.1",
-    "bootstrap": "4.1.0",
-    "core-js": "2.4.1",
+    "@angular/animations": "6.1.7",
+    "@angular/common": "6.1.7",
+    "@angular/compiler": "6.1.7",
+    "@angular/core": "6.1.7",
+    "@angular/forms": "6.1.7",
+    "@angular/http": "6.1.7",
+    "@angular/platform-browser": "6.1.7",
+    "@angular/platform-browser-dynamic": "6.1.7",
+    "@angular/router": "6.1.7",
+    "@angular/upgrade": "6.1.7",
+    "@microsoft/microsoft-graph-client": "1.2.0",
+    "@okta/okta-sdk-nodejs": "1.2.0",
+    "angular2-toaster": "6.1.0",
+    "angulartics2": "6.3.0",
+    "bootstrap": "4.1.3",
+    "core-js": "2.5.7",
     "electron-log": "2.2.14",
-    "electron-updater": "2.21.4",
-    "googleapis": "29.0.0",
-    "keytar": "4.1.0",
+    "electron-updater": "3.0.3",
+    "googleapis": "33.0.0",
+    "keytar": "4.2.1",
     "ldapjs": "1.0.2",
     "lowdb": "1.0.0",
-    "lunr": "2.1.6",
-    "node-forge": "0.7.1",
-    "rxjs": "5.5.6",
-    "zone.js": "0.8.19"
+    "lunr": "2.3.3",
+    "node-forge": "0.7.6",
+    "rxjs": "6.3.2",
+    "zone.js": "0.8.26"
   }
 }

src/app/accounts/environment.component.ts

@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
 import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { EnvironmentComponent as BaseEnvironmentComponent } from 'jslib/angular/components/environment.component';
 
@@ -13,8 +11,8 @@ import { EnvironmentComponent as BaseEnvironmentComponent } from 'jslib/angular/
     templateUrl: 'environment.component.html',
 })
 export class EnvironmentComponent extends BaseEnvironmentComponent {
-    constructor(analytics: Angulartics2, toasterService: ToasterService,
-        environmentService: EnvironmentService, i18nService: I18nService) {
-        super(analytics, toasterService, environmentService, i18nService);
+    constructor(environmentService: EnvironmentService, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService) {
+        super(platformUtilsService, environmentService, i18nService);
     }
 }

src/app/accounts/login.component.html

@@ -9,7 +9,7 @@
                     <div class="card-body">
                         <div class="form-group">
                             <label for="email">{{'emailAddress' | i18n}}</label>
-                            <input id="email" type="text" name="Email" [(ngModel)]="email" class="form-control" appAutoFocus>
+                            <input id="email" type="text" name="Email" [(ngModel)]="email" class="form-control">
                         </div>
                         <div class="form-group">
                             <div class="row-main">

src/app/accounts/login.component.ts

@@ -6,14 +6,12 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
 import { EnvironmentComponent } from './environment.component';
 
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
-import { SyncService } from 'jslib/abstractions/sync.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/login.component';
 import { ModalComponent } from 'jslib/angular/components/modal.component';
@@ -26,9 +24,9 @@ export class LoginComponent extends BaseLoginComponent {
     @ViewChild('environment', { read: ViewContainerRef }) environmentModal: ViewContainerRef;
 
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
-        i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) {
-        super(authService, router, analytics, toasterService, i18nService);
+        i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        storageService: StorageService, platformUtilsService: PlatformUtilsService) {
+        super(authService, router, platformUtilsService, i18nService, storageService);
         super.successRoute = '/tabs/dashboard';
     }
 

src/app/accounts/two-factor-options.component.html

@@ -9,7 +9,7 @@
             </div>
             <div class="modal-body">
                 <p *ngFor="let p of providers">
-                    <a href="#" (click)="choose(p)">
+                    <a href="#" appStopClick (click)="choose(p)">
                         <strong>{{p.name}}</strong>
                     </a>
                     <br /> {{p.description}}

src/app/accounts/two-factor-options.component.ts

@@ -1,9 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
@@ -18,8 +15,7 @@ import {
 })
 export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
         i18nService: I18nService, platformUtilsService: PlatformUtilsService) {
-        super(authService, router, analytics, toasterService, i18nService, platformUtilsService, window);
+        super(authService, router, i18nService, platformUtilsService, window);
     }
 }

src/app/accounts/two-factor.component.html

@@ -19,7 +19,7 @@
                         </ng-container>
                         <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
                             <p>{{'insertYubiKey' | i18n}}</p>
-                            <img src="../../images/yubikey.jpg" alt="">
+                            <p><img src="../../images/yubikey.jpg" class="img-fluid rounded" alt=""></p>
                             <div class="form-group">
                                 <label for="code">{{'verificationCode' | i18n}}</label>
                                 <input id="code" type="password" name="Code" [(ngModel)]="token" appAutofocus class="form-control">
@@ -31,7 +31,7 @@
                                 <iframe id="duo_iframe"></iframe>
                             </div>
                         </ng-container>
-                        <div class="form-group" *ngIf="selectedProviderType !== null && selectedProviderType !== providerType.U2f">
+                        <div class="form-group" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.U2f">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="remember" [(ngModel)]="remember" name="Remember">
                                 <label class="form-check-label" for="remember">{{'rememberMe' | i18n}}</label>

src/app/accounts/two-factor.component.ts

@@ -7,9 +7,6 @@ import {
 
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
 import { TwoFactorOptionsComponent } from './two-factor-options.component';
 
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
@@ -19,7 +16,6 @@ import { AuthService } from 'jslib/abstractions/auth.service';
 import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { SyncService } from 'jslib/abstractions/sync.service';
 
 import { ModalComponent } from 'jslib/angular/components/modal.component';
 import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';
@@ -32,12 +28,10 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
 
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
         private componentFactoryResolver: ComponentFactoryResolver) {
-        super(authService, router, analytics, toasterService, i18nService, apiService,
-            platformUtilsService, window, environmentService);
+        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService);
         super.successRoute = '/tabs/dashboard';
     }
 

src/app/app.component.ts

@@ -1,24 +1,26 @@
 import {
+    BodyOutputType,
+    Toast,
     ToasterConfig,
     ToasterContainerComponent,
+    ToasterService,
 } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 
 import {
     Component,
     ComponentFactoryResolver,
     NgZone,
-    OnDestroy,
     OnInit,
+    SecurityContext,
     Type,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
 import { ModalComponent } from 'jslib/angular/components/modal.component';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
@@ -27,14 +29,11 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StateService } from 'jslib/abstractions/state.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
-import { ConstantsService } from 'jslib/services/constants.service';
-
 import { ConfigurationService } from '../services/configuration.service';
 import { SyncService } from '../services/sync.service';
 
@@ -66,12 +65,12 @@ export class AppComponent implements OnInit {
         private tokenService: TokenService, private storageService: StorageService,
         private authService: AuthService, private router: Router, private analytics: Angulartics2,
         private toasterService: ToasterService, private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService, private ngZone: NgZone,
+        private sanitizer: DomSanitizer, private ngZone: NgZone,
         private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
         private configurationService: ConfigurationService, private syncService: SyncService,
         private stateService: StateService, private apiService: ApiService) {
-            (window as any).BitwardenToasterService = toasterService;
-        }
+        (window as any).BitwardenToasterService = toasterService;
+    }
 
     ngOnInit() {
         this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
@@ -125,6 +124,15 @@ export class AppComponent implements OnInit {
 
                         this.messagingService.send('scheduleNextDirSync');
                         break;
+                    case 'showToast':
+                        this.showToast(message);
+                        break;
+                    case 'analyticsEventTrack':
+                        this.analytics.eventTrack.next({
+                            action: message.action,
+                            properties: { label: message.label },
+                        });
+                        break;
                     default:
                 }
             });
@@ -166,4 +174,31 @@ export class AppComponent implements OnInit {
             this.modal = null;
         });
     }
+
+    private showToast(msg: any) {
+        const toast: Toast = {
+            type: msg.type,
+            title: msg.title,
+        };
+        if (typeof (msg.text) === 'string') {
+            toast.body = msg.text;
+        } else if (msg.text.length === 1) {
+            toast.body = msg.text[0];
+        } else {
+            let message = '';
+            msg.text.forEach((t: string) =>
+                message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
+            toast.body = message;
+            toast.bodyOutputType = BodyOutputType.TrustedHtml;
+        }
+        if (msg.options != null) {
+            if (msg.options.trustedHtml === true) {
+                toast.bodyOutputType = BodyOutputType.TrustedHtml;
+            }
+            if (msg.options.timeout != null && msg.options.timeout > 0) {
+                toast.timeout = msg.options.timeout;
+            }
+        }
+        this.toasterService.popAsync(toast);
+    }
 }

src/app/app.module.ts

@@ -50,7 +50,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
                 clearQueryParams: true,
             },
         }),
-        ToasterModule,
+        ToasterModule.forRoot(),
     ],
     declarations: [
         ApiActionDirective,

src/app/dummy.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { InputVerbatimDirective } from 'jslib/angular/directives/input-verbatim.directive';
+import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';
+import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
+
+@NgModule({
+    imports: [],
+    declarations: [
+        InputVerbatimDirective,
+        TrueFalseValueDirective,
+        SearchPipe,
+    ],
+})
+export class DummyModule {
+}

src/app/main.ts

@@ -5,8 +5,6 @@ import { isDev } from 'jslib/electron/utils';
 
 // tslint:disable-next-line
 require('../scss/styles.scss');
-// tslint:disable-next-line
-require('../../jslib/src/misc/duo.js');
 
 import { AppModule } from './app.module';
 
@@ -14,4 +12,4 @@ if (!isDev()) {
     enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });

src/app/services/services.module.ts

@@ -11,7 +11,6 @@ import { ElectronLogService } from 'jslib/electron/services/electronLog.service'
 import { ElectronPlatformUtilsService } from 'jslib/electron/services/electronPlatformUtils.service';
 import { ElectronRendererMessagingService } from 'jslib/electron/services/electronRendererMessaging.service';
 import { ElectronRendererSecureStorageService } from 'jslib/electron/services/electronRendererSecureStorage.service';
-import { isDev } from 'jslib/electron/utils';
 
 import { AuthGuardService } from './auth-guard.service';
 import { LaunchGuardService } from './launch-guard.service';
@@ -56,9 +55,9 @@ import { UserService as UserServiceAbstraction } from 'jslib/abstractions/user.s
 const logService = new ElectronLogService();
 const i18nService = new I18nService(window.navigator.language, './locales');
 const stateService = new StateService();
-const platformUtilsService = new ElectronPlatformUtilsService(i18nService, true);
 const broadcasterService = new BroadcasterService();
 const messagingService = new ElectronRendererMessagingService(broadcasterService);
+const platformUtilsService = new ElectronPlatformUtilsService(i18nService, messagingService, true);
 const storageService: StorageServiceAbstraction = new LowdbStorageService(null, remote.app.getPath('userData'));
 const secureStorageService: StorageServiceAbstraction = new ElectronRendererSecureStorageService();
 const cryptoFunctionService: CryptoFunctionServiceAbstraction = new NodeCryptoFunctionService();
@@ -67,9 +66,9 @@ const appIdService = new AppIdService(storageService);
 const tokenService = new TokenService(storageService);
 const apiService = new ApiService(tokenService, platformUtilsService,
     async (expired: boolean) => messagingService.send('logout', { expired: expired }));
-const environmentService = new EnvironmentService(apiService, storageService);
+const environmentService = new EnvironmentService(apiService, storageService, null);
 const userService = new UserService(tokenService, storageService);
-const containerService = new ContainerService(cryptoService, platformUtilsService);
+const containerService = new ContainerService(cryptoService);
 const authService = new AuthService(cryptoService, apiService, userService, tokenService, appIdService,
     i18nService, platformUtilsService, messagingService, false);
 const configurationService = new ConfigurationService(storageService, secureStorageService);
@@ -78,14 +77,12 @@ const syncService = new SyncService(configurationService, logService, cryptoFunc
 
 const analytics = new Analytics(window, () => true, platformUtilsService, storageService, appIdService);
 containerService.attachToWindow(window);
-environmentService.setUrlsFromStorage().then(() => {
-    // Do nothing
-});
 
 export function initFactory(): Function {
     return async () => {
+        await environmentService.setUrlsFromStorage();
         await i18nService.init();
-        await authService.init();
+        authService.init();
         const htmlEl = window.document.documentElement;
         htmlEl.classList.add('os_' + platformUtilsService.getDeviceString());
         htmlEl.classList.add('locale_' + i18nService.translationLocale);

src/app/tabs/settings.component.html

@@ -27,14 +27,38 @@
                     </div>
                     <div class="form-group">
                         <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="ssl" [(ngModel)]="ldap.ssl" name="SSL">
-                            <label class="form-check-label" for="ssl">{{'ldapSsl' | i18n}}</label>
+                            <input class="form-check-input" type="checkbox" id="ad" [(ngModel)]="ldap.ad" name="AD">
+                            <label class="form-check-label" for="ad">{{'ldapAd' | i18n}}</label>
                         </div>
                     </div>
                     <div class="form-group">
                         <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="ad" [(ngModel)]="ldap.ad" name="AD">
-                            <label class="form-check-label" for="ad">{{'ldapAd' | i18n}}</label>
+                            <input class="form-check-input" type="checkbox" id="ssl" [(ngModel)]="ldap.ssl" name="SSL">
+                            <label class="form-check-label" for="ssl">{{'ldapSsl' | i18n}}</label>
+                        </div>
+                    </div>
+                    <div class="ml-4" *ngIf="ldap.ssl">
+                        <p>{{'ldapSslUntrustedDesc' | i18n}}</p>
+                        <div class="form-group">
+                            <label for="sslCertPath">{{'ldapSslCert' | i18n}}</label>
+                            <input type="file" class="form-control-file mb-2" id="sslCertPath_file" (change)="setSslPath('sslCertPath')">
+                            <input type="text" class="form-control" id="sslCertPath" name="SSLCertPath" [(ngModel)]="ldap.sslCertPath">
+                        </div>
+                        <div class="form-group">
+                            <label for="sslKeyPath">{{'ldapSslKey' | i18n}}</label>
+                            <input type="file" class="form-control-file mb-2" id="sslKeyPath_file" (change)="setSslPath('sslKeyPath')">
+                            <input type="text" class="form-control" id="sslKeyPath" name="SSLKeyPath" [(ngModel)]="ldap.sslKeyPath">
+                        </div>
+                        <div class="form-group">
+                            <label for="sslCaPath">{{'ldapSslCa' | i18n}}</label>
+                            <input type="file" class="form-control-file mb-2" id="sslCaPath_file" (change)="setSslPath('sslCaPath')">
+                            <input type="text" class="form-control" id="sslCaPath" name="SSLCaPath" [(ngModel)]="ldap.sslCaPath">
+                        </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="sslAllowUnauthorized" [(ngModel)]="ldap.sslAllowUnauthorized" name="SSLAllowUnauthorized">
+                                <label class="form-check-label" for="sslAllowUnauthorized">{{'ldapSslAllowUnauthorized' | i18n}}</label>
+                            </div>
                         </div>
                     </div>
                     <div class="form-group" [hidden]="true">

src/app/tabs/settings.component.ts

@@ -111,7 +111,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
         await this.configurationService.saveSync(this.sync);
     }
 
-    async parseKeyFile() {
+    parseKeyFile() {
         const filePicker = (document.getElementById('keyFile') as HTMLInputElement);
         if (filePicker.files == null || filePicker.files.length < 0) {
             return;
@@ -122,7 +122,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
         reader.onload = (evt) => {
             this.ngZone.run(async () => {
                 try {
-                    const result = JSON.parse((evt.target as FileReader).result);
+                    const result = JSON.parse((evt.target as FileReader).result as string);
                     if (result.client_email != null && result.private_key != null) {
                         this.gsuite.clientEmail = result.client_email;
                         this.gsuite.privateKey = result.private_key;
@@ -138,4 +138,18 @@ export class SettingsComponent implements OnInit, OnDestroy {
             filePicker.value = '';
         };
     }
+
+    setSslPath(id: string) {
+        const filePicker = (document.getElementById(id + '_file') as HTMLInputElement);
+        if (filePicker.files == null || filePicker.files.length < 0) {
+            return;
+        }
+
+        (this.ldap as any)[id] = filePicker.files[0].path;
+        // reset file input
+        // ref: https://stackoverflow.com/a/20552042
+        filePicker.type = '';
+        filePicker.type = 'file';
+        filePicker.value = '';
+    }
 }

src/index.html

@@ -2,6 +2,8 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';
+        img-src 'self' data: *; child-src *; frame-src *; connect-src *;">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bitwarden Directory Connector</title>
     <base href="">

src/locales/en/messages.json

@@ -417,6 +417,21 @@
     "ldapSsl": {
         "message": "This server uses SSL (LDAPS)"
     },
+    "ldapSslUntrustedDesc": {
+        "message": "If your LDAPS server uses an untrusted certificate you can configure certificate options below."
+    },
+    "ldapSslCa": {
+        "message": "Certificate CA Chain (PEM)"
+    },
+    "ldapSslCert": {
+        "message": "Certificate (PEM)"
+    },
+    "ldapSslKey": {
+        "message": "Certificate Private Key (PEM)"
+    },
+    "ldapSslAllowUnauthorized": {
+        "message": "Allow untrusted SSL connections (not recommended)."
+    },
     "ldapAd": {
         "message": "This server uses Active Directory"
     },

src/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron';
+import { app } from 'electron';
 import * as path from 'path';
 
 import { MenuMain } from './main/menu.main';

src/models/ldapConfiguration.ts

@@ -1,7 +1,9 @@
-import { DirectoryType } from '../enums/directoryType';
-
 export class LdapConfiguration {
     ssl = false;
+    sslAllowUnauthorized = false;
+    sslCertPath: string;
+    sslKeyPath: string;
+    sslCaPath: string;
     hostname: string;
     port = 389;
     domain: string;

src/package.json

@@ -2,7 +2,7 @@
   "name": "bitwarden-directory-connector",
   "productName": "Bitwarden Directory Connector",
   "description": "Sync your user directory to your Bitwarden organization.",
-  "version": "2.0.2",
+  "version": "2.4.0",
   "author": "8bit Solutions LLC <hello@bitwarden.com> (https://bitwarden.com)",
   "homepage": "https://bitwarden.com",
   "license": "GPL-3.0",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "electron-log": "2.2.14",
-    "electron-updater": "2.21.4",
-    "keytar": "4.1.0",
+    "electron-updater": "3.0.3",
+    "keytar": "4.2.1",
     "lowdb": "1.0.0"
   }
 }

src/scss/plugins.scss

@@ -35,6 +35,16 @@ $fa-font-path: "~font-awesome/fonts";
             display: none;
         }
 
+        .toast-message {
+            p {
+                margin-bottom: 0.5rem;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
         &.toast-danger, &.toast-error {
             background-image: none !important;
             background-color: $danger;

src/scss/styles.scss

@@ -1,4 +1,5 @@
-@import "bootstrap.scss";
+@import "../css/webfonts.css";
+@import "bootstrap.scss";
 @import "pages.scss";
 @import "misc.scss";
 @import "plugins.scss";

src/services/azure-directory.service.ts

@@ -59,7 +59,7 @@ export class AzureDirectoryService extends BaseDirectoryService implements Direc
         let groups: GroupEntry[];
         if (this.syncConfig.groups) {
             const setFilter = this.createCustomSet(this.syncConfig.groupFilter);
-            groups = await this.getGroups(this.forceGroup(force, users), !test, setFilter);
+            groups = await this.getGroups(setFilter);
             users = this.filterUsersFromGroupsSet(users, groups, setFilter);
         }
 
@@ -67,6 +67,7 @@ export class AzureDirectoryService extends BaseDirectoryService implements Direc
     }
 
     private async getUsers(force: boolean, saveDelta: boolean): Promise<UserEntry[]> {
+        const entryIds = new Set<string>();
         const entries: UserEntry[] = [];
 
         let res: any = null;
@@ -90,6 +91,9 @@ export class AzureDirectoryService extends BaseDirectoryService implements Direc
             const users: graphType.User[] = res.value;
             if (users != null) {
                 for (const user of users) {
+                    if (user.id == null || entryIds.has(user.id)) {
+                        continue;
+                    }
                     const entry = this.buildUser(user);
                     if (this.filterOutResult(setFilter, entry.email)) {
                         continue;
@@ -101,6 +105,7 @@ export class AzureDirectoryService extends BaseDirectoryService implements Direc
                     }
 
                     entries.push(entry);
+                    entryIds.add(user.id);
                 }
             }
 
@@ -122,7 +127,17 @@ export class AzureDirectoryService extends BaseDirectoryService implements Direc
         const entry = new UserEntry();
         entry.referenceId = user.id;
         entry.externalId = user.id;
-        entry.email = user.mail || user.userPrincipalName;
+        entry.email = user.mail;
+
+        if (user.userPrincipalName && (entry.email == null || entry.email === '' ||
+            entry.email.indexOf('onmicrosoft.com') > -1)) {
+            entry.email = user.userPrincipalName;
+        }
+
+        if (entry.email != null) {
+            entry.email = entry.email.trim().toLowerCase();
+        }
+
         entry.disabled = user.accountEnabled == null ? false : !user.accountEnabled;
 
         if ((user as any)['@removed'] != null && (user as any)['@removed'].reason === 'changed') {
@@ -132,77 +147,25 @@ export class AzureDirectoryService extends BaseDirectoryService implements Direc
         return entry;
     }
 
-    private async getGroups(force: boolean, saveDelta: boolean,
-        setFilter: [boolean, Set<string>]): Promise<GroupEntry[]> {
+    private async getGroups(setFilter: [boolean, Set<string>]): Promise<GroupEntry[]> {
+        const entryIds = new Set<string>();
         const entries: GroupEntry[] = [];
-        const changedGroupIds: string[] = [];
-        const token = await this.configurationService.getGroupDeltaToken();
-        const getFullResults = token == null || force;
-        let res: any = null;
-        let errored = false;
-
-        try {
-            if (!getFullResults) {
-                try {
-                    const deltaReq = this.client.api(token);
-                    res = await deltaReq.get();
-                } catch {
-                    res = null;
-                }
-            }
-
-            if (res == null) {
-                const groupReq = this.client.api('/groups/delta');
-                res = await groupReq.get();
-            }
-
-            while (true) {
-                const groups: graphType.Group[] = res.value;
-                if (groups != null) {
-                    for (const group of groups) {
-                        if (getFullResults) {
-                            if (this.filterOutResult(setFilter, group.displayName)) {
-                                continue;
-                            }
-
-                            const entry = await this.buildGroup(group);
-                            entries.push(entry);
-                        } else {
-                            changedGroupIds.push(group.id);
-                        }
-                    }
-                }
-
-                if (res[NextLink] == null) {
-                    if (res[DeltaLink] != null && saveDelta) {
-                        await this.configurationService.saveGroupDeltaToken(res[DeltaLink]);
-                    }
-                    break;
-                } else {
-                    const nextReq = this.client.api(res[NextLink]);
-                    res = await nextReq.get();
-                }
-            }
-        } catch {
-            errored = true;
-        }
-
-        if (!errored && (getFullResults || changedGroupIds.length === 0)) {
-            return entries;
-        }
-
-        const allGroupsReq = this.client.api('/groups');
-        res = await allGroupsReq.get();
+        const groupsReq = this.client.api('/groups');
+        let res = await groupsReq.get();
         while (true) {
-            const allGroups: graphType.Group[] = res.value;
-            if (allGroups != null) {
-                for (const group of allGroups) {
+            const groups: graphType.Group[] = res.value;
+            if (groups != null) {
+                for (const group of groups) {
+                    if (group.id == null || entryIds.has(group.id)) {
+                        continue;
+                    }
                     if (this.filterOutResult(setFilter, group.displayName)) {
                         continue;
                     }
 
                     const entry = await this.buildGroup(group);
                     entries.push(entry);
+                    entryIds.add(group.id);
                 }
             }
 

src/services/baseDirectory.service.ts

@@ -51,13 +51,13 @@ export abstract class BaseDirectoryService {
 
     protected filterOutResult(setFilter: [boolean, Set<string>], result: string) {
         if (setFilter != null) {
-            result = result.trim().toLowerCase();
+            const cleanResult = result != null ? result.trim().toLowerCase() : '--';
             const excluded = setFilter[0];
             const set = setFilter[1];
 
-            if (excluded && set.has(result)) {
+            if (excluded && set.has(cleanResult)) {
                 return true;
-            } else if (!excluded && !set.has(result)) {
+            } else if (!excluded && !set.has(cleanResult)) {
                 return true;
             }
         }

src/services/gsuite-directory.service.ts

@@ -1,13 +1,8 @@
 import { JWT } from 'google-auth-library';
 import {
+    admin_directory_v1,
     google,
-    GoogleApis,
 } from 'googleapis';
-import {
-    Admin,
-    Schema$Group,
-    Schema$User,
-} from 'googleapis/build/src/apis/admin/directory_v1';
 
 import { DirectoryType } from '../enums/directoryType';
 
@@ -25,7 +20,7 @@ import { LogService } from 'jslib/abstractions/log.service';
 
 export class GSuiteDirectoryService extends BaseDirectoryService implements DirectoryService {
     private client: JWT;
-    private service: Admin;
+    private service: admin_directory_v1.Admin;
     private authParams: any;
     private dirConfig: GSuiteConfiguration;
     private syncConfig: SyncConfiguration;
@@ -33,7 +28,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
     constructor(private configurationService: ConfigurationService, private logService: LogService,
         private i18nService: I18nService) {
         super();
-        this.service = google.admin<Admin>('directory_v1');
+        this.service = google.admin('directory_v1');
     }
 
     async getEntries(force: boolean, test: boolean): Promise<[GroupEntry[], UserEntry[]]> {
@@ -117,7 +112,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
         return entries;
     }
 
-    private buildUser(user: Schema$User, deleted: boolean) {
+    private buildUser(user: admin_directory_v1.Schema$User, deleted: boolean) {
         if ((user.emails == null || user.emails === '') && !deleted) {
             return null;
         }
@@ -125,7 +120,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
         const entry = new UserEntry();
         entry.referenceId = user.id;
         entry.externalId = user.id;
-        entry.email = user.primaryEmail;
+        entry.email = user.primaryEmail != null ? user.primaryEmail.trim().toLowerCase() : null;
         entry.disabled = user.suspended || false;
         entry.deleted = deleted;
         return entry;
@@ -151,7 +146,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
         return entries;
     }
 
-    private async buildGroup(group: Schema$Group) {
+    private async buildGroup(group: admin_directory_v1.Schema$Group) {
         const entry = new GroupEntry();
         entry.referenceId = group.id;
         entry.externalId = group.id;

src/services/ldap-directory.service.ts

@@ -1,3 +1,4 @@
+import * as fs from 'fs';
 import * as ldap from 'ldapjs';
 
 import { DirectoryType } from '../enums/directoryType';
@@ -108,10 +109,14 @@ export class LdapDirectoryService implements DirectoryService {
             this.syncConfig.emailPrefixAttribute != null && this.syncConfig.emailSuffix != null) {
             const prefixAttr = this.getAttr(searchEntry, this.syncConfig.emailPrefixAttribute);
             if (prefixAttr != null) {
-                user.email = (prefixAttr + this.syncConfig.emailSuffix).toLowerCase();
+                user.email = prefixAttr + this.syncConfig.emailSuffix;
             }
         }
 
+        if (user.email != null) {
+            user.email = user.email.trim().toLowerCase();
+        }
+
         if (!user.deleted && (user.email == null || user.email.trim() === '')) {
             return null;
         }
@@ -322,10 +327,32 @@ export class LdapDirectoryService implements DirectoryService {
 
             const url = 'ldap' + (this.dirConfig.ssl ? 's' : '') + '://' + this.dirConfig.hostname +
                 ':' + this.dirConfig.port;
+            const options: ldap.ClientOptions = {
+                url: url.trim().toLowerCase(),
+            };
+            if (this.dirConfig.ssl) {
+                const tlsOptions: any = {};
+                if (this.dirConfig.sslAllowUnauthorized != null) {
+                    tlsOptions.rejectUnauthorized = !this.dirConfig.sslAllowUnauthorized;
+                }
+                if (this.dirConfig.sslCaPath != null && this.dirConfig.sslCaPath !== '' &&
+                    fs.existsSync(this.dirConfig.sslCaPath)) {
+                    tlsOptions.ca = [fs.readFileSync(this.dirConfig.sslCaPath)];
+                }
+                if (this.dirConfig.sslCertPath != null && this.dirConfig.sslCertPath !== '' &&
+                    fs.existsSync(this.dirConfig.sslCertPath)) {
+                    tlsOptions.cert = fs.readFileSync(this.dirConfig.sslCertPath);
+                }
+                if (this.dirConfig.sslKeyPath != null && this.dirConfig.sslKeyPath !== '' &&
+                    fs.existsSync(this.dirConfig.sslKeyPath)) {
+                    tlsOptions.key = fs.readFileSync(this.dirConfig.sslKeyPath);
+                }
+                if (Object.keys(tlsOptions).length > 0) {
+                    options.tlsOptions = tlsOptions;
+                }
+            }
 
-            this.client = ldap.createClient({
-                url: url.toLowerCase(),
-            });
+            this.client = ldap.createClient(options);
 
             const user = this.dirConfig.username == null || this.dirConfig.username.trim() === '' ? null :
                 this.dirConfig.username;

src/services/okta-directory.service.ts

@@ -104,7 +104,7 @@ export class OktaDirectoryService extends BaseDirectoryService implements Direct
         const entry = new UserEntry();
         entry.externalId = user.id;
         entry.referenceId = user.id;
-        entry.email = user.profile.email;
+        entry.email = user.profile.email != null ? user.profile.email.trim().toLowerCase() : null;
         entry.deleted = user.status === 'DEPROVISIONED';
         entry.disabled = user.status === 'SUSPENDED';
         return entry;

src/services/sync.service.ts

@@ -13,7 +13,6 @@ import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { LogService } from 'jslib/abstractions/log.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Utils } from 'jslib/misc/utils';
 
@@ -24,9 +23,6 @@ import { GSuiteDirectoryService } from './gsuite-directory.service';
 import { LdapDirectoryService } from './ldap-directory.service';
 import { OktaDirectoryService } from './okta-directory.service';
 
-const Keys = {
-};
-
 export class SyncService {
     private dirType: DirectoryType;
 
@@ -73,7 +69,7 @@ export class SyncService {
             const reqJson = JSON.stringify(req);
 
             let hash: string = null;
-            const hashBuf = await this.cryptoFunctionService.hash(this.apiService.baseUrl + reqJson, 'sha256');
+            const hashBuf = await this.cryptoFunctionService.hash(this.apiService.apiBaseUrl + reqJson, 'sha256');
             if (hashBuf != null) {
                 hash = Utils.fromBufferToB64(hashBuf);
             }
@@ -149,6 +145,9 @@ export class SyncService {
             for (const u of users) {
                 const iu = new ImportDirectoryRequestUser();
                 iu.email = u.email;
+                if (iu.email != null) {
+                    iu.email = iu.email.trim().toLowerCase();
+                }
                 iu.externalId = u.externalId;
                 iu.deleted = u.deleted || (removeDisabled && u.disabled);
                 model.users.push(iu);

tsconfig.json

@@ -11,23 +11,26 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
+      "tldjs": [
+        "jslib/src/misc/tldjs.noop"
+      ],
       "jslib/*": [
         "jslib/src/*"
       ],
       "@angular/*": [
         "node_modules/@angular/*"
       ],
-      "angular2-toaster": [
-        "node_modules/angular2-toaster"
-      ],
-      "angulartics2": [
-        "node_modules/angulartics2"
-      ],
       "electron": [
         "node_modules/electron"
+      ],
+      "node": [
+        "node_modules/@types/node"
       ]
     }
   },
+  "angularCompilerOptions": {
+    "preserveWhitespaces": true
+  },
   "exclude": [
     "node_modules",
     "jslib/node_modules",
@@ -35,7 +38,9 @@
     "jslib/src/services/search.service.ts",
     "jslib/src/services/nodeApi.service.ts",
     "jslib/src/services/export.service.ts",
+    "jslib/src/services/notifications.service.ts",
     "jslib/src/angular/components/export.component.ts",
+    "jslib/src/importers",
     "dist",
     "jslib/dist",
     "build",

tslint.json

@@ -48,6 +48,7 @@
       "check-preblock",
       "check-separator",
       "check-type"
-    ]
+    ],
+    "max-classes-per-file": false
   }
 }

webfonts.list

@@ -0,0 +1 @@
+Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext

webpack.main.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
@@ -11,48 +10,53 @@ const common = {
             {
                 test: /\.ts$/,
                 enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
             },
             {
                 test: /\.tsx?$/,
                 use: 'ts-loader',
-                exclude: /node_modules\/(?!(@bitwarden)\/).*/
+                exclude: /node_modules\/(?!(@bitwarden)\/).*/,
             },
-        ]
+        ],
     },
     plugins: [],
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
-            jslib: path.join(__dirname, 'jslib/src')
-        }
+            jslib: path.join(__dirname, 'jslib/src'),
+            tldjs: path.join(__dirname, 'jslib/src/misc/tldjs.noop'),
+        },
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
+        path: path.resolve(__dirname, 'build'),
+    },
 };
 
 const main = {
+    mode: 'production',
     target: 'electron-main',
     node: {
         __dirname: false,
-        __filename: false
+        __filename: false,
     },
     entry: {
-        'main': './src/main.ts'
+        'main': './src/main.ts',
+    },
+    optimization: {
+        minimize: false,
     },
     module: {
         rules: [
             {
                 test: /\.node$/,
-                loader: 'node-loader'
+                loader: 'node-loader',
             },
-        ]
+        ],
     },
     plugins: [
         new CleanWebpackPlugin([
-            path.resolve(__dirname, 'build/*')
+            path.resolve(__dirname, 'build/*'),
         ]),
         new CopyWebpackPlugin([
             './src/package.json',
@@ -60,7 +64,7 @@ const main = {
             { from: './src/locales', to: 'locales' },
         ]),
     ],
-    externals: [nodeExternals()]
+    externals: [nodeExternals()],
 };
 
 module.exports = merge(common, main);

webpack.renderer.js

@@ -2,21 +2,13 @@ const path = require('path');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const GoogleFontsPlugin = require("google-fonts-webpack-plugin");
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 
-const isVendorModule = (module) => {
-    if (!module.context) {
-        return false;
-    }
-    return module.context.indexOf('node_modules') !== -1;
-};
-
 const extractCss = new ExtractTextPlugin({
     filename: '[name].css',
     disable: false,
-    allChunks: true
+    allChunks: true,
 });
 
 const common = {
@@ -25,11 +17,11 @@ const common = {
             {
                 test: /\.ts$/,
                 enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
             },
             {
                 test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                loader: '@ngtools/webpack'
+                loader: '@ngtools/webpack',
             },
             {
                 test: /\.(jpe?g|png|gif|svg)$/i,
@@ -39,39 +31,54 @@ const common = {
                     options: {
                         name: '[name].[ext]',
                         outputPath: 'images/',
-                    }
-                }]
-            }
-        ]
+                    },
+                }],
+            },
+        ],
     },
     plugins: [],
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.json'],
         alias: {
-            jslib: path.join(__dirname, 'jslib/src')
+            jslib: path.join(__dirname, 'jslib/src'),
         },
         symlinks: false,
-        modules: [path.resolve('node_modules')]
+        modules: [path.resolve('node_modules')],
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
+        path: path.resolve(__dirname, 'build'),
+    },
 };
 
 const renderer = {
+    mode: 'production',
     target: 'electron-renderer',
     node: {
-        __dirname: false
+        __dirname: false,
     },
     entry: {
-        'app/main': './src/app/main.ts'
+        'app/main': './src/app/main.ts',
+    },
+    optimization: {
+        minimize: false,
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'app/vendor',
+                    chunks: (chunk) => {
+                        return chunk.name === 'app/main';
+                    },
+                },
+            },
+        },
     },
     module: {
         rules: [
             {
                 test: /\.(html)$/,
-                loader: 'html-loader'
+                loader: 'html-loader',
             },
             {
                 test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
@@ -80,9 +87,9 @@ const renderer = {
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]',
-                        outputPath: 'fonts/'
-                    }
-                }]
+                        outputPath: 'fonts/',
+                    },
+                }],
             },
             {
                 test: /\.scss$/,
@@ -93,40 +100,27 @@ const renderer = {
                         },
                         {
                             loader: 'sass-loader',
-                        }
+                        },
                     ],
-                    publicPath: '../'
+                    publicPath: '../',
                 })
             },
-        ]
+            // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
+            {
+                test: /[\/\\]@angular[\/\\].+\.js$/,
+                parser: { system: true },
+            },
+        ],
     },
     plugins: [
-        new GoogleFontsPlugin({
-            fonts: [
-                {
-                    family: 'Open Sans',
-                    variants: ['300', '300italic', '400', '400italic', '600', '600italic',
-                        '700', '700italic', '800', '800italic'],
-                    subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext']
-                }
-            ],
-            formats: ['woff2'],
-            path: 'fonts/',
-            filename: 'css/fonts.css'
-        }),
         new AngularCompilerPlugin({
             tsConfigPath: 'tsconfig.json',
             entryModule: 'src/app/app.module#AppModule',
-            sourceMap: true
+            sourceMap: true,
         }),
         // ref: https://github.com/angular/angular/issues/20357
-        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
+        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm5/,
             path.resolve(__dirname, './src')),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'app/vendor',
-            chunks: ['app/main'],
-            minChunks: isVendorModule
-        }),
         new HtmlWebpackPlugin({
             template: './src/index.html',
             filename: 'index.html',
@@ -137,8 +131,8 @@ const renderer = {
             include: ['app/main.js']
         }),
         new webpack.DefinePlugin({ 'global.GENTLY': false }),
-        extractCss
-    ]
+        extractCss,
+    ],
 };
 
 module.exports = merge(common, renderer);