Merge branch 'feature/design' into develop

12 files changed, 56 insertions, 329 deletions

diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9e6c6b888..e887dde1f 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,30 +1,25 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
-import { Observable } from 'rxjs/Observable'
-import { Subject } from 'rxjs/Subject'
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
-import { ReplaySubject } from 'rxjs/ReplaySubject'
+
+import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/throw'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/map'
 import 'rxjs/add/operator/mergeMap'
-import 'rxjs/add/observable/throw'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { AuthStatus } from './auth-status.model'
-import { AuthUser } from './auth-user.model'
-import {
-  OAuthClientLocal,
-  UserRole,
-  UserRefreshToken,
-  VideoChannel,
-  User as UserServerModel
-} from '../../../../../shared'
+import { Observable } from 'rxjs/Observable'
+import { ReplaySubject } from 'rxjs/ReplaySubject'
+import { Subject } from 'rxjs/Subject'
+import { OAuthClientLocal, User as UserServerModel, UserRefreshToken, UserRole, VideoChannel } from '../../../../../shared'
+import { Account } from '../../../../../shared/models/accounts'
+import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 // Do not use the barrel (dependency loop)
 import { RestExtractor } from '../../shared/rest'
-import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 import { UserConstructorHash } from '../../shared/users/user.model'
 
+import { AuthStatus } from './auth-status.model'
+import { AuthUser } from './auth-user.model'
+
 interface UserLoginWithUsername extends UserLogin {
   access_token: string
   refresh_token: string
@@ -42,10 +37,7 @@ interface UserLoginWithUserInformation extends UserLogin {
   displayNSFW: boolean
   email: string
   videoQuota: number
-  account: {
-    id: number
-    uuid: string
-  }
+  account: Account
   videoChannels: VideoChannel[]
 }
 
@@ -177,19 +169,15 @@ export class AuthService {
 
     return this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
                     .map(res => this.handleRefreshToken(res))
-                    .catch(res => {
-                      // The refresh token is invalid?
-                      if (res.status === 400 && res.error.error === 'invalid_grant') {
-                        console.error('Cannot refresh token -> logout...')
-                        this.logout()
-                        this.router.navigate(['/login'])
-
-                        return Observable.throw({
-                          error: 'You need to reconnect.'
-                        })
-                      }
-
-                      return this.restExtractor.handleError(res)
+                    .catch(err => {
+                      console.error(err)
+                      console.log('Cannot refresh token -> logout...')
+                      this.logout()
+                      this.router.navigate(['/login'])
+
+                      return Observable.throw({
+                        error: 'You need to reconnect.'
+                      })
                     })
   }
 
@@ -202,7 +190,6 @@ export class AuthService {
     }
 
     this.mergeUserInformation(obj)
-      .do(() => this.userInformationLoaded.next(true))
       .subscribe(
         res => {
           this.user.displayNSFW = res.displayNSFW
@@ -211,6 +198,8 @@ export class AuthService {
           this.user.account = res.account
 
           this.user.save()
+
+          this.userInformationLoaded.next(true)
         }
       )
   }
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index 2726af6cc..31b735f97 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -6,14 +6,14 @@
         <button type="button" class="close" aria-label="Close" (click)="cancel()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">{{ title }}</h4>
+        <h4 class="title-page title-page-single">{{ title }}</h4>
       </div>
 
       <div class="modal-body" [innerHtml]="message"></div>
 
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="cancel()">Cancel</button>
-        <button type="button" class="btn btn-primary" (click)="confirm()">Confirm</button>
+        <button type="button" class="grey-button" data-dismiss="modal" (click)="cancel()">Cancel</button>
+        <button type="button" class="orange-button" (click)="confirm()">Confirm</button>
       </div>
     </div>
   </div>
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
index c8e41e233..0515d969a 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -11,7 +11,8 @@ export interface ConfigChangedEvent {
 
 @Component({
   selector: 'my-confirm',
-  templateUrl: './confirm.component.html'
+  templateUrl: './confirm.component.html',
+  styles: [ '.button { padding: 0 13px; }' ]
 })
 export class ConfirmComponent implements OnInit {
   @ViewChild('confirmModal') confirmModal: ModalDirective
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index c4ce2b637..75262e6cf 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -26,17 +26,13 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
   ],
 
   declarations: [
-    ConfirmComponent,
-    MenuComponent,
-    MenuAdminComponent
+    ConfirmComponent
   ],
 
   exports: [
     SimpleNotificationsModule,
 
-    ConfirmComponent,
-    MenuComponent,
-    MenuAdminComponent
+    ConfirmComponent
   ],
 
   providers: [
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index 8358261ae..3c01e05aa 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,6 +1,5 @@
 export * from './auth'
 export * from './server'
 export * from './confirm'
-export * from './menu'
 export * from './routing'
 export * from './core.module'
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/core/menu/index.ts
deleted file mode 100644
index c905ed20a..000000000
--- a/client/src/app/core/menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './menu.component'
-export * from './menu-admin.component'
diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/core/menu/menu-admin.component.html
deleted file mode 100644
index 9857b2e3e..000000000
--- a/client/src/app/core/menu/menu-admin.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<menu>
-  <div class="panel-block">
-    <a *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-user"></span>
-      List users
-    </a>
-
-    <a *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cloud"></span>
-      Manage follows
-    </a>
-
-    <a *ngIf="hasVideoAbusesRight()" routerLink="/admin/video-abuses" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-alert"></span>
-      Video abuses
-    </a>
-
-    <a *ngIf="hasVideoBlacklistRight()" routerLink="/admin/video-blacklist" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-eye-close"></span>
-      Video blacklist
-    </a>
-
-    <a *ngIf="hasJobsRight()" routerLink="/admin/jobs" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-tasks"></span>
-      Jobs
-    </a>
-  </div>
-
-  <div class="panel-block">
-    <a routerLink="/videos/list" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      Quit admin.
-    </a>
-  </div>
-</menu>
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts
deleted file mode 100644
index ea8d5f57c..000000000
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component } from '@angular/core'
-
-import { AuthService } from '../auth/auth.service'
-import { UserRight } from '../../../../../shared'
-
-@Component({
-  selector: 'my-menu-admin',
-  templateUrl: './menu-admin.component.html',
-  styleUrls: [ './menu.component.scss' ]
-})
-export class MenuAdminComponent {
-  constructor (private auth: AuthService) {}
-
-  hasUsersRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_USERS)
-  }
-
-  hasServerFollowRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVER_FOLLOW)
-  }
-
-  hasVideoAbusesRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES)
-  }
-
-  hasVideoBlacklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
-  }
-
-  hasJobsRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
-  }
-}
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
deleted file mode 100644
index fcde23fdd..000000000
--- a/client/src/app/core/menu/menu.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<menu>
-  <div class="panel-block">
-    <div class="block-title">Account</div>
-
-    <div id="panel-user-login" class="panel-button">
-      <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
-        <span class="hidden-xs glyphicon glyphicon-log-in"></span>
-        Login
-      </a>
-
-      <a *ngIf="isLoggedIn" (click)="logout()">
-        <span class="hidden-xs glyphicon glyphicon-log-out"></span>
-        Logout
-      </a>
-    </div>
-
-    <a *ngIf="!isLoggedIn && isRegistrationAllowed()" routerLink="/signup" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-user"></span>
-      Signup
-    </a>
-
-    <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-user"></span>
-      My account
-    </a>
-
-    <a *ngIf="isLoggedIn" routerLink="/videos/mine" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-folder-open"></span>
-      My videos
-    </a>
-  </div>
-
-  <div class="panel-block">
-    <div class="block-title">Videos</div>
-
-    <a routerLink="/videos/list" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-list"></span>
-      See videos
-    </a>
-
-    <a *ngIf="isLoggedIn" routerLink="/videos/upload" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
-      Upload a video
-    </a>
-  </div>
-
-  <div *ngIf="userHasAdminAccess" class="panel-block">
-    <div class="block-title">Other</div>
-
-    <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      Administration
-    </a>
-  </div>
-</menu>
diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss
deleted file mode 100644
index 45679c310..000000000
--- a/client/src/app/core/menu/menu.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-menu {
-  background-color: $black-background;
-  padding: 15px;
-  margin: 0;
-  height: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  z-index: 1000;
-
-  @media screen and (max-width: 550px) {
-    font-size: 90%;
-  }
-
-  @media screen and (min-width: 1200px) {
-    padding: 25px;
-  }
-
-  .panel-block {
-    margin-bottom: 15px;
-  }
-
-  .block-title {
-    text-transform: uppercase;
-    font-weight: bold;
-    color: $menu-color-block;
-    margin-bottom: 10px;
-  }
-
-  a {
-    display: block;
-    margin-left: 5px;
-    height: 30px;
-    color: $menu-color-link;
-    cursor: pointer;
-    transition: color 0.3s;
-
-    &:hover, &:focus {
-      text-decoration: none !important;
-      outline: none !important;
-    }
-
-    .glyphicon {
-      margin-right: 15px;
-    }
-
-    &:hover, &.active {
-      color: #fff;
-    }
-  }
-}
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts
deleted file mode 100644
index d2bd71534..000000000
--- a/client/src/app/core/menu/menu.component.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
-
-import { AuthService, AuthStatus } from '../auth'
-import { ServerService } from '../server'
-import { UserRight } from '../../../../../shared/models/users/user-right.enum'
-
-@Component({
-  selector: 'my-menu',
-  templateUrl: './menu.component.html',
-  styleUrls: [ './menu.component.scss' ]
-})
-export class MenuComponent implements OnInit {
-  isLoggedIn: boolean
-  userHasAdminAccess = false
-
-  private routesPerRight = {
-    [UserRight.MANAGE_USERS]: '/admin/users',
-    [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends',
-    [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
-    [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
-  }
-
-  constructor (
-    private authService: AuthService,
-    private serverService: ServerService,
-    private router: Router
-  ) {}
-
-  ngOnInit () {
-    this.isLoggedIn = this.authService.isLoggedIn()
-    this.computeIsUserHasAdminAccess()
-
-    this.authService.loginChangedSource.subscribe(
-      status => {
-        if (status === AuthStatus.LoggedIn) {
-          this.isLoggedIn = true
-          this.computeIsUserHasAdminAccess()
-          console.log('Logged in.')
-        } else if (status === AuthStatus.LoggedOut) {
-          this.isLoggedIn = false
-          this.computeIsUserHasAdminAccess()
-          console.log('Logged out.')
-        } else {
-          console.error('Unknown auth status: ' + status)
-        }
-      }
-    )
-  }
-
-  isRegistrationAllowed () {
-    return this.serverService.getConfig().signup.allowed
-  }
-
-  getFirstAdminRightAvailable () {
-    const user = this.authService.getUser()
-    if (!user) return undefined
-
-    const adminRights = [
-      UserRight.MANAGE_USERS,
-      UserRight.MANAGE_SERVER_FOLLOW,
-      UserRight.MANAGE_VIDEO_ABUSES,
-      UserRight.MANAGE_VIDEO_BLACKLIST
-    ]
-
-    for (const adminRight of adminRights) {
-      if (user.hasRight(adminRight)) {
-        return adminRight
-      }
-    }
-
-    return undefined
-  }
-
-  getFirstAdminRouteAvailable () {
-    const right = this.getFirstAdminRightAvailable()
-
-    return this.routesPerRight[right]
-  }
-
-  logout () {
-    this.authService.logout()
-    // Redirect to home page
-    this.router.navigate(['/videos/list'])
-  }
-
-  private computeIsUserHasAdminAccess () {
-    const right = this.getFirstAdminRightAvailable()
-
-    this.userHasAdminAccess = right !== undefined
-  }
-}
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index cbc4074c9..16e0595b6 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -1,5 +1,7 @@
-import { Injectable } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import 'rxjs/add/operator/do'
+import { ReplaySubject } from 'rxjs/ReplaySubject'
 
 import { ServerConfig } from '../../../../../shared'
 
@@ -8,6 +10,11 @@ export class ServerService {
   private static BASE_CONFIG_URL = API_URL + '/api/v1/config/'
   private static BASE_VIDEO_URL = API_URL + '/api/v1/videos/'
 
+  videoPrivaciesLoaded = new ReplaySubject<boolean>(1)
+  videoCategoriesLoaded = new ReplaySubject<boolean>(1)
+  videoLicencesLoaded = new ReplaySubject<boolean>(1)
+  videoLanguagesLoaded = new ReplaySubject<boolean>(1)
+
   private config: ServerConfig = {
     signup: {
       allowed: false
@@ -29,19 +36,19 @@ export class ServerService {
   }
 
   loadVideoCategories () {
-    return this.loadVideoAttributeEnum('categories', this.videoCategories)
+    return this.loadVideoAttributeEnum('categories', this.videoCategories, this.videoCategoriesLoaded)
   }
 
   loadVideoLicences () {
-    return this.loadVideoAttributeEnum('licences', this.videoLicences)
+    return this.loadVideoAttributeEnum('licences', this.videoLicences, this.videoLicencesLoaded)
   }
 
   loadVideoLanguages () {
-    return this.loadVideoAttributeEnum('languages', this.videoLanguages)
+    return this.loadVideoAttributeEnum('languages', this.videoLanguages, this.videoLanguagesLoaded)
   }
 
   loadVideoPrivacies () {
-    return this.loadVideoAttributeEnum('privacies', this.videoPrivacies)
+    return this.loadVideoAttributeEnum('privacies', this.videoPrivacies, this.videoPrivaciesLoaded)
   }
 
   getConfig () {
@@ -66,17 +73,20 @@ export class ServerService {
 
   private loadVideoAttributeEnum (
     attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
-    hashToPopulate: { id: number, label: string }[]
+    hashToPopulate: { id: number, label: string }[],
+    notifier: ReplaySubject<boolean>
   ) {
     return this.http.get(ServerService.BASE_VIDEO_URL + attributeName)
-               .subscribe(data => {
-                 Object.keys(data)
-                       .forEach(dataKey => {
-                         hashToPopulate.push({
-                           id: parseInt(dataKey, 10),
-                           label: data[dataKey]
-                         })
-                       })
+       .subscribe(data => {
+         Object.keys(data)
+               .forEach(dataKey => {
+                 hashToPopulate.push({
+                   id: parseInt(dataKey, 10),
+                   label: data[dataKey]
+                 })
                })
+
+         notifier.next(true)
+       })
   }
 }