Merge remote-tracking branch 'origin/master' into twitter_api

.gitignore

@@ -6,6 +6,7 @@ node_modules/
 venv/
 env/
 
+container_db/
 
 
 .DS_Store
@@ -15,3 +16,4 @@ env/
 .Trashes
 ehthumbs.db
 Thumbs.db
+logfile

backend/.gitignore

@@ -1,9 +1,8 @@
 venv
 *.pyc
 staticfiles
-media
+media/feed-icons
 .env
-*.sqlite3
-*.sqlite
+app_be/db/
 waecm-2021-group-04.egg-info
 app_be/migrations

backend/Dockerfile

@@ -1,19 +1,21 @@
 FROM python:3.8-slim
+
 ENV PYTHONUNBUFFERED 1
-RUN apt-get update
-RUN apt-get install -y build-essential gcc
 
-RUN python -m venv /opt/venv
-ENV PATH="/opt/venv/bin:$PATH"
-
-RUN python -m pip install --upgrade pip
+RUN apt-get update; \
+    apt-get install -y build-essential gcc; \
+    python -m venv /opt/venv; \
+    python -m pip install --upgrade pip;
 
 ENV PATH="/opt/venv/bin:$PATH"
 
 RUN mkdir /code
+
 WORKDIR /code
+
 COPY setup.py /code/
 COPY requirements.txt /code/
+
 RUN pip install -r requirements.txt
 
 COPY . /code/

backend/app_be/models.py

@@ -6,14 +6,10 @@ class User(models.Model):
     pass
 
 
-class Icon(models.Model):
-    image = models.ImageField(upload_to='feed_icons')
-
-
 class Feed(models.Model):
     url = models.TextField(blank=False, null=False, validators=[URLValidator(['http', 'https'])])
     active = models.BooleanField()
-    icon = models.FileField(upload_to='feed-icons', blank=True, null=True,
+    icon = models.FileField(upload_to='feed-icons', blank=True, null=False, default='default-icon.svg',
                             validators=[FileExtensionValidator(['png', 'svg'])])
     keywords = models.TextField(blank=False, null=False)
     match_all_keywords = models.BooleanField(blank=True, default=False)
@@ -25,7 +21,7 @@ class FeedEntry(models.Model):
 
 
 class Tweet(models.Model):
-    icon = models.ForeignKey(Icon, on_delete=models.CASCADE, null=True)
+    feed = models.ForeignKey(Feed, null=True, on_delete=models.SET_NULL)
     text = models.CharField(max_length=137)
     date_time = models.DateTimeField()
     url = models.CharField(max_length=100)

docker-compose.yml

@@ -11,6 +11,10 @@ services:
         context: ./backend
         dockerfile: ./Dockerfile
     command: python manage.py runserver 0.0.0.0:8000
+    env_file:
+      - .env
+    volumes:
+    - ./container_db:/code/app_be/db
     ports:
       - 8000:8000
 

frontend/src/app/app.module.ts

@@ -4,7 +4,7 @@ import {NgModule} from '@angular/core';
 import {AppRoutingModule} from './app-routing.module';
 import {LandingComponent} from './component/landing/landing.component';
 import {RestService} from './services/rest.service';
-import {HttpClientModule} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {environment} from '../environments/environment';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -30,6 +30,7 @@ import { EditierenComponent } from './component/einstellungen/editieren/editiere
 import {MaterialFileInputModule} from 'ngx-material-file-input';
 import { DialogComponent } from './component/dialog/dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
+import {InterceptorService} from './services/interceptor.service';
 
 @NgModule({
   declarations: [LandingComponent, LoginComponent, NavigationComponent,
@@ -61,9 +62,9 @@ import {MatDialogModule} from '@angular/material/dialog';
     AuthGuardService,
     RestService,
     JwtHelper,
-    /*{
+    {
       provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
-    },*/
+    },
 
   ],
   bootstrap: [LandingComponent]

frontend/src/app/component/dialog/dialog.component.html

@@ -3,6 +3,6 @@
   <p>{{data.body}}</p>
 </mat-dialog-content>
 <mat-dialog-actions mat-dialog-actions align="end">
-  <button mat-raised-button color="primary" [mat-dialog-close]="true">{{data.confirm}}</button>
   <button *ngIf="data.hideAbort === false" mat-raised-button mat-dialog-close color="warn">{{data.abort}}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="true">{{data.confirm}}</button>
 </mat-dialog-actions>

frontend/src/app/component/einstellungen/editieren/editieren.component.html

@@ -6,34 +6,43 @@
       <div class=" input-row">
         <mat-form-field appearance="standard" class="input">
           <mat-label>Vollständige URL des RSS-Feeds</mat-label>
-          <input matInput formControlName="url" placeholder="https://rss.orf.at/news.xml" required>
+          <input matInput type="url" formControlName="url" placeholder="https://rss.orf.at/news.xml" required>
+          <mat-error *ngIf="feedForm.get('url').hasError('invalidURLFormat')">Geben Sie eine valide URL ein.</mat-error>
         </mat-form-field>
       </div>
       <div class="input-row text-left">
         <mat-form-field appearance="standard" class="input">
-          <mat-label>Gesuchte Stichwörter</mat-label>
+          <mat-label>Gesuchte Stichworte</mat-label>
           <input matInput formControlName="keywords" placeholder="Spiel,Spaß,Schokolade" required>
+          <mat-error *ngIf="feedForm.get('keywords').hasError('invalidKeywords')">Maximal 3 Wörter und jedes Wort
+            mindestens 3 Zeichen
+          </mat-error>
         </mat-form-field>
         <mat-checkbox formControlName="match_all_keywords">Alle Stichworte müssen enthalten sein</mat-checkbox>
       </div>
-      <div class="input-row text-left">
-        <mat-form-field class="col">
-          <ngx-mat-file-input accept=".png,.svg" formControlName="icon" placeholder="Optionales Icon"
-          ></ngx-mat-file-input>
-          <mat-icon matSuffix>folder</mat-icon>
-          <mat-error *ngIf="feedForm.get('icon').hasError('maxContentSize')">
-            Die maximale Dateigröße ist {{feedForm.get('icon')?.getError('maxContentSize').maxSize | byteFormat}}
-            ({{feedForm.get('icon')?.getError('maxContentSize').actualSize
-            | byteFormat}}).
-          </mat-error>
-        </mat-form-field>
+      <div class="row" style="padding: 10px 0">
+        <div class="col-auto" *ngIf="this.id">
+          <img class="feed-icon" src="{{this.icon}}" alt="Feed-Icon">
+        </div>
+        <div class="col">
+          <mat-form-field class="col">
+            <ngx-mat-file-input accept=".png,.svg" formControlName="icon" placeholder="Optionales Icon"
+            ></ngx-mat-file-input>
+            <mat-icon matSuffix>folder</mat-icon>
+            <mat-error *ngIf="feedForm.get('icon').hasError('maxContentSize')">
+              Die maximale Dateigröße ist {{feedForm.get('icon')?.getError('maxContentSize').maxSize | byteFormat}}
+              ({{feedForm.get('icon')?.getError('maxContentSize').actualSize
+              | byteFormat}})
+            </mat-error>
+          </mat-form-field>
+        </div>
       </div>
       <div class="input-row text-left">
         <mat-slide-toggle color="primary" formControlName="active">Feed als aktiv markieren</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 (click)="saveDialog(feedForm.value)" [disabled]="feedForm.invalid">
+        <button mat-raised-button (click)="saveFeed(feedForm.value)" [disabled]="feedForm.invalid">
           <mat-icon>save</mat-icon>
           Speichern
         </button>

frontend/src/app/component/einstellungen/editieren/editieren.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {FormGroup, FormBuilder} from '@angular/forms';
+import {FormGroup, FormBuilder, AbstractControl} from '@angular/forms';
 import {FileInput, FileValidator} from 'ngx-material-file-input';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../../../environments/environment';
@@ -9,6 +9,8 @@ import {NGXLogger} from 'ngx-logger';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {DialogComponent} from '../../dialog/dialog.component';
 import {MatDialog} from '@angular/material/dialog';
+import {URLFormatValidator} from '../../../validators/url.validator';
+import {keywordsValidator} from '../../../validators/keywords.validator';
 
 @Component({
   selector: 'app-editieren',
@@ -44,10 +46,10 @@ export class EditierenComponent implements OnInit {
 
   ngOnInit(): void {
     this.feedForm = this.formBuilder.group({
-      url: this.url,
+      url: [this.url, [URLFormatValidator]],
       active: this.active,
       icon: [undefined, [FileValidator.maxContentSize(this.maxSize)]],
-      keywords: this.keywords,
+      keywords: [this.keywords, [keywordsValidator]],
       match_all_keywords: this.match_all_keywords
     });
   }
@@ -55,9 +57,9 @@ export class EditierenComponent implements OnInit {
   public loadFeed(id) {
     this.http.get('http://127.0.0.1:8000/feeds/' + id + '/').subscribe(
       (data: any) => {
-        this._logger.debug('Data: ' + JSON.stringify(data));
         this.url = data.url;
         this.active = data.active;
+        this.icon = data.icon;
         this.keywords = data.keywords;
         this.match_all_keywords = data.match_all_keywords;
         this.feedForm.patchValue({
@@ -66,10 +68,11 @@ export class EditierenComponent implements OnInit {
           keywords: data.keywords,
           match_all_keywords: data.match_all_keywords
         });
-        this._logger.debug('Icon in loadFeed' + this.icon);
       },
-      err => this._logger.error(err),
-      () => this._logger.debug('Loaded feed with ID ' + id)
+      err => {
+        this.errorDialog();
+        this._logger.error(err);
+      }
     );
   }
 
@@ -78,7 +81,6 @@ export class EditierenComponent implements OnInit {
     form.append('url', feedData.url);
     form.append('active', feedData.active);
     form.append('match_all_keywords', feedData.match_all_keywords);
-    console.log('Match all: ' + feedData.match_all_keywords);
     if (feedData.keywords != null) {
       form.append('keywords', feedData.keywords);
     }
@@ -91,6 +93,7 @@ export class EditierenComponent implements OnInit {
           this._snackbar.open('Feed erfolgreich gespeichert!', 'Schließen', {duration: 3000});
         },
         err => {
+          this.errorDialog();
           this._logger.error(err);
           return throwError(err);
         }
@@ -101,6 +104,7 @@ export class EditierenComponent implements OnInit {
           this._snackbar.open('Feed erfolgreich gespeichert!', 'Schließen', {duration: 3000});
         },
         err => {
+          this.errorDialog();
           this._logger.error(err);
           return throwError(err);
         }
@@ -108,24 +112,16 @@ export class EditierenComponent implements OnInit {
     }
   }
 
-  public saveDialog(feedData) {
+
+  public errorDialog() {
     const dialogRef = this._dialog.open(DialogComponent, {
       data: {
-        title: 'Neuen Feed erstellen',
-        body: 'Neuen Feed erstellen?',
+        title: 'Serverfehler',
+        body: 'Fehler beim Aufruf des Servers',
         abort: 'Abbrechen',
         confirm: 'OK',
-        hideAbort: false
+        hideAbort: true
       }
     });
-
-    dialogRef.afterClosed().subscribe(
-      data => {
-        if (data === true) {
-          // Confirm button was clicked
-          this.saveFeed(feedData);
-        }
-      }
-    );
   }
 }

frontend/src/app/component/einstellungen/einstellungen.component.css

@@ -25,3 +25,10 @@
   margin-right: auto;
   max-width: 800px;
 }
+
+.notActive {
+  background-color: white;
+  filter:alpha(opacity=50); /* IE */
+  opacity: 0.5; /* Safari, Opera */
+  -moz-opacity:0.50; /* FireFox */
+}

frontend/src/app/component/einstellungen/einstellungen.component.html

@@ -2,7 +2,7 @@
 <div class="content">
   <div class="text-center">
     <div class="container" *ngFor="let feed of feeds">
-      <div class="row feed-list-row">
+      <div class="row feed-list-row" [ngClass]="{'notActive': feed.active == false}">
         <div class="col-2 text-center padding-0 margin-auto">
           <img class="feed-icon" src="{{feed.icon}}" alt="Feed-Icon">
         </div>
@@ -15,13 +15,13 @@
           </button>
         </div>
         <div class="col-1 padding-0 margin-auto">
-          <button mat-icon-button (click)="deleteFeed(feed.id)">
+          <button mat-icon-button (click)="deleteDialog(feed.id)">
             <mat-icon>delete</mat-icon>
           </button>
         </div>
       </div>
     </div>
-    <div class="input-row margin-auto einstellungen_buttons_wrapper">
+    <div class="input-row margin-auto einstellungen_buttons_wrapper" *ngIf="this.feeds.length < 3">
       <button routerLink="/einstellungen/editieren" mat-raised-button>
         <mat-icon>add</mat-icon> RSS-Feed hinzufügen
       </button>

frontend/src/app/component/einstellungen/einstellungen.component.ts

@@ -1,11 +1,13 @@
 import {Component, OnInit} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {Observable, throwError} from 'rxjs';
+import {throwError} from 'rxjs';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {NGXLogger} from 'ngx-logger';
 import {IFeed} from '../../interfaces/feed.interface';
 import {FeedService} from '../../services/feed.service';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
+import {DialogComponent} from '../dialog/dialog.component';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-einstellungen',
@@ -16,36 +18,65 @@ export class EinstellungenComponent implements OnInit {
 
   icon;
 
-  feeds: Observable<IFeed[]>;
+  feeds: IFeed[] = [];
 
   constructor(private http: HttpClient,
               private _snackbar: MatSnackBar,
               private _logger: NGXLogger,
               private _feedService: FeedService,
               private _route: ActivatedRoute,
-              private _router: Router) {
+              private _dialog: MatDialog) {
     this.icon = 'assets/logo.svg';
-    this._feedService.getFeeds().subscribe(
-      (data: any) => {
-        this.feeds = data;
-      }
-    );
+    this._feedService.getFeeds().toPromise().then(data => this.feeds = data).catch(err => this._logger.error(err));
   }
 
   ngOnInit(): void {
   }
 
   deleteFeed(id: number) {
-    console.log('Got number for deletion: ' + id);
     this.http.delete('http://127.0.0.1:8000/feeds/' + id + '/').subscribe(
       () => {
         this._snackbar.open('Feed erfolgreich gelöscht!', 'Schließen', {duration: 3000});
+        this.feeds = this.feeds.filter(feed => feed.id !== id);
       },
       err => {
         this._logger.error(err);
         return throwError(err);
       }
     );
-    this._router.navigate([this._router.url]);
+  }
+
+  public deleteDialog(id: number) {
+    const dialogRef = this._dialog.open(DialogComponent, {
+      data: {
+        title: 'Feed löschen',
+        body: 'Feed wirklich löschen?',
+        abort: 'Abbrechen',
+        confirm: 'OK',
+        hideAbort: false
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(
+      data => {
+        if (data === true) {
+          // Confirm button was clicked
+          this.deleteFeed(id);
+        }
+      }
+    );
+  }
+
+
+  public errorDialog() {
+    const dialogRef = this._dialog.open(DialogComponent, {
+      data: {
+        title: 'Serverfehler',
+        body: 'Fehler beim Aufruf des Servers',
+        abort: 'Abbrechen',
+        confirm: 'OK',
+        hideAbort: true
+      }
+    });
   }
 }

frontend/src/app/component/tweets/tweets.component.html

@@ -1,16 +1,16 @@
 <app-navigation [activeLink]="'tweets'"></app-navigation>
 <div class="content">
-  <div class="text-center">
-    <span>Kein RSS_Feed vorhanden</span>
+  <div class="text-center" *ngIf="feeds.length === 0">
+    <span>Kein RSS-Feed vorhanden</span>
     <br>
-    <span><a routerLink="/einstellungen/editieren">RSS-Feed erstellen</a></span>
+    <a routerLink="/einstellungen/editieren">RSS-Feed erstellen</a>
   </div>
-  <div class="text-center">
-    <span>Kein Tweets vorhanden</span>
+  <div class="text-center" *ngIf="feeds.length !== 0">
+    <span>Keine Tweets vorhanden</span>
     <br>
     <span>Schau später noch einmal vorbei!</span>
   </div>
-  <div>
+  <div *ngIf="feeds.length !== 0">
   <div>
     <div class="container" *ngFor="let number of [1, 2, 3]">
       <div class="row">

frontend/src/app/component/tweets/tweets.component.ts

@@ -1,6 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {AuthService} from '../../services/auth.service';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {FeedService} from '../../services/feed.service';
+import {IFeed} from '../../interfaces/feed.interface';
+import {Observable} from 'rxjs';
 
 class Tweet {
 
@@ -14,9 +17,16 @@ class Tweet {
 export class TweetsComponent implements OnInit {
 
   tweets: Tweet[] = [];
+  feeds: Observable<IFeed>[] = [];
 
   constructor(private http: HttpClient,
-              private authService: AuthService) {
+              private authService: AuthService,
+              private _feedService: FeedService) {
+    this._feedService.getFeeds().subscribe(
+      (data: any) => {
+        this.feeds = data;
+      }
+    );
   }
 
   ngOnInit(): void {

frontend/src/app/services/auth.service.ts

@@ -27,12 +27,18 @@ export class AuthService {
     return sessionStorage.getItem(this.tokenKey);
   }
 
-  // Check whether the token is expired and return
-  // true or false
+  /**
+   *  Check whether the token is expired and return true or false
+   *  If false, removes token from sessionStorage.
+   */
   public isAuthenticated(): boolean {
     const token = sessionStorage.getItem(this.tokenKey);
     if (token) {
-      return !this.jwtHelper.isTokenExpired(token);
+      const authenticated = !this.jwtHelper.isTokenExpired(token);
+      if (!authenticated) {
+        sessionStorage.removeItem(this.tokenKey);
+      }
+      return authenticated;
     } else {
       return false;
     }

frontend/src/app/services/feed.service.ts

@@ -13,7 +13,6 @@ export class FeedService {
   constructor(private http: HttpClient) {}
 
   getFeeds(): Observable<IFeed[]> {
-    console.log('FeedService called');
     return this.http.get<IFeed[]>(this.url).pipe(delay(200));
   }
 }

frontend/src/app/services/interceptor.service.ts

@@ -1,9 +1,9 @@
-import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
-import {tap} from 'rxjs/operators';
 import {NGXLogger} from 'ngx-logger';
 import {AuthService} from './auth.service';
+import {Router} from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
@@ -13,41 +13,28 @@ import {AuthService} from './auth.service';
  */
 export class InterceptorService implements HttpInterceptor {
 
-  constructor(private logger: NGXLogger, private authService: AuthService) {
+  constructor(private logger: NGXLogger,
+              private authService: AuthService,
+              private router: Router
+              ) {
   }
 
   /**
-   * Intercepts every HTTP request and for example adds a token
+   * Intercepts every HTTP request.
+   * If the token is invalid (expired) the user is redirected to logout (always).
    * @param req   http request
    * @param next  http response handler
    */
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // FOR TESTING ONLY - sets an expired token
+    // sessionStorage.setItem('loginToken', 'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTk4ODYzNTF9.e83okQ1NHjeO-AxaB3SQP9P5UjOYy-e5DFissDdf2Mo');
 
-    const token = this.authService.getToken();
-
-    // the original request is immutable, so we need to clone it
-    req = req.clone({
-      setHeaders: {
-        // FIXME e.g. if Bearer is used
-        Authorization: `Bearer ${token}`
-      }
-    });
-
-    this.logger.debug('Interceptor works');
-
-    // pipe the response observable
-    return next.handle(req).pipe(
-      // perform a side effect for every emission on the source Observable
-      // return an Observable that is identical to the source
-      tap(event => {
-        // check if it is the response message
-        if (event instanceof HttpResponse) {
-          // TODO so something if necessary
-        }
-      }, error => {
-        // TODO handle error here
-        this.logger.error('HTTP Response interception error', error);
-      })
-    );
+    const authenticated = this.authService.isAuthenticated();
+    this.logger.debug('isAuthenticated?', authenticated);
+    if (!this.authService.isAuthenticated()) {
+      this.logger.debug('token invalid, route to login');
+      this.router.navigate(['login']).then(() => {});
+    }
+    return next.handle(req);
   }
 }

frontend/src/app/validators/keywords.validator.ts

@@ -0,0 +1,19 @@
+import {AbstractControl} from '@angular/forms';
+
+export function keywordsValidator(control: AbstractControl): { [key: string]: any } | null {
+  if (control.value == undefined) {
+    return null;
+  }
+  let split: string[];
+  split = control.value.split(',');
+  if (split.length > 3) {
+    return {'invalidKeywords': {value: control.value}};
+  }
+  for (let i = 0; i < split.length; i++) {
+    const word = split[i].trim();
+    if (word.length < 3) {
+      return {'invalidKeywords': {value: control.value}};
+    }
+  }
+  return null;
+}

frontend/src/app/validators/url.validator.ts

@@ -0,0 +1,6 @@
+import {AbstractControl} from '@angular/forms';
+
+export function URLFormatValidator(control: AbstractControl): {[key: string]: any} | null {
+  const valid = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(control.value);
+  return valid ? null : {'invalidURLFormat': {value: control.value}};
+}