Working login logout draft

frontend/src/app/app.module.ts

@@ -16,10 +16,11 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatSliderModule} from "@angular/material/slider";
+import {MatSliderModule} from '@angular/material/slider';
+import { LoginComponent } from './component/login/login.component';
 
 @NgModule({
-  declarations: [LandingComponent, TestSubCompComponent],
+  declarations: [LandingComponent, TestSubCompComponent, LoginComponent],
   imports: [
     ReactiveFormsModule,
     BrowserModule,

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

@@ -1,33 +1,3 @@
 <h1>Bsp 1 Gruppe 4</h1>
-
+<br>
-<mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
+<app-login></app-login>
-
-
-<h2>Two way data binding, passing data, triggering child event...</h2>
-<mat-form-field *ngIf="true">
-  <input
-         type="text"
-         placeholder="Placeholder"
-         matInput
-         [(ngModel)]="exampleInputText"
-  >
-</mat-form-field>
-
-<app-test-sub-comp [message]="exampleInputText" (buttonClickedEvent)="alert()"
-                   [anotherInput]=""
-></app-test-sub-comp>
-
-
-
-<h2>Hide display with *ngIf</h2>
-<mat-slide-toggle [(ngModel)]="showPar">Show paragraph</mat-slide-toggle>
-<p *ngIf="showPar">Toggle me</p>
-<app-test-sub-comp *ngIf="showPar"
-  [message]="exampleInputText" (buttonClickedEvent)="alert()"
-                   [anotherInput]=""
-></app-test-sub-comp>
-
-
-
-<h2>Display a test list with *ngFor</h2>
-<span *ngFor="let dict of testList">{{dict.value}}; </span>

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

@@ -1,8 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {RestService} from '../../services/rest.service';
-import {WebsocketService} from '../../services/websocket.service';
-import {NGXLogger} from 'ngx-logger';
-import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-landing',
@@ -11,78 +7,10 @@ import {Subscription} from 'rxjs';
 })
 export class LandingComponent implements OnInit {
 
-  private wsSubscription: Subscription;
-  private wsMessageCounter: number;
-  exampleInputText: string;
-  showPar = false;
-  testList = [{'value': 1}, {'value': 2}, {'value': 3}];
-  myValue: any = 15;
-
   constructor(
-    private logger: NGXLogger,
-    private restService: RestService,
-    private wsService: WebsocketService
   ) {
   }
 
   ngOnInit(): void {
-    // perform test rest call as observable
-    this.observableCall();
-
-    // perform test rest call as promise (shorter - will only be executed exactly once)
-    this.promiseCall();
-
-    // perform test ws send / receive
-    setTimeout(() => {
-        this.wsCall();
-      },
-      1000);
-  }
-
-  private observableCall(): void {
-
-    const subscription = this.restService.testCall(1).subscribe(
-      // subscribe with lambda function
-      response => {
-        this.logger.debug('Execute obs test call', response);
-        subscription.unsubscribe();
-      },
-      error => {
-        this.logger.error('Error while executing obs test call', error);
-        subscription.unsubscribe();
-      }
-    );
-  }
-
-  private promiseCall(): void {
-    this.restService.testCall(2).toPromise()
-      // lambda for success
-      .then(response => {
-        this.logger.debug('Execute obs test call', response);
-      })
-      // lambda for fail
-      .catch(error => {
-        this.logger.error('Error while executing obs test call', error);
-      });
-  }
-
-  private wsCall(): void {
-    this.wsMessageCounter = 0;
-    this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
-      result => {
-        this.logger.debug('ws call result', result);
-        if (this.wsMessageCounter >= 2) {
-          this.wsSubscription.unsubscribe();
-        }
-      },
-      error => {
-        this.logger.error('ws call error', error);
-        this.wsSubscription.unsubscribe();
-      }
-    );
-  }
-
-  alert() {
-    alert(this.exampleInputText);
   }
 }

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

@@ -0,0 +1,11 @@
+<p>login works!</p>
+<button (click)="login()">Login</button>
+<button (click)="logout()">Logout</button>
+<br>
+<button (click)="paramsFromUrl()">Get Params from URL</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

@@ -0,0 +1,60 @@
+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',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  loginHTML;
+  id_token = 'x';
+  state = 'y';
+
+  constructor(private http: HttpClient, private _sanitizer: DomSanitizer,
+              private activatedRoute: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.activatedRoute.queryParams.subscribe(params => console.log(params));
+  }
+
+  login() {
+    const headerDict = {
+      'Accept': '*/*',
+      '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',
+      {
+        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));
+  }
+
+  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/tsconfig.json

@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],