User named route in dialog.

2 files changed, 22 insertions, 26 deletions

diff --git a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html
index 50d6ba56..58dff0e4 100644
--- a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html
+++ b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html
@@ -1,5 +1,4 @@
-<div [ngSwitch]="state" class="container">
-  <mat-progress-spinner *ngSwitchCase="'loading'" mode="indeterminate" diameter="50"></mat-progress-spinner>
-  <app-user-login *ngSwitchCase="'login'" (login)="login($event)" [message]="loginMessage"></app-user-login>
-  <app-user-login-success *ngSwitchCase="'success'" [userInfo]="userInfo" [displayLoginSuccessMessage]="displayLoginSuccessMessage"></app-user-login-success>
+<div class="container">
+  <mat-progress-spinner *ngIf="isLoading" mode="indeterminate" diameter="50"></mat-progress-spinner>
+  <router-outlet name="user"></router-outlet>
 </div>
diff --git a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts
index 7511de16..0edde924 100644
--- a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts
+++ b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts
@@ -1,43 +1,40 @@
-import { Component, OnInit } from '@angular/core';
-import { UserInfo } from '../user-info';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { UserService } from '../user-service/user.service';
-import { LoginEvent, LoginMessage } from '../user-login/user-login.component';
+import { RouterOutlet, Router, ActivationStart } from '@angular/router';
 
 @Component({
   selector: 'app-user-dialog',
   templateUrl: './user-dialog.component.html',
   styleUrls: ['./user-dialog.component.css']
 })
-export class UserDialogComponent implements OnInit {
+export class UserDialogComponent implements OnInit, OnDestroy {
 
-  constructor(private userService: UserService) { }
+  constructor(private userService: UserService, private router: Router) { }
 
-  state: 'loading' | 'login' | 'success' = 'loading';
+  @ViewChild(RouterOutlet) outlet: RouterOutlet;
 
-  loginMessage: LoginMessage;
-
-  displayLoginSuccessMessage = false;
-  userInfo: UserInfo;
+  isLoading = true;
 
   ngOnInit() {
+    // this is a workaround for a bug. see https://github.com/angular/angular/issues/20694
+    this.router.events.subscribe(e => {
+      if (e instanceof ActivationStart && e.snapshot.outlet === 'user') {
+        this.outlet.deactivate();
+      }
+    });
+
+
     this.userService.validateUserLoginState().subscribe(result => {
+      this.isLoading = false;
       if (result.state === 'success') {
-        this.userInfo = result.userInfo;
-        this.state = 'success';
+        this.userService.userRouteNavigate(['success', { reason: 'already' }]);
       } else {
-        this.loginMessage = result.state;
-        this.state = 'login';
+        this.userService.userRouteNavigate(['login', { reason: result.state }]);
       }
     });
   }
 
-  login(event: LoginEvent) {
-    this.userService.tryLogin(event.username, event.password).subscribe(result => {
-      this.userInfo = result;
-      this.displayLoginSuccessMessage = true;
-      this.state = 'success';
-    }, (error: Error) => {
-      this.loginMessage = error.message;
-    });
+  ngOnDestroy() {
+    this.userService.userRouteNavigate(null);
   }
 }