Add confirm when admin use custom js/css

16 files changed, 207 insertions, 172 deletions

diff --git a/client/.angular-cli.json b/client/.angular-cli.json
index 643e1b319..cb387db0a 100644
--- a/client/.angular-cli.json
+++ b/client/.angular-cli.json
@@ -8,12 +8,7 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
-        {
-          "glob": "**/*",
-          "input": "./assets/images",
-          "output": "./client/assets/images",
-          "allowOutsideOutDir": false
-        },
+        "./assets/images",
         "./manifest.json"
       ],
       "deployUrl": "client/",
diff --git a/client/src/app/+admin/config/config.routes.ts b/client/src/app/+admin/config/config.routes.ts
index a46b0ddfd..2ca2f8fde 100644
--- a/client/src/app/+admin/config/config.routes.ts
+++ b/client/src/app/+admin/config/config.routes.ts
@@ -23,7 +23,7 @@ export const ConfigRoutes: Routes = [
         component: EditCustomConfigComponent,
         data: {
           meta: {
-            title: 'Following list'
+            title: 'Edit custom configuration'
           }
         }
       }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 027268536..ccec89a8e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { ConfirmService } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import { FormReactive, USER_VIDEO_QUOTA } from '@app/shared'
 import {
@@ -61,12 +62,16 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     userVideoQuota: USER_VIDEO_QUOTA.MESSAGES
   }
 
+  private oldCustomJavascript: string
+  private oldCustomCSS: string
+
   constructor (
     private formBuilder: FormBuilder,
     private router: Router,
     private notificationsService: NotificationsService,
     private configService: ConfigService,
-    private serverService: ServerService
+    private serverService: ServerService,
+    private confirmService: ConfirmService
   ) {
     super()
   }
@@ -109,6 +114,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
         res => {
           this.customConfig = res
 
+          this.oldCustomCSS = this.customConfig.instance.customizations.css
+          this.oldCustomJavascript = this.customConfig.instance.customizations.javascript
+
           this.updateForm()
         },
 
@@ -124,7 +132,27 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     return this.form.value['signupEnabled'] === true
   }
 
-  formValidated () {
+  async formValidated () {
+    const newCustomizationJavascript = this.form.value['customizationJavascript']
+    const newCustomizationCSS = this.form.value['customizationCSS']
+
+    const customizations = []
+    if (newCustomizationJavascript && newCustomizationJavascript !== this.oldCustomJavascript) customizations.push('JavaScript')
+    if (newCustomizationCSS && newCustomizationCSS !== this.oldCustomCSS) customizations.push('CSS')
+
+    if (customizations.length !== 0) {
+      const customizationsText = customizations.join('/')
+
+      const message = `You set custom ${customizationsText}. ` +
+        'This could lead to security issues or bugs if you do not understand it. ' +
+        'Are you sure you want to update the configuration?'
+      const label = `Please type "I understand the ${customizationsText} I set" to confirm.`
+      const expectedInputValue = `I understand the ${customizationsText} I set`
+
+      const confirmRes = await this.confirmService.confirmWithInput(message, label, expectedInputValue)
+      if (confirmRes === false) return
+    }
+
     const data = {
       instance: {
         name: this.form.value['instanceName'],
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts
index bf842129d..c296c8852 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -43,7 +43,7 @@ export class FollowingAddComponent {
     }
   }
 
-  addFollowing () {
+  async addFollowing () {
     this.error = ''
 
     const hosts = this.getNotEmptyHosts()
@@ -57,20 +57,17 @@ export class FollowingAddComponent {
     }
 
     const confirmMessage = 'If you confirm, you will send a follow request to:<br /> - ' + hosts.join('<br /> - ')
-    this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe(
-      res => {
-        if (res === false) return
+    const res = await this.confirmService.confirm(confirmMessage, 'Follow new server(s)')
+    if (res === false) return
 
-        this.followService.follow(hosts).subscribe(
-          status => {
-            this.notificationsService.success('Success', 'Follow request(s) sent!')
+    this.followService.follow(hosts).subscribe(
+      () => {
+        this.notificationsService.success('Success', 'Follow request(s) sent!')
 
-            setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
-          },
+        setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
+      },
 
-          err => this.notificationsService.error('Error', err.message)
-        )
-      }
+      err => this.notificationsService.error('Error', err.message)
     )
   }
 
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index d4f8d0309..ad1bd4536 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -25,20 +25,17 @@ export class FollowingListComponent extends RestTable {
     super()
   }
 
-  removeFollowing (follow: AccountFollow) {
-    this.confirmService.confirm(`Do you really want to unfollow ${follow.following.host}?`, 'Unfollow').subscribe(
-      res => {
-        if (res === false) return
+  async removeFollowing (follow: AccountFollow) {
+    const res = await this.confirmService.confirm(`Do you really want to unfollow ${follow.following.host}?`, 'Unfollow')
+    if (res === false) return
 
-        this.followService.unfollow(follow).subscribe(
-          () => {
-            this.notificationsService.success('Success', `You are not following ${follow.following.host} anymore.`)
-            this.loadData()
-          },
+    this.followService.unfollow(follow).subscribe(
+      () => {
+        this.notificationsService.success('Success', `You are not following ${follow.following.host} anymore.`)
+        this.loadData()
+      },
 
-          err => this.notificationsService.error('Error', err.message)
-        )
-      }
+      err => this.notificationsService.error('Error', err.message)
     )
   }
 
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 1e8e1af49..512152808 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
 
 import { NotificationsService } from 'angular2-notifications'
+import { SortMeta } from 'primeng/components/common/sortmeta'
 
 import { ConfirmService } from '../../../core'
-import { RestTable, RestPagination, User } from '../../../shared'
+import { RestPagination, RestTable, User } from '../../../shared'
 import { UserService } from '../shared'
 
 @Component({
@@ -27,25 +27,22 @@ export class UserListComponent extends RestTable {
     super()
   }
 
-  removeUser (user: User) {
+  async removeUser (user: User) {
     if (user.username === 'root') {
       this.notificationsService.error('Error', 'You cannot delete root.')
       return
     }
 
-    this.confirmService.confirm('Do you really want to delete this user?', 'Delete').subscribe(
-      res => {
-        if (res === false) return
+    const res = await this.confirmService.confirm('Do you really want to delete this user?', 'Delete')
+    if (res === false) return
 
-        this.userService.removeUser(user).subscribe(
-          () => {
-            this.notificationsService.success('Success', `User ${user.username} deleted.`)
-            this.loadData()
-          },
+    this.userService.removeUser(user).subscribe(
+      () => {
+        this.notificationsService.success('Success', `User ${user.username} deleted.`)
+        this.loadData()
+      },
 
-          err => this.notificationsService.error('Error', err.message)
-        )
-      }
+      err => this.notificationsService.error('Error', err.message)
     )
   }
 
diff --git a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts
index 56024b247..f4cf21259 100644
--- a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts
@@ -31,22 +31,19 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
     this.loadData()
   }
 
-  removeVideoFromBlacklist (entry: BlacklistedVideo) {
+  async removeVideoFromBlacklist (entry: BlacklistedVideo) {
     const confirmMessage = 'Do you really want to remove this video from the blacklist ? It will be available again in the video list.'
 
-    this.confirmService.confirm(confirmMessage, 'Remove').subscribe(
-      res => {
-        if (res === false) return
+    const res = await this.confirmService.confirm(confirmMessage, 'Remove')
+    if (res === false) return
 
-        this.videoBlacklistService.removeVideoFromBlacklist(entry.videoId).subscribe(
-          status => {
-            this.notificationsService.success('Success', `Video ${entry.name} removed from the blacklist.`)
-            this.loadData()
-          },
+    this.videoBlacklistService.removeVideoFromBlacklist(entry.videoId).subscribe(
+      () => {
+        this.notificationsService.success('Success', `Video ${entry.name} removed from the blacklist.`)
+        this.loadData()
+      },
 
-          err => this.notificationsService.error('Error', err.message)
-        )
-      }
+      err => this.notificationsService.error('Error', err.message)
     )
   }
 
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts
index e9d044dbf..a286bad1c 100644
--- a/client/src/app/account/account-videos/account-videos.component.ts
+++ b/client/src/app/account/account-videos/account-videos.component.ts
@@ -56,55 +56,49 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit
     return this.videoService.getMyVideos(newPagination, this.sort)
   }
 
-  deleteSelectedVideos () {
+  async deleteSelectedVideos () {
     const toDeleteVideosIds = Object.keys(this.checkedVideos)
       .filter(k => this.checkedVideos[k] === true)
       .map(k => parseInt(k, 10))
 
-    this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete').subscribe(
-      res => {
-        if (res === false) return
-
-        const observables: Observable<any>[] = []
-        for (const videoId of toDeleteVideosIds) {
-          const o = this.videoService
-            .removeVideo(videoId)
-            .do(() => this.spliceVideosById(videoId))
-
-          observables.push(o)
-        }
-
-        Observable.from(observables)
-          .concatAll()
-          .subscribe(
-            res => {
-              this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`)
-              this.buildVideoPages()
-            },
-
-            err => this.notificationsService.error('Error', err.message)
-          )
-      }
-    )
+    const res = await this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete')
+    if (res === false) return
+
+    const observables: Observable<any>[] = []
+    for (const videoId of toDeleteVideosIds) {
+      const o = this.videoService
+        .removeVideo(videoId)
+        .do(() => this.spliceVideosById(videoId))
+
+      observables.push(o)
+    }
+
+    Observable.from(observables)
+      .concatAll()
+      .subscribe(
+        res => {
+          this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`)
+          this.buildVideoPages()
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
   }
 
-  deleteVideo (video: Video) {
-    this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe(
-      res => {
-        if (res === false) return
-
-        this.videoService.removeVideo(video.id)
-          .subscribe(
-            status => {
-              this.notificationsService.success('Success', `Video ${video.name} deleted.`)
-              this.spliceVideosById(video.id)
-              this.buildVideoPages()
-            },
-
-            error => this.notificationsService.error('Error', error.message)
-          )
-      }
-    )
+  async deleteVideo (video: Video) {
+    const res = await this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete')
+    if (res === false) return
+
+    this.videoService.removeVideo(video.id)
+      .subscribe(
+        status => {
+          this.notificationsService.success('Success', `Video ${video.name} deleted.`)
+          this.spliceVideosById(video.id)
+          this.buildVideoPages()
+        },
+
+        error => this.notificationsService.error('Error', error.message)
+      )
   }
 
   private spliceVideosById (id: number) {
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index cc2c28de2..90274b248 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -10,13 +10,18 @@
       <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 class="form-group inputs">
           <span class="action-button action-button-cancel" (click)="cancel()">
             Cancel
           </span>
 
           <input
-            type="submit" value="Confirm" class="action-button-submit"
+            type="submit" value="Confirm" class="action-button-submit" [disabled]="isConfirmationDisabled()"
             (click)="confirm()"
           >
         </div>
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/core/confirm/confirm.component.scss
new file mode 100644
index 000000000..93dd7926b
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.component.scss
@@ -0,0 +1,17 @@
+@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
index 0515d969a..8f81b7a98 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -4,21 +4,20 @@ import { ModalDirective } from 'ngx-bootstrap/modal'
 
 import { ConfirmService } from './confirm.service'
 
-export interface ConfigChangedEvent {
-  columns: { [id: string]: { isDisplayed: boolean } }
-  config: { resultsPerPage: number }
-}
-
 @Component({
   selector: 'my-confirm',
   templateUrl: './confirm.component.html',
-  styles: [ '.button { padding: 0 13px; }' ]
+  styleUrls: [ './confirm.component.scss' ]
 })
 export class ConfirmComponent implements OnInit {
   @ViewChild('confirmModal') confirmModal: ModalDirective
 
   title = ''
   message = ''
+  expectedInputValue = ''
+  inputLabel = ''
+
+  inputValue = ''
 
   constructor (private confirmService: ConfirmService) {
     // Empty
@@ -31,10 +30,13 @@ export class ConfirmComponent implements OnInit {
     }
 
     this.confirmService.showConfirm.subscribe(
-      ({ title, message }) => {
+      ({ title, message, expectedInputValue, inputLabel }) => {
         this.title = title
         this.message = message
 
+        this.inputLabel = inputLabel
+        this.expectedInputValue = expectedInputValue
+
         this.showModal()
       }
     )
@@ -52,6 +54,13 @@ export class ConfirmComponent implements OnInit {
     this.hideModal()
   }
 
+  isConfirmationDisabled () {
+    // No input validation
+    if (!this.inputLabel || !this.expectedInputValue) return false
+
+    return this.expectedInputValue !== this.inputValue
+  }
+
   showModal () {
     this.confirmModal.show()
   }
diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts
index f12ff1848..f30feb9d0 100644
--- a/client/src/app/core/confirm/confirm.service.ts
+++ b/client/src/app/core/confirm/confirm.service.ts
@@ -1,15 +1,22 @@
 import { Injectable } from '@angular/core'
 import { Subject } from 'rxjs/Subject'
 import 'rxjs/add/operator/first'
+import 'rxjs/add/operator/toPromise'
 
 @Injectable()
 export class ConfirmService {
-  showConfirm = new Subject<{ title, message }>()
+  showConfirm = new Subject<{ title: string, message: string, inputLabel?: string, expectedInputValue?: string }>()
   confirmResponse = new Subject<boolean>()
 
-  confirm (message = '', title = '') {
+  confirm (message: string, title = '') {
     this.showConfirm.next({ title, message })
 
-    return this.confirmResponse.asObservable().first()
+    return this.confirmResponse.asObservable().first().toPromise()
+  }
+
+  confirmWithInput (message: string, inputLabel: string, expectedInputValue: string, title = '') {
+    this.showConfirm.next({ title, message, inputLabel, expectedInputValue })
+
+    return this.confirmResponse.asObservable().first().toPromise()
   }
 }
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index eea6f340b..36dbe8b5c 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common'
 import { NgModule, Optional, SkipSelf } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterModule } from '@angular/router'
 import { LoadingBarModule } from '@ngx-loading-bar/core'
@@ -18,6 +19,7 @@ import { ServerService } from './server'
   imports: [
     CommonModule,
     RouterModule,
+    FormsModule,
     BrowserAnimationsModule,
 
     ModalModule,
diff --git a/client/src/app/shared/guards/can-deactivate-guard.service.ts b/client/src/app/shared/guards/can-deactivate-guard.service.ts
index 15618f699..c3b5f37f8 100644
--- a/client/src/app/shared/guards/can-deactivate-guard.service.ts
+++ b/client/src/app/shared/guards/can-deactivate-guard.service.ts
@@ -15,7 +15,7 @@ export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>
     currentRoute: ActivatedRouteSnapshot,
     currentState: RouterStateSnapshot,
     nextState: RouterStateSnapshot
-  ): Observable<boolean> | boolean {
+  ) {
     const result = component.canDeactivate()
     const text = result.text || 'All unsaved data will be lost, are you sure you want to leave this page?'
 
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 16f1a0643..711a01ba0 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -109,38 +109,35 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     this.viewReplies(commentTree.comment.id)
   }
 
-  onWantedToDelete (commentToDelete: VideoComment) {
+  async onWantedToDelete (commentToDelete: VideoComment) {
     let message = 'Do you really want to delete this comment?'
     if (commentToDelete.totalReplies !== 0) message += `${commentToDelete.totalReplies} would be deleted too.`
 
-    this.confirmService.confirm(message, 'Delete').subscribe(
-      res => {
-        if (res === false) return
-
-        this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id)
-          .subscribe(
-            () => {
-              // Delete the comment in the tree
-              if (commentToDelete.inReplyToCommentId) {
-                const thread = this.threadComments[commentToDelete.threadId]
-                if (!thread) {
-                  console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`)
-                  return
-                }
-
-                this.deleteLocalCommentThread(thread, commentToDelete)
-                return
-              }
-
-              // Delete the thread
-              this.comments = this.comments.filter(c => c.id !== commentToDelete.id)
-              this.componentPagination.totalItems--
-            },
-
-            err => this.notificationsService.error('Error', err.message)
-          )
-      }
-    )
+    const res = await this.confirmService.confirm(message, 'Delete')
+    if (res === false) return
+
+    this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id)
+      .subscribe(
+        () => {
+          // Delete the comment in the tree
+          if (commentToDelete.inReplyToCommentId) {
+            const thread = this.threadComments[commentToDelete.threadId]
+            if (!thread) {
+              console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`)
+              return
+            }
+
+            this.deleteLocalCommentThread(thread, commentToDelete)
+            return
+          }
+
+          // Delete the thread
+          this.comments = this.comments.filter(c => c.id !== commentToDelete.id)
+          this.componentPagination.totalItems--
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
   }
 
   isUserLoggedIn () {
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 6b118b1de..d04d50310 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -130,24 +130,21 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
   }
 
-  blacklistVideo (event: Event) {
+  async blacklistVideo (event: Event) {
     event.preventDefault()
 
-    this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist').subscribe(
-      res => {
-        if (res === false) return
+    const res = await this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist')
+    if (res === false) return
 
-        this.videoBlacklistService.blacklistVideo(this.video.id)
-                                  .subscribe(
-                                    status => {
-                                      this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
-                                      this.router.navigate(['/videos/list'])
-                                    },
+    this.videoBlacklistService.blacklistVideo(this.video.id)
+                              .subscribe(
+                                status => {
+                                  this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
+                                  this.router.navigate(['/videos/list'])
+                                },
 
-                                    error => this.notificationsService.error('Error', error.message)
-                                  )
-      }
-    )
+                                error => this.notificationsService.error('Error', error.message)
+                              )
   }
 
   showMoreDescription () {
@@ -236,26 +233,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.isRemovableBy(this.authService.getUser())
   }
 
-  removeVideo (event: Event) {
+  async removeVideo (event: Event) {
     event.preventDefault()
 
-    this.confirmService.confirm('Do you really want to delete this video?', 'Delete')
-      .subscribe(
-        res => {
-          if (res === false) return
+    const res = await this.confirmService.confirm('Do you really want to delete this video?', 'Delete')
+    if (res === false) return
 
-          this.videoService.removeVideo(this.video.id)
-            .subscribe(
-              status => {
-                this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
+    this.videoService.removeVideo(this.video.id)
+      .subscribe(
+        status => {
+          this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
 
-                // Go back to the video-list.
-                this.router.navigate([ '/videos/list' ])
-              },
+          // Go back to the video-list.
+          this.router.navigate([ '/videos/list' ])
+        },
 
-              error => this.notificationsService.error('Error', error.message)
-            )
-        }
+        error => this.notificationsService.error('Error', error.message)
       )
   }