9 files changed, 181 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/app.component.css b/Timeline/ClientApp/src/app/app.component.css
new file mode 100644
index 00000000..63459382
--- /dev/null
+++ b/Timeline/ClientApp/src/app/app.component.css
@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+}
+
diff --git a/Timeline/ClientApp/src/app/app.component.html b/Timeline/ClientApp/src/app/app.component.html
new file mode 100644
index 00000000..ae729c0c
--- /dev/null
+++ b/Timeline/ClientApp/src/app/app.component.html
@@ -0,0 +1,5 @@
+<body>
+  <div id="rootContainer">
+      <router-outlet></router-outlet>
+  </div>
+</body>
diff --git a/Timeline/ClientApp/src/app/app.component.ts b/Timeline/ClientApp/src/app/app.component.ts
new file mode 100644
index 00000000..7b0f6728
--- /dev/null
+++ b/Timeline/ClientApp/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts
new file mode 100644
index 00000000..c16d8bae
--- /dev/null
+++ b/Timeline/ClientApp/src/app/app.module.ts
@@ -0,0 +1,26 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomeComponent
+  ],
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+    HttpClientModule,
+    FormsModule,
+    RouterModule.forRoot([
+      { path: '', component: HomeComponent, pathMatch: 'full' }
+    ])
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/Timeline/ClientApp/src/app/app.server.module.ts b/Timeline/ClientApp/src/app/app.server.module.ts
new file mode 100644
index 00000000..cfb0e021
--- /dev/null
+++ b/Timeline/ClientApp/src/app/app.server.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+
+@NgModule({
+    imports: [AppModule, ServerModule, ModuleMapLoaderModule],
+    bootstrap: [AppComponent]
+})
+export class AppServerModule { }
diff --git a/Timeline/ClientApp/src/app/home/home.component.css b/Timeline/ClientApp/src/app/home/home.component.css
new file mode 100644
index 00000000..76297a9e
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/home.component.css
@@ -0,0 +1,49 @@
+p {
+  font-size: 2rem;
+  margin: 0;
+}
+
+.bold {
+  font-weight: 600;
+}
+
+#loginBox {
+  display: inline-grid;
+  grid-template: "username-label username-input" auto
+                 "password-label password-input" auto
+                 "login-button login-button" auto
+                 "message message" auto
+                 / max-content max-content;
+  align-items: center;
+  padding: 10px;
+  border: solid black 1px;
+}
+
+#usernameLabel {
+  grid-area: username-label;
+}
+
+#usernameInput {
+  grid-area: username-input;
+  margin: 2px;
+}
+
+#passwordLabel {
+  grid-area: password-label;
+}
+
+#passwordInput {
+  grid-area: password-input;
+  margin: 2px;
+}
+
+#loginButton {
+  grid-area: login-button;
+  justify-self: end;
+}
+
+#loginMessage {
+  grid-area: message;
+  justify-self: end;
+  color: red;
+}
diff --git a/Timeline/ClientApp/src/app/home/home.component.html b/Timeline/ClientApp/src/app/home/home.component.html
new file mode 100644
index 00000000..c3c9ed73
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/home.component.html
@@ -0,0 +1,22 @@
+<h2>
+  This page is under <span class="bold">construction</span>!
+</h2>
+
+<h2>
+  To-do list:
+</h2>
+
+<ol>
+  <li>Learn DI and Service module in Angular.</li>
+  <li>Develop basic authentication module.</li>
+  <li>Learn Bootstrap.</li>
+</ol>
+
+<div id="loginBox">
+    <label id="usernameLabel">username</label>
+    <input id="usernameInput" type="text" [(ngModel)]="loginInfo.username">
+    <label id="passwordLabel">password</label>
+    <input id="passwordInput" type="password" [(ngModel)]="loginInfo.password">
+    <input id="loginButton" type="button" value="Login" (click)="tryLogin()">
+    <div id="loginMessage">{{message}}</div>
+</div>
diff --git a/Timeline/ClientApp/src/app/home/home.component.spec.ts b/Timeline/ClientApp/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000..490e81bd
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Timeline/ClientApp/src/app/home/home.component.ts b/Timeline/ClientApp/src/app/home/home.component.ts
new file mode 100644
index 00000000..873aee7f
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/home.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+class LoginInfo {
+  username = '';
+  password = '';
+}
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  loginInfo = new LoginInfo();
+  message = '';
+
+  constructor(/* private http: HttpClient */) { }
+
+  ngOnInit() {
+  }
+
+  tryLogin() {
+    alert('Not implemented!!!');
+  }
+}