Implemented and improved sending API requests from login and register pages; the response is printed in the (browser) console

4 files changed, 42 insertions, 18 deletions

diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html
index 29cd27e..c33f493 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -3,8 +3,8 @@
 		Login
 	</div>
 	<hr>
-	<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-		<input type="text" placeholder="Username" name="username" formControlName="userName">
+	<form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
+		<input type="text" placeholder="Username" name="username" formControlName="username">
 		<input type="text" placeholder="Password" name="password" formControlName="password">
     <hr>
     <button type="submit" value="Submit" id="submit-btn">Submit</button>
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
index 140a852..fb90837 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 
 @Component({
@@ -8,7 +8,7 @@ import { Title } from '@angular/platform-browser';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  loginForm: FormGroup;
+  loginUserFormGroup: FormGroup;
 
   private _title = 'Login';
 
@@ -17,20 +17,28 @@ export class LoginComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.loginForm = this.fb.group({
-      userName: '',
-      password: ''
+    this.loginUserFormGroup = this.fb.group({
+      username: ['', [
+        Validators.required,
+        Validators.minLength(3)
+      ]],
+      password: ['', [
+        Validators.required,
+        // Add password pattern
+      ]]
     });
   }
 
-  async onSubmit(): Promise<void> {
-    const response = await fetch('http://localhost:5000/api/User/login', {
+  onSubmit(): void {
+    fetch('http://localhost:5000/api/User/login', {
       method: 'POST',
-      body: `{"UserName": "${this.loginForm.get('userName')?.value}", "Password": "${this.loginForm.get('password')?.value}"}`,
+      body: `{
+               "UserName": "${this.loginUserFormGroup.get('username')?.value}",
+               "Password": "${this.loginUserFormGroup.get('password')?.value}"
+      }`,
       headers: {
         'Content-Type': 'application/json'
       }
-    });
-    console.log(response);
+    }).then(response => response.json()).then(data => { console.log(data); });
   }
 }
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
index e394ace..de79698 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -1,11 +1,11 @@
 <div id="content">
 	<div id="title">Register</div>
-	
-	<form [formGroup]="registerUserFormGroup">
+
+	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
 		<hr>
 		Value: {{ registerUserFormGroup.value | json }}
 		<hr>
-		
+
 		<input type="text" placeholder="First Name" formControlName="firstName">
 		<input type="text" placeholder="Last Name" formControlName="lastName">
 		<input type="text" placeholder="Username" formControlName="username">
@@ -15,4 +15,4 @@
 		<hr>
 		<button type="submit" value="Submit" id="submit-btn">Submit</button>
 	</form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts
index dee928a..3226833 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -41,13 +41,29 @@ export class RegisterComponent implements OnInit {
       ]],
       password: ['', [
         Validators.required,
-        //Add password pattern
+        // Add password pattern
       ]],
     });
 
     this.registerUserFormGroup.valueChanges.subscribe(console.log);
   }
 
+  onSubmit(): void {
+    fetch('http://localhost:5000/api/User/register', {
+      method: 'POST',
+      body: `{
+               "UserName": "${this.registerUserFormGroup.get('username')?.value}",
+               "Email": "${this.registerUserFormGroup.get('email')?.value}",
+               "FirstName": "${this.registerUserFormGroup.get('firstName')?.value}",
+               "LastName": "${this.registerUserFormGroup.get('lastName')?.value}",
+               "Password": "${this.registerUserFormGroup.get('password')?.value}"
+      }`,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then(response => response.json()).then(data => { console.log(data); });
+  }
+
   get firstName() {
     return this.registerUserFormGroup.get('firstName');
   }
@@ -71,4 +87,4 @@ export class RegisterComponent implements OnInit {
   get password() {
     return this.registerUserFormGroup.get('password');
   }
-}
\ No newline at end of file
+}