diff options
Diffstat (limited to 'Timeline/ClientApp/src/app')
7 files changed, 65 insertions, 5 deletions
diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts index 133aa3e6..c2852a11 100644 --- a/Timeline/ClientApp/src/app/app.module.ts +++ b/Timeline/ClientApp/src/app/app.module.ts @@ -16,6 +16,7 @@ import { TodoItemComponent } from './todo-item/todo-item.component'; import { UserDialogComponent } from './user-dialog/user-dialog.component'; import { DebounceClickDirective } from './debounce-click.directive'; import { UserLoginComponent } from './user-login/user-login.component'; +import { UserLoginSuccessComponent } from './user-login-success/user-login-success.component'; const importedMatModules = [ MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, @@ -31,7 +32,8 @@ const importedMatModules = [ TodoItemComponent, UserDialogComponent, DebounceClickDirective, - UserLoginComponent + UserLoginComponent, + UserLoginSuccessComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), 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 1e1f1b79..50d6ba56 100644 --- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html +++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.html @@ -1,8 +1,5 @@ <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> - <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> + <app-user-login-success *ngSwitchCase="'success'" [userInfo]="userInfo" [displayLoginSuccessMessage]="displayLoginSuccessMessage"></app-user-login-success> </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 88e48799..cf62b831 100644 --- a/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts +++ b/Timeline/ClientApp/src/app/user-dialog/user-dialog.component.ts @@ -15,6 +15,7 @@ export class UserDialogComponent implements OnInit { loginMessage: LoginMessage; + displayLoginSuccessMessage = false; userInfo: UserInfo; ngOnInit() { @@ -32,6 +33,7 @@ export class UserDialogComponent implements OnInit { 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; diff --git a/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.css b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.css new file mode 100644 index 00000000..6486142b --- /dev/null +++ b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.css @@ -0,0 +1,7 @@ +.login-success-message { + color: green; +} + +.username { + color: blue; +} diff --git a/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.html b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.html new file mode 100644 index 00000000..943c137f --- /dev/null +++ b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.html @@ -0,0 +1,5 @@ +<p *ngIf="displayLoginSuccessMessage" class="mat-body login-success-message"> + Login succeeds! +</p> +<p class="mat-body">You have been login as <span class="username">{{ userInfo.username }}</span>.</p> +<p class="mat-body">Your roles are {{ userInfo.roles.join(', ') }}.</p> diff --git a/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.spec.ts b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.spec.ts new file mode 100644 index 00000000..bdcd354b --- /dev/null +++ b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserLoginSuccessComponent } from './user-login-success.component'; + +describe('UserLoginSuccessComponent', () => { + let component: UserLoginSuccessComponent; + let fixture: ComponentFixture<UserLoginSuccessComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserLoginSuccessComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserLoginSuccessComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.ts b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.ts new file mode 100644 index 00000000..e0fe6cc1 --- /dev/null +++ b/Timeline/ClientApp/src/app/user-login-success/user-login-success.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { UserInfo } from '../user-dialog/user.service'; + +@Component({ + selector: 'app-user-login-success', + templateUrl: './user-login-success.component.html', + styleUrls: ['./user-login-success.component.css'] +}) +export class UserLoginSuccessComponent implements OnInit { + + @Input() + displayLoginSuccessMessage = false; + + @Input() + userInfo: UserInfo; + + constructor() { } + + ngOnInit() { + } + +} |