Merge pull request #3 from crupest/user

Develop user dialog.

4 files changed, 134 insertions, 0 deletions

diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.css b/Timeline/ClientApp/src/app/user/user-login/user-login.component.css
new file mode 100644
index 00000000..8bf6b408
--- /dev/null
+++ b/Timeline/ClientApp/src/app/user/user-login/user-login.component.css
@@ -0,0 +1,24 @@
+form {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+div.w-100 {
+  width: 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/user-login/user-login.component.html b/Timeline/ClientApp/src/app/user/user-login/user-login.component.html
new file mode 100644
index 00000000..b1dd289d
--- /dev/null
+++ b/Timeline/ClientApp/src/app/user/user-login/user-login.component.html
@@ -0,0 +1,18 @@
+<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" />
+  </mat-form-field>
+  <div class="w-100"></div>
+  <mat-form-field>
+    <mat-label>Password</mat-label>
+    <input formControlName="password" matInput type="password" />
+  </mat-form-field>
+  <div class="w-100"></div>
+  <button mat-flat-button class="login-button" (appDebounceClick)="onLoginButtonClick()">Login</button>
+</form>
diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts b/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts
new file mode 100644
index 00000000..acd13721
--- /dev/null
+++ b/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts
@@ -0,0 +1,60 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+import { UserLoginComponent, LoginEvent } from './user-login.component';
+
+describe('UserLoginComponent', () => {
+  let component: UserLoginComponent;
+  let fixture: ComponentFixture<UserLoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserLoginComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('reactive form should work well', () => {
+    const usernameInput = fixture.debugElement.query(By.css('input[type=text]')).nativeElement as HTMLInputElement;
+    const passwordInput = fixture.debugElement.query(By.css('input[type=password]')).nativeElement as HTMLInputElement;
+
+    usernameInput.value = 'user';
+    usernameInput.dispatchEvent(new Event('input'));
+    passwordInput.value = 'user';
+    passwordInput.dispatchEvent(new Event('input'));
+
+    fixture.detectChanges();
+
+    expect(component.form.value).toEqual({
+      username: 'user',
+      password: 'user'
+    });
+  });
+
+  it('login event should work well', fakeAsync(() => {
+    let userCredential: LoginEvent;
+    component.login.subscribe((e: LoginEvent) => { userCredential = e; });
+    fixture.detectChanges();
+    const mockValue = {
+      username: 'user',
+      password: 'user'
+    };
+    component.form.setValue(mockValue);
+    component.onLoginButtonClick();
+    expect(userCredential).toEqual(mockValue);
+  }));
+});
diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts b/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts
new file mode 100644
index 00000000..da642cb8
--- /dev/null
+++ b/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts
@@ -0,0 +1,32 @@
+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;
+}
+
+@Component({
+  selector: 'app-user-login',
+  templateUrl: './user-login.component.html',
+  styleUrls: ['./user-login.component.css']
+})
+export class UserLoginComponent {
+
+  @Input()
+  message: LoginMessage;
+
+  @Output()
+  login = new EventEmitter<LoginEvent>();
+
+  form = new FormGroup({
+    username: new FormControl(''),
+    password: new FormControl('')
+  });
+
+  onLoginButtonClick() {
+    this.login.emit(this.form.value);
+  }
+}