Login in Angular : first draft

2 files changed, 42 insertions, 3 deletions

diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html
index 25911731e..647697a0a 100644
--- a/client/angular/app/app.component.html
+++ b/client/angular/app/app.component.html
@@ -18,6 +18,14 @@
 
     <menu class="col-md-2">
       <div class="panel_block">
+        <div id="panel_user_login" class="panel_button">
+          <span class="glyphicon glyphicon-user"></span>
+          <a *ngIf="!isLoggedIn" [routerLink]="['UserLogin']">Login</a>
+          <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
+        </div>
+      </div>
+
+      <div class="panel_block">
         <div id="panel_get_videos" class="panel_button">
           <span class="glyphicon glyphicon-list"></span>
           <a [routerLink]="['VideosList']">Get videos</a>
@@ -31,7 +39,7 @@
 
       <div class="panel_block">
         <div id="panel_make_friends" class="panel_button">
-          <span class="glyphicon glyphicon-user"></span>
+          <span class="glyphicon glyphicon-cloud"></span>
           <a (click)='makeFriends()'>Make friends</a>
         </div>
 
diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
index cb961a3c8..1648b8870 100644
--- a/client/angular/app/app.component.ts
+++ b/client/angular/app/app.component.ts
@@ -7,9 +7,17 @@ import { VideosListComponent } from '../videos/components/list/videos-list.compo
 import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
 import { VideosService } from '../videos/services/videos.service';
 import { FriendsService } from '../friends/services/friends.service';
+import { UserLoginComponent } from '../users/components/login/login.component';
+import { AuthService } from '../users/services/auth.service';
+import { AuthStatus } from '../users/models/authStatus';
 
 @RouteConfig([
   {
+    path: '/users/login',
+    name: 'UserLogin',
+    component: UserLoginComponent
+  },
+  {
     path: '/videos/list',
     name: 'VideosList',
     component: VideosListComponent,
@@ -32,11 +40,30 @@ import { FriendsService } from '../friends/services/friends.service';
     templateUrl: 'app/angular/app/app.component.html',
     styleUrls: [ 'app/angular/app/app.component.css' ],
     directives: [ ROUTER_DIRECTIVES ],
-    providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, ElementRef, VideosService, FriendsService ]
+    providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS,
+                 ElementRef, VideosService, FriendsService,
+                 AuthService
+               ]
 })
 
 export class AppComponent {
-  constructor(private _friendsService: FriendsService, private _router: Router) {}
+  isLoggedIn: boolean;
+
+  constructor(private _friendsService: FriendsService,
+              private _authService: AuthService,
+              private _router: Router
+  ) {
+    if (localStorage.getItem('access_token')) this.isLoggedIn = true;
+    else this.isLoggedIn = false;
+
+    this._authService.loginChanged$.subscribe(
+      status => {
+        if (status === AuthStatus.LoggedIn) {
+          this.isLoggedIn = true;
+        }
+      }
+    );
+  }
 
   doSearch(search: string) {
     if (search !== '') {
@@ -46,6 +73,10 @@ export class AppComponent {
     }
   }
 
+  logout() {
+    // this._authService.logout();
+  }
+
   makeFriends() {
     this._friendsService.makeFriends().subscribe(
       status => {