Moved login page to app/components; fixed, updated and improved styling of register and login pages

11 files changed, 115 insertions, 171 deletions

diff --git a/src/DevHive.Angular/src/app/app.component.css b/src/DevHive.Angular/src/app/app.component.css
index e69de29..acac3cf 100644
--- a/src/DevHive.Angular/src/app/app.component.css
+++ b/src/DevHive.Angular/src/app/app.component.css
@@ -0,0 +1,4 @@
+div {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 20d9173..667ae12 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { LoginComponent } from './login/login.component';
+import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
 
 @NgModule({
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css
index e69de29..f8b6963 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.css
+++ b/src/DevHive.Angular/src/app/components/login/login.component.css
@@ -0,0 +1,56 @@
+#content {
+	height: 100%;
+  max-width: 20em;
+	margin-left: auto;
+	margin-right: auto;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+#title {
+	font-size: 2em;
+	font-weight: bold;
+}
+
+#content input[type=text], #content #submit-btn {
+	border: 2px solid black;
+	border-radius: 0.4em;
+	box-sizing: border-box;
+	width: 100%;
+	margin-top: 0.5em;
+  font-size: 0.8em;
+  padding: 0.3em;
+}
+
+#content input[type=text]:nth-last-of-type(1) {
+  margin-bottom: 0.5em;
+}
+
+input[type=text]:focus, button[type=submit]:focus {
+  outline: 0;
+}
+
+#content hr {
+	width: 100%;
+	border: 1px solid black;
+	box-sizing: border-box;
+}
+
+#submit-btn {
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+#submit-btn:hover {
+  cursor: pointer;
+  border-color: darkgrey !important;
+  background-color: darkgrey;
+}
+
+#submit-btn:active {
+  transform: scale(0.9);
+}
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 5fd3c3c..29cd27e 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/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/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
index 4f58421..140a852 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/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/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css
index a01992c..f8b6963 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.css
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -1,6 +1,6 @@
 #content {
 	height: 100%;
-	max-width: 80%;
+  max-width: 20em;
 	margin-left: auto;
 	margin-right: auto;
 
@@ -15,50 +15,42 @@
 	font-weight: bold;
 }
 
-#content input {
+#content input[type=text], #content #submit-btn {
 	border: 2px solid black;
 	border-radius: 0.4em;
 	box-sizing: border-box;
 	width: 100%;
 	margin-top: 0.5em;
-	font-size: 0.8em;
-	padding: 0.3em;
+  font-size: 0.8em;
+  padding: 0.3em;
 }
 
-#content > input[type=text]:nth-last-of-type(1) {
-	margin-bottom: 0.5em;
+#content input[type=text]:nth-last-of-type(1) {
+  margin-bottom: 0.5em;
 }
 
-input[type=text]:focus {
-	outline: 0;
+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;
+  background-color: black;
+  color: white;
+  text-align: center;
 }
 
 #submit-btn:hover {
-	border-color: darkgrey;
-	background-color: darkgrey;
+  cursor: pointer;
+  border-color: darkgrey !important;
+  background-color: darkgrey;
 }
 
-#submit-btn > input[type=submit] {
-	width: 100%;
-	height: 100%;
-	display: none;
+#submit-btn:active {
+  transform: scale(0.9);
 }
diff --git a/src/DevHive.Angular/src/app/login/login.component.css b/src/DevHive.Angular/src/app/login/login.component.css
deleted file mode 100644
index 572083c..0000000
--- a/src/DevHive.Angular/src/app/login/login.component.css
+++ /dev/null
@@ -1,62 +0,0 @@
-html, body {
-	height: 100%;
-	margin: 0;
-}
-
-body {
-  font: 21px sans-serif;
-}
-
-#content {
-	height: 100%;
-  max-width: 20em;
-	margin-left: auto;
-	margin-right: auto;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-}
-
-#title {
-	font-size: 2em;
-	font-weight: bold;
-}
-
-#content input[type=text], #content #submit-btn {
-	border: 2px solid black;
-	border-radius: 0.4em;
-	box-sizing: border-box;
-	width: 100%;
-	margin-top: 0.5em;
-  font-size: 0.8em;
-  padding: 0.3em;
-}
-
-#content input[type=text]:nth-last-of-type(1) {
-  margin-bottom: 0.5em;
-}
-
-input[type=text]:focus, button[type=submit]:focus {
-  outline: 0;
-}
-
-#content hr {
-	width: 100%;
-	border: 1px solid black;
-	box-sizing: border-box;
-}
-
-#submit-btn {
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-#submit-btn:hover {
-  border-color: darkgrey;
-  background-color: darkgrey;
-}
-
-
diff --git a/src/DevHive.Angular/src/app/login/login.component.html b/src/DevHive.Angular/src/app/login/login.component.html
deleted file mode 100644
index 29cd27e..0000000
--- a/src/DevHive.Angular/src/app/login/login.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div id="content">
-	<div id="title">
-		Login
-	</div>
-	<hr>
-	<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>
-</div>
diff --git a/src/DevHive.Angular/src/app/login/login.component.spec.ts b/src/DevHive.Angular/src/app/login/login.component.spec.ts
deleted file mode 100644
index d2c0e6c..0000000
--- a/src/DevHive.Angular/src/app/login/login.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoginComponent } from './login.component';
-
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/DevHive.Angular/src/app/login/login.component.ts b/src/DevHive.Angular/src/app/login/login.component.ts
deleted file mode 100644
index 140a852..0000000
--- a/src/DevHive.Angular/src/app/login/login.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
-import { Title } from '@angular/platform-browser';
-
-@Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
-})
-export class LoginComponent implements OnInit {
-  loginForm: FormGroup;
-
-  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/src/styles.css b/src/DevHive.Angular/src/styles.css
index 90d4ee0..7dd6a23 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body {
+	height: 100%;
+	margin: 0;
+}
+
+body {
+  font: 21px sans-serif;
+}