From 9920c0eb27f38d8956686517b7f213600bcd6873 Mon Sep 17 00:00:00 2001
From: Martin <e1633073@student.tuwien.ac.at>
Date: Sat, 20 Mar 2021 12:04:21 +0100
Subject: [PATCH 1/2] Added home (logged in) component

---
 frontend/src/app/app-routing.module.ts        | 17 +++++-
 frontend/src/app/app.module.ts                |  3 +-
 .../src/app/component/home/home.component.css |  0
 .../app/component/home/home.component.html    | 10 ++++
 .../src/app/component/home/home.component.ts  | 53 +++++++++++++++++++
 .../component/landing/landing.component.html  |  3 +-
 .../app/component/login/login.component.html  |  9 ----
 .../app/component/login/login.component.ts    | 43 +--------------
 8 files changed, 85 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/app/component/home/home.component.css
 create mode 100644 frontend/src/app/component/home/home.component.html
 create mode 100644 frontend/src/app/component/home/home.component.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index d425c6f..9342e77 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,7 +1,22 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import {LoginComponent} from './component/login/login.component';
+import {HomeComponent} from './component/home/home.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginComponent,
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+  },
+  {
+    path: 'home',
+    component: HomeComponent,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index e22a7c3..5a7179c 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -17,9 +17,10 @@ import {MatInputModule} from '@angular/material/input';
 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';
 
 @NgModule({
-  declarations: [LandingComponent, TestSubCompComponent, LoginComponent],
+  declarations: [LandingComponent, TestSubCompComponent, LoginComponent, HomeComponent],
   imports: [
     ReactiveFormsModule,
     BrowserModule,
diff --git a/frontend/src/app/component/home/home.component.css b/frontend/src/app/component/home/home.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/component/home/home.component.html b/frontend/src/app/component/home/home.component.html
new file mode 100644
index 0000000..9f3b7e9
--- /dev/null
+++ b/frontend/src/app/component/home/home.component.html
@@ -0,0 +1,10 @@
+<p>home works!</p>
+<button (click)="logout()">Logout</button>
+<br>
+<button (click)="paramsFromUrl()">Get Params from URL</button>
+<br>
+<button (click)="gotoBackend()">Call Backend</button>
+<br>
+Token: <input type="text" [(ngModel)]="id_token">
+<br>
+State: <input type="text" [(ngModel)]="state">
diff --git a/frontend/src/app/component/home/home.component.ts b/frontend/src/app/component/home/home.component.ts
new file mode 100644
index 0000000..9190666
--- /dev/null
+++ b/frontend/src/app/component/home/home.component.ts
@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  id_token = 'x';
+  state = 'y';
+
+  constructor(private http: HttpClient, private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  logout() {
+    const headerDict = {
+      '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' +
+      'post_logout_redirect_uri=http://localhost:4200&\n' +
+      'state=' + this.state,
+      {
+        headers: new HttpHeaders(headerDict),
+        responseType: 'text'
+      }).subscribe(() => this.router.navigate(['login']));
+  }
+
+  gotoBackend() {
+    const headerDict = {
+      'Authorization': 'Bearer ' + this.id_token
+    };
+    this.http.get('http://localhost:8000/api/login',
+      {
+        headers: new HttpHeaders(headerDict)
+      })
+      .subscribe(data => console.log(data));
+  }
+
+  paramsFromUrl() {
+    const url = window.location.href;
+    const params: string = url.split('#')[1];
+    this.state = params.split('&')[0].split('session_state=')[1];
+    this.id_token = params.split('&')[1].split('id_token=')[1];
+  }
+
+}
diff --git a/frontend/src/app/component/landing/landing.component.html b/frontend/src/app/component/landing/landing.component.html
index 204eb96..3d1e832 100644
--- a/frontend/src/app/component/landing/landing.component.html
+++ b/frontend/src/app/component/landing/landing.component.html
@@ -1,3 +1,4 @@
 <h1>Bsp 1 Gruppe 4</h1>
 <br>
-<app-login></app-login>
+<router-outlet></router-outlet>
+
diff --git a/frontend/src/app/component/login/login.component.html b/frontend/src/app/component/login/login.component.html
index a6afd38..f9942af 100644
--- a/frontend/src/app/component/login/login.component.html
+++ b/frontend/src/app/component/login/login.component.html
@@ -1,13 +1,4 @@
 <p>login works!</p>
 <button (click)="login()">Login</button>
-<button (click)="logout()">Logout</button>
-<br>
-<button (click)="paramsFromUrl()">Get Params from URL</button>
-<br>
-<button (click)="gotoBackend()">Call Backend</button>
-<br>
-Token: <input type="text" [(ngModel)]="id_token">
-<br>
-State: <input type="text" [(ngModel)]="state">
 <br>
 <div *ngIf="loginHTML" [innerHTML]="loginHTML" title="OpenId"></div>
diff --git a/frontend/src/app/component/login/login.component.ts b/frontend/src/app/component/login/login.component.ts
index e73fbb1..ad001e0 100644
--- a/frontend/src/app/component/login/login.component.ts
+++ b/frontend/src/app/component/login/login.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {DomSanitizer} from '@angular/platform-browser';
-import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-login',
@@ -11,14 +10,10 @@ import {ActivatedRoute} from '@angular/router';
 export class LoginComponent implements OnInit {
 
   loginHTML;
-  id_token = 'x';
-  state = 'y';
 
-  constructor(private http: HttpClient, private _sanitizer: DomSanitizer,
-              private activatedRoute: ActivatedRoute) { }
+  constructor(private http: HttpClient, private _sanitizer: DomSanitizer) { }
 
   ngOnInit(): void {
-    this.activatedRoute.queryParams.subscribe(params => console.log(params));
   }
 
   login() {
@@ -27,45 +22,11 @@ export class LoginComponent implements OnInit {
       'Access-Control-Allow-Origin': '*'
     };
     this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/auth?client_id=waecm' +
-      '&response_type=id_token&prompt=consent&redirect_uri=http%3A%2F%2Flocalhost%3A4200&scope=openid%20profile&nonce=abcdef',
+      '&response_type=id_token&prompt=consent&redirect_uri=http://localhost:4200/home&scope=openid%20profile&nonce=abcdef',
       {
         headers: new HttpHeaders(headerDict),
         responseType: 'text'
       })
       .subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
   }
-
-  logout() {
-      const headerDict = {
-        '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' +
-      'post_logout_redirect_uri=https://localhost:4200/&\n' +
-      'state=' + this.state,
-      {
-        headers: new HttpHeaders(headerDict),
-        responseType: 'text'
-      })
-      .subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
-  }
-
-  gotoBackend() {
-    const headerDict = {
-      'Authorization': 'Bearer ' + this.id_token
-    };
-    this.http.get('https://localhost:8000/api/login',
-      {
-        headers: new HttpHeaders(headerDict)
-      })
-      .subscribe(data => console.log(data));
-  }
-
-  paramsFromUrl() {
-    const url = window.location.href;
-    const params: string = url.split('#')[1];
-    this.state = params.split('&')[0].split('session_state=')[1];
-    this.id_token = params.split('&')[1].split('id_token=')[1];
-  }
 }

From 4bf74af323c4621a76c86b2a29937e2f6a2d37e1 Mon Sep 17 00:00:00 2001
From: Martin <e1633073@student.tuwien.ac.at>
Date: Sat, 20 Mar 2021 15:39:00 +0100
Subject: [PATCH 2/2] Remodelled login with redirect to avoid CORS

---
 frontend/src/app/app.module.ts                |  7 +--
 .../app/component/home/home.component.html    |  3 +-
 .../src/app/component/home/home.component.ts  | 13 +++-
 .../component/landing/landing.component.html  |  4 +-
 .../app/component/login/login.component.html  | 11 +++-
 .../app/component/login/login.component.ts    | 61 +++++++++++++++----
 6 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 5a7179c..a181e3d 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -4,8 +4,7 @@ import {NgModule} from '@angular/core';
 import {AppRoutingModule} from './app-routing.module';
 import {LandingComponent} from './component/landing/landing.component';
 import {RestService} from './services/rest.service';
-import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
-import {InterceptorService} from './services/interceptor.service';
+import {HttpClientModule} from '@angular/common/http';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {environment} from '../environments/environment';
 import {TestSubCompComponent} from './component/testsubcomp/test-sub-comp.component';
@@ -38,9 +37,9 @@ import { HomeComponent } from './component/home/home.component';
   // enables injecting
   providers: [
     RestService,
-    {
+    /*{
       provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
-    },
+    },*/
 
   ],
   bootstrap: [LandingComponent]
diff --git a/frontend/src/app/component/home/home.component.html b/frontend/src/app/component/home/home.component.html
index 9f3b7e9..51c3e55 100644
--- a/frontend/src/app/component/home/home.component.html
+++ b/frontend/src/app/component/home/home.component.html
@@ -1,5 +1,6 @@
 <p>home works!</p>
-<button (click)="logout()">Logout</button>
+<a href="http://localhost:4200/"><button (click)="logout()" >Logout</button></a>
+<a href="http://localhost:4200/">bye</a>
 <br>
 <button (click)="paramsFromUrl()">Get Params from URL</button>
 <br>
diff --git a/frontend/src/app/component/home/home.component.ts b/frontend/src/app/component/home/home.component.ts
index 9190666..69ae760 100644
--- a/frontend/src/app/component/home/home.component.ts
+++ b/frontend/src/app/component/home/home.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -11,10 +11,14 @@ export class HomeComponent implements OnInit {
 
   id_token = 'x';
   state = 'y';
+  parsedToken;
 
-  constructor(private http: HttpClient, private router: Router) { }
+  constructor(private http: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) { }
 
   ngOnInit(): void {
+    this.paramsFromUrl();
+    console.log(this.parsedToken);
+    this.activatedRoute.fragment.subscribe(data => console.log(data));
   }
 
   logout() {
@@ -48,6 +52,11 @@ export class HomeComponent implements OnInit {
     const params: string = url.split('#')[1];
     this.state = params.split('&')[0].split('session_state=')[1];
     this.id_token = params.split('&')[1].split('id_token=')[1];
+    try {
+    this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1]));
+    } catch (e) {
+      console.log(e);
+    }
   }
 
 }
diff --git a/frontend/src/app/component/landing/landing.component.html b/frontend/src/app/component/landing/landing.component.html
index 3d1e832..7b2456e 100644
--- a/frontend/src/app/component/landing/landing.component.html
+++ b/frontend/src/app/component/landing/landing.component.html
@@ -1,4 +1,2 @@
 <h1>Bsp 1 Gruppe 4</h1>
-<br>
-<router-outlet></router-outlet>
-
+<app-login></app-login>
diff --git a/frontend/src/app/component/login/login.component.html b/frontend/src/app/component/login/login.component.html
index f9942af..87e6948 100644
--- a/frontend/src/app/component/login/login.component.html
+++ b/frontend/src/app/component/login/login.component.html
@@ -1,4 +1,11 @@
-<p>login works!</p>
 <button (click)="login()">Login</button>
 <br>
-<div *ngIf="loginHTML" [innerHTML]="loginHTML" title="OpenId"></div>
+<button (click)="logout()">Logout</button>
+<br>
+<button (click)="gotoBackend()">Call Backend</button>
+<br>
+<p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
+<div *ngIf="parsedToken">
+  {{parsedToken.given_name}} {{parsedToken.family_name}}
+  <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
+</div>
diff --git a/frontend/src/app/component/login/login.component.ts b/frontend/src/app/component/login/login.component.ts
index ad001e0..da1004f 100644
--- a/frontend/src/app/component/login/login.component.ts
+++ b/frontend/src/app/component/login/login.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {DomSanitizer} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-login',
@@ -8,25 +8,64 @@ import {DomSanitizer} from '@angular/platform-browser';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
+  openid_endpoint = 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect';
+  id_token;
+  state;
+  parsedToken;
 
-  loginHTML;
+  errorMessage;
 
-  constructor(private http: HttpClient, private _sanitizer: DomSanitizer) { }
+  constructor(private http: HttpClient,
+              private activatedRoute: ActivatedRoute) { }
 
   ngOnInit(): void {
+    this.activatedRoute.fragment.subscribe(data => {
+      if (data) {
+        data.split('&').forEach(
+         element => {
+          const split = element.split('=');
+          if (split[0] === 'error') {
+            this.errorMessage = split[1];
+            return;
+          }
+          if (split[0] === 'id_token') {
+            this.id_token = split[1];
+            this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1]));
+          } else if (split[0] === 'state') {
+            this.state = split[1];
+          }
+         }
+       );
+      }
+    });
   }
 
   login() {
+    const url = this.openid_endpoint + '/auth?' +
+      'client_id=waecm' +
+      '&response_type=id_token' +
+      '&prompt=consent' +
+      '&redirect_uri=http://localhost:4200' +
+      '&scope=openid%20profile' +
+      '&nonce=abcdef';
+    window.location.replace(url);
+  }
+
+  logout() {
+    const url = this.openid_endpoint + '/logout' +
+      '?id_token_hint=' + this.id_token + '&' +
+      'post_logout_redirect_uri=http://localhost:4200';
+    window.location.replace(url);
+  }
+
+  gotoBackend() {
     const headerDict = {
-      'Accept': '*/*',
-      'Access-Control-Allow-Origin': '*'
+      'Authorization': 'Bearer ' + this.id_token
     };
-    this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/auth?client_id=waecm' +
-      '&response_type=id_token&prompt=consent&redirect_uri=http://localhost:4200/home&scope=openid%20profile&nonce=abcdef',
+    this.http.get('http://localhost:8000/api/login',
       {
-        headers: new HttpHeaders(headerDict),
-        responseType: 'text'
+        headers: new HttpHeaders(headerDict)
       })
-      .subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
+      .subscribe(data => console.log(data));
   }
 }