Added home (logged in) component

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)],

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,

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

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

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

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>

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,
+  constructor(private http: HttpClient, private _sanitizer: DomSanitizer) { }
-              private activatedRoute: ActivatedRoute) { }
 
   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];
-  }
 }