From 7dd32321390525708fdbd6a303472949aa7a1980 Mon Sep 17 00:00:00 2001 From: Martin Date: Thu, 29 Apr 2021 22:30:29 +0200 Subject: [PATCH] Further modified wireframes and removed old components --- frontend/src/app/app-routing.module.ts | 11 ++++ frontend/src/app/app.module.ts | 7 +- .../editieren/editieren.component.css | 27 ++++++++ .../editieren/editieren.component.html | 35 ++++++++++ .../editieren/editieren.component.ts | 54 +++++++++++++++ .../einstellungen.component.html | 34 ++-------- .../einstellungen/einstellungen.component.ts | 9 +-- .../src/app/component/home/home.component.css | 0 .../app/component/home/home.component.html | 19 ------ .../src/app/component/home/home.component.ts | 65 ------------------- .../app/component/login/login.component.ts | 35 ++++------ .../testsubcomp/test-sub-comp.component.css | 0 .../testsubcomp/test-sub-comp.component.html | 3 - .../testsubcomp/test-sub-comp.component.ts | 24 ------- .../component/tweets/tweets.component.html | 2 +- frontend/src/app/services/auth.service.ts | 1 + .../src/app/services/interceptor.service.ts | 7 +- frontend/src/app/services/snackbar.service.ts | 16 +++++ 18 files changed, 174 insertions(+), 175 deletions(-) create mode 100644 frontend/src/app/component/einstellungen/editieren/editieren.component.css create mode 100644 frontend/src/app/component/einstellungen/editieren/editieren.component.html create mode 100644 frontend/src/app/component/einstellungen/editieren/editieren.component.ts delete mode 100644 frontend/src/app/component/home/home.component.css delete mode 100644 frontend/src/app/component/home/home.component.html delete mode 100644 frontend/src/app/component/home/home.component.ts delete mode 100644 frontend/src/app/component/testsubcomp/test-sub-comp.component.css delete mode 100644 frontend/src/app/component/testsubcomp/test-sub-comp.component.html delete mode 100644 frontend/src/app/component/testsubcomp/test-sub-comp.component.ts create mode 100644 frontend/src/app/services/snackbar.service.ts diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 99afa41..2a2ff84 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -5,6 +5,7 @@ import {LoginComponent} from './component/login/login.component'; import {TweetsComponent} from './component/tweets/tweets.component'; import {EinstellungenComponent} from './component/einstellungen/einstellungen.component'; import {UnAuthGuardService} from './services/un-auth-guard.service'; +import {EditierenComponent} from './component/einstellungen/editieren/editieren.component'; const routes: Routes = [ { @@ -27,6 +28,16 @@ const routes: Routes = [ component: EinstellungenComponent, canActivate: [AuthGuardService] }, + { + path: 'einstellungen/editieren', + component: EditierenComponent, + canActivate: [AuthGuardService] + }, + { + path: 'einstellungen/editieren/:id', + component: EditierenComponent, + canActivate: [AuthGuardService] + }, ]; @NgModule({ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index fda18cf..71e6116 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -7,7 +7,6 @@ import {RestService} from './services/rest.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'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatFormFieldModule} from '@angular/material/form-field'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @@ -16,7 +15,6 @@ 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'; import { AuthGuardService } from './services/auth-guard.service'; import { AuthService } from './services/auth.service'; import {JwtHelper} from 'angular2-jwt'; @@ -28,10 +26,11 @@ import { EinstellungenComponent } from './component/einstellungen/einstellungen. import { NavigationComponent } from './component/navigation/navigation.component'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatCheckboxModule} from '@angular/material/checkbox'; +import { EditierenComponent } from './component/einstellungen/editieren/editieren.component'; @NgModule({ - declarations: [LandingComponent, TestSubCompComponent, LoginComponent, - HomeComponent, TweetsComponent, EinstellungenComponent, NavigationComponent], + declarations: [LandingComponent, LoginComponent, NavigationComponent, + TweetsComponent, EinstellungenComponent, EditierenComponent], imports: [ ReactiveFormsModule, BrowserModule, diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.css b/frontend/src/app/component/einstellungen/editieren/editieren.component.css new file mode 100644 index 0000000..a9d77b1 --- /dev/null +++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.css @@ -0,0 +1,27 @@ +.input { + width: 100%; +} + +.input-row { + display: block; + padding: 10px 0; +} + +.einstellungen_buttons_wrapper { + width: fit-content; + display: grid; + grid-auto-flow: column; + grid-column-gap: 10px; +} + +.feed-icon { + width: 75%; + max-width: 5em; +} + +.feed-list-row { + padding: 10px 0; + margin-left: auto; + margin-right: auto; + max-width: 800px; +} diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.html b/frontend/src/app/component/einstellungen/editieren/editieren.component.html new file mode 100644 index 0000000..3f76b46 --- /dev/null +++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.html @@ -0,0 +1,35 @@ + +
+
+

RSS-Feed erstellen

+
+ + Vollständige URL des RSS-Feeds: + + +
+
+ + Folgende Stichwörter im Feed suchen: + + + Alle Stichworte müssen enthalten sein +
+
+ Optionales Icon: +
+ Feed-Icon + +
+
+ Slide me! +
+
+ + +
+
+
diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts new file mode 100644 index 0000000..d6b213e --- /dev/null +++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts @@ -0,0 +1,54 @@ +import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; + +@Component({ + selector: 'app-editieren', + templateUrl: './editieren.component.html', + styleUrls: ['./editieren.component.css'] +}) +export class EditierenComponent implements OnInit { + + icon; + + id; + + constructor(private route: ActivatedRoute) { + this.icon = 'assets/logo.svg'; + this.route.paramMap.subscribe( paramMap => { + this.id = paramMap.get('id'); + if (this.id) { + this.loadFeed(this.id); + } + }); + } + + ngOnInit(): void { + } + + loadFeed(id) { + // TODO: direkt vor laden alle inputs deaktivieren (od hiden) und erst nach fertigem laden wieder entsperren + // TODO: load feed from backend and fill + console.log('TODO: Load feed settings with id ' + id); + } + + // TODO: bei Input-Words die Leerzeichen vor- und nach dem letzten Zeichen entfernen: " Formel 1 " wird zu "Formel 1" + + iconChooser() { + document.getElementById('feed-icon-picker').click(); + } + + fileChangeEvent(event) { + if (event && event.target) { + const files = event.target.files; + if (files && files[0]) { + const reader = new FileReader(); + reader.onload = () => { + if (reader.result) { + this.icon = reader.result; + } + }; + reader.readAsDataURL(files[0]); + } + } + } +} diff --git a/frontend/src/app/component/einstellungen/einstellungen.component.html b/frontend/src/app/component/einstellungen/einstellungen.component.html index 798f1da..189ce06 100644 --- a/frontend/src/app/component/einstellungen/einstellungen.component.html +++ b/frontend/src/app/component/einstellungen/einstellungen.component.html @@ -1,33 +1,5 @@
-
-

RSS-Feed erstellen

-
- - Vollständige URL des RSS-Feeds: - - -
-
- - Folgende Stichwörter im Feed suchen: - - - Alle Stichworte müssen enthalten sein -
-
- Optionales Icon: -
- HIER ICON-PICKER EINFÜGEN! -
-
- Slide me! -
-
- - -
-
@@ -38,7 +10,7 @@ https://rss.orf.at/news.xml
-
@@ -50,7 +22,9 @@
- +
diff --git a/frontend/src/app/component/einstellungen/einstellungen.component.ts b/frontend/src/app/component/einstellungen/einstellungen.component.ts index c8ab6e4..7fd5297 100644 --- a/frontend/src/app/component/einstellungen/einstellungen.component.ts +++ b/frontend/src/app/component/einstellungen/einstellungen.component.ts @@ -7,11 +7,12 @@ import { Component, OnInit } from '@angular/core'; }) export class EinstellungenComponent implements OnInit { - constructor() { } + icon; + + constructor() { + this.icon = 'assets/logo.svg'; + } ngOnInit(): void { } - - // TODO: bei Input-Words die Leerzeichen vor- und nach dem letzten Zeichen entfernen: " Formel 1 " wird zu "Formel 1" - } diff --git a/frontend/src/app/component/home/home.component.css b/frontend/src/app/component/home/home.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/component/home/home.component.html b/frontend/src/app/component/home/home.component.html deleted file mode 100644 index 3433e35..0000000 --- a/frontend/src/app/component/home/home.component.html +++ /dev/null @@ -1,19 +0,0 @@ -

home works!

- - - -bye -
- -
- -
- -
- diff --git a/frontend/src/app/component/home/home.component.ts b/frontend/src/app/component/home/home.component.ts deleted file mode 100644 index 22a0d47..0000000 --- a/frontend/src/app/component/home/home.component.ts +++ /dev/null @@ -1,65 +0,0 @@ -import {Component, OnInit} from '@angular/core'; -import {HttpClient, HttpHeaders} from '@angular/common/http'; -import {Router} from '@angular/router'; -import {environment} from '../../../environments/environment'; - -@Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.css'] -}) -export class HomeComponent implements OnInit { - - openid_endpoint = environment.openid_endpoint; - - id_token = 'x'; - state = 'y'; - parsedToken; - - constructor(private http: HttpClient, private router: Router) { - // TODO: DELETE COMPONENT - } - - ngOnInit(): void { - this.paramsFromUrl(); - } - - logout() { - const headerDict = { - 'Accept': '*/*', - 'Access-Control-Allow-Origin': '*' - }; - 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, - { - 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]; - try { - this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1])); - } catch (e) { - console.log(e); - } - } - -} diff --git a/frontend/src/app/component/login/login.component.ts b/frontend/src/app/component/login/login.component.ts index 77507df..7212081 100644 --- a/frontend/src/app/component/login/login.component.ts +++ b/frontend/src/app/component/login/login.component.ts @@ -1,9 +1,9 @@ import {Component, OnInit} from '@angular/core'; -import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {HttpClient} from '@angular/common/http'; import {ActivatedRoute, Router} from '@angular/router'; import {AuthService} from '../../services/auth.service'; import {environment} from '../../../environments/environment'; -import {MatSnackBar} from '@angular/material/snack-bar'; +import {SnackbarService} from '../../services/snackbar.service'; @Component({ selector: 'app-login', @@ -21,7 +21,7 @@ export class LoginComponent implements OnInit { private router: Router, private activatedRoute: ActivatedRoute, private authService: AuthService, - private snackBar: MatSnackBar) { + private snackbar: SnackbarService) { } ngOnInit(): void { @@ -31,16 +31,18 @@ export class LoginComponent implements OnInit { element => { const split = element.split('='); if (split[0] === 'error') { - this.snackBar.open(split[1], 'Schließen', { - duration: 5000, - }); + this.snackbar.show(split[1], 'Schließen', 5000); return; } 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(); + const nonce = sessionStorage.getItem('nonce'); + if (nonce && nonce === this.parsedToken.nonce) { + this.authService.setToken(this.id_token); + } else { + this.snackbar.show('Fehler bei der Anmeldung', 'Schließen', 5000); + } } else if (split[0] === 'state') { this.state = split[1]; } @@ -54,13 +56,15 @@ export class LoginComponent implements OnInit { } login() { + const nonce = this.randomString(20); + sessionStorage.setItem('nonce', nonce); const url = this.openid_endpoint + '/auth?' + 'client_id=waecm' + '&response_type=id_token' + '&prompt=consent' + '&redirect_uri=' + environment.location + '&scope=openid%20profile' + - '&nonce=' + this.randomString(20); + '&nonce=' + nonce; window.location.replace(url); } @@ -72,17 +76,4 @@ export class LoginComponent implements OnInit { } return text; } - - gotoBackend() { - // TODO: Remove - const headerDict = { - 'Authorization': 'Bearer ' + this.id_token, - }; - return this.http.get('http://localhost:8000/api/login', - { - headers: new HttpHeaders(headerDict), - observe: 'response', - }) - .subscribe(data => alert('Returned with code: ' + data['status'])); - } } diff --git a/frontend/src/app/component/testsubcomp/test-sub-comp.component.css b/frontend/src/app/component/testsubcomp/test-sub-comp.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/component/testsubcomp/test-sub-comp.component.html b/frontend/src/app/component/testsubcomp/test-sub-comp.component.html deleted file mode 100644 index 73238e7..0000000 --- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

{{message}} - -

diff --git a/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts b/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts deleted file mode 100644 index 7e43d5c..0000000 --- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; - -@Component({ - selector: 'app-test-sub-comp', - templateUrl: './test-sub-comp.component.html', - styleUrls: ['./test-sub-comp.component.css'], -}) -export class TestSubCompComponent implements OnInit { - @Input() - message: string; - - @Input() - anotherInput: string; - - @Output() - buttonClickedEvent: EventEmitter = new EventEmitter(); - - constructor() { - } - - ngOnInit(): void { - // this.message; - } -} diff --git a/frontend/src/app/component/tweets/tweets.component.html b/frontend/src/app/component/tweets/tweets.component.html index 7cec1b6..7892d63 100644 --- a/frontend/src/app/component/tweets/tweets.component.html +++ b/frontend/src/app/component/tweets/tweets.component.html @@ -3,7 +3,7 @@
Kein RSS_Feed vorhanden
- RSS-Feed erstellen + RSS-Feed erstellen
Kein Tweets vorhanden diff --git a/frontend/src/app/services/auth.service.ts b/frontend/src/app/services/auth.service.ts index ada1b41..b67e200 100644 --- a/frontend/src/app/services/auth.service.ts +++ b/frontend/src/app/services/auth.service.ts @@ -20,6 +20,7 @@ export class AuthService { public deleteToken(): void { sessionStorage.removeItem(this.tokenKey); + sessionStorage.removeItem('nonce'); } public getToken(): string { diff --git a/frontend/src/app/services/interceptor.service.ts b/frontend/src/app/services/interceptor.service.ts index 9d9eaab..dde8151 100644 --- a/frontend/src/app/services/interceptor.service.ts +++ b/frontend/src/app/services/interceptor.service.ts @@ -3,6 +3,7 @@ import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {tap} from 'rxjs/operators'; import {NGXLogger} from 'ngx-logger'; +import {AuthService} from './auth.service'; @Injectable({ providedIn: 'root' @@ -12,7 +13,7 @@ import {NGXLogger} from 'ngx-logger'; */ export class InterceptorService implements HttpInterceptor { - constructor(private logger: NGXLogger) { + constructor(private logger: NGXLogger, private authService: AuthService) { } /** @@ -21,8 +22,8 @@ export class InterceptorService implements HttpInterceptor { * @param next http response handler */ intercept(req: HttpRequest, next: HttpHandler): Observable> { - // TODO get the real token - const token = 'A_TOKEN'; + + const token = this.authService.getToken(); // the original request is immutable, so we need to clone it req = req.clone({ diff --git a/frontend/src/app/services/snackbar.service.ts b/frontend/src/app/services/snackbar.service.ts new file mode 100644 index 0000000..c4eadf6 --- /dev/null +++ b/frontend/src/app/services/snackbar.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import {MatSnackBar} from '@angular/material/snack-bar'; + +@Injectable({ + providedIn: 'root' +}) +export class SnackbarService { + + constructor(private snackBar: MatSnackBar) { } + + show(message, button, duration: number = 5000) { + this.snackBar.open(message, button, { + duration: duration, + }); + } +}