diff options
Diffstat (limited to 'Timeline/ClientApp')
6 files changed, 47 insertions, 9 deletions
diff --git a/Timeline/ClientApp/src/app/app.component.ts b/Timeline/ClientApp/src/app/app.component.ts index 58fe7cac..1798d8f4 100644 --- a/Timeline/ClientApp/src/app/app.component.ts +++ b/Timeline/ClientApp/src/app/app.component.ts @@ -13,7 +13,7 @@ export class AppComponent { openUserDialog() { this.dialog.open(UserDialogComponent, { - width: '250px' + width: '300px' }); } } diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts index 5add9395..133aa3e6 100644 --- a/Timeline/ClientApp/src/app/app.module.ts +++ b/Timeline/ClientApp/src/app/app.module.ts @@ -6,7 +6,7 @@ import { RouterModule } from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, MatListModule, - MatProgressBarModule, MatCardModule, MatDialogModule, MatInputModule, MatFormFieldModule + MatProgressBarModule, MatCardModule, MatDialogModule, MatInputModule, MatFormFieldModule, MatProgressSpinnerModule } from '@angular/material'; import { AppComponent } from './app.component'; @@ -20,7 +20,7 @@ import { UserLoginComponent } from './user-login/user-login.component'; const importedMatModules = [ MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, MatListModule, MatProgressBarModule, MatCardModule, MatDialogModule, - MatInputModule, MatFormFieldModule + MatInputModule, MatFormFieldModule, MatProgressSpinnerModule ]; @NgModule({ 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 e69de29b..c21d71b1 100644 --- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.css +++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.css @@ -0,0 +1,5 @@ +.progress-container { + display: flex; + 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 2c5d1879..5d3829c7 100644 --- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html +++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html @@ -1,3 +1,12 @@ <div [ngSwitch]="state"> - <app-user-login *ngSwitchCase="'login'"></app-user-login> + <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> + <div *ngSwitchCase="'success'"> + <p class="mat-body">You have been login as {{ userInfo.username }}.</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 1d9536c8..6fe5b6d9 100644 --- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts +++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { UserService, UserInfo } from './user.service'; +import { LoginEvent } from '../user-login/user-login.component'; @Component({ selector: 'app-user-dialog', @@ -7,14 +9,36 @@ import { Component, OnInit } from '@angular/core'; }) export class UserDialogComponent implements OnInit { - constructor() { } + constructor(private userService: UserService) { } - state: 'login' | 'success' = 'login'; + state: 'loading' | 'login' | 'success' = 'loading'; + + loginMessage: string; + + userInfo: UserInfo; ngOnInit() { + this.userService.validateUserLoginState().subscribe(result => { + if (result.state === 'success') { + this.userInfo = result.userInfo; + 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.state = 'login'; + } + }); } - login() { - + login(event: LoginEvent) { + this.userService.tryLogin(event.username, event.password).subscribe(result => { + this.userInfo = result; + this.state = 'success'; + }, (error: Error) => { + this.loginMessage = error.message; + }); } } diff --git a/Timeline/ClientApp/src/app/user-dialog/user.service.ts b/Timeline/ClientApp/src/app/user-dialog/user.service.ts index 1afebc91..b0a6eb15 100644 --- a/Timeline/ClientApp/src/app/user-dialog/user.service.ts +++ b/Timeline/ClientApp/src/app/user-dialog/user.service.ts @@ -46,7 +46,7 @@ export class AlreadyLoginException extends Error { export class BadCredentialsException extends Error { constructor(username: string = null , password: string = null) { - super(`Username[${username}] or password[${password}] is wrong.`); + super(`Username or password is wrong.`); } } |