17 files changed, 158 insertions, 156 deletions

diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts
index 74ed1c580..abb11fdc2 100644
--- a/client/src/app/core/auth/auth-user.model.ts
+++ b/client/src/app/core/auth/auth-user.model.ts
@@ -1,8 +1,9 @@
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { UserRight } from '../../../../../shared/models/users/user-right.enum'
+import { User as ServerUserModel } from '../../../../../shared/models/users/user.model'
 // Do not use the barrel (dependency loop)
 import { hasUserRight, UserRole } from '../../../../../shared/models/users/user-role'
-import { User, UserConstructorHash } from '../../shared/users/user.model'
+import { User } from '../../shared/users/user.model'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 
 export type TokenOptions = {
@@ -70,8 +71,10 @@ export class AuthUser extends User {
     ID: 'id',
     ROLE: 'role',
     EMAIL: 'email',
+    VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
     USERNAME: 'username',
     NSFW_POLICY: 'nsfw_policy',
+    WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
     AUTO_PLAY_VIDEO: 'auto_play_video'
   }
 
@@ -87,7 +90,9 @@ export class AuthUser extends User {
           email: peertubeLocalStorage.getItem(this.KEYS.EMAIL),
           role: parseInt(peertubeLocalStorage.getItem(this.KEYS.ROLE), 10) as UserRole,
           nsfwPolicy: peertubeLocalStorage.getItem(this.KEYS.NSFW_POLICY) as NSFWPolicyType,
-          autoPlayVideo: peertubeLocalStorage.getItem(this.KEYS.AUTO_PLAY_VIDEO) === 'true'
+          webTorrentEnabled: peertubeLocalStorage.getItem(this.KEYS.WEBTORRENT_ENABLED) === 'true',
+          autoPlayVideo: peertubeLocalStorage.getItem(this.KEYS.AUTO_PLAY_VIDEO) === 'true',
+          videosHistoryEnabled: peertubeLocalStorage.getItem(this.KEYS.VIDEOS_HISTORY_ENABLED) === 'true'
         },
         Tokens.load()
       )
@@ -101,12 +106,14 @@ export class AuthUser extends User {
     peertubeLocalStorage.removeItem(this.KEYS.ID)
     peertubeLocalStorage.removeItem(this.KEYS.ROLE)
     peertubeLocalStorage.removeItem(this.KEYS.NSFW_POLICY)
+    peertubeLocalStorage.removeItem(this.KEYS.WEBTORRENT_ENABLED)
+    peertubeLocalStorage.removeItem(this.KEYS.VIDEOS_HISTORY_ENABLED)
     peertubeLocalStorage.removeItem(this.KEYS.AUTO_PLAY_VIDEO)
     peertubeLocalStorage.removeItem(this.KEYS.EMAIL)
     Tokens.flush()
   }
 
-  constructor (userHash: UserConstructorHash, hashTokens: TokenOptions) {
+  constructor (userHash: Partial<ServerUserModel>, hashTokens: TokenOptions) {
     super(userHash)
     this.tokens = new Tokens(hashTokens)
   }
@@ -138,6 +145,7 @@ export class AuthUser extends User {
     peertubeLocalStorage.setItem(AuthUser.KEYS.EMAIL, this.email)
     peertubeLocalStorage.setItem(AuthUser.KEYS.ROLE, this.role.toString())
     peertubeLocalStorage.setItem(AuthUser.KEYS.NSFW_POLICY, this.nsfwPolicy.toString())
+    peertubeLocalStorage.setItem(AuthUser.KEYS.WEBTORRENT_ENABLED, JSON.stringify(this.webTorrentEnabled))
     peertubeLocalStorage.setItem(AuthUser.KEYS.AUTO_PLAY_VIDEO, JSON.stringify(this.autoPlayVideo))
     this.tokens.save()
   }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9c36b946e..eaa822e0f 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -3,18 +3,18 @@ import { catchError, map, mergeMap, share, tap } from 'rxjs/operators'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
-import { NotificationsService } from 'angular2-notifications'
+import { Notifier } from '@app/core/notification/notifier.service'
 import { OAuthClientLocal, User as UserServerModel, UserRefreshToken } from '../../../../../shared'
 import { User } from '../../../../../shared/models/users'
 import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 import { environment } from '../../../environments/environment'
-import { RestExtractor } from '../../shared/rest'
+import { RestExtractor } from '../../shared/rest/rest-extractor.service'
 import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
 import { objectToUrlEncoded } from '@app/shared/misc/utils'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { HotkeysService, Hotkey } from 'angular2-hotkeys'
+import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 
 interface UserLoginWithUsername extends UserLogin {
   access_token: string
@@ -38,7 +38,6 @@ export class AuthService {
   loginChangedSource: Observable<AuthStatus>
   userInformationLoaded = new ReplaySubject<boolean>(1)
   hotkeys: Hotkey[]
-  redirectUrl: string
 
   private clientId: string = peertubeLocalStorage.getItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID)
   private clientSecret: string = peertubeLocalStorage.getItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET)
@@ -48,7 +47,7 @@ export class AuthService {
 
   constructor (
     private http: HttpClient,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private hotkeysService: HotkeysService,
     private restExtractor: RestExtractor,
     private router: Router,
@@ -106,9 +105,8 @@ export class AuthService {
               )
             }
 
-            // We put a bigger timeout
-            // This is an important message
-            this.notificationsService.error(this.i18n('Error'), errorMessage, { timeOut: 7000 })
+            // We put a bigger timeout: this is an important message
+            this.notifier.error(errorMessage, this.i18n('Error'), 7000)
           }
         )
   }
@@ -178,8 +176,6 @@ export class AuthService {
     this.setStatus(AuthStatus.LoggedOut)
 
     this.hotkeysService.remove(this.hotkeys)
-
-    this.redirectUrl = null
   }
 
   refreshAccessToken () {
@@ -221,7 +217,7 @@ export class AuthService {
   }
 
   refreshUserInformation () {
-    const obj = {
+    const obj: UserLoginWithUsername = {
       access_token: this.user.getAccessToken(),
       refresh_token: null,
       token_type: this.user.getTokenType(),
diff --git a/client/src/app/core/auth/index.ts b/client/src/app/core/auth/index.ts
index bc7bfec0e..8e5caa7ed 100644
--- a/client/src/app/core/auth/index.ts
+++ b/client/src/app/core/auth/index.ts
@@ -1,4 +1,3 @@
 export * from './auth-status.model'
 export * from './auth-user.model'
 export * from './auth.service'
-export * from '../routing/login-guard.service'
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
deleted file mode 100644
index 43f0c6190..000000000
--- a/client/src/app/core/confirm/confirm.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<ng-template #confirmModal let-close="close" let-dismiss="dismiss">
-
-  <div class="modal-header">
-    <h4 class="modal-title">{{ title }}</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
-  </div>
-
-  <div class="modal-body" >
-    <div [innerHtml]="message"></div>
-
-    <div *ngIf="inputLabel && expectedInputValue" class="form-group">
-      <label for="confirmInput">{{ inputLabel }}</label>
-      <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
-    </div>
-  </div>
-
-  <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
-
-    <input
-      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
-      (click)="close()"
-    >
-  </div>
-</ng-template>
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/core/confirm/confirm.component.scss
deleted file mode 100644
index 93dd7926b..000000000
--- a/client/src/app/core/confirm/confirm.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.button {
-  padding: 0 13px;
-}
-
-input[type=text] {
-  @include peertube-input-text(100%);
-  display: block;
-}
-
-.form-group {
-  margin: 20px 0;
-}
-
-
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
deleted file mode 100644
index 5138b7848..000000000
--- a/client/src/app/core/confirm/confirm.component.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
-import { ConfirmService } from './confirm.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
-
-@Component({
-  selector: 'my-confirm',
-  templateUrl: './confirm.component.html',
-  styleUrls: [ './confirm.component.scss' ]
-})
-export class ConfirmComponent implements OnInit {
-  @ViewChild('confirmModal') confirmModal: ElementRef
-
-  title = ''
-  message = ''
-  expectedInputValue = ''
-  inputLabel = ''
-
-  inputValue = ''
-  confirmButtonText = ''
-
-  private openedModal: NgbModalRef
-
-  constructor (
-    private modalService: NgbModal,
-    private confirmService: ConfirmService,
-    private i18n: I18n
-  ) { }
-
-  ngOnInit () {
-    this.confirmService.showConfirm.subscribe(
-      ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
-        this.title = title
-        this.message = message
-
-        this.inputLabel = inputLabel
-        this.expectedInputValue = expectedInputValue
-
-        this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
-
-        this.showModal()
-      }
-    )
-  }
-
-  @HostListener('document:keydown.enter')
-  confirm () {
-    if (this.openedModal) this.openedModal.close()
-  }
-
-  isConfirmationDisabled () {
-    // No input validation
-    if (!this.inputLabel || !this.expectedInputValue) return false
-
-    return this.expectedInputValue !== this.inputValue
-  }
-
-  showModal () {
-    this.inputValue = ''
-
-    this.openedModal = this.modalService.open(this.confirmModal)
-
-    this.openedModal.result
-        .then(() => this.confirmService.confirmResponse.next(true))
-        .catch(() => this.confirmService.confirmResponse.next(false))
-  }
-}
diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts
index 44aabfc13..aca591e1a 100644
--- a/client/src/app/core/confirm/index.ts
+++ b/client/src/app/core/confirm/index.ts
@@ -1,2 +1 @@
-export * from './confirm.component'
 export * from './confirm.service'
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index df2ec696d..4ef3b1e73 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -7,16 +7,18 @@ import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
 
-import { SimpleNotificationsModule } from 'angular2-notifications'
-
 import { AuthService } from './auth'
-import { ConfirmComponent, ConfirmService } from './confirm'
+import { ConfirmService } from './confirm'
 import { throwIfAlreadyLoaded } from './module-import-guard'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
 import { ServerService } from './server'
 import { ThemeService } from './theme'
 import { HotkeyModule } from 'angular2-hotkeys'
-import { CheatSheetComponent } from '@app/core/hotkeys'
+import { CheatSheetComponent } from './hotkeys'
+import { ToastModule } from 'primeng/toast'
+import { Notifier } from './notification'
+import { MessageService } from 'primeng/api'
+import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 
 @NgModule({
   imports: [
@@ -25,11 +27,10 @@ import { CheatSheetComponent } from '@app/core/hotkeys'
     FormsModule,
     BrowserAnimationsModule,
 
-    SimpleNotificationsModule.forRoot(),
-
     LoadingBarHttpClientModule,
     LoadingBarRouterModule,
-    LoadingBarModule.forRoot(),
+    LoadingBarModule,
+    ToastModule,
 
     HotkeyModule.forRoot({
       cheatSheetCloseEsc: true
@@ -37,16 +38,15 @@ import { CheatSheetComponent } from '@app/core/hotkeys'
   ],
 
   declarations: [
-    ConfirmComponent,
     CheatSheetComponent
   ],
 
   exports: [
-    SimpleNotificationsModule,
     LoadingBarHttpClientModule,
     LoadingBarModule,
 
-    ConfirmComponent,
+    ToastModule,
+
     CheatSheetComponent
   ],
 
@@ -57,7 +57,10 @@ import { CheatSheetComponent } from '@app/core/hotkeys'
     ThemeService,
     LoginGuard,
     UserRightGuard,
-    RedirectService
+    RedirectService,
+    Notifier,
+    MessageService,
+    UserNotificationSocket
   ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index 524589d74..f664aff41 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -2,6 +2,7 @@ export * from './auth'
 export * from './confirm'
 export * from './routing'
 export * from './server'
+export * from './notification'
 export * from './theme'
 
 export * from './core.module'
diff --git a/client/src/app/core/notification/index.ts b/client/src/app/core/notification/index.ts
new file mode 100644
index 000000000..3e8d9ea65
--- /dev/null
+++ b/client/src/app/core/notification/index.ts
@@ -0,0 +1,2 @@
+export * from './notifier.service'
+export * from './user-notification-socket.service'
diff --git a/client/src/app/core/notification/notifier.service.ts b/client/src/app/core/notification/notifier.service.ts
new file mode 100644
index 000000000..9833c65a0
--- /dev/null
+++ b/client/src/app/core/notification/notifier.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core'
+import { MessageService } from 'primeng/api'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Injectable()
+export class Notifier {
+  readonly TIMEOUT = 5000
+
+  constructor (
+    private i18n: I18n,
+    private messageService: MessageService) {
+  }
+
+  info (text: string, title?: string, timeout?: number) {
+    if (!title) title = this.i18n('Info')
+
+    return this.notify('info', text, title, timeout)
+  }
+
+  error (text: string, title?: string, timeout?: number) {
+    if (!title) title = this.i18n('Error')
+
+    return this.notify('error', text, title, timeout)
+  }
+
+  success (text: string, title?: string, timeout?: number) {
+    if (!title) title = this.i18n('Success')
+
+    return this.notify('success', text, title, timeout)
+  }
+
+  private notify (severity: 'success' | 'info' | 'warn' | 'error', text: string, title: string, timeout?: number) {
+    this.messageService.add({
+      severity,
+      summary: title,
+      detail: text,
+      closable: true,
+      life: timeout || this.TIMEOUT
+    })
+  }
+}
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
new file mode 100644
index 000000000..f367d9ae4
--- /dev/null
+++ b/client/src/app/core/notification/user-notification-socket.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { UserNotification as UserNotificationServer } from '../../../../../shared'
+import { Subject } from 'rxjs'
+import * as io from 'socket.io-client'
+import { AuthService } from '../auth'
+
+export type NotificationEvent = 'new' | 'read' | 'read-all'
+
+@Injectable()
+export class UserNotificationSocket {
+  private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
+
+  private socket: SocketIOClient.Socket
+
+  constructor (
+    private auth: AuthService
+  ) {}
+
+  dispatch (type: NotificationEvent, notification?: UserNotificationServer) {
+    this.notificationSubject.next({ type, notification })
+  }
+
+  getMyNotificationsSocket () {
+    const socket = this.getSocket()
+
+    socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+
+    return this.notificationSubject.asObservable()
+  }
+
+  private getSocket () {
+    if (this.socket) return this.socket
+
+    this.socket = io(environment.apiUrl + '/user-notifications', {
+      query: { accessToken: this.auth.getAccessToken() }
+    })
+
+    return this.socket
+  }
+}
diff --git a/client/src/app/core/routing/login-guard.service.ts b/client/src/app/core/routing/login-guard.service.ts
index 40ff8f505..7b1c37ee8 100644
--- a/client/src/app/core/routing/login-guard.service.ts
+++ b/client/src/app/core/routing/login-guard.service.ts
@@ -1,11 +1,5 @@
 import { Injectable } from '@angular/core'
-import {
-  ActivatedRouteSnapshot,
-  CanActivateChild,
-  RouterStateSnapshot,
-  CanActivate,
-  Router
-} from '@angular/router'
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router'
 
 import { AuthService } from '../auth/auth.service'
 
@@ -20,8 +14,6 @@ export class LoginGuard implements CanActivate, CanActivateChild {
   canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     if (this.auth.isLoggedIn() === true) return true
 
-    this.auth.redirectUrl = state.url
-
     this.router.navigate([ '/login' ])
     return false
   }
diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts
index 1881be117..e1db4097b 100644
--- a/client/src/app/core/routing/redirect.service.ts
+++ b/client/src/app/core/routing/redirect.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { Router } from '@angular/router'
+import { NavigationEnd, Router } from '@angular/router'
 import { ServerService } from '../server'
 
 @Injectable()
@@ -8,6 +8,9 @@ export class RedirectService {
   static INIT_DEFAULT_ROUTE = '/videos/trending'
   static DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE
 
+  private previousUrl: string
+  private currentUrl: string
+
   constructor (
     private router: Router,
     private serverService: ServerService
@@ -18,6 +21,7 @@ export class RedirectService {
       RedirectService.DEFAULT_ROUTE = config.instance.defaultClientRoute
     }
 
+    // Load default route
     this.serverService.configLoaded
         .subscribe(() => {
           const defaultRouteConfig = this.serverService.getConfig().instance.defaultClientRoute
@@ -26,6 +30,21 @@ export class RedirectService {
             RedirectService.DEFAULT_ROUTE = defaultRouteConfig
           }
         })
+
+    // Track previous url
+    this.currentUrl = this.router.url
+    router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.previousUrl = this.currentUrl
+        this.currentUrl = event.url
+      }
+    })
+  }
+
+  redirectToPreviousRoute () {
+    if (this.previousUrl) return this.router.navigateByUrl(this.previousUrl)
+
+    return this.redirectToHomepage()
   }
 
   redirectToHomepage (skipLocationChange = false) {
diff --git a/client/src/app/core/routing/user-right-guard.service.ts b/client/src/app/core/routing/user-right-guard.service.ts
index 65d029977..50c3d8c19 100644
--- a/client/src/app/core/routing/user-right-guard.service.ts
+++ b/client/src/app/core/routing/user-right-guard.service.ts
@@ -7,7 +7,7 @@ import {
   Router
 } from '@angular/router'
 
-import { AuthService } from '../auth'
+import { AuthService } from '../auth/auth.service'
 
 @Injectable()
 export class UserRightGuard implements CanActivate, CanActivateChild {
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 2f1ef1fc2..c868ccdcc 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -13,6 +13,7 @@ import { sortBy } from '@app/shared/misc/utils'
 
 @Injectable()
 export class ServerService {
+  private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server/'
   private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/'
   private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
   private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/'
@@ -37,6 +38,12 @@ export class ServerService {
         css: ''
       }
     },
+    email: {
+      enabled: false
+    },
+    contactForm: {
+      enabled: false
+    },
     serverVersion: 'Unknown',
     signup: {
       allowed: false,
@@ -44,7 +51,10 @@ export class ServerService {
       requiresEmailVerification: false
     },
     transcoding: {
-      enabledResolutions: []
+      enabledResolutions: [],
+      hls: {
+        enabled: false
+      }
     },
     avatar: {
       file: {
@@ -80,6 +90,11 @@ export class ServerService {
           enabled: false
         }
       }
+    },
+    trending: {
+      videos: {
+        intervalDays: 0
+      }
     }
   }
   private videoCategories: Array<VideoConstant<number>> = []
@@ -141,10 +156,6 @@ export class ServerService {
     return this.videoPrivacies
   }
 
-  getAbout () {
-    return this.http.get<About>(ServerService.BASE_CONFIG_URL + '/about')
-  }
-
   private loadVideoAttributeEnum (
     attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
     hashToPopulate: VideoConstant<string | number>[],
@@ -154,7 +165,7 @@ export class ServerService {
     this.localeObservable
         .pipe(
           switchMap(translations => {
-            return this.http.get(ServerService.BASE_VIDEO_URL + attributeName)
+            return this.http.get<{ [id: string]: string }>(ServerService.BASE_VIDEO_URL + attributeName)
                        .pipe(map(data => ({ data, translations })))
           })
         )
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index a6eef0898..50c19ecac 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -5,7 +5,7 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 export class ThemeService {
   private theme = document.querySelector('body')
   private darkTheme = false
-  private previousTheme = {}
+  private previousTheme: { [ id: string ]: string } = {}
 
   constructor () {
     // initialise the alternative theme with dark theme colors
@@ -33,7 +33,7 @@ export class ThemeService {
     }
   }
 
-  private switchProperty (property, newValue?) {
+  private switchProperty (property: string, newValue?: string) {
     const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
     this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
     this.previousTheme[property] = propertyOldvalue