4 files changed, 123 insertions, 0 deletions
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!!!');
+  }
+}