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

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

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

webservice/Frontend/Aktienbot/src/app/Views/login/login.component.html

@@ -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>

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.tokenStorage.signOut();
-    //   this.isLoggedIn = true;
+    if (this.tokenStorage.getToken()) {
-    //   this.roles = this.tokenStorage.getUser().roles;
+      this.isLoggedIn = true;
-    // }
+    }
   }
   onSubmit(): void {
-    // const { username, password } = this.form;
+    const { username, password } = this.form;
-    // this.authService.login(username, password).subscribe(
+    console.log(username, password);
-    //   (data) => {
+    this.authService.login(username, password).subscribe(
-    //     this.tokenStorage.saveToken(data.accessToken);
+      (data) => {
-    //     this.tokenStorage.saveUser(data);
+        this.tokenStorage.saveToken(data.accessToken);
-    //     this.isLoginFailed = false;
+        this.tokenStorage.saveUser(data);
-    //     this.isLoggedIn = true;
+
-    //     this.roles = this.tokenStorage.getUser().roles;
+        this.isLoginFailed = false;
-    //     this.reloadPage();
+        this.isLoggedIn = true;
-    //   },
+        this.accountName = username;
-    //   (err) => {
+        console.log(this.isLoggedIn);
-    //     this.errorMessage = err.error.message;
+        this.router.navigate(['']);
-    //     this.isLoginFailed = true;
+      },
-    //   }
+      (err) => {
-    // );
+        this.errorMessage = err.error.message;
+        this.isLoginFailed = true;
+      }
+    );
   }
   reloadPage(): void {
     window.location.reload();

webservice/Frontend/Aktienbot/src/app/Views/register/register.component.html

@@ -1,8 +1,8 @@
-<div class="col-md-12">
+<div class="col-md-4 login-container">
-  <div class="card card-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>

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;
+}

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;
+    const { username, password } = this.form;
-    // this.authService.register(username, email, password).subscribe(
+    this.authService.register(username, password).subscribe(
-    //   (data) => {
+      (data) => {
-    //     console.log(data);
+        console.log(data);
-    //     this.isSuccessful = true;
+        this.isSuccessful = true;
-    //     this.isSignUpFailed = false;
+        this.isSignUpFailed = false;
-    //   },
+        this.router.navigate(['/login']);
-    //   (err) => {
+      },
-    //     this.errorMessage = err.error.message;
+      (err) => {
-    //     this.isSignUpFailed = true;
+        this.errorMessage = err.error.message;
-    //   }
+        this.isSignUpFailed = true;
-    // );
+      }
+    );
   }
 }

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

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,
 };
 
 /*