Added login navigation guard

frontend/package.json

@@ -17,19 +17,22 @@
     "@angular/cdk": "9.2.4",
     "@angular/common": "~9.1.9",
     "@angular/compiler": "~9.1.9",
-    "@angular/core": "~9.1.9",
+    "@angular/core": "^9.1.13",
     "@angular/forms": "~9.1.9",
+    "@angular/http": "^7.2.16",
     "@angular/localize": "~9.1.9",
     "@angular/material": "9.2.4",
     "@angular/platform-browser": "~9.1.9",
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
     "@types/uuid": "8.3.0",
+    "angular2-jwt": "^0.2.3",
     "bootstrap": "~4.3.1",
     "jquery": "3.5.1",
     "ngx-logger": "4.1.9",
     "popper.js": "1.16.0",
-    "rxjs": "~6.5.5",
+    "rxjs": "^6.5.5",
+    "rxjs-compat": "^6.6.7",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },

frontend/src/app/app-routing.module.ts

@@ -1,20 +1,31 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
+import {AuthGuardService} from './services/auth-guard.service';
 import {LoginComponent} from './component/login/login.component';
-import {HomeComponent} from './component/home/home.component';
+import {TweetsComponent} from './component/tweets/tweets.component';
+import {EinstellungenComponent} from './component/einstellungen/einstellungen.component';
+import {UnAuthGuardService} from './services/un-auth-guard.service';
 
 const routes: Routes = [
   {
     path: '',
     component: LoginComponent,
+    canActivate: [UnAuthGuardService]
   },
   {
     path: 'login',
     component: LoginComponent,
+    canActivate: [UnAuthGuardService]
   },
   {
-    path: 'home',
-    component: HomeComponent,
+    path: 'tweets',
+    component: TweetsComponent,
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'einstellungen',
+    component: EinstellungenComponent,
+    canActivate: [AuthGuardService]
   },
 ];
 

frontend/src/app/app.module.ts

@@ -17,9 +17,19 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
 import {LoginComponent} from './component/login/login.component';
 import {HomeComponent} from './component/home/home.component';
+import { AuthGuardService } from './services/auth-guard.service';
+import { AuthService } from './services/auth.service';
+import {JwtHelper} from 'angular2-jwt';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import { TweetsComponent } from './component/tweets/tweets.component';
+import { EinstellungenComponent } from './component/einstellungen/einstellungen.component';
+import { NavigationComponent } from './component/navigation/navigation.component';
 
 @NgModule({
-  declarations: [LandingComponent, TestSubCompComponent, LoginComponent, HomeComponent],
+  declarations: [LandingComponent, TestSubCompComponent, LoginComponent,
+    HomeComponent, TweetsComponent, EinstellungenComponent, NavigationComponent],
   imports: [
     ReactiveFormsModule,
     BrowserModule,
@@ -32,11 +42,17 @@ import {HomeComponent} from './component/home/home.component';
     MatButtonModule,
     MatInputModule,
     MatSlideToggleModule,
-    MatSliderModule
+    MatSliderModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatMenuModule
   ],
   // enables injecting
   providers: [
+    AuthService,
+    AuthGuardService,
     RestService,
+    JwtHelper,
     /*{
       provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
     },*/

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

frontend/src/app/services/auth-guard.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { AuthService } from './auth.service';
+@Injectable()
+export class AuthGuardService implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+
+  canActivate(): boolean {
+    if (!this.auth.isAuthenticated()) {
+      this.router.navigate(['login']);
+      return false;
+    }
+    return true;
+  }
+}

frontend/src/app/services/auth.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import {JwtHelper} from 'angular2-jwt';
+
+@Injectable()
+export class AuthService {
+
+  tokenKey = 'loginToken';
+
+  constructor(public jwtHelper: JwtHelper) {}
+
+  public setToken(token): void {
+    sessionStorage.setItem(this.tokenKey, token);
+  }
+
+  public deleteToken(): void {
+    sessionStorage.removeItem(this.tokenKey);
+  }
+
+  public getToken(): string {
+    return sessionStorage.getItem(this.tokenKey);
+  }
+
+  // Check whether the token is expired and return
+  // true or false
+  public isAuthenticated(): boolean {
+    const token = sessionStorage.getItem(this.tokenKey);
+    if (token) {
+      return !this.jwtHelper.isTokenExpired(token);
+    } else {
+      return false;
+    }
+  }
+}

frontend/src/app/services/un-auth-guard.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {CanActivate, Router} from '@angular/router';
+import {AuthService} from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UnAuthGuardService implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+
+  canActivate(): boolean {
+    if (this.auth.isAuthenticated()) {
+      this.router.navigate(['tweets']);
+      return false;
+    }
+    return true;
+  }
+}

frontend/src/environments/environment.prod.ts

@@ -1,6 +1,7 @@
 import {NgxLoggerLevel} from 'ngx-logger';
 
 export const environment = {
+  title: 'Bsp 4 Gruppe 4',
   production: true,
   location: window.location.hostname,
   port: 8000,

frontend/src/environments/environment.ts

@@ -5,8 +5,10 @@
 import {NgxLoggerLevel} from 'ngx-logger';
 
 export const environment = {
+  title: 'Bsp 4 Gruppe 4',
+  openid_endpoint: 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect',
   production: false,
-  location: 'localhost',
+  location: 'http://localhost:4200',
   port: 8000,
   ws_location: 'ws://127.0.0.1',
   ws_port: 8000,

frontend/src/index.html

@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Bsp 1 Gruppe 4</title>
+  <title>Bsp 2 Gruppe 4</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-landing></app-landing>