From 2375abbdcf7ebe06c1a6f827ccb63e3bbe357973 Mon Sep 17 00:00:00 2001
From: kevinpauer <kevinpauer@t-online.de>
Date: Tue, 15 Mar 2022 21:45:41 +0100
Subject: [PATCH] Finish Skeleton; Add and redesign login page

---
 .../src/app/Helpers/auth.interceptor.ts       | 30 +++++++
 .../src/app/Services/auth.service.ts          | 42 +++++-----
 .../src/app/Services/data.service.ts          | 24 +++---
 .../src/app/Views/login/login.component.html  |  4 +-
 .../src/app/Views/login/login.component.scss  |  9 ++
 .../src/app/Views/login/login.component.ts    | 38 ++++-----
 .../Views/register/register.component.html    | 84 +++++++++++++++++++
 .../Views/register/register.component.scss    |  0
 .../Views/register/register.component.spec.ts | 25 ++++++
 .../app/Views/register/register.component.ts  | 34 ++++++++
 .../Aktienbot/src/app/app-routing.module.ts   | 22 ++++-
 .../Aktienbot/src/app/app.component.html      |  5 +-
 .../Aktienbot/src/app/app.component.ts        | 24 +++++-
 .../Frontend/Aktienbot/src/app/app.module.ts  |  4 +
 webservice/Frontend/Aktienbot/src/index.html  |  6 ++
 webservice/Frontend/Aktienbot/src/styles.scss |  1 +
 16 files changed, 291 insertions(+), 61 deletions(-)
 create mode 100644 webservice/Frontend/Aktienbot/src/app/Helpers/auth.interceptor.ts
 create mode 100644 webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html
 create mode 100644 webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss
 create mode 100644 webservice/Frontend/Aktienbot/src/app/Views/register/register.component.spec.ts
 create mode 100644 webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts

diff --git a/webservice/Frontend/Aktienbot/src/app/Helpers/auth.interceptor.ts b/webservice/Frontend/Aktienbot/src/app/Helpers/auth.interceptor.ts
new file mode 100644
index 0000000..ff94e91
--- /dev/null
+++ b/webservice/Frontend/Aktienbot/src/app/Helpers/auth.interceptor.ts
@@ -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 },
+];
diff --git a/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts b/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts
index 234529f..ecf0ad2 100644
--- a/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts
+++ b/webservice/Frontend/Aktienbot/src/app/Services/auth.service.ts
@@ -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
+  //   );
+  // }
 }
diff --git a/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts b/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts
index 3eacaf6..1710fc8 100644
--- a/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts
+++ b/webservice/Frontend/Aktienbot/src/app/Services/data.service.ts
@@ -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' });
+  // }
 }
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 4110d39..2a9d0bd 100644
--- a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html
+++ b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html
@@ -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"
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.scss b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.scss
index e69de29..652a402 100644
--- a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.scss
+++ b/webservice/Frontend/Aktienbot/src/app/Views/login/login.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/login/login.component.ts b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts
index 0285f61..e45af9d 100644
--- a/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts
+++ b/webservice/Frontend/Aktienbot/src/app/Views/login/login.component.ts
@@ -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();
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html
new file mode 100644
index 0000000..f203378
--- /dev/null
+++ b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html
@@ -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>
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.spec.ts b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.spec.ts
new file mode 100644
index 0000000..f6db869
--- /dev/null
+++ b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.spec.ts
@@ -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();
+  });
+});
diff --git a/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts
new file mode 100644
index 0000000..e251cce
--- /dev/null
+++ b/webservice/Frontend/Aktienbot/src/app/Views/register/register.component.ts
@@ -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;
+    //   }
+    // );
+  }
+}
diff --git a/webservice/Frontend/Aktienbot/src/app/app-routing.module.ts b/webservice/Frontend/Aktienbot/src/app/app-routing.module.ts
index 0297262..b1926d3 100644
--- a/webservice/Frontend/Aktienbot/src/app/app-routing.module.ts
+++ b/webservice/Frontend/Aktienbot/src/app/app-routing.module.ts
@@ -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 {}
diff --git a/webservice/Frontend/Aktienbot/src/app/app.component.html b/webservice/Frontend/Aktienbot/src/app/app.component.html
index 7e82551..ccb2334 100644
--- a/webservice/Frontend/Aktienbot/src/app/app.component.html
+++ b/webservice/Frontend/Aktienbot/src/app/app.component.html
@@ -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>
diff --git a/webservice/Frontend/Aktienbot/src/app/app.component.ts b/webservice/Frontend/Aktienbot/src/app/app.component.ts
index e286420..6244731 100644
--- a/webservice/Frontend/Aktienbot/src/app/app.component.ts
+++ b/webservice/Frontend/Aktienbot/src/app/app.component.ts
@@ -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'
+        );
+      });
+  }
 }
diff --git a/webservice/Frontend/Aktienbot/src/app/app.module.ts b/webservice/Frontend/Aktienbot/src/app/app.module.ts
index b1a8e93..ebc1537 100644
--- a/webservice/Frontend/Aktienbot/src/app/app.module.ts
+++ b/webservice/Frontend/Aktienbot/src/app/app.module.ts
@@ -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],
diff --git a/webservice/Frontend/Aktienbot/src/index.html b/webservice/Frontend/Aktienbot/src/index.html
index 35db5c5..2e59807 100644
--- a/webservice/Frontend/Aktienbot/src/index.html
+++ b/webservice/Frontend/Aktienbot/src/index.html
@@ -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>
diff --git a/webservice/Frontend/Aktienbot/src/styles.scss b/webservice/Frontend/Aktienbot/src/styles.scss
index 9945fb5..3a36e53 100644
--- a/webservice/Frontend/Aktienbot/src/styles.scss
+++ b/webservice/Frontend/Aktienbot/src/styles.scss
@@ -4,6 +4,7 @@ html,
 body {
   height: 100%;
   overflow-x: hidden;
+  background-color: #181a1b;
 }
 body {
   margin: 0;