Client: move menu component in core module

4 files changed, 92 insertions, 3 deletions

diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index be29b88da..27e6ee1fb 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -1,17 +1,20 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
 
 import { AuthService } from './auth';
+import { MenuComponent } from './menu';
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
 @NgModule({
   imports: [
     CommonModule,
-    HttpModule
+    HttpModule,
+    RouterModule
   ],
-  declarations: [ ],
-  exports: [ ],
+  declarations: [ MenuComponent ],
+  exports: [ MenuComponent ],
   providers: [ AuthService ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/core/menu/index.ts
new file mode 100644
index 000000000..d07a1144c
--- /dev/null
+++ b/client/src/app/core/menu/index.ts
@@ -0,0 +1 @@
+export * from './menu.component';
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
new file mode 100644
index 000000000..1e9a53246
--- /dev/null
+++ b/client/src/app/core/menu/menu.component.html
@@ -0,0 +1,39 @@
+<menu class="col-md-2 col-sm-3 col-xs-3">
+  <div class="panel-block">
+    <div id="panel-user-login" class="panel-button">
+      <span *ngIf="!isLoggedIn" >
+        <span class="hidden-xs glyphicon glyphicon-log-in"></span>
+        <a [routerLink]="['/login']">Login</a>
+      </span>
+
+      <span *ngIf="isLoggedIn">
+        <span class="hidden-xs glyphicon glyphicon-log-out"></span>
+        <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
+      </span>
+    </div>
+
+    <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-user"></span>
+      <a [routerLink]="['/account']">My account</a>
+    </div>
+  </div>
+
+  <div class="panel-block">
+    <div id="panel-get-videos" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-list"></span>
+      <a [routerLink]="['/videos/list']">See videos</a>
+    </div>
+
+    <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
+      <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
+      <a [routerLink]="['/videos/add']">Upload a video</a>
+    </div>
+  </div>
+
+  <div class="panel-block" *ngIf="isUserAdmin()">
+    <div id="panel-get-videos" class="panel-button">
+      <span class="hidden-xs glyphicon glyphicon-cog"></span>
+      <a [routerLink]="['/admin']">Administration</a>
+    </div>
+  </div>
+</menu>
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts
new file mode 100644
index 000000000..f1bf6966d
--- /dev/null
+++ b/client/src/app/core/menu/menu.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from '../auth';
+import { AuthStatus } from '../../shared';
+
+@Component({
+  selector: 'my-menu',
+  templateUrl: './menu.component.html'
+})
+export class MenuComponent implements OnInit {
+  isLoggedIn: boolean;
+
+  constructor (
+    private authService: AuthService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.isLoggedIn = this.authService.isLoggedIn();
+
+    this.authService.loginChangedSource.subscribe(
+      status => {
+        if (status === AuthStatus.LoggedIn) {
+          this.isLoggedIn = true;
+          console.log('Logged in.');
+        } else if (status === AuthStatus.LoggedOut) {
+          this.isLoggedIn = false;
+          console.log('Logged out.');
+        } else {
+          console.error('Unknown auth status: ' + status);
+        }
+      }
+    );
+  }
+
+  isUserAdmin() {
+    return this.authService.isAdmin();
+  }
+
+  logout() {
+    this.authService.logout();
+    // Redirect to home page
+    this.router.navigate(['/videos/list']);
+  }
+}