From fdc51c9e4ac225311e4e14923e6b48efbd05a6e1 Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 4 Feb 2019 23:25:33 +0800 Subject: Init commit. --- Timeline/ClientApp/src/app/app.component.css | 6 +++ Timeline/ClientApp/src/app/app.component.html | 5 +++ Timeline/ClientApp/src/app/app.component.ts | 10 +++++ Timeline/ClientApp/src/app/app.module.ts | 26 ++++++++++++ Timeline/ClientApp/src/app/app.server.module.ts | 11 +++++ Timeline/ClientApp/src/app/home/home.component.css | 49 ++++++++++++++++++++++ .../ClientApp/src/app/home/home.component.html | 22 ++++++++++ .../ClientApp/src/app/home/home.component.spec.ts | 25 +++++++++++ Timeline/ClientApp/src/app/home/home.component.ts | 27 ++++++++++++ 9 files changed, 181 insertions(+) create mode 100644 Timeline/ClientApp/src/app/app.component.css create mode 100644 Timeline/ClientApp/src/app/app.component.html create mode 100644 Timeline/ClientApp/src/app/app.component.ts create mode 100644 Timeline/ClientApp/src/app/app.module.ts create mode 100644 Timeline/ClientApp/src/app/app.server.module.ts create mode 100644 Timeline/ClientApp/src/app/home/home.component.css create mode 100644 Timeline/ClientApp/src/app/home/home.component.html create mode 100644 Timeline/ClientApp/src/app/home/home.component.spec.ts create mode 100644 Timeline/ClientApp/src/app/home/home.component.ts (limited to 'Timeline/ClientApp/src/app') 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 @@ + +

+ +

+ 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 @@ +

+ This page is under construction! +

+ +

+ To-do list: +

+ +

Learn DI and Service module in Angular.
Develop basic authentication module.
Learn Bootstrap.

+ +

+ username + + password + + +

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; + + 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!!!'); + } +} -- cgit v1.2.3