Added buttons on the login and register pages, that redirect you to each other (register to login and login to register)

7 files changed, 49 insertions, 12 deletions

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 b584e90..c21582a 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.css
+++ b/src/DevHive.Angular/src/app/components/login/login.component.css
@@ -15,3 +15,14 @@ form {
 .input-selection:nth-of-type(1) {
   margin-top: 1.2em;
 }
+
+.redirect-to-register {
+  color: var(--focus-color);
+  background-color: var(--bg-color);
+  border-color: var(--focus-color);
+}
+
+.redirect-to-register:hover {
+  border-color: black !important;
+  color: black;
+}
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 ea81a8b..c10a633 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -17,4 +17,7 @@
 		<hr>
 		<button class="submit-btn" type="submit">Submit</button>
 	</form>
+	<form [formGroup]="loginUserFormGroup" (ngSubmit)="onRedirectRegister()">
+		<button class="submit-btn redirect-to-register" type="submit">New to DevHive? Register instead</button>
+	</form>
 </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 2048c73..1c97297 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -46,4 +46,8 @@ export class LoginComponent implements OnInit {
     sessionStorage.setItem('UserCred', JSON.stringify(userCred));
     this.router.navigate(['/']);
   }
+
+  onRedirectRegister(): void {
+    this.router.navigate(['/register']);
+  }
 }
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 46bd842..74d9c95 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.css
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -17,3 +17,14 @@ form {
 .input-selection:nth-of-type(1) {
   margin-top: 1.2em;
 }
+
+.redirect-to-register {
+  color: var(--focus-color);
+  background-color: var(--bg-color);
+  border-color: var(--focus-color);
+}
+
+.redirect-to-register:hover {
+  border-color: black !important;
+  color: black;
+}
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 c203369..ce098ff 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -60,4 +60,7 @@
 		<hr>
 		<button class="submit-btn" type="submit">Submit</button>
 	</form>
+	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onRedirectRegister()">
+		<button class="submit-btn redirect-to-register" type="submit">Already have an account? Login here</button>
+	</form>
 </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 8f7ea48..5e4874f 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-register',
@@ -12,7 +13,7 @@ export class RegisterComponent implements OnInit {
 
   private _title = 'Register';
 
-  constructor(private titleService: Title, private fb: FormBuilder) {
+  constructor(private titleService: Title, private fb: FormBuilder, private router: Router) {
     titleService.setTitle(this._title);
   }
 
@@ -59,6 +60,10 @@ export class RegisterComponent implements OnInit {
     }).then(response => response.json()).then(data => { console.log(data); });
   }
 
+  onRedirectRegister(): void {
+    this.router.navigate(["/login"]);
+  }
+
   get firstName() {
     return this.registerUserFormGroup.get('firstName');
   }
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index b5a763a..3d6d2f4 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -57,7 +57,7 @@ input:focus, button:focus {
 
 .input-selection {
   position: relative;
-  margin-top: 0.7em;
+  margin-top: .7em;
 }
 
   /* Don't show the placeholder when the label is on top
@@ -73,8 +73,8 @@ input:focus, button:focus {
   border-bottom: 1px solid grey;
   box-sizing: border-box;
 
-  margin-bottom: 0.5em;
-  padding: 0.4em;
+  margin-bottom: .5em;
+  padding: .4em;
   padding-left: 0;
 
   font-size: inherit;
@@ -86,7 +86,7 @@ input:focus, button:focus {
   position: absolute;
   left: 0;
 
-  margin-top: 0.4em;
+  margin-top: .4em;
   color: grey;
 }
 
@@ -96,7 +96,7 @@ input:focus, button:focus {
 .input-selection:hover > .input-field-label ,
 .input-selection > input:not(:placeholder-shown) + .input-field-label ,
 .input-selection > input:focus + .input-field-label {
-  font-size: 0.7em;
+  font-size: .7em;
   color: var(--focus-color);
   transform: translate(0, -1.2em);
 }
@@ -125,7 +125,7 @@ input:focus, button:focus {
 
 .input-errors {
   margin-top: -.8em;
-  font-size: 0.7em;
+  font-size: .7em;
 
   position: absolute;
   right: 0;
@@ -165,14 +165,14 @@ input:focus, button:focus {
   background-color: black;
 
   border: 2px solid black;
-  border-radius: 0.4em;
+  border-radius: .4em;
   box-sizing: border-box;
 
-  font-size: 0.8em;
+  font-size: .8em;
   text-align: center;
 
-  margin-top: 0.5em;
-  padding: 0.3em;
+  margin-top: .5em;
+  padding: .3em;
 }
 
 .submit-btn:hover {
@@ -184,5 +184,5 @@ input:focus, button:focus {
 
 .submit-btn:active {
   transition: 0s;
-  transform: scale(0.9);
+  transform: scale(.9);
 }