Move login message into user login component.

6 files changed, 31 insertions, 10 deletions

diff --git a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.css b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.css
index c21d71b1..868749cf 100644
--- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.css
+++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.css
@@ -3,3 +3,4 @@
   justify-content: center;
   align-content: center;
 }
+
diff --git a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html
index 5d3829c7..e790aec1 100644
--- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html
+++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html
@@ -2,11 +2,9 @@
   <div *ngSwitchCase="'loading'" class="progress-container">
     <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
   </div>
-  <div *ngSwitchCase="'login'">
-    <p *ngIf="loginMessage" class="mat-body">{{ loginMessage }}</p>
-    <app-user-login (login)="login($event)"></app-user-login>
-  </div>
+  <app-user-login *ngSwitchCase="'login'" (login)="login($event)" [message]="loginMessage"></app-user-login>
   <div *ngSwitchCase="'success'">
     <p class="mat-body">You have been login as {{ userInfo.username }}.</p>
+    <p class="mat-body">Your roles are {{ userInfo.roles.join(', ') }}.</p>
   </div>
 </div>
diff --git a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts
index 6fe5b6d9..368a1775 100644
--- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts
+++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UserService, UserInfo } from './user.service';
-import { LoginEvent } from '../user-login/user-login.component';
+import { LoginEvent, LoginMessage } from '../user-login/user-login.component';
 
 @Component({
   selector: 'app-user-dialog',
@@ -13,7 +13,7 @@ export class UserDialogComponent implements OnInit {
 
   state: 'loading' | 'login' | 'success' = 'loading';
 
-  loginMessage: string;
+  loginMessage: LoginMessage;
 
   userInfo: UserInfo;
 
@@ -24,9 +24,9 @@ export class UserDialogComponent implements OnInit {
         this.state = 'success';
       } else {
         if (result.state === 'invalid') {
-          this.loginMessage = 'Your login is no longer valid';
-        } else {
-          this.loginMessage = 'You haven\'t logged in.';
+          this.loginMessage = 'invalidlogin';
+        } else if (result.state === 'nologin') {
+          this.loginMessage = 'nologin';
         }
         this.state = 'login';
       }
diff --git a/Timeline/ClientApp/src/app/user-login/user-login.component.css b/Timeline/ClientApp/src/app/user-login/user-login.component.css
index 4cdd865f..8bf6b408 100644
--- a/Timeline/ClientApp/src/app/user-login/user-login.component.css
+++ b/Timeline/ClientApp/src/app/user-login/user-login.component.css
@@ -10,3 +10,15 @@ div.w-100 {
 .login-button {
   margin-left: auto;
 }
+
+.no-login-message {
+  color: blue;
+}
+
+.invalid-login-message {
+  color: red;
+}
+
+.error-message {
+  color: red;
+}
diff --git a/Timeline/ClientApp/src/app/user-login/user-login.component.html b/Timeline/ClientApp/src/app/user-login/user-login.component.html
index 6fed6bb5..b1dd289d 100644
--- a/Timeline/ClientApp/src/app/user-login/user-login.component.html
+++ b/Timeline/ClientApp/src/app/user-login/user-login.component.html
@@ -1,4 +1,9 @@
 <form [formGroup]="form">
+  <ng-container *ngIf="message" [ngSwitch]="message">
+    <p *ngSwitchCase="'nologin'" class="mat-body no-login-message">You haven't login.</p>
+    <p *ngSwitchCase="'invalidlogin'" class="mat-body invalid-login-message">Your login is no longer valid.</p>
+    <p *ngSwitchDefault class="mat-body error-message">{{ message }}</p>
+  </ng-container>
   <mat-form-field>
     <mat-label>Username</mat-label>
     <input formControlName="username" matInput type="text" />
diff --git a/Timeline/ClientApp/src/app/user-login/user-login.component.ts b/Timeline/ClientApp/src/app/user-login/user-login.component.ts
index 072f04af..da642cb8 100644
--- a/Timeline/ClientApp/src/app/user-login/user-login.component.ts
+++ b/Timeline/ClientApp/src/app/user-login/user-login.component.ts
@@ -1,6 +1,8 @@
-import { Component, Output, OnInit, EventEmitter } from '@angular/core';
+import { Component, Output, OnInit, EventEmitter, Input } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 
+export type LoginMessage = 'nologin' | 'invalidlogin' | string;
+
 export class LoginEvent {
   username: string;
   password: string;
@@ -13,6 +15,9 @@ export class LoginEvent {
 })
 export class UserLoginComponent {
 
+  @Input()
+  message: LoginMessage;
+
   @Output()
   login = new EventEmitter<LoginEvent>();