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

Frontend #5

Merged
kevinpauer merged 10 commits from frontend into main 2022-03-17 13:29:54 +00:00
Conversation 0 Commits 10 Files Changed 54 +291 -61
16 changed files with 291 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2375abbdcf - Show all commits

30
webservice/Frontend/Aktienbot/src/app/Helpers/auth.interceptor.ts Normal file
View File

@ -0,0 +1,30 @@
import { HTTP_INTERCEPTORS, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http';
import { TokenStorageService } from '../Services/token.service';
import { Observable } from 'rxjs';
const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private token: TokenStorageService) {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
let authReq = req;
const token = this.token.getToken();
if (token != null) {
authReq = req.clone({
headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token),
});
}
return next.handle(authReq);
}
}
export const authInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
];

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

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

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

@ -7,16 +7,16 @@ const API_URL = 'http://localhost:8080/api/test/';
})
export class UserService {
constructor(private http: HttpClient) {}
getPublicContent(): Observable<any> {
return this.http.get(API_URL + 'all', { responseType: 'text' });
}
getUserBoard(): Observable<any> {
return this.http.get(API_URL + 'user', { responseType: 'text' });
}
getModeratorBoard(): Observable<any> {
return this.http.get(API_URL + 'mod', { responseType: 'text' });
}
getAdminBoard(): Observable<any> {
return this.http.get(API_URL + 'admin', { responseType: 'text' });
}
// getPublicContent(): Observable<any> {
// return this.http.get(API_URL + 'all', { responseType: 'text' });
// }
// getUserBoard(): Observable<any> {
// return this.http.get(API_URL + 'user', { responseType: 'text' });
// }
// getModeratorBoard(): Observable<any> {
// return this.http.get(API_URL + 'mod', { responseType: 'text' });
// }
// getAdminBoard(): Observable<any> {
// return this.http.get(API_URL + 'admin', { responseType: 'text' });
// }
}

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

@ -1,5 +1,5 @@
<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"

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

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

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

@ -21,27 +21,27 @@ export class LoginComponent implements OnInit {
private tokenStorage: TokenStorageService
) {}
ngOnInit(): void {
if (this.tokenStorage.getToken()) {
this.isLoggedIn = true;
this.roles = this.tokenStorage.getUser().roles;
}
// if (this.tokenStorage.getToken()) {
// this.isLoggedIn = true;
// this.roles = this.tokenStorage.getUser().roles;
// }
}
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;
// 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;
// }
// );
}
reloadPage(): void {
window.location.reload();

84
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html Normal file
View File

@ -0,0 +1,84 @@
<div class="col-md-12">
<div class="card card-container">
<img
id="profile-img"
src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
class="profile-img-card"
/>
<form
*ngIf="!isSuccessful"
name="form"
(ngSubmit)="f.form.valid && onSubmit()"
#f="ngForm"
novalidate
>
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
class="form-control"
name="username"
[(ngModel)]="form.username"
required
minlength="3"
maxlength="20"
#username="ngModel"
/>
<div class="alert-danger" *ngIf="username.errors && f.submitted">
<div *ngIf="username.errors?.['required']">Username is required</div>
<div *ngIf="username.errors?.['minlength']">
Username must be at least 3 characters
</div>
<div *ngIf="username.errors?.['maxlength']">
Username must be at most 20 characters
</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
type="password"
class="form-control"
name="password"
[(ngModel)]="form.password"
required
minlength="6"
#password="ngModel"
/>
<div class="alert-danger" *ngIf="password.errors && f.submitted">
<div *ngIf="password.errors?.['required']">Password is required</div>
<div *ngIf="password.errors?.['minlength']">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Sign Up</button>
</div>
<div class="alert alert-warning" *ngIf="f.submitted && isSignUpFailed">
Signup failed!<br />{{ errorMessage }}
</div>
</form>
<div class="alert alert-success" *ngIf="isSuccessful">
Your registration is successful!
</div>
</div>
</div>

0
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss Normal file
View File

25
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RegisterComponent } from './register.component';
describe('RegisterComponent', () => {
let component: RegisterComponent;
let fixture: ComponentFixture<RegisterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RegisterComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(RegisterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

34
webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts Normal file
View File

@ -0,0 +1,34 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../Services/auth.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss'],
})
export class RegisterComponent implements OnInit {
form: any = {
username: null,
email: null,
password: null,
};
isSuccessful = false;
isSignUpFailed = false;
errorMessage = '';
constructor(private authService: AuthService) {}
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;
// }
// );
}
}

22
webservice/Frontend/Aktienbot/src/app/app-routing.module.ts
View File

@ -1,10 +1,26 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './Views/dashboard/dashboard.component';
import { LoginComponent } from './Views/login/login.component';
import { RegisterComponent } from './Views/register/register.component';
const routes: Routes = [];
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
},
{
path: '',
component: DashboardComponent,
},
{
path: 'register',
component: RegisterComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
exports: [RouterModule],
})
export class AppRoutingModule { }
export class AppRoutingModule {}

5
webservice/Frontend/Aktienbot/src/app/app.component.html
View File

@ -1,3 +1,2 @@
<app-header></app-header>
<app-dashboard></app-dashboard>
<!-- <router-outlet></router-outlet> -->
<app-header *ngIf="showHeader"></app-header>
<router-outlet></router-outlet>

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

@ -1,10 +1,32 @@
import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
/**
* Application title.
*/
title = 'Aktienbot';
showHeader = false;
/**
* Router import to show router-outlet.
*
* @param router Router
*/
constructor(private router: Router) {
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe((event) => {
this.showHeader = !(
(event as NavigationEnd).url === '/login' ||
(event as NavigationEnd).url === '/register'
);
});
}
}

4
webservice/Frontend/Aktienbot/src/app/app.module.ts
View File

@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
@ -15,6 +16,7 @@ import { LoginComponent } from './Views/login/login.component';
import { HeaderComponent } from './Views/header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DashboardComponent } from './Views/dashboard/dashboard.component';
import { RegisterComponent } from './Views/register/register.component';
@NgModule({
declarations: [
@ -22,6 +24,7 @@ import { DashboardComponent } from './Views/dashboard/dashboard.component';
LoginComponent,
HeaderComponent,
DashboardComponent,
RegisterComponent,
],
imports: [
BrowserModule,
@ -34,6 +37,7 @@ import { DashboardComponent } from './Views/dashboard/dashboard.component';
MatCardModule,
MatTableModule,
FormsModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent],

6
webservice/Frontend/Aktienbot/src/index.html
View File

@ -15,6 +15,12 @@
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body class="mat-typography">
<app-root></app-root>

1
webservice/Frontend/Aktienbot/src/styles.scss
View File

@ -4,6 +4,7 @@ html,
body {
height: 100%;
overflow-x: hidden;
background-color: #181a1b;
}
body {
margin: 0;