aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-03-22 15:51:54 +0100
committerChocobozzz <florian.bigard@gmail.com>2016-03-22 15:51:54 +0100
commitb1794c53ac97d77a16c10ed915336f08cff1e5e3 (patch)
tree9dd64ee8316e1e60c434a7d0a6dcbace49eb4d6b /client
parent13ce1d01c953f0c4fd3b1d714c016f927dc16f66 (diff)
downloadPeerTube-b1794c53ac97d77a16c10ed915336f08cff1e5e3.tar.gz
PeerTube-b1794c53ac97d77a16c10ed915336f08cff1e5e3.tar.zst
PeerTube-b1794c53ac97d77a16c10ed915336f08cff1e5e3.zip
Login in Angular : first draft
Diffstat (limited to 'client')
-rw-r--r--client/angular/app/app.component.html10
-rw-r--r--client/angular/app/app.component.ts35
-rw-r--r--client/angular/users/components/login/login.component.html14
-rw-r--r--client/angular/users/components/login/login.component.scss0
-rw-r--r--client/angular/users/components/login/login.component.ts32
-rw-r--r--client/angular/users/models/authStatus.ts4
-rw-r--r--client/angular/users/models/token.ts17
-rw-r--r--client/angular/users/services/auth.service.ts54
8 files changed, 163 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 @@
18 18
19 <menu class="col-md-2"> 19 <menu class="col-md-2">
20 <div class="panel_block"> 20 <div class="panel_block">
21 <div id="panel_user_login" class="panel_button">
22 <span class="glyphicon glyphicon-user"></span>
23 <a *ngIf="!isLoggedIn" [routerLink]="['UserLogin']">Login</a>
24 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
25 </div>
26 </div>
27
28 <div class="panel_block">
21 <div id="panel_get_videos" class="panel_button"> 29 <div id="panel_get_videos" class="panel_button">
22 <span class="glyphicon glyphicon-list"></span> 30 <span class="glyphicon glyphicon-list"></span>
23 <a [routerLink]="['VideosList']">Get videos</a> 31 <a [routerLink]="['VideosList']">Get videos</a>
@@ -31,7 +39,7 @@
31 39
32 <div class="panel_block"> 40 <div class="panel_block">
33 <div id="panel_make_friends" class="panel_button"> 41 <div id="panel_make_friends" class="panel_button">
34 <span class="glyphicon glyphicon-user"></span> 42 <span class="glyphicon glyphicon-cloud"></span>
35 <a (click)='makeFriends()'>Make friends</a> 43 <a (click)='makeFriends()'>Make friends</a>
36 </div> 44 </div>
37 45
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
7import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component'; 7import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
8import { VideosService } from '../videos/services/videos.service'; 8import { VideosService } from '../videos/services/videos.service';
9import { FriendsService } from '../friends/services/friends.service'; 9import { FriendsService } from '../friends/services/friends.service';
10import { UserLoginComponent } from '../users/components/login/login.component';
11import { AuthService } from '../users/services/auth.service';
12import { AuthStatus } from '../users/models/authStatus';
10 13
11@RouteConfig([ 14@RouteConfig([
12 { 15 {
16 path: '/users/login',
17 name: 'UserLogin',
18 component: UserLoginComponent
19 },
20 {
13 path: '/videos/list', 21 path: '/videos/list',
14 name: 'VideosList', 22 name: 'VideosList',
15 component: VideosListComponent, 23 component: VideosListComponent,
@@ -32,11 +40,30 @@ import { FriendsService } from '../friends/services/friends.service';
32 templateUrl: 'app/angular/app/app.component.html', 40 templateUrl: 'app/angular/app/app.component.html',
33 styleUrls: [ 'app/angular/app/app.component.css' ], 41 styleUrls: [ 'app/angular/app/app.component.css' ],
34 directives: [ ROUTER_DIRECTIVES ], 42 directives: [ ROUTER_DIRECTIVES ],
35 providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, ElementRef, VideosService, FriendsService ] 43 providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS,
44 ElementRef, VideosService, FriendsService,
45 AuthService
46 ]
36}) 47})
37 48
38export class AppComponent { 49export class AppComponent {
39 constructor(private _friendsService: FriendsService, private _router: Router) {} 50 isLoggedIn: boolean;
51
52 constructor(private _friendsService: FriendsService,
53 private _authService: AuthService,
54 private _router: Router
55 ) {
56 if (localStorage.getItem('access_token')) this.isLoggedIn = true;
57 else this.isLoggedIn = false;
58
59 this._authService.loginChanged$.subscribe(
60 status => {
61 if (status === AuthStatus.LoggedIn) {
62 this.isLoggedIn = true;
63 }
64 }
65 );
66 }
40 67
41 doSearch(search: string) { 68 doSearch(search: string) {
42 if (search !== '') { 69 if (search !== '') {
@@ -46,6 +73,10 @@ export class AppComponent {
46 } 73 }
47 } 74 }
48 75
76 logout() {
77 // this._authService.logout();
78 }
79
49 makeFriends() { 80 makeFriends() {
50 this._friendsService.makeFriends().subscribe( 81 this._friendsService.makeFriends().subscribe(
51 status => { 82 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 @@
1<h3>Login</h3>
2<form role="form" (submit)="login(username.value, password.value)">
3 <div class="form-group">
4 <label for="username">Username</label>
5 <input type="text" #username class="form-control" id="username" placeholder="Username">
6 </div>
7
8 <div class="form-group">
9 <label for="password">Password</label>
10 <input type="password" #password class="form-control" id="password" placeholder="Password">
11 </div>
12
13 <input type="submit" value="Login" class="btn btn-default">
14</form>
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
--- /dev/null
+++ b/client/angular/users/components/login/login.component.scss
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 @@
1import { Component } from 'angular2/core';
2import { Router } from 'angular2/router';
3
4import { AuthService } from '../../services/auth.service';
5import { AuthStatus } from '../../models/authStatus';
6import { Token } from '../../models/token';
7
8@Component({
9 selector: 'my-user-login',
10 styleUrls: [ 'app/angular/users/components/login/login.component.css' ],
11 templateUrl: 'app/angular/users/components/login/login.component.html'
12})
13
14export class UserLoginComponent {
15 constructor(private _authService: AuthService, private _router: Router) {}
16
17 login(username: string, password: string) {
18 this._authService.login(username, password).subscribe(
19 result => {
20 if (result.error) return alert(result.error_description);
21
22 let token = new Token(result);
23 token.save();
24
25 this._authService.setStatus(AuthStatus.LoggedIn);
26
27 this._router.navigate(['VideosList']);
28 },
29 error => alert(error)
30 );
31 }
32}
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 @@
1export enum AuthStatus {
2 LoggedIn,
3 LoggedOut
4}
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 @@
1export class Token {
2 access_token: string;
3 refresh_token: string;
4 token_type: string;
5
6 constructor (hash) {
7 this.access_token = hash.access_token;
8 this.refresh_token = hash.refresh_token;
9 this.token_type = hash.token_type;
10 }
11
12 save() {
13 localStorage.setItem('access_token', this.access_token);
14 localStorage.setItem('refresh_token', this.refresh_token);
15 localStorage.setItem('token_type', this.token_type);
16 }
17}
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 @@
1import { Injectable } from 'angular2/core';
2import { Http, Response, Headers, URLSearchParams } from 'angular2/http';
3import { Observable, Subject } from 'rxjs/Rx';
4
5import { Token } from '../models/token';
6import { AuthStatus } from '../models/authStatus';
7
8@Injectable()
9export class AuthService {
10 private _loginChanged = new Subject<AuthStatus>();
11
12 private _baseLoginUrl = '/api/v1/users/token';
13 private _clientId = '56f055587305d40b21904240';
14 private _clientSecret = 'megustalabanana';
15
16 loginChanged$ = this._loginChanged.asObservable();
17
18 constructor (private http: Http) {}
19
20 login(username: string, password: string) {
21 let body = new URLSearchParams();
22 body.set('client_id', this._clientId);
23 body.set('client_secret', this._clientSecret);
24 body.set('response_type', 'code');
25 body.set('grant_type', 'password');
26 body.set('scope', 'upload');
27 body.set('username', username);
28 body.set('password', password);
29
30 let headers = new Headers();
31 headers.append('Content-Type', 'application/x-www-form-urlencoded');
32
33 let options = {
34 headers: headers
35 }
36
37 return this.http.post(this._baseLoginUrl, body.toString(), options)
38 .map(res => res.json())
39 .catch(this.handleError);
40 }
41
42 logout() {
43 // TODO make HTTP request
44 }
45
46 setStatus(status: AuthStatus) {
47 this._loginChanged.next(status);
48 }
49
50 private handleError (error: Response) {
51 console.error(error);
52 return Observable.throw(error.json().error || 'Server error');
53 }
54}