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,8 +7,16 @@ 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',
@@ -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 => {
diff --git a/client/angular/users/components/login/login.component.html b/client/angular/users/components/login/login.component.html
new file mode 100644
index 000000000..940694515
--- /dev/null
+++ b/client/angular/users/components/login/login.component.html
@@ -0,0 +1,14 @@
+
Login
+
diff --git a/client/angular/users/components/login/login.component.scss b/client/angular/users/components/login/login.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/angular/users/components/login/login.component.ts b/client/angular/users/components/login/login.component.ts
new file mode 100644
index 000000000..0881a3a15
--- /dev/null
+++ b/client/angular/users/components/login/login.component.ts
@@ -0,0 +1,32 @@
+import { Component } from 'angular2/core';
+import { Router } from 'angular2/router';
+
+import { AuthService } from '../../services/auth.service';
+import { AuthStatus } from '../../models/authStatus';
+import { Token } from '../../models/token';
+
+@Component({
+ selector: 'my-user-login',
+ styleUrls: [ 'app/angular/users/components/login/login.component.css' ],
+ templateUrl: 'app/angular/users/components/login/login.component.html'
+})
+
+export class UserLoginComponent {
+ constructor(private _authService: AuthService, private _router: Router) {}
+
+ login(username: string, password: string) {
+ this._authService.login(username, password).subscribe(
+ result => {
+ if (result.error) return alert(result.error_description);
+
+ let token = new Token(result);
+ token.save();
+
+ this._authService.setStatus(AuthStatus.LoggedIn);
+
+ this._router.navigate(['VideosList']);
+ },
+ error => alert(error)
+ );
+ }
+}
diff --git a/client/angular/users/models/authStatus.ts b/client/angular/users/models/authStatus.ts
new file mode 100644
index 000000000..f646bd4cf
--- /dev/null
+++ b/client/angular/users/models/authStatus.ts
@@ -0,0 +1,4 @@
+export enum AuthStatus {
+ LoggedIn,
+ LoggedOut
+}
diff --git a/client/angular/users/models/token.ts b/client/angular/users/models/token.ts
new file mode 100644
index 000000000..688dfdc80
--- /dev/null
+++ b/client/angular/users/models/token.ts
@@ -0,0 +1,17 @@
+export class Token {
+ access_token: string;
+ refresh_token: string;
+ token_type: string;
+
+ constructor (hash) {
+ this.access_token = hash.access_token;
+ this.refresh_token = hash.refresh_token;
+ this.token_type = hash.token_type;
+ }
+
+ save() {
+ localStorage.setItem('access_token', this.access_token);
+ localStorage.setItem('refresh_token', this.refresh_token);
+ localStorage.setItem('token_type', this.token_type);
+ }
+}
diff --git a/client/angular/users/services/auth.service.ts b/client/angular/users/services/auth.service.ts
new file mode 100644
index 000000000..a512c3d9c
--- /dev/null
+++ b/client/angular/users/services/auth.service.ts
@@ -0,0 +1,54 @@
+import { Injectable } from 'angular2/core';
+import { Http, Response, Headers, URLSearchParams } from 'angular2/http';
+import { Observable, Subject } from 'rxjs/Rx';
+
+import { Token } from '../models/token';
+import { AuthStatus } from '../models/authStatus';
+
+@Injectable()
+export class AuthService {
+ private _loginChanged = new Subject
();
+
+ private _baseLoginUrl = '/api/v1/users/token';
+ private _clientId = '56f055587305d40b21904240';
+ private _clientSecret = 'megustalabanana';
+
+ loginChanged$ = this._loginChanged.asObservable();
+
+ constructor (private http: Http) {}
+
+ login(username: string, password: string) {
+ let body = new URLSearchParams();
+ body.set('client_id', this._clientId);
+ body.set('client_secret', this._clientSecret);
+ body.set('response_type', 'code');
+ body.set('grant_type', 'password');
+ body.set('scope', 'upload');
+ body.set('username', username);
+ body.set('password', password);
+
+ let headers = new Headers();
+ headers.append('Content-Type', 'application/x-www-form-urlencoded');
+
+ let options = {
+ headers: headers
+ }
+
+ return this.http.post(this._baseLoginUrl, body.toString(), options)
+ .map(res => res.json())
+ .catch(this.handleError);
+ }
+
+ logout() {
+ // TODO make HTTP request
+ }
+
+ setStatus(status: AuthStatus) {
+ this._loginChanged.next(status);
+ }
+
+ private handleError (error: Response) {
+ console.error(error);
+ return Observable.throw(error.json().error || 'Server error');
+ }
+}