From 2bf7f54f94f1ace8f42a6a28e6d7d55b5f2ee8bc Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Wed, 16 Mar 2022 19:52:16 +0100 Subject: [PATCH] Add login capability; Add register page to routing; Block access from users that are not logged in. --- .../src/app/Services/auth.service.ts | 40 +++++++--------- .../src/app/Services/data.service.ts | 2 +- .../src/app/Views/login/login.component.html | 7 ++- .../src/app/Views/login/login.component.ts | 48 +++++++++++-------- .../Views/register/register.component.html | 27 +++-------- .../Views/register/register.component.scss | 9 ++++ .../app/Views/register/register.component.ts | 29 +++++------ .../Aktienbot/src/app/app.component.ts | 19 +++++++- .../Aktienbot/src/environments/environment.ts | 2 +- 9 files changed, 100 insertions(+), 83 deletions(-) diff --git a/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts b/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts index ecf0ad2..8b4a90f 100644 --- a/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts +++ b/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts @@ -1,34 +1,30 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; -const AUTH_API = 'http://localhost:8080/api/auth/'; +const AUTH_API = 'https://aktienbot.flokaiser.com/api/'; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), }; + @Injectable({ providedIn: 'root', }) export class AuthService { constructor(private http: HttpClient) {} - // login(username: string, password: string): Observable { - // return this.http.post( - // AUTH_API + 'signin', - // { - // username, - // password, - // }, - // httpOptions - // ); - // } - // register(username: string, email: string, password: string): Observable { - // return this.http.post( - // AUTH_API + 'signup', - // { - // username, - // email, - // password, - // }, - // httpOptions - // ); - // } + login(username: string, password: string): Observable { + return this.http.post(AUTH_API + 'login', { + username, + password, + }); + } + register(username: string, password: string): Observable { + return this.http.post( + AUTH_API + 'signup', + { + username, + password, + }, + httpOptions + ); + } } diff --git a/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts b/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts index 1710fc8..ce44a05 100644 --- a/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts +++ b/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts @@ -5,7 +5,7 @@ const API_URL = 'http://localhost:8080/api/test/'; @Injectable({ providedIn: 'root', }) -export class UserService { +export class DataService { constructor(private http: HttpClient) {} // getPublicContent(): Observable { // return this.http.get(API_URL + 'all', { responseType: 'text' }); diff --git a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html index 2a9d0bd..78d8161 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html +++ b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html @@ -2,7 +2,7 @@
- Logged in as {{ roles }}. + Logged in as {{ accountName }}.
+
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts index e45af9d..9b5bfb5 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts +++ b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { AuthService } from '../../Services/auth.service'; import { TokenStorageService } from '../../Services/token.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-login', @@ -15,33 +16,38 @@ export class LoginComponent implements OnInit { isLoggedIn = false; isLoginFailed = false; errorMessage = ''; - roles: string[] = []; + accountName = ''; + constructor( private authService: AuthService, - private tokenStorage: TokenStorageService + private tokenStorage: TokenStorageService, + private router: Router ) {} ngOnInit(): void { - // if (this.tokenStorage.getToken()) { - // this.isLoggedIn = true; - // this.roles = this.tokenStorage.getUser().roles; - // } + this.tokenStorage.signOut(); + if (this.tokenStorage.getToken()) { + this.isLoggedIn = true; + } } onSubmit(): void { - // const { username, password } = this.form; - // this.authService.login(username, password).subscribe( - // (data) => { - // this.tokenStorage.saveToken(data.accessToken); - // this.tokenStorage.saveUser(data); - // this.isLoginFailed = false; - // this.isLoggedIn = true; - // this.roles = this.tokenStorage.getUser().roles; - // this.reloadPage(); - // }, - // (err) => { - // this.errorMessage = err.error.message; - // this.isLoginFailed = true; - // } - // ); + const { username, password } = this.form; + console.log(username, password); + this.authService.login(username, password).subscribe( + (data) => { + this.tokenStorage.saveToken(data.accessToken); + this.tokenStorage.saveUser(data); + + this.isLoginFailed = false; + this.isLoggedIn = true; + this.accountName = username; + console.log(this.isLoggedIn); + this.router.navigate(['']); + }, + (err) => { + this.errorMessage = err.error.message; + this.isLoginFailed = true; + } + ); } reloadPage(): void { window.location.reload(); diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html index f203378..f951300 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html +++ b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html @@ -1,8 +1,8 @@ -
-
+ -
- - -
-
Email is required
-
- Email must be a valid email address -
-
-
Your registration is successful!
+
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss index e69de29..652a402 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss +++ b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss @@ -0,0 +1,9 @@ +.login-container { + margin: auto; + width: 60vh; + padding-top: 10vh; +} + +.no-border { + border: none; +} diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts index e251cce..728792b 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts +++ b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { AuthService } from '../../Services/auth.service'; @Component({ @@ -9,26 +10,26 @@ import { AuthService } from '../../Services/auth.service'; export class RegisterComponent implements OnInit { form: any = { username: null, - email: null, password: null, }; isSuccessful = false; isSignUpFailed = false; errorMessage = ''; - constructor(private authService: AuthService) {} + constructor(private authService: AuthService, private router: Router) {} ngOnInit(): void {} onSubmit(): void { - // const { username, email, password } = this.form; - // this.authService.register(username, email, password).subscribe( - // (data) => { - // console.log(data); - // this.isSuccessful = true; - // this.isSignUpFailed = false; - // }, - // (err) => { - // this.errorMessage = err.error.message; - // this.isSignUpFailed = true; - // } - // ); + const { username, password } = this.form; + this.authService.register(username, password).subscribe( + (data) => { + console.log(data); + this.isSuccessful = true; + this.isSignUpFailed = false; + this.router.navigate(['/login']); + }, + (err) => { + this.errorMessage = err.error.message; + this.isSignUpFailed = true; + } + ); } } diff --git a/webservice/Frontend/Aktienbot/src/app/app.component.ts b/webservice/Frontend/Aktienbot/src/app/app.component.ts index 6244731..e3465f6 100644 --- a/webservice/Frontend/Aktienbot/src/app/app.component.ts +++ b/webservice/Frontend/Aktienbot/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; +import { TokenStorageService } from './Services/token.service'; import { filter } from 'rxjs/operators'; @Component({ @@ -14,12 +15,17 @@ export class AppComponent { title = 'Aktienbot'; showHeader = false; + isLoggedIn = false; + /** * Router import to show router-outlet. * * @param router Router */ - constructor(private router: Router) { + constructor( + private router: Router, + private tokenStorage: TokenStorageService + ) { this.router.events .pipe(filter((event) => event instanceof NavigationEnd)) .subscribe((event) => { @@ -27,6 +33,17 @@ export class AppComponent { (event as NavigationEnd).url === '/login' || (event as NavigationEnd).url === '/register' ); + if (this.tokenStorage.getToken()) { + this.isLoggedIn = true; + } else { + this.isLoggedIn = false; + } + if ( + this.isLoggedIn === false && + (event as NavigationEnd).url != '/register' + ) { + this.router.navigate(['/login']); + } }); } } diff --git a/webservice/Frontend/Aktienbot/src/environments/environment.ts b/webservice/Frontend/Aktienbot/src/environments/environment.ts index f56ff47..66998ae 100644 --- a/webservice/Frontend/Aktienbot/src/environments/environment.ts +++ b/webservice/Frontend/Aktienbot/src/environments/environment.ts @@ -3,7 +3,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, }; /*