settings modal

src/app/accounts/settings.component.html

@@ -0,0 +1,19 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div class="box">
+                    <div class="box-header">
+                        {{'settings' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        Something.
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/accounts/settings.component.ts

@@ -0,0 +1,29 @@
+import * as template from './settings.component.html';
+
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-settings',
+    template: template,
+})
+export class SettingsComponent implements OnInit {
+    constructor(private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService) { }
+
+    ngOnInit() {
+
+    }
+
+    submit() {
+
+    }
+}

src/app/app.component.ts

@@ -6,11 +6,17 @@ import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 
 import {
     Component,
+    ComponentFactoryResolver,
     NgZone,
     OnInit,
+    ViewChild,
+    ViewContainerRef,
 } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { ModalComponent } from './modal.component';
+import { SettingsComponent } from './accounts/settings.component';
+
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
@@ -37,9 +43,12 @@ import { ConstantsService } from 'jslib/services/constants.service';
     styles: [],
     template: `
         <toaster-container [toasterconfig]="toasterConfig"></toaster-container>
+        <ng-template #settings></ng-template>
         <router-outlet></router-outlet>`,
 })
 export class AppComponent implements OnInit {
+    @ViewChild('settings', { read: ViewContainerRef }) settingsRef: ViewContainerRef;
+
     toasterConfig: ToasterConfig = new ToasterConfig({
         showCloseButton: true,
         mouseoverTimerStop: true,
@@ -48,6 +57,7 @@ export class AppComponent implements OnInit {
     });
 
     private lastActivity: number = null;
+    private modal: ModalComponent = null;
 
     constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
         private broadcasterService: BroadcasterService, private userService: UserService,
@@ -58,7 +68,7 @@ export class AppComponent implements OnInit {
         private toasterService: ToasterService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private ngZone: NgZone,
         private lockService: LockService, private storageService: StorageService,
-        private cryptoService: CryptoService) { }
+        private cryptoService: CryptoService, private componentFactoryResolver: ComponentFactoryResolver) { }
 
     ngOnInit() {
         window.onmousemove = () => this.recordActivity();
@@ -88,6 +98,9 @@ export class AppComponent implements OnInit {
                         break;
                     case 'syncCompleted':
                         break;
+                    case 'openSettings':
+                        this.openSettings();
+                        break;
                     default:
                 }
             });
@@ -127,4 +140,18 @@ export class AppComponent implements OnInit {
         this.lastActivity = now;
         this.storageService.save(ConstantsService.lastActiveKey, now);
     }
+
+    private openSettings() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.settingsRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<SettingsComponent>(SettingsComponent, this.settingsRef);
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
 }

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
+import { SettingsComponent } from './accounts/settings.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
@@ -79,6 +80,7 @@ import { ViewComponent } from './vault/view.component';
         PasswordGeneratorComponent,
         RegisterComponent,
         SearchCiphersPipe,
+        SettingsComponent,
         StopClickDirective,
         StopPropDirective,
         TwoFactorComponent,
@@ -92,6 +94,7 @@ import { ViewComponent } from './vault/view.component';
         FolderAddEditComponent,
         ModalComponent,
         PasswordGeneratorComponent,
+        SettingsComponent,
         TwoFactorOptionsComponent,
     ],
     providers: [],