two-step login pages

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

@@ -1,9 +1,8 @@
 import {
-    ChangeDetectorRef,
     Component,
-    NgZone,
-    OnDestroy,
-    OnInit,
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
 } from '@angular/core';
 
 import { Router } from '@angular/router';
@@ -11,6 +10,10 @@ import { Router } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
+import { TwoFactorOptionsComponent } from './two-factor-options.component';
+
+import { ModalComponent } from '../modal.component';
+
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 
 import { ApiService } from 'jslib/abstractions/api.service';
@@ -20,31 +23,37 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 
-import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
-
 import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';
 
-const BroadcasterSubscriptionId = 'TwoFactorComponent';
-
 @Component({
     selector: 'app-two-factor',
     templateUrl: 'two-factor.component.html',
 })
 export class TwoFactorComponent extends BaseTwoFactorComponent {
-    showNewWindowMessage = false;
+    @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
 
     constructor(authService: AuthService, router: Router,
         analytics: Angulartics2, toasterService: ToasterService,
         i18nService: I18nService, apiService: ApiService,
-        platformUtilsService: PlatformUtilsService, syncService: SyncService,
-        environmentService: EnvironmentService, private ngZone: NgZone,
-        private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef) {
+        platformUtilsService: PlatformUtilsService, private syncService: SyncService,
+        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver) {
         super(authService, router, analytics, toasterService, i18nService, apiService,
             platformUtilsService, window, environmentService);
-        this.successRoute = '/vault';
     }
 
     anotherMethod() {
-        this.router.navigate(['2fa-options']);
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
+        const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
+            this.twoFactorOptionsModal);
+
+        childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
+            modal.close();
+            this.selectedProviderType = provider;
+            await this.init();
+        });
+        childComponent.onRecoverSelected.subscribe(() => {
+            modal.close();
+        });
     }
 }