From 80e6de5219900dc2cf01c896cbe038a57270b91a Mon Sep 17 00:00:00 2001 From: Martin Date: Sat, 20 Mar 2021 10:40:02 +0100 Subject: [PATCH] Working login logout draft --- frontend/src/app/app.module.ts | 5 +- .../component/landing/landing.component.html | 34 +-------- .../component/landing/landing.component.ts | 72 ------------------- .../app/component/login/login.component.css | 0 .../app/component/login/login.component.html | 11 +++ .../app/component/login/login.component.ts | 60 ++++++++++++++++ frontend/tsconfig.json | 2 +- 7 files changed, 77 insertions(+), 107 deletions(-) create mode 100644 frontend/src/app/component/login/login.component.css create mode 100644 frontend/src/app/component/login/login.component.html create mode 100644 frontend/src/app/component/login/login.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 8937ed1..d9d0508 100644 --- a/frontend/src/app/app.module.ts +++ b/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, diff --git a/frontend/src/app/component/landing/landing.component.html b/frontend/src/app/component/landing/landing.component.html index 6c2077e..204eb96 100644 --- a/frontend/src/app/component/landing/landing.component.html +++ b/frontend/src/app/component/landing/landing.component.html @@ -1,33 +1,3 @@

Bsp 1 Gruppe 4

- - - - -

Two way data binding, passing data, triggering child event...

- - - - - - - - -

Hide display with *ngIf

-Show paragraph -

Toggle me

- - - - -

Display a test list with *ngFor

-{{dict.value}}; +
+ diff --git a/frontend/src/app/component/landing/landing.component.ts b/frontend/src/app/component/landing/landing.component.ts index 9261559..d38dc6b 100644 --- a/frontend/src/app/component/landing/landing.component.ts +++ b/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); } } diff --git a/frontend/src/app/component/login/login.component.css b/frontend/src/app/component/login/login.component.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/component/login/login.component.html b/frontend/src/app/component/login/login.component.html new file mode 100644 index 0000000..eea13c2 --- /dev/null +++ b/frontend/src/app/component/login/login.component.html @@ -0,0 +1,11 @@ +

login works!

+ + +
+ +
+Token: +
+State: +
+
diff --git a/frontend/src/app/component/login/login.component.ts b/frontend/src/app/component/login/login.component.ts new file mode 100644 index 0000000..ae56b10 --- /dev/null +++ b/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]; + } +} diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 66462f2..22734b3 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -9,7 +9,7 @@ "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, - "target": "es5", + "target": "es2015", "typeRoots": [ "node_modules/@types" ],