From b1794c53ac97d77a16c10ed915336f08cff1e5e3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 22 Mar 2016 15:51:54 +0100 Subject: [PATCH] Login in Angular : first draft --- client/angular/app/app.component.html | 10 +++- client/angular/app/app.component.ts | 35 +++++++++++- .../components/login/login.component.html | 14 +++++ .../components/login/login.component.scss | 0 .../users/components/login/login.component.ts | 32 +++++++++++ client/angular/users/models/authStatus.ts | 4 ++ client/angular/users/models/token.ts | 17 ++++++ client/angular/users/services/auth.service.ts | 54 +++++++++++++++++++ 8 files changed, 163 insertions(+), 3 deletions(-) create mode 100644 client/angular/users/components/login/login.component.html create mode 100644 client/angular/users/components/login/login.component.scss create mode 100644 client/angular/users/components/login/login.component.ts create mode 100644 client/angular/users/models/authStatus.ts create mode 100644 client/angular/users/models/token.ts create mode 100644 client/angular/users/services/auth.service.ts 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 @@ -17,6 +17,14 @@
+
+
+ + Login + Logout +
+
+
@@ -31,7 +39,7 @@
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'); + } +} -- 2.41.0