loginv1

src/app/app-routing.module.ts

@@ -3,12 +3,15 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { GameGridComponent } from './game-grid/game-grid.component'
 import { ViewCardComponent } from './view-card/view-card.component'
+import { LoginComponent } from './login/login.component'
 
 const routes: Routes = [
-	{ path: '', redirectTo: '/game-grid', pathMatch: 'full' },
+	{ path: '', redirectTo: '/login', pathMatch: 'full' },
 	{ path: 'game-grid', component: GameGridComponent },
 	{ path: 'view-card', component: ViewCardComponent },
-	{ path: 'view-card/:gid', component: ViewCardComponent }
+	{ path: 'view-card/:gid', component: ViewCardComponent },
+	{ path: 'login', component: LoginComponent }
+
 
 ];
 

src/app/app.module.ts

@@ -17,6 +17,9 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatFormFieldModule} from '@angular/material/form-field';
+
+
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 
@@ -41,7 +44,8 @@ import { RegisterComponent } from './register/register.component';
     MatIconModule,
     MatButtonModule,
     MatInputModule,
-    MatPaginatorModule
+    MatPaginatorModule,
+    MatFormFieldModule
   ],
   providers: [GamesService],
   bootstrap: [AppComponent]

src/app/login/login.component.css

@@ -0,0 +1,16 @@
+.loginCard{
+	min-width: 300px;
+	width:20%;
+	margin:0 auto;
+}
+
+.fullWidth{
+	width:100%;
+}
+
+.loginContainer{
+	display: flex;
+	height: 400px;
+	justify-content: center;
+	align-items: center;
+}

src/app/login/login.component.html

@@ -1,3 +1,66 @@
-<p>
+
-  login works!
+
-</p>
+<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
+<div class="loginContainer">
+	<mat-card class="loginCard">
+		<mat-card-header>
+			<mat-card-title>
+				<h2>Login</h2>
+			</mat-card-title>
+		</mat-card-header>
+		
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="Username"
+				[formControlName]="'userName'"
+				[id]="'userName'"
+				[type]="'text'"
+				[name]="'userName'">
+		</mat-form-field>
+		<div class="invalidEntryContainer">
+			<span *ngIf="(form.get('userName').dirty || form.get('userName').touched) && form.get('userName').invalid" >This field is required</span>
+		</div>
+
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="Password"
+				[formControlName]="'password'"
+				[id]="'password'"
+				[type]="'password'"
+				[name]="'password'">
+		</mat-form-field>
+		<div class="invalidEntryContainer">
+			<span *ngIf="(form.get('password').dirty || form.get('password').touched) && form.get('password').invalid" >This field is required</span>
+		</div>
+
+		<button type="submit" mat-raised-button color="primary" [disabled]="!form.valid">Login</button>
+		<button mat-button>Register</button>
+
+	</mat-card>
+
+</div>
+
+</form>
+
+
+
+<!--
+<div class="col-md-6 col-md-offset-3">
+    <h2>Login</h2>
+    <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
+        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
+            <label for="username">Username</label>
+            <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
+            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
+        </div>
+        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
+            <label for="password">Password</label>
+            <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
+            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
+        </div>
+        <div class="form-group">
+            <button [disabled]="loading" class="btn btn-primary">Login</button>
+            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+            <a [routerLink]="['/register']" class="btn btn-link">Register</a>
+        </div>
+    </form>
+</div>
+-->

src/app/login/login.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+
 
 @Component({
   selector: 'app-login',
@@ -7,9 +10,59 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+	form: any;
+    loading = false;
 
-  ngOnInit() {
+ 
-  }
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router
+) { }
+ 
+    ngOnInit() {
+        // reset login status
+        //this.authenticationService.logout();
+ 
+        // get return url from route parameters or default to '/'
+        //this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+
+        this.buildForm();
+    }
+
+	buildForm(){
+		const formGroup = {};
+		
+		formGroup["userName"] = new FormControl( "", this.mapValidators({ required: true }) );
+
+		this.form = new FormGroup(formGroup);
+    }
+
+    private mapValidators(validators) {
+		const formValidators = [];
+		
+		for( var key in validators ){
+			if( key == "required" ) {
+				if( validators.required ){
+					formValidators.push( Validators.required );
+				}
+			}
+		}
+		return formValidators;
+	}
+ 
+    login() {
+       /*
+        this.loading = true;
+        this.authenticationService.login(this.model.username, this.model.password)
+            .subscribe(
+                data => {
+                    this.router.navigate([this.returnUrl]);
+                },
+                error => {
+                    this.alertService.error(error);
+                    this.loading = false;
+                });
+                */
+    }
 
 }