5 files changed, 39 insertions, 29 deletions
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 226d7e4..e337abf 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -12,7 +13,8 @@ import { LoginComponent } from './login/login.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/DevHive.Angular/src/app/login/login.component.css b/src/DevHive.Angular/src/app/login/login.component.css
index 1dcdae0..572083c 100644
--- a/src/DevHive.Angular/src/app/login/login.component.css
+++ b/src/DevHive.Angular/src/app/login/login.component.css
@@ -24,7 +24,7 @@ body {
 	font-weight: bold;
 }
 
-#content > input[type=text] {
+#content input[type=text], #content #submit-btn {
 	border: 2px solid black;
 	border-radius: 0.4em;
 	box-sizing: border-box;
@@ -34,40 +34,29 @@ body {
   padding: 0.3em;
 }
 
-#content > input[type=text]:nth-last-of-type(1) {
+#content input[type=text]:nth-last-of-type(1) {
   margin-bottom: 0.5em;
 }
 
-input[type=text]:focus {
+input[type=text]:focus, button[type=submit]:focus {
   outline: 0;
 }
 
-#content > hr {
+#content hr {
 	width: 100%;
 	border: 1px solid black;
 	box-sizing: border-box;
 }
 
 #submit-btn {
-  border: 2px solid black;
-	border-radius: 0.4em;
-	box-sizing: border-box;
-  width: 100%;
-
   background-color: black;
   color: white;
   text-align: center;
-  padding: 0.2em;
-  margin-top: 0.5em;
 }
 
 #submit-btn:hover {
-   border-color: darkgrey;
+  border-color: darkgrey;
   background-color: darkgrey;
 }
 
-#submit-btn > input[type=submit] {
-  width: 100%;
-  height: 100%;
-  display: none;
-}
+
diff --git a/src/DevHive.Angular/src/app/login/login.component.html b/src/DevHive.Angular/src/app/login/login.component.html
index 5fd3c3c..29cd27e 100644
--- a/src/DevHive.Angular/src/app/login/login.component.html
+++ b/src/DevHive.Angular/src/app/login/login.component.html
@@ -3,13 +3,10 @@
 		Login
 	</div>
 	<hr>
-	<form action="" method="get">
-		<input type="text" placeholder="Username">
-		<input type="text" placeholder="Password">
+	<form [formGroup]="loginForm" (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>
 	</form>
-	<hr>
-	<div id="submit-btn">
-		Continue
-		<input type="submit">
-	</div>
-</div>
-\ No newline at end of file
+</div>
diff --git a/src/DevHive.Angular/src/app/login/login.component.ts b/src/DevHive.Angular/src/app/login/login.component.ts
index 4f58421..140a852 100644
--- a/src/DevHive.Angular/src/app/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/login/login.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-login',
@@ -6,10 +8,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
+  loginForm: FormGroup;
 
-  constructor() { }
+  private _title = 'Login';
+
+  constructor(private titleService: Title, private fb: FormBuilder) {
+    titleService.setTitle(this._title);
+  }
 
   ngOnInit(): void {
+    this.loginForm = this.fb.group({
+      userName: '',
+      password: ''
+    });
   }
 
+  async onSubmit(): Promise<void> {
+    const response = await fetch('http://localhost:5000/api/User/login', {
+      method: 'POST',
+      body: `{"UserName": "${this.loginForm.get('userName')?.value}", "Password": "${this.loginForm.get('password')?.value}"}`,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    console.log(response);
+  }
 }
diff --git a/src/DevHive.Angular/tsconfig.json b/src/DevHive.Angular/tsconfig.json
index d3c1011..9c7dbe4 100644
--- a/src/DevHive.Angular/tsconfig.json
+++ b/src/DevHive.Angular/tsconfig.json
@@ -19,7 +19,8 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "strictPropertyInitialization": false
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,