val2

phpComponets/login.php

@@ -0,0 +1,4 @@
+<?php
+
+
+?>

phpComponets/register.php

@@ -0,0 +1,4 @@
+<?php
+
+
+?>

registration.php

@@ -0,0 +1,20 @@
+<?php
+
+$key = $_GET("key");
+$type = $_GET("type");
+$value = $_GET("value");
+
+$
+
+switch( $key ){
+	case "validation":
+		
+	break;
+	case "create":
+		
+	break;
+	default:
+		echo "false";
+}
+
+?>

src/app/app-routing.module.ts

@@ -4,13 +4,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'
+import { RegisterComponent } from './register/register.component'
 
 const routes: Routes = [
 	{ path: '', redirectTo: '/login', pathMatch: 'full' },
 	{ path: 'game-grid', component: GameGridComponent },
 	{ path: 'view-card', component: ViewCardComponent },
 	{ path: 'view-card/:gid', component: ViewCardComponent },
-	{ path: 'login', component: LoginComponent }
+	{ path: 'login', component: LoginComponent },
+	{ path: 'register', component: RegisterComponent }
 
 
 ];

src/app/app.module.ts

@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
 import {HttpClientModule} from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { AppComponent } from './app.component';
 import { GamesService } from './games.service';
+import { AbstractControl } from '@angular/forms';
+
+import { AppComponent } from './app.component';
 import { GameGridComponent } from './game-grid/game-grid.component';
 import { AppRoutingModule } from './/app-routing.module';
 import { ViewCardComponent } from './view-card/view-card.component';
 
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { MatCardModule } from '@angular/material';
+import {MatCardModule} from '@angular/material';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatIconModule} from '@angular/material/icon';
@@ -22,6 +24,8 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
+import { RegistrationService } from './registration.service';
+
 
 
 @NgModule({
@@ -47,7 +51,7 @@ import { RegisterComponent } from './register/register.component';
     MatPaginatorModule,
     MatFormFieldModule
   ],
-  providers: [GamesService],
+  providers: [GamesService, RegistrationService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/login/login.component.css

@@ -1,16 +0,0 @@
-.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,8 +1,8 @@
 
 
 <form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
-<div class="loginContainer">
+<div class="lrContainer">
-	<mat-card class="loginCard">
+	<mat-card class="lrCard">
 		<mat-card-header>
 			<mat-card-title>
 				<h2>Login</h2>
@@ -16,9 +16,6 @@
 				[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"
@@ -27,12 +24,9 @@
 				[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>
+		<button mat-button [routerLink]="['/register']" >Register</button>
 
 	</mat-card>
 

src/app/login/login.component.ts

@@ -33,6 +33,7 @@ export class LoginComponent implements OnInit {
 		const formGroup = {};
 		
 		formGroup["userName"] = new FormControl( "", this.mapValidators({ required: true }) );
+        formGroup["password"] = new FormControl( "", this.mapValidators({ required: true }) );
 
 		this.form = new FormGroup(formGroup);
     }

src/app/register/register.component.html

@@ -1,3 +1,57 @@
-<p>
+<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
-  register works!
+<div class="lrContainer">
-</p>
+	<mat-card class="lrCard">
+		<mat-card-header>
+			<mat-card-title>
+				<h2>Register</h2>
+			</mat-card-title>
+		</mat-card-header>
+		
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="First Name"
+				[formControlName]="'firstName'"
+				[id]="'firstName'"
+				[type]="'text'"
+				[name]="'firstName'">
+		</mat-form-field>
+
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="Last Name"
+				[formControlName]="'lastName'"
+				[id]="'lastName'"
+				[type]="'text'"
+				[name]="'lastName'">
+		</mat-form-field>
+
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="Email"
+				[formControlName]="'email'"
+				[id]="'email'"
+				[type]="'email'"
+				[name]="'email'">
+		</mat-form-field>
+
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="Username"
+				[formControlName]="'userName'"
+				[id]="'userName'"
+				[type]="'text'"
+				[name]="'userName'">
+		</mat-form-field>
+
+		<mat-form-field class="fullWidth">
+			<input matInput placeholder="Password"
+				[formControlName]="'password'"
+				[id]="'password'"
+				[type]="'password'"
+				[name]="'password'">
+		</mat-form-field>
+
+		<button type="submit" mat-raised-button color="primary" [disabled]="!form.valid">Register</button>
+		<button mat-button [routerLink]="['/login']" >Cancel</button>
+
+	</mat-card>
+
+</div>
+
+</form>

src/app/register/register.component.ts

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';
+
+import { RegistrationService } from '../registration.service';
+
+//import { ValidateUserName } from '../validators/username.validator';
 
 @Component({
   selector: 'app-register',
@@ -7,9 +13,91 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RegisterComponent implements OnInit {
 
-  constructor() { }
+	form: any;
+	loading = false;
+	//userNameValidator = new UserNameValidator(null);
+
+	constructor(
+		private registrationService: RegistrationService
+		){ }
 
 	ngOnInit() {
+		
+		this.buildForm();
 	}
 
+	buildForm(){
+		const formGroup = {};
+		
+		formGroup["firstName"] = new FormControl( "", this.mapValidators({
+			required: true,
+			min: "3",
+			max: "50"
+		}) );
+		formGroup["lastName"] = new FormControl( "", this.mapValidators({
+			required: true,
+			min: "3",
+			max: "50"
+		}) );
+		formGroup["email"] = new FormControl( "", this.mapValidators({
+			required: true,
+			email: true,
+			max: "100"
+		}) );
+		formGroup["userName"] = new FormControl( "", this.mapValidators({
+			ValidateUserName: true,
+			required: true,
+			min: "5",
+			max: "25"
+		}) );
+		formGroup["password"] = new FormControl( "", this.mapValidators({
+			required: true,
+			min: "7",
+			max: "25"
+		}) );
+		
+		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 );
+				}
+			}else if( key == "email" ) {
+				if( validators.email ){
+					formValidators.push( Validators.email );
+				}
+			}else if( key == "min" ) {
+				formValidators.push(Validators.min(validators[key]));
+			}else if( key == "max" ) {
+				formValidators.push(Validators.max(validators[key]));
+			}else if( key == "ValidateUserName" ){
+				formValidators.push( this.validateUserName );
+			}
+		}
+		return formValidators;
+	}
+
+	validateUserName( control: AbstractControl ){
+	
+	this.registrationService.validateUserName( control.value ).subscribe( data => {
+		console.log( data );
+		if( control.value != data.username ){
+		return{
+			validUserName: true
+		};
+	}
+	return null;
+
+	});
+	
+	}
+
+
+
+
 }

src/app/registration.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { RegistrationService } from './registration.service';
+
+describe('RegistrationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RegistrationService]
+    });
+  });
+
+  it('should be created', inject([RegistrationService], (service: RegistrationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/registration.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class RegistrationService {
+
+	APIURL = "http://192.241.155.78/ludosdata/api.php";
+
+	constructor(
+		private http: HttpClient
+	){ }
+
+	/*
+	validateUserName( userName ): Observable<any> {
+		return this.http.get( "http://www.pugludos.com/registration.php?key=validation&type=username&value=" + userName )
+			.map(res => {
+				return(
+					res
+				);
+			});
+	}
+	*/
+
+	validateUserName( userName ): Observable<any> {
+		return this.http.get( this.APIURL + "/users?filter=email,cs," + userName + "&transform=1" )
+			.map(res => {
+				return(
+					res
+				);
+			});
+	}
+
+}

src/app/validators/username.validator.ts

@@ -0,0 +1,31 @@
+
+import { AbstractControl } from '@angular/forms';
+import { RegistrationService } from '../registration.service';
+
+
+export class ValidateUserName{
+
+constructor(
+		private RS: RegistrationService
+		){ }
+
+ validateUserName( control: AbstractControl ){
+	//var RS = new RegistrationService(null);
+	/*
+	this.registrationService2.validateUserName( control.value ).subscribe( data => {
+		console.log( data );
+		if( control.value != data.username ){
+		return{
+			validUserName: true
+		};
+	}
+	return null;
+
+	});
+	*/
+	}
+
+
+}
+
+

src/styles.css

@@ -1,2 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+.lrCard{
+	min-width: 300px;
+	width:20%;
+	margin:0 auto;
+}
+
+.fullWidth{
+	width:100%;
+}
+
+.lrContainer{
+	margin-top: 10%;
+	justify-content: center;
+	align-items: center;
+}