From 012dc76f5d26a796b1bece49b119629f10f45281 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 14 Jan 2021 15:22:00 +0200 Subject: Added buttons on the login and register pages, that redirect you to each other (register to login and login to register) --- .../src/app/components/login/login.component.css | 11 +++++++++++ .../src/app/components/login/login.component.html | 3 +++ .../src/app/components/login/login.component.ts | 4 ++++ .../app/components/register/register.component.css | 11 +++++++++++ .../components/register/register.component.html | 3 +++ .../app/components/register/register.component.ts | 7 ++++++- src/DevHive.Angular/src/styles.css | 22 +++++++++++----------- 7 files changed, 49 insertions(+), 12 deletions(-) (limited to 'src/DevHive.Angular') 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 @@
+
+ +
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 @@
+
+ +
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); } -- cgit v1.2.3