Added login navigation guard

frontend/src/app/component/einstellungen/einstellungen.component.html

@@ -0,0 +1,2 @@
+<app-navigation></app-navigation>
+<p>einstellungen works!</p>

frontend/src/app/component/einstellungen/einstellungen.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-einstellungen',
+  templateUrl: './einstellungen.component.html',
+  styleUrls: ['./einstellungen.component.css']
+})
+export class EinstellungenComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/component/home/home.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {ActivatedRoute, Router} from '@angular/router';
+import {Router} from '@angular/router';
+import {environment} from '../../../environments/environment';
 
 @Component({
   selector: 'app-home',
@@ -9,17 +10,17 @@ import {ActivatedRoute, Router} from '@angular/router';
 })
 export class HomeComponent implements OnInit {
 
+  openid_endpoint = environment.openid_endpoint;
+
   id_token = 'x';
   state = 'y';
   parsedToken;
 
-  constructor(private http: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
+  constructor(private http: HttpClient, private router: Router) {
   }
 
   ngOnInit(): void {
     this.paramsFromUrl();
-    console.log(this.parsedToken);
-    this.activatedRoute.fragment.subscribe(data => console.log(data));
   }
 
   logout() {
@@ -27,8 +28,8 @@ export class HomeComponent implements OnInit {
       'Accept': '*/*',
       'Access-Control-Allow-Origin': '*'
     };
-    this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/logout' +
-      '?id_token_hint=' + this.id_token + '&\n' +
+    this.http.get(this.openid_endpoint + '/logout?' +
+      'id_token_hint=' + this.id_token + '&\n' +
       'post_logout_redirect_uri=http://localhost:4200&\n' +
       'state=' + this.state,
       {

frontend/src/app/component/landing/landing.component.html

@@ -1,2 +1,5 @@
-<h1 style="text-align: center; margin-top: 1em">Bsp 1 Gruppe 4</h1>
-<app-login></app-login>
+<div>
+  <router-outlet>
+  </router-outlet>
+</div>
+

frontend/src/app/component/landing/landing.component.ts

@@ -1,15 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-landing',
   templateUrl: './landing.component.html',
   styleUrls: ['./landing.component.css']
 })
-export class LandingComponent implements OnInit {
-
+export class LandingComponent {
   constructor() {
   }
-
-  ngOnInit(): void {
-  }
 }

frontend/src/app/component/login/login.component.html

@@ -1,4 +1,4 @@
-<!--<button mat-raised-button (click)="gotoBackend()">Call Backend</button>-->
+<app-navigation></app-navigation>
 <span id="loginBtnWrapper">
   <button *ngIf="!parsedToken"
           mat-raised-button color="primary"

frontend/src/app/component/login/login.component.ts

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
+import {AuthService} from '../../services/auth.service';
+import {environment} from '../../../environments/environment';
 
 @Component({
   selector: 'app-login',
@@ -8,7 +10,8 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  openid_endpoint = 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect';
+
+  openid_endpoint = environment.openid_endpoint;
   id_token;
   state;
   parsedToken;
@@ -16,7 +19,9 @@ export class LoginComponent implements OnInit {
   errorMessage;
 
   constructor(private http: HttpClient,
-              private activatedRoute: ActivatedRoute) {
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private authService: AuthService) {
   }
 
   ngOnInit(): void {
@@ -32,6 +37,7 @@ export class LoginComponent implements OnInit {
             if (split[0] === 'id_token') {
               this.id_token = split[1];
               this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1]));
+              this.authService.setToken(this.id_token);
               this.gotoBackend();
             } else if (split[0] === 'state') {
               this.state = split[1];
@@ -39,6 +45,9 @@ export class LoginComponent implements OnInit {
           }
         );
       }
+      if (this.authService.isAuthenticated()) {
+        this.router.navigate(['tweets']);
+      }
     });
   }
 
@@ -47,7 +56,7 @@ export class LoginComponent implements OnInit {
       'client_id=waecm' +
       '&response_type=id_token' +
       '&prompt=consent' +
-      '&redirect_uri=http://localhost:4200' +
+      '&redirect_uri=' + environment.location +
       '&scope=openid%20profile' +
       '&nonce=' + this.randomString(20);
     window.location.replace(url);

frontend/src/app/component/navigation/navigation.component.html

@@ -0,0 +1,16 @@
+<mat-toolbar>
+  <button *ngIf="show_menu"
+          mat-icon-button [matMenuTriggerFor]="menu"
+          class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="logout()">
+      <mat-icon>logout</mat-icon>
+      <span>Abmelden</span>
+    </button>
+  </mat-menu>
+
+
+  <span>{{title}}</span>
+</mat-toolbar>

frontend/src/app/component/navigation/navigation.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {environment} from '../../../environments/environment';
+import {AuthService} from '../../services/auth.service';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.css']
+})
+export class NavigationComponent implements OnInit {
+
+  openid_endpoint: string = environment.openid_endpoint;
+  title: string = environment.title;
+
+  show_menu = false;
+
+  constructor(public authService: AuthService) {
+    this.show_menu = authService.isAuthenticated();
+  }
+
+  ngOnInit(): void {
+  }
+
+  logout() {
+    const token = this.authService.getToken();
+    let url = this.openid_endpoint + '/logout' +
+      '?post_logout_redirect_uri=' + environment.location;
+    if (token) {
+      url += '&id_token_hint=' + this.authService.getToken();
+    }
+    this.authService.deleteToken();
+    this.show_menu = false;
+    window.location.replace(url);
+  }
+
+}

frontend/src/app/component/tweets/tweets.component.html

@@ -0,0 +1,2 @@
+<app-navigation></app-navigation>
+<p>tweets works!</p>

frontend/src/app/component/tweets/tweets.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tweets',
+  templateUrl: './tweets.component.html',
+  styleUrls: ['./tweets.component.css']
+})
+export class TweetsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}