diff --git a/backend/cache.sqlite b/backend/cache.sqlite index 874703c..ba31353 100644 Binary files a/backend/cache.sqlite and b/backend/cache.sqlite differ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index ff49793..fda18cf 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -26,6 +26,8 @@ import {MatMenuModule} from '@angular/material/menu'; import { TweetsComponent } from './component/tweets/tweets.component'; import { EinstellungenComponent } from './component/einstellungen/einstellungen.component'; import { NavigationComponent } from './component/navigation/navigation.component'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; +import {MatCheckboxModule} from '@angular/material/checkbox'; @NgModule({ declarations: [LandingComponent, TestSubCompComponent, LoginComponent, @@ -45,7 +47,9 @@ import { NavigationComponent } from './component/navigation/navigation.component MatSliderModule, MatToolbarModule, MatIconModule, - MatMenuModule + MatMenuModule, + MatSnackBarModule, + MatCheckboxModule ], // enables injecting providers: [ diff --git a/frontend/src/app/component/einstellungen/einstellungen.component.css b/frontend/src/app/component/einstellungen/einstellungen.component.css index e69de29..a9d77b1 100644 --- a/frontend/src/app/component/einstellungen/einstellungen.component.css +++ b/frontend/src/app/component/einstellungen/einstellungen.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/einstellungen.component.html b/frontend/src/app/component/einstellungen/einstellungen.component.html index 4c4ba0a..798f1da 100644 --- a/frontend/src/app/component/einstellungen/einstellungen.component.html +++ b/frontend/src/app/component/einstellungen/einstellungen.component.html @@ -1,2 +1,56 @@ - -

einstellungen works!

+ +
+
+

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! +
+
+ + +
+
+
+
+
+
+ Feed-Icon +
+
+ https://rss.orf.at/news.xml +
+
+ +
+
+ +
+
+
+
+ +
+
+
diff --git a/frontend/src/app/component/einstellungen/einstellungen.component.ts b/frontend/src/app/component/einstellungen/einstellungen.component.ts index 3fe3702..c8ab6e4 100644 --- a/frontend/src/app/component/einstellungen/einstellungen.component.ts +++ b/frontend/src/app/component/einstellungen/einstellungen.component.ts @@ -12,4 +12,6 @@ export class EinstellungenComponent implements OnInit { 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.ts b/frontend/src/app/component/home/home.component.ts index 14dc508..22a0d47 100644 --- a/frontend/src/app/component/home/home.component.ts +++ b/frontend/src/app/component/home/home.component.ts @@ -17,6 +17,7 @@ export class HomeComponent implements OnInit { parsedToken; constructor(private http: HttpClient, private router: Router) { + // TODO: DELETE COMPONENT } ngOnInit(): void { diff --git a/frontend/src/app/component/landing/landing.component.html b/frontend/src/app/component/landing/landing.component.html index d42c805..459c392 100644 --- a/frontend/src/app/component/landing/landing.component.html +++ b/frontend/src/app/component/landing/landing.component.html @@ -1,5 +1,3 @@ -
- - +
+
- diff --git a/frontend/src/app/component/login/login.component.css b/frontend/src/app/component/login/login.component.css index 9feb465..27648af 100644 --- a/frontend/src/app/component/login/login.component.css +++ b/frontend/src/app/component/login/login.component.css @@ -1,24 +1,16 @@ -#userComp { - position: fixed; - top: 2em; - right: 8em; -} - #loginBtnWrapper { width: 100%; text-align: center; display: block; - margin-top: 10em; + margin-top: 5em; +} +#loginLogo { + width: 8em; + max-width: 20%; } #loginBtnWrapper > button { - font-size: 2em; + font-size: 1.5em; width: 8em; height: 2em; } - -#logoutBtn { - position: fixed; - right: 2em; - top: 4.5em; -} diff --git a/frontend/src/app/component/login/login.component.html b/frontend/src/app/component/login/login.component.html index 81f5ffa..1b3de43 100644 --- a/frontend/src/app/component/login/login.component.html +++ b/frontend/src/app/component/login/login.component.html @@ -1,20 +1,9 @@ - - - -
-
- - Profile picture - {{parsedToken.given_name}} {{parsedToken.family_name}} +
+ + + - -
- -
-

Error on login: {{errorMessage}}

- diff --git a/frontend/src/app/component/login/login.component.ts b/frontend/src/app/component/login/login.component.ts index 3835d73..77507df 100644 --- a/frontend/src/app/component/login/login.component.ts +++ b/frontend/src/app/component/login/login.component.ts @@ -3,6 +3,7 @@ import {HttpClient, HttpHeaders} 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'; @Component({ selector: 'app-login', @@ -16,12 +17,11 @@ export class LoginComponent implements OnInit { state; parsedToken; - errorMessage; - constructor(private http: HttpClient, private router: Router, private activatedRoute: ActivatedRoute, - private authService: AuthService) { + private authService: AuthService, + private snackBar: MatSnackBar) { } ngOnInit(): void { @@ -31,7 +31,9 @@ export class LoginComponent implements OnInit { element => { const split = element.split('='); if (split[0] === 'error') { - this.errorMessage = split[1]; + this.snackBar.open(split[1], 'Schließen', { + duration: 5000, + }); return; } if (split[0] === 'id_token') { @@ -71,14 +73,8 @@ export class LoginComponent implements OnInit { return text; } - 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() { + // TODO: Remove const headerDict = { 'Authorization': 'Bearer ' + this.id_token, }; diff --git a/frontend/src/app/component/navigation/navigation.component.css b/frontend/src/app/component/navigation/navigation.component.css index e69de29..a529b87 100644 --- a/frontend/src/app/component/navigation/navigation.component.css +++ b/frontend/src/app/component/navigation/navigation.component.css @@ -0,0 +1,7 @@ +#nav_buttons_wrapper { + width: fit-content; + display: grid; + grid-auto-flow: column; + grid-column-gap: 10px; + margin-top: 1em; +} diff --git a/frontend/src/app/component/navigation/navigation.component.html b/frontend/src/app/component/navigation/navigation.component.html index 8919b00..8bb1224 100644 --- a/frontend/src/app/component/navigation/navigation.component.html +++ b/frontend/src/app/component/navigation/navigation.component.html @@ -1,16 +1,25 @@ - - - - - - - - {{title}} - + + + + {{title}} + + +
diff --git a/frontend/src/app/component/navigation/navigation.component.ts b/frontend/src/app/component/navigation/navigation.component.ts index 4d697d2..e5b7b00 100644 --- a/frontend/src/app/component/navigation/navigation.component.ts +++ b/frontend/src/app/component/navigation/navigation.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {environment} from '../../../environments/environment'; import {AuthService} from '../../services/auth.service'; @@ -12,10 +12,12 @@ export class NavigationComponent implements OnInit { openid_endpoint: string = environment.openid_endpoint; title: string = environment.title; - show_menu = false; + is_Authenticated = false; + + @Input() activeLink: string; constructor(public authService: AuthService) { - this.show_menu = authService.isAuthenticated(); + this.is_Authenticated = authService.isAuthenticated(); } ngOnInit(): void { @@ -29,7 +31,7 @@ export class NavigationComponent implements OnInit { url += '&id_token_hint=' + this.authService.getToken(); } this.authService.deleteToken(); - this.show_menu = false; + this.is_Authenticated = false; window.location.replace(url); } diff --git a/frontend/src/app/component/tweets/tweets.component.css b/frontend/src/app/component/tweets/tweets.component.css index e69de29..1066426 100644 --- a/frontend/src/app/component/tweets/tweets.component.css +++ b/frontend/src/app/component/tweets/tweets.component.css @@ -0,0 +1,4 @@ +.feed-icon { + width: 100%; + max-width: 5em; +} diff --git a/frontend/src/app/component/tweets/tweets.component.html b/frontend/src/app/component/tweets/tweets.component.html index be013b9..7cec1b6 100644 --- a/frontend/src/app/component/tweets/tweets.component.html +++ b/frontend/src/app/component/tweets/tweets.component.html @@ -1,2 +1,32 @@ - -

tweets works!

+ +
+
+ Kein RSS_Feed vorhanden +
+ RSS-Feed erstellen +
+
+ Kein Tweets vorhanden +
+ Schau später noch einmal vorbei! +
+
+
+
+
+
+ Feed-Icon +
+
+

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz0123456789ABCDE FGHIJKLMNOP + - 24.03.2021 15:30

+ Zusatz externe URL zum Content der Nachricht +
+
+
+
+
+ +
+
+
diff --git a/frontend/src/app/component/tweets/tweets.component.ts b/frontend/src/app/component/tweets/tweets.component.ts index b87985e..36afb20 100644 --- a/frontend/src/app/component/tweets/tweets.component.ts +++ b/frontend/src/app/component/tweets/tweets.component.ts @@ -12,4 +12,8 @@ export class TweetsComponent implements OnInit { ngOnInit(): void { } + loadMore() { + console.log('TODO: Implement'); + } + } diff --git a/frontend/src/app/services/auth.service.ts b/frontend/src/app/services/auth.service.ts index 4bc09aa..ada1b41 100644 --- a/frontend/src/app/services/auth.service.ts +++ b/frontend/src/app/services/auth.service.ts @@ -8,8 +8,14 @@ export class AuthService { constructor(public jwtHelper: JwtHelper) {} - public setToken(token): void { - sessionStorage.setItem(this.tokenKey, token); + public setToken(token): boolean { + if (token) { + if (!this.jwtHelper.isTokenExpired(token)) { + sessionStorage.setItem(this.tokenKey, token); + return true; + } + } + return false; } public deleteToken(): void { diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg new file mode 100644 index 0000000..2a303b2 --- /dev/null +++ b/frontend/src/assets/logo.svg @@ -0,0 +1,33 @@ + + + + + + + image/svg+xml + + Logo + + + + + + + diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 102e8ab..08ecb3b 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -3,7 +3,72 @@ @import "~@angular/material/prebuilt-themes/indigo-pink.css"; @import '~bootstrap/dist/css/bootstrap.min.css'; +* { + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} +a { + text-decoration: underline; + cursor: auto; +} + body { - width: 95%; + width: 60%; + margin: 0 auto; + font-family: Arial, Helvetica, sans-serif; +} + +.header { + z-index: 100; + display: block; + position: sticky; + top: 0; + margin: 0 auto; + padding-bottom: 0.5em; + height: fit-content; + background: white; +} + +.content { + padding-top: 1em; + margin-left: auto; + margin-right: auto; + margin-bottom: 1em; +} + +/* On screens that are 992px or less, set the background color to blue */ +@media screen and (max-width: 992px) { + body { + width: 90%; + } +} + +.router-wrapper { +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; +} + +.padding-0{ + padding-right:0; + padding-left:0; +} + +.margin-auto { margin: auto; } + +.overflow-break { + overflow-wrap: break-word; +} + +.white-space-no-wrap { + white-space:nowrap; +} + +.vert-align-mid { + vertical-align: middle; +}