Merge remote-tracking branch 'origin/master'

2021-04-30 15:35:39 +02:00 · 2021-04-30 15:35:39 +02:00 · aa16fd7180
commit aa16fd7180
parent 3ba650ae22 7dd3232139
38 changed files with 709 additions and 23889 deletions
--- a/backend/cache.sqlite
+++ b/backend/cache.sqlite
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -17,19 +17,22 @@
    "@angular/cdk": "9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
-    "@angular/core": "~9.1.9",
+    "@angular/core": "^9.1.13",
    "@angular/forms": "~9.1.9",
+    "@angular/http": "^7.2.16",
    "@angular/localize": "~9.1.9",
    "@angular/material": "9.2.4",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@types/uuid": "8.3.0",
+    "angular2-jwt": "^0.2.3",
    "bootstrap": "~4.3.1",
    "jquery": "3.5.1",
    "ngx-logger": "4.1.9",
    "popper.js": "1.16.0",
-    "rxjs": "~6.5.5",
+    "rxjs": "^6.5.5",
+    "rxjs-compat": "^6.6.7",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@ -1,20 +1,42 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
+import {AuthGuardService} from './services/auth-guard.service';
 import {LoginComponent} from './component/login/login.component';
-import {HomeComponent} from './component/home/home.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 = [
  {
    path: '',
    component: LoginComponent,
+    canActivate: [UnAuthGuardService]
  },
  {
    path: 'login',
    component: LoginComponent,
+    canActivate: [UnAuthGuardService]
  },
  {
-    path: 'home',
-    component: HomeComponent,
+    path: 'tweets',
+    component: TweetsComponent,
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'einstellungen',
+    component: EinstellungenComponent,
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'einstellungen/editieren',
+    component: EditierenComponent,
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'einstellungen/editieren/:id',
+    component: EditierenComponent,
+    canActivate: [AuthGuardService]
  },
 ];

--- 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,10 +15,22 @@ 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';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+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';
+import { EditierenComponent } from './component/einstellungen/editieren/editieren.component';

@NgModule({
-  declarations: [LandingComponent, TestSubCompComponent, LoginComponent, HomeComponent],
+  declarations: [LandingComponent, LoginComponent, NavigationComponent,
+    TweetsComponent, EinstellungenComponent, EditierenComponent],
  imports: [
    ReactiveFormsModule,
    BrowserModule,
@ -32,11 +43,19 @@ import {HomeComponent} from './component/home/home.component';
    MatButtonModule,
    MatInputModule,
    MatSlideToggleModule,
-    MatSliderModule
+    MatSliderModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatMenuModule,
+    MatSnackBarModule,
+    MatCheckboxModule
  ],
  // enables injecting
  providers: [
+    AuthService,
+    AuthGuardService,
    RestService,
+    JwtHelper,
    /*{
      provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
    },*/
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.css
+++ 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;
+}
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.html
+++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.html
@ -0,0 +1,35 @@
+<app-navigation [activeLink]="'settings'"></app-navigation>
+<div class="content">
+  <div class="text-center">
+    <p class="font-weight-bold">RSS-Feed erstellen</p>
+    <div class="input-row">
+      <mat-form-field appearance="standard" class="input">
+        <mat-label>Vollständige URL des RSS-Feeds:</mat-label>
+        <input matInput placeholder="https://rss.orf.at/news.xml">
+      </mat-form-field>
+    </div>
+    <div class="input-row text-left">
+      <mat-form-field appearance="standard" class="input">
+        <mat-label>Folgende Stichwörter im Feed suchen:</mat-label>
+        <input matInput placeholder="Spiel, Spaß, Schokolade">
+      </mat-form-field>
+      <mat-checkbox>Alle Stichworte müssen enthalten sein</mat-checkbox>
+    </div>
+    <div class="input-row text-left">
+      <span>Optionales Icon:</span>
+      <br>
+      <img (click)="iconChooser()" class="feed-icon" src="{{icon}}" alt="Feed-Icon">
+      <input hidden type="file"
+             (change)="fileChangeEvent($event)"
+             id="feed-icon-picker" name="icon"
+             accept="image/png, image/svg+xml">
+    </div>
+    <div class="input-row text-left">
+      <mat-slide-toggle color="primary">Slide me!</mat-slide-toggle>
+    </div>
+    <div class="input-row margin-auto einstellungen_buttons_wrapper">
+      <button routerLink="/einstellungen" mat-raised-button>Abbrechen</button>
+      <button mat-raised-button><mat-icon>save</mat-icon> Speichern</button>
+    </div>
+  </div>
+</div>
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
+++ 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]);
+      }
+    }
+  }
+}
--- 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;
+}
--- a/frontend/src/app/component/einstellungen/einstellungen.component.html
+++ b/frontend/src/app/component/einstellungen/einstellungen.component.html
@ -0,0 +1,30 @@
+<app-navigation [activeLink]="'settings'"></app-navigation>
+<div class="content">
+  <div class="text-center">
+    <div class="container" *ngFor="let number of [1, 2, 3]">
+      <div class="row feed-list-row">
+        <div class="col-2 text-center padding-0 margin-auto">
+          <img class="feed-icon" src="assets/logo.svg" alt="Feed-Icon">
+        </div>
+        <div class="col-8 padding-0 text-left margin-auto">
+          <span class="overflow-break">https://rss.orf.at/news.xml</span>
+        </div>
+        <div class="col-1 padding-0 margin-auto">
+          <button mat-icon-button routerLink="/einstellungen/editieren/{{number}}">
+            <mat-icon>edit</mat-icon>
+          </button>
+        </div>
+        <div class="col-1 padding-0 margin-auto">
+          <button mat-icon-button>
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="input-row margin-auto einstellungen_buttons_wrapper">
+      <button routerLink="/einstellungen/editieren" mat-raised-button>
+        <mat-icon>add</mat-icon> RSS-Feed hinzufügen
+      </button>
+    </div>
+  </div>
+</div>
--- a/frontend/src/app/component/einstellungen/einstellungen.component.ts
+++ b/frontend/src/app/component/einstellungen/einstellungen.component.ts
@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-einstellungen',
+  templateUrl: './einstellungen.component.html',
+  styleUrls: ['./einstellungen.component.css']
+})
+export class EinstellungenComponent implements OnInit {
+
+  icon;
+
+  constructor() {
+    this.icon = 'assets/logo.svg';
+  }
+
+  ngOnInit(): void {
+  }
+}
--- a/frontend/src/app/component/home/home.component.css
+++ b/frontend/src/app/component/home/home.component.css
--- a/frontend/src/app/component/home/home.component.html
+++ b/frontend/src/app/component/home/home.component.html
@ -1,19 +0,0 @@
-<p>home works!</p>
-<a href="http://localhost:4200/">
-  <button (click)="logout()">Logout</button>
-</a>
-<a href="http://localhost:4200/">bye</a>
-<br>
-<button (click)="paramsFromUrl()">Get Params from URL</button>
-<br>
-<button (click)="gotoBackend()">Call Backend</button>
-<br>
-<label>
-  Token:
-  <input type="text" [(ngModel)]="id_token">
-</label>
-<br>
-<label>
-  State:
-  <input type="text" [(ngModel)]="state">
-</label>
--- a/frontend/src/app/component/home/home.component.ts
+++ b/frontend/src/app/component/home/home.component.ts
@ -1,63 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {ActivatedRoute, 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';
-  parsedToken;
-
-  constructor(private http: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
-  }
-
-  ngOnInit(): void {
-    this.paramsFromUrl();
-    console.log(this.parsedToken);
-    this.activatedRoute.fragment.subscribe(data => console.log(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=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);
-    }
-  }
-
-}
--- a/frontend/src/app/component/landing/landing.component.html
+++ b/frontend/src/app/component/landing/landing.component.html
@ -1,2 +1,3 @@
-<h1 style="text-align: center; margin-top: 1em">Bsp 1 Gruppe 4</h1>
-<app-login></app-login>
+<div class="router-wrapper">
+  <router-outlet></router-outlet>
+</div>
--- a/frontend/src/app/component/landing/landing.component.ts
+++ b/frontend/src/app/component/landing/landing.component.ts
@ -1,15 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
 })
-export class LandingComponent implements OnInit {
-
+export class LandingComponent {
  constructor() {
  }
-
-  ngOnInit(): void {
-  }
 }
--- 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;
-}
--- a/frontend/src/app/component/login/login.component.html
+++ b/frontend/src/app/component/login/login.component.html
@ -1,20 +1,9 @@
-<!--<button mat-raised-button (click)="gotoBackend()">Call Backend</button>-->
-<span id="loginBtnWrapper">
-  <button *ngIf="!parsedToken"
-          mat-raised-button color="primary"
-          (click)="login()">Login</button>
-</span>
-<br>
-<div *ngIf="parsedToken" id="userComp">
-  <span style="display: inline-grid">
-    <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
-    <span style="margin: auto">{{parsedToken.given_name}} {{parsedToken.family_name}}</span>
+<app-navigation></app-navigation>
+<div class="content">
+  <img id="loginLogo" class="center" src="assets/logo.svg" alt="Logo">
+  <span id="loginBtnWrapper">
+    <button *ngIf="!parsedToken"
+            mat-raised-button color="primary"
+            (click)="login()">Login</button>
  </span>
-  <button mat-raised-button color="warn" id="logoutBtn"
-          (click)="logout()">Logout</button>
-
 </div>
-
-<br>
-<p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
-
--- a/frontend/src/app/component/login/login.component.ts
+++ b/frontend/src/app/component/login/login.component.ts
@ -1,6 +1,9 @@
 import {Component, OnInit} from '@angular/core';
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {ActivatedRoute} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {ActivatedRoute, Router} from '@angular/router';
+import {AuthService} from '../../services/auth.service';
+import {environment} from '../../../environments/environment';
+import {SnackbarService} from '../../services/snackbar.service';

@Component({
  selector: 'app-login',
@ -8,15 +11,17 @@ import {ActivatedRoute} from '@angular/router';
  styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  openid_endpoint = 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect';
+
+  openid_endpoint = environment.openid_endpoint;
  id_token;
  state;
  parsedToken;

-  errorMessage;
-
  constructor(private http: HttpClient,
-              private activatedRoute: ActivatedRoute) {
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private authService: AuthService,
+              private snackbar: SnackbarService) {
  }

  ngOnInit(): void {
@ -26,30 +31,40 @@ export class LoginComponent implements OnInit {
          element => {
            const split = element.split('=');
            if (split[0] === 'error') {
-              this.errorMessage = split[1];
+              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.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];
            }
          }
        );
      }
+      if (this.authService.isAuthenticated()) {
+        this.router.navigate(['tweets']);
+      }
    });
  }

  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=http://localhost:4200' +
+      '&redirect_uri=' + environment.location +
      '&scope=openid%20profile' +
-      '&nonce=' + this.randomString(20);
+      '&nonce=' + nonce;
    window.location.replace(url);
  }

@ -61,23 +76,4 @@ 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() {
-    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']));
-  }
 }
--- 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;
+}
--- a/frontend/src/app/component/navigation/navigation.component.html
+++ b/frontend/src/app/component/navigation/navigation.component.html
@ -0,0 +1,25 @@
+<div class="header">
+  <mat-toolbar>
+    <button *ngIf="is_Authenticated"
+            mat-icon-button [matMenuTriggerFor]="menu"
+            class="example-icon" aria-label="Example icon-button with menu icon">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="logout()">
+        <mat-icon>logout</mat-icon>
+        <span>Abmelden</span>
+      </button>
+    </mat-menu>
+    <span>{{title}}</span>
+  </mat-toolbar>
+  <div *ngIf="is_Authenticated" class="center" id="nav_buttons_wrapper">
+    <a routerLink="/tweets">
+      <button mat-raised-button [color]="activeLink === 'tweets' ? 'primary' : null">Tweets</button>
+    </a>
+    <a routerLink="/einstellungen">
+      <button
+        mat-raised-button [color]="activeLink === 'settings' ? 'primary' : null">Einstellungen</button>
+    </a>
+  </div>
+</div>
--- a/frontend/src/app/component/navigation/navigation.component.ts
+++ b/frontend/src/app/component/navigation/navigation.component.ts
@ -0,0 +1,38 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {environment} from '../../../environments/environment';
+import {AuthService} from '../../services/auth.service';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.css']
+})
+export class NavigationComponent implements OnInit {
+
+  openid_endpoint: string = environment.openid_endpoint;
+  title: string = environment.title;
+
+  is_Authenticated = false;
+
+  @Input() activeLink: string;
+
+  constructor(public authService: AuthService) {
+    this.is_Authenticated = authService.isAuthenticated();
+  }
+
+  ngOnInit(): void {
+  }
+
+  logout() {
+    const token = this.authService.getToken();
+    let url = this.openid_endpoint + '/logout' +
+      '?post_logout_redirect_uri=' + environment.location;
+    if (token) {
+      url += '&id_token_hint=' + this.authService.getToken();
+    }
+    this.authService.deleteToken();
+    this.is_Authenticated = false;
+    window.location.replace(url);
+  }
+
+}
--- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.css
+++ b/frontend/src/app/component/testsubcomp/test-sub-comp.component.css
--- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.html
+++ b/frontend/src/app/component/testsubcomp/test-sub-comp.component.html
@ -1,3 +0,0 @@
-<p>{{message}}
-  <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button>
-</p>
--- a/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts
+++ b/frontend/src/app/component/testsubcomp/test-sub-comp.component.ts
@ -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<void> = new EventEmitter<void>();
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-    // this.message;
-  }
-}
--- 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;
+}
--- a/frontend/src/app/component/tweets/tweets.component.html
+++ b/frontend/src/app/component/tweets/tweets.component.html
@ -0,0 +1,32 @@
+<app-navigation [activeLink]="'tweets'"></app-navigation>
+<div class="content">
+  <div class="text-center">
+    <span>Kein RSS_Feed vorhanden</span>
+    <br>
+    <span><a routerLink="/einstellungen/editieren">RSS-Feed erstellen</a></span>
+  </div>
+  <div class="text-center">
+    <span>Kein Tweets vorhanden</span>
+    <br>
+    <span>Schau später noch einmal vorbei!</span>
+  </div>
+  <div>
+  <div>
+    <div class="container" *ngFor="let number of [1, 2, 3]">
+      <div class="row">
+        <div class="col-2 text-center padding-0 margin-auto">
+          <img class="feed-icon" src="assets/logo.svg" alt="Feed-Icon">
+        </div>
+        <div class="col-10">
+          <p class="overflow-break">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz0123456789ABCDE FGHIJKLMNOP
+            <span class="white-space-no-wrap"> - 24.03.2021 15:30</span></p>
+          <a>Zusatz externe URL zum Content der Nachricht</a>
+        </div>
+      </div>
+    </div>
+    </div>
+    <div class="text-center">
+      <button (click)="loadMore()" mat-button color="primary">Mehr laden</button>
+    </div>
+  </div>
+</div>
--- a/frontend/src/app/component/tweets/tweets.component.ts
+++ b/frontend/src/app/component/tweets/tweets.component.ts
@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tweets',
+  templateUrl: './tweets.component.html',
+  styleUrls: ['./tweets.component.css']
+})
+export class TweetsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  loadMore() {
+    console.log('TODO: Implement');
+  }
+
+}
--- a/frontend/src/app/services/auth-guard.service.ts
+++ b/frontend/src/app/services/auth-guard.service.ts
@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { AuthService } from './auth.service';
+@Injectable()
+export class AuthGuardService implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+
+  canActivate(): boolean {
+    if (!this.auth.isAuthenticated()) {
+      this.router.navigate(['login']);
+      return false;
+    }
+    return true;
+  }
+}
--- a/frontend/src/app/services/auth.service.ts
+++ b/frontend/src/app/services/auth.service.ts
@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import {JwtHelper} from 'angular2-jwt';
+
+@Injectable()
+export class AuthService {
+
+  tokenKey = 'loginToken';
+
+  constructor(public jwtHelper: JwtHelper) {}
+
+  public setToken(token): boolean {
+    if (token) {
+      if (!this.jwtHelper.isTokenExpired(token)) {
+        sessionStorage.setItem(this.tokenKey, token);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  public deleteToken(): void {
+    sessionStorage.removeItem(this.tokenKey);
+    sessionStorage.removeItem('nonce');
+  }
+
+  public getToken(): string {
+    return sessionStorage.getItem(this.tokenKey);
+  }
+
+  // Check whether the token is expired and return
+  // true or false
+  public isAuthenticated(): boolean {
+    const token = sessionStorage.getItem(this.tokenKey);
+    if (token) {
+      return !this.jwtHelper.isTokenExpired(token);
+    } else {
+      return false;
+    }
+  }
+}
--- 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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    // 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({
--- a/frontend/src/app/services/snackbar.service.ts
+++ 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,
+    });
+  }
+}
--- a/frontend/src/app/services/un-auth-guard.service.ts
+++ b/frontend/src/app/services/un-auth-guard.service.ts
@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {CanActivate, Router} from '@angular/router';
+import {AuthService} from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UnAuthGuardService implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+
+  canActivate(): boolean {
+    if (this.auth.isAuthenticated()) {
+      this.router.navigate(['tweets']);
+      return false;
+    }
+    return true;
+  }
+}
--- a/frontend/src/assets/logo.svg
+++ b/frontend/src/assets/logo.svg
@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.w3.org/2000/svg"
+  id="svg3626"
+  viewBox="0 0 300.00006 244.18703"
+  height="244.18703"
+  width="300.00006">
+  <defs
+    id="defs3628" />
+  <metadata
+    id="metadata3631">
+    <rdf:RDF>
+      <cc:Work
+        rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+          rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Logo</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+    transform="translate(-539.17946,-568.85777)"
+    id="layer1">
+    <path
+      id="path3611"
+      style="fill:#1da1f2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+      d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396" />
+  </g>
+</svg>
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@ -1,6 +1,7 @@
 import {NgxLoggerLevel} from 'ngx-logger';

 export const environment = {
+  title: 'Bsp 4 Gruppe 4',
  production: true,
  location: window.location.hostname,
  port: 8000,
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@ -5,8 +5,10 @@
 import {NgxLoggerLevel} from 'ngx-logger';

 export const environment = {
+  title: 'Bsp 4 Gruppe 4',
+  openid_endpoint: 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect',
  production: false,
-  location: 'localhost',
+  location: 'http://localhost:4200',
  port: 8000,
  ws_location: 'ws://127.0.0.1',
  ws_port: 8000,
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -2,10 +2,11 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>Bsp 1 Gruppe 4</title>
+  <title>Bsp 2 Gruppe 4</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
  <app-landing></app-landing>
--- 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;
+}