DHBW/TelegramAktienBot
1
0
Fork 0
Code Issues 6 Pull Requests 26 Actions Packages Projects Releases Wiki Activity

Add login capability; Add register page to routing; Block access from users that are not logged in.

Browse Source
This commit is contained in:
kevinpauer 2022-03-16 19:52:16 +01:00
parent 2375abbdcf
commit 2bf7f54f94
9 changed files with 100 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts
View File

@ -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<any> {
// return this.http.post(
// AUTH_API + 'signin',
// {
// username,
// password,
// },
// httpOptions
// );
// }
// register(username: string, email: string, password: string): Observable<any> {
// return this.http.post(
// AUTH_API + 'signup',
// {
// username,
// email,
// password,
// },
// httpOptions
// );
// }
login(username: string, password: string): Observable<any> {
return this.http.post(AUTH_API + 'login', {
username,
password,
});
}
register(username: string, password: string): Observable<any> {
return this.http.post(
AUTH_API + 'signup',
{
username,
password,
},
httpOptions
);
}
}

2
webservice/Frontend/Aktienbot/src/app/Services/data.service.ts
View File

@ -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<any> {
// return this.http.get(API_URL + 'all', { responseType: 'text' });

7
webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html
View File

@ -2,7 +2,7 @@
<div class="card card-container no-border">
<img
id="profile-img"
src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
class="profile-img-card"
/>
<form
@ -66,7 +66,10 @@
</div>
</form>
<div class="alert alert-success" *ngIf="isLoggedIn">
Logged in as {{ roles }}.
Logged in as {{ accountName }}.
</div>
<button class="btn btn-secondary btn-block" routerLink="/register">
Sign up
</button>
</div>
</div>

48
webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts
View File

@ -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();

27
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html
View File

@ -1,8 +1,8 @@
<div class="col-md-12">
<div class="card card-container">
<div class="col-md-4 login-container">
<div class="card card-container no-border">
<img
id="profile-img"
src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
class="profile-img-card"
/>
<form
@ -34,24 +34,6 @@
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
class="form-control"
name="email"
[(ngModel)]="form.email"
required
email
#email="ngModel"
/>
<div class="alert-danger" *ngIf="email.errors && f.submitted">
<div *ngIf="email.errors?.['required']">Email is required</div>
<div *ngIf="email.errors?.['email']">
Email must be a valid email address
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
@ -80,5 +62,8 @@
<div class="alert alert-success" *ngIf="isSuccessful">
Your registration is successful!
</div>
<button class="btn btn-secondary btn-block" routerLink="/login">
Go Back
</button>
</div>
</div>

9
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss
View File

@ -0,0 +1,9 @@
.login-container {
margin: auto;
width: 60vh;
padding-top: 10vh;
}
.no-border {
border: none;
}

29
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts
View File

@ -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;
}
);
}
}

19
webservice/Frontend/Aktienbot/src/app/app.component.ts
View File

@ -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']);
}
});
}
}

2
webservice/Frontend/Aktienbot/src/environments/environment.ts
View File

@ -3,7 +3,7 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
production: false,
};
/*