ccc

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { RegisterComponent } from './register/register.component';
 
 import { RegistrationService } from './registration.service';
 import { UsernameValidator } from './validators/username.validator'
+import { EmailValidator } from './validators/email.validator'
 
 
 
@@ -53,7 +54,7 @@ import { UsernameValidator } from './validators/username.validator'
     MatPaginatorModule,
     MatFormFieldModule
   ],
-  providers: [GamesService, RegistrationService, UsernameValidator],
+  providers: [GamesService, RegistrationService, UsernameValidator, EmailValidator],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/register/register.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, FormControl, Validators, AbstractControl } from
 
 import { RegistrationService } from '../registration.service';
 import { UsernameValidator } from '../validators/username.validator'
+import { EmailValidator } from '../validators/email.validator'
 
 
 @Component({
@@ -18,7 +19,10 @@ export class RegisterComponent implements OnInit {
 
 	constructor(
 		private registrationService: RegistrationService,
-		private usernameValidator: UsernameValidator
+		private usernameValidator: UsernameValidator,
+		private emailValidator: EmailValidator,
+		public formBuilder: FormBuilder
+
 		){ }
 
 	ngOnInit() {
@@ -27,83 +31,47 @@ export class RegisterComponent implements OnInit {
 	}
 
 	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);
+		this.form = this.formBuilder.group({
+			firstName: ['', Validators.compose([
+				Validators.maxLength(50),
+				Validators.minLength(3),
+				Validators.required
+			])],
+			lastName: ['', Validators.compose([
+				Validators.maxLength(50),
+				Validators.minLength(3),
+				Validators.required
+			])],
+			email: ['', Validators.compose([
+				Validators.maxLength(100),
+				Validators.email,
+				Validators.required
+			]),
+				this.emailValidator.checkEmail.bind(this.emailValidator)
+			],
+			userName: ['', Validators.compose([
+				Validators.maxLength(25),
+				Validators.minLength(5),
+				Validators.required
+			]),
+				this.usernameValidator.checkUsername.bind(this.usernameValidator)
+			],
+			password: ['', Validators.compose([
+				Validators.maxLength(25),
+				Validators.minLength(5),
+				Validators.required
+			])]
+		});
     }
 
-	private mapValidators(validators) {
-		const formValidators = [];
+    onSubmit( form ){
+		this.registrationService.createNewUser( form ).subscribe( data => {
+			console.log(data);
+			//this.router.navigateByUrl("/login");
+		});
 		
-		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.usernameValidator.checkUsername.bind( this.usernameValidator ) );
-			}
-		}
-		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.ts

@@ -1,31 +1,53 @@
 import { Injectable } from '@angular/core';
 
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
+const httpOptions = {
+	headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' })
+}
+
 @Injectable()
 export class RegistrationService {
 
 	APIURL = "http://192.241.155.78/api.php";
+	registrationUrl = "http://192.241.155.78/registrationCreation.php";
+
+	/* Needed for post, could be moved to local method variable */
+	params;
 
 	constructor(
 		private http: HttpClient
 	){ }
 
-	/*
 	validateUserName( userName ): Observable<any> {
-		return this.http.get( "http://www.pugludos.com/registration.php?key=validation&type=username&value=" + userName )
+		return this.http.get( this.APIURL + "/users?filter=userName,eq," + userName + "&transform=1" )
 			.map(res => {
 				return(
 					res
 				);
 			});
 	}
-	*/
 
-	validateUserName( userName ): Observable<any> {
-		return this.http.get( this.APIURL + "/users?filter=userName,cs," + userName + "&transform=1" )
+	validateEmail( email ): Observable<any> {
+		return this.http.get( this.APIURL + "/users?filter=email,eq," + email + "&transform=1" )
+			.map(res => {
+				return(
+					res
+				);
+			});
+	}
+
+	createNewUser( userData ): Observable<any>{
+
+
+		/* needed for content-type x-www */
+		this.params = new HttpParams({
+			fromObject: userData
+		});
+
+		return this.http.post( this.registrationUrl, this.params, httpOptions )
 			.map(res => {
 				console.log(res)
 				return(
@@ -34,4 +56,5 @@ export class RegistrationService {
 			});
 	}
 
+
 }

src/app/validators/email.validator.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { RegistrationService } from '../registration.service';
+ 
+@Injectable()
+export class EmailValidator {
+
+  debouncer: any;
+
+  constructor(
+    private registrationService: RegistrationService
+    ){  }
+ 
+  checkEmail( control: FormControl ): any{
+    clearTimeout(this.debouncer);
+    
+    return new Promise(resolve => {
+      this.debouncer = setTimeout(() => {
+        this.registrationService.validateEmail(control.value).subscribe((res) => {
+          console.log(res.users.length)
+          if(res.users.length === 0){
+            resolve(null);
+          }else{
+            resolve({'emailInUse': true});
+          }
+/*
+          if(res.ok){
+            resolve(null);
+          }
+        }, (err) => {
+          resolve({'usernameInUse': true});
+          */
+
+        });
+      }, 1000);     
+    });
+  }
+}

src/app/validators/username.validator.ts

@@ -17,11 +17,20 @@ export class UsernameValidator {
     return new Promise(resolve => {
       this.debouncer = setTimeout(() => {
         this.registrationService.validateUserName(control.value).subscribe((res) => {
+          console.log(res.users.length)
+          if(res.users.length === 0){
+            resolve(null);
+          }else{
+            resolve({'usernameInUse': true});
+          }
+/*
           if(res.ok){
             resolve(null);
           }
         }, (err) => {
           resolve({'usernameInUse': true});
+          */
+
         });
       }, 1000);     
     });