fix edit forms and redirect to login if missing token

src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { AuthGuard } from './guards';
 
 export const routes: Routes = [
   {
@@ -24,23 +25,26 @@ export const routes: Routes = [
   },
   {
     path: 'sagas/:id/edit',
-    loadChildren: () => import('./pages/sagas/edit-saga/edit-saga.module').then( m => m.EditSagaPageModule)
+    loadChildren: () => import('./pages/sagas/edit-saga/edit-saga.module').then( m => m.EditSagaPageModule),
+    canActivate: [AuthGuard]
   },
   {
     path: 'sagas/:sagaId/seasons/:seasonId',
     loadChildren: () => import('./pages/episodes/list-episodes/list-episodes.module').then( m => m.ListEpisodesPageModule)
   },
   {
     path: 'sagas/:sagaId/seasons/:seasonId/edit',
-    loadChildren: () => import('./pages/sagas/edit-season/edit-season.module').then( m => m.EditSeasonPageModule)
+    loadChildren: () => import('./pages/sagas/edit-season/edit-season.module').then( m => m.EditSeasonPageModule),
+    canActivate: [AuthGuard]
   },
   {
     path: 'sagas/:saga/episode/:episode',
     loadChildren: () => import('./pages/episodes/play-episode/play-episode.module').then( m => m.PlayEpisodePageModule)
   },
   {
     path: 'sagas/:saga/episode/:episode/edit',
-    loadChildren: () => import('./pages/episodes/edit-episode/edit-episode.module').then( m => m.EditEpisodePageModule)
+    loadChildren: () => import('./pages/episodes/edit-episode/edit-episode.module').then( m => m.EditEpisodePageModule),
+    canActivate: [AuthGuard]
   },
   {
     path: 'login',
@@ -52,7 +56,8 @@ export const routes: Routes = [
   },
   {
     path: 'sync',
-    loadChildren: () => import('./pages/admin/sync/sync.module').then(m => m.SyncPageModule)
+    loadChildren: () => import('./pages/admin/sync/sync.module').then(m => m.SyncPageModule),
+    canActivate: [AuthGuard]
   },
 
 ];

src/app/guards/auth.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '../services/auth/auth.service';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate {
+    constructor(
+        private router: Router,
+        private authenticationService: AuthService
+    ) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        console.log("test");
+        if (this.authenticationService.currentTokenValue.token !== '') {
+            return true;
+        }
+
+        // not logged in so redirect to login page with the return url
+        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
+        return false;
+    }
+}

src/app/guards/index.ts

@@ -0,0 +1 @@
+export * from './auth.guard';

src/app/pages/admin/sync/sync.page.ts

@@ -27,12 +27,17 @@ export class SyncPage implements OnInit {
       loading.present();
       let syncNewsRequest = this.eventLogService.getLatestByName("SYNC_NEWS_START");
       let syncSagasRequest = this.eventLogService.getLatestByName("SYNC_SAGAS_START");
-      forkJoin([syncNewsRequest, syncSagasRequest]).subscribe(results => {
-        this.lastSyncNews = results[0];
-        this.lastSyncSagas = results[1];
-        loading.dismiss();
-      }, error => {
-        loading.dismiss();
+      forkJoin([syncNewsRequest, syncSagasRequest])
+      .subscribe({
+        next: (results) => {
+          this.lastSyncNews = results[0];
+          this.lastSyncSagas = results[1];
+          loading.dismiss();
+        },
+        error: error => {
+          console.error(error);
+          loading.dismiss();
+        }
       });
     });
   }

src/app/pages/episodes/edit-episode/edit-episode.page.html

@@ -9,7 +9,9 @@
         <ion-icon name="save"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-title>{{ saga.title }}</ion-title>
+    <ion-title>
+      Episode {{ episode.displayedNumber }}
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -20,20 +22,23 @@
         <ion-label>Informations</ion-label>
       </ion-list-header>
       <ion-item>
-        <ion-select label="Saison" labelPlacement="floating" value="{{ episode.seasonRef }}" formControlName="seasonRef">
+        <ion-select label="Saison" labelPlacement="floating" formControlName="seasonRef" value="{{ episode.seasonRef }}">
           <ion-select-option *ngFor="let season of saga.seasons" value="{{ season.id }}">
             {{ season.name === '' ? 'Saison ' + season.number : season.name }}
           </ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-input label="Numéro" labelPlacement="floating" type="string" value="{{ episode.displayedNumber }}" formControlName="number"></ion-input>
+        <ion-input label="Ordre" labelPlacement="floating" type="number" formControlName="number"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-input label="Titre" labelPlacement="floating" type="string" value="{{ episode.title }}" formControlName="title"></ion-input>
+        <ion-input label="Numéro affiché" labelPlacement="floating" type="string" formControlName="displayedNumber"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-textarea label="Description" labelPlacement="floating" value="{{ episode.infos }}" formControlName="infos"></ion-textarea>
+        <ion-input label="Titre" labelPlacement="floating" type="string" formControlName="title"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Description" labelPlacement="floating" formControlName="infos"></ion-textarea>
       </ion-item>
       <ion-item>
         <ion-input label="Fichier audio" labelPlacement="floating" class="fileUpload" type="file" formControlName="file" (change)="onFileChange($event)">{{ fileSource }}</ion-input>

src/app/pages/episodes/edit-episode/edit-episode.page.ts

@@ -42,6 +42,7 @@ export class EditEpisodePage implements OnInit {
 
       this.episodeForm = this.fb.group({
         seasonRef: ['', [Validators.required]],
+        displayedNumber: [''],
         number: [''],
         title: ['', [Validators.required]],
         infos: [''],
@@ -68,6 +69,12 @@ export class EditEpisodePage implements OnInit {
             if(this.episode.fileRef) {
               this.fileSource = "audio.mp3";
             }
+            const controls = this.episodeForm.controls;
+            controls['seasonRef'].setValue(this.episode.seasonRef);
+            controls['number'].setValue(this.episode.number);
+            controls['displayedNumber'].setValue(this.episode.displayedNumber);
+            controls['title'].setValue(this.episode.title);
+            controls['infos'].setValue(this.episode.infos);
             this.saga.seasons = Season.fromModels(results[1]);
             loading.dismiss();
           });
@@ -97,7 +104,8 @@ export class EditEpisodePage implements OnInit {
         episode.fileRef = this.episode.fileRef;
         episode.workspace = this.episode.workspace;
         episode.seasonRef = controls['seasonRef'].value;
-        episode.displayedNumber = controls['number'].value;
+        episode.number = controls['number'].value;
+        episode.displayedNumber = controls['displayedNumber'].value;
         episode.title = controls['title'].value;
         episode.infos = controls['infos'].value;
         if(controls['fileSource'].value) {
@@ -106,24 +114,28 @@ export class EditEpisodePage implements OnInit {
               console.debug(data);
               episode.fileRef = data.id;
               this.episodeService.update(episode)
-                .subscribe(data => {
-                  console.debug(data);
-                  this.navCtrl.navigateForward("sagas/" + this.saga.id)
+              .subscribe({
+                next: () => {
                   loading.dismiss();
-                }, error => {
+                  this.navCtrl.navigateForward("sagas/" + this.saga.id + "/episode/" + this.episode.id)
+                },
+                error: error => {
                   console.error(error);
                   loading.dismiss();
-                });
+                }
+              });
             });
         } else {
           this.episodeService.update(episode)
-          .subscribe(data => {
-            console.debug(data);
-            this.navCtrl.navigateForward("sagas/" + this.saga.id)
-            loading.dismiss();
-          }, error => {
-            console.error(error);
-            loading.dismiss();
+          .subscribe({
+            next: () => {
+              loading.dismiss();
+              this.navCtrl.navigateForward("sagas/" + this.saga.id + "/episode/" + this.episode.id)
+            },
+            error: error => {
+              console.error(error);
+              loading.dismiss();
+            }
           });
         }
       });

src/app/pages/episodes/list-episodes/list-episodes.page.html

@@ -4,7 +4,12 @@
       <ion-menu-button></ion-menu-button>
       <ion-back-button></ion-back-button>
     </ion-buttons>
-    <ion-title>{{ saga.title }}</ion-title>
+    <ion-title *ngIf="season.name === null || season.name === ''">
+      Saison {{ season.number }}
+    </ion-title>
+    <ion-title *ngIf="season.name !== null && season.name !== ''">
+      {{ season.name }}
+    </ion-title>
     <ion-buttons slot="primary">
       <ion-button routerLink="/sagas/{{ saga.id }}/seasons/{{ season.id }}/edit" routerDirection="forward"
         *ngIf="authService.isLoggedIn()">
@@ -21,7 +26,7 @@
         <ion-icon name="play-outline"></ion-icon> {{ episode.displayedNumber }} - {{ episode.title }}
       </ion-label>
     </ion-item>
-    <ion-item button="true" (click)="addEpisode()" *ngIf="authService.currentTokenValue">
+    <ion-item button="true" (click)="addEpisode()" *ngIf="authService.isLoggedIn()">
         <ion-label>
             < Ajouter un épisode >
         </ion-label>

src/app/pages/episodes/play-episode/play-episode.page.html

@@ -10,7 +10,9 @@
         <ion-icon name="pencil"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-title>{{ saga.title }}</ion-title>
+    <ion-title>
+      Episode {{ episode.displayedNumber }}
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -19,7 +21,6 @@
     <ion-img class="cover" [src]="coverUrl()"></ion-img>
     <ion-card-header class="ion-text-center">
       <ion-card-title>{{ episode.title }}</ion-card-title>
-      <ion-card-subtitle>#{{ episode.number }}</ion-card-subtitle>
     </ion-card-header>
     <div *ngIf="state.canplay">
       <ion-range #slider min="0" 

src/app/pages/episodes/play-episode/play-episode.page.scss

@@ -1,6 +1,11 @@
 #container {
     text-align: center;
     padding: 20px;
+    height: 95%;
+}
+
+.cover {
+    height: 20em;
 }
 
 ion-range {
@@ -16,13 +21,12 @@ p {
 }
 
 .flex_box {
-    height: 250px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-ion-button {
+.flex_box > ion-button {
     height: 50px;
     min-height: max-content;
     margin: 0px 7px;

src/app/pages/episodes/play-episode/play-episode.page.ts

@@ -117,8 +117,8 @@ export class PlayEpisodePage implements OnInit {
   }
 
   coverUrl(): string {
-    if (this.saga.coverUrl) {
-      return this.configService.get('appUrl') + this.saga.coverUrl;
+    if(this.saga.coverUrl) {
+      return this.configService.get('apiUrl') + "/files/image" + this.saga.coverUrl;
     } else {
       return '';
     }

src/app/pages/sagas/edit-saga/edit-saga.page.html

@@ -20,28 +20,28 @@
         <ion-label>Informations</ion-label>
       </ion-list-header>
       <ion-item>
-        <ion-input label="Titre" labelPlacement="floating" type="string" value="{{ saga.title }}" formControlName="title"></ion-input>
+        <ion-input label="Titre" labelPlacement="floating" type="string" formControlName="title"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-input label="URL" labelPlacement="floating" value="{{ saga.url }}" formControlName="url"></ion-input>
+        <ion-input label="URL" labelPlacement="floating" formControlName="url"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-input label="URL Wiki" labelPlacement="floating" value="{{ saga.urlWiki }}" formControlName="urlWiki"></ion-input>
+        <ion-input label="URL Wiki" labelPlacement="floating" formControlName="urlWiki"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-input label="Etat" labelPlacement="floating" value="{{ saga.status }}" formControlName="status"></ion-input>
+        <ion-input label="Etat" labelPlacement="floating" formControlName="status"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-textarea label="Synopsis" labelPlacement="floating" value="{{ saga.synopsis }}" formControlName="synopsis"></ion-textarea>
+        <ion-textarea label="Synopsis" labelPlacement="floating" formControlName="synopsis"></ion-textarea>
       </ion-item>
       <ion-item>
-        <ion-textarea label="Origine" labelPlacement="floating" value="{{ saga.origin }}" formControlName="origin"></ion-textarea>
+        <ion-textarea label="Origine" labelPlacement="floating" formControlName="origin"></ion-textarea>
       </ion-item>
       <ion-item>
-        <ion-textarea label="Génèse" labelPlacement="floating" value="{{ saga.genese }}" formControlName="genese"></ion-textarea>
+        <ion-textarea label="Génèse" labelPlacement="floating" formControlName="genese"></ion-textarea>
       </ion-item>
       <ion-item>
-        <ion-textarea label="Récompenses" labelPlacement="floating" value="{{ saga.awards }}" formControlName="awards"></ion-textarea>
+        <ion-textarea label="Récompenses" labelPlacement="floating" formControlName="awards"></ion-textarea>
       </ion-item>
       <ion-item>
         <ion-input label="Bannière" labelPlacement="floating" class="fileUpload" type="file" formControlName="banner" (change)="onBannerChange($event)">{{ bannerSource }}</ion-input>