Move login message into user login component.

3 files changed, 23 insertions, 1 deletions

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>();