From 41a2aee38cf812510010da09de9bae53590ec119 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 27 May 2016 16:23:10 +0200 Subject: Follow the angular styleguide for the directories structure --- client/app/users/index.ts | 2 + client/app/users/login/index.ts | 1 + client/app/users/login/login.component.html | 14 ++++ client/app/users/login/login.component.scss | 0 client/app/users/login/login.component.ts | 34 +++++++++ client/app/users/shared/auth-status.model.ts | 4 + client/app/users/shared/auth.service.ts | 107 +++++++++++++++++++++++++++ client/app/users/shared/index.ts | 4 + client/app/users/shared/token.model.ts | 31 ++++++++ client/app/users/shared/user.model.ts | 20 +++++ 10 files changed, 217 insertions(+) create mode 100644 client/app/users/index.ts create mode 100644 client/app/users/login/index.ts create mode 100644 client/app/users/login/login.component.html create mode 100644 client/app/users/login/login.component.scss create mode 100644 client/app/users/login/login.component.ts create mode 100644 client/app/users/shared/auth-status.model.ts create mode 100644 client/app/users/shared/auth.service.ts create mode 100644 client/app/users/shared/index.ts create mode 100644 client/app/users/shared/token.model.ts create mode 100644 client/app/users/shared/user.model.ts (limited to 'client/app/users') diff --git a/client/app/users/index.ts b/client/app/users/index.ts new file mode 100644 index 000000000..4f08b8bc7 --- /dev/null +++ b/client/app/users/index.ts @@ -0,0 +1,2 @@ +export * from './login/index'; +export * from './shared/index'; diff --git a/client/app/users/login/index.ts b/client/app/users/login/index.ts new file mode 100644 index 000000000..69c16441f --- /dev/null +++ b/client/app/users/login/index.ts @@ -0,0 +1 @@ +export * from './login.component'; diff --git a/client/app/users/login/login.component.html b/client/app/users/login/login.component.html new file mode 100644 index 000000000..940694515 --- /dev/null +++ b/client/app/users/login/login.component.html @@ -0,0 +1,14 @@ +

Login

+
+
+ + +
+ +
+ + +
+ + +
diff --git a/client/app/users/login/login.component.scss b/client/app/users/login/login.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/client/app/users/login/login.component.ts b/client/app/users/login/login.component.ts new file mode 100644 index 000000000..33590ad4c --- /dev/null +++ b/client/app/users/login/login.component.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router-deprecated'; + +import { AuthService, AuthStatus, User } from '../shared/index'; + +@Component({ + selector: 'my-user-login', + styleUrls: [ 'client/app/users/login/login.component.css' ], + templateUrl: 'client/app/users/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 => { + const user = new User(username, result); + user.save(); + + this._authService.setStatus(AuthStatus.LoggedIn); + + this._router.navigate(['VideosList']); + }, + error => { + if (error.error === 'invalid_grant') { + alert('Credentials are invalid.'); + } else { + alert(`${error.error}: ${error.error_description}`); + } + } + ); + } +} diff --git a/client/app/users/shared/auth-status.model.ts b/client/app/users/shared/auth-status.model.ts new file mode 100644 index 000000000..f646bd4cf --- /dev/null +++ b/client/app/users/shared/auth-status.model.ts @@ -0,0 +1,4 @@ +export enum AuthStatus { + LoggedIn, + LoggedOut +} diff --git a/client/app/users/shared/auth.service.ts b/client/app/users/shared/auth.service.ts new file mode 100644 index 000000000..1cb042db5 --- /dev/null +++ b/client/app/users/shared/auth.service.ts @@ -0,0 +1,107 @@ +import { Injectable } from '@angular/core'; +import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http'; +import { Observable, Subject } from 'rxjs/Rx'; + +import { AuthStatus } from './auth-status.model'; +import { User } from './user.model'; + +@Injectable() +export class AuthService { + loginChanged$; + + private _loginChanged; + private _baseLoginUrl = '/api/v1/users/token'; + private _baseClientUrl = '/api/v1/users/client'; + private _clientId = ''; + private _clientSecret = ''; + + constructor (private http: Http) { + this._loginChanged = new Subject(); + this.loginChanged$ = this._loginChanged.asObservable(); + + // Fetch the client_id/client_secret + // FIXME: save in local storage? + this.http.get(this._baseClientUrl) + .map(res => res.json()) + .catch(this.handleError) + .subscribe( + result => { + this._clientId = result.client_id; + this._clientSecret = result.client_secret; + console.log('Client credentials loaded.'); + }, + error => { + alert(error); + } + ); + } + + 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 + } + + getRequestHeader(): Headers { + return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` }); + } + + getAuthRequestOptions(): RequestOptions { + return new RequestOptions({ headers: this.getRequestHeader() }); + } + + getToken(): string { + return localStorage.getItem('access_token'); + } + + getTokenType(): string { + return localStorage.getItem('token_type'); + } + + getUser(): User { + if (this.isLoggedIn() === false) { + return null; + } + + const user = User.load(); + + return user; + } + + isLoggedIn(): boolean { + if (this.getToken()) { + return true; + } else { + return false; + } + } + + setStatus(status: AuthStatus) { + this._loginChanged.next(status); + } + + private handleError (error: Response) { + console.error(error); + return Observable.throw(error.json() || { error: 'Server error' }); + } +} diff --git a/client/app/users/shared/index.ts b/client/app/users/shared/index.ts new file mode 100644 index 000000000..c6816b3c6 --- /dev/null +++ b/client/app/users/shared/index.ts @@ -0,0 +1,4 @@ +export * from './auth-status.model'; +export * from './auth.service'; +export * from './token.model'; +export * from './user.model'; diff --git a/client/app/users/shared/token.model.ts b/client/app/users/shared/token.model.ts new file mode 100644 index 000000000..b7872e74a --- /dev/null +++ b/client/app/users/shared/token.model.ts @@ -0,0 +1,31 @@ +export class Token { + access_token: string; + refresh_token: string; + token_type: string; + + static load(): Token { + return new Token({ + access_token: localStorage.getItem('access_token'), + refresh_token: localStorage.getItem('refresh_token'), + token_type: localStorage.getItem('token_type') + }); + } + + constructor (hash?: any) { + if (hash) { + this.access_token = hash.access_token; + this.refresh_token = hash.refresh_token; + if (hash.token_type === 'bearer') { + this.token_type = 'Bearer'; + } else { + this.token_type = hash.token_type; + } + } + } + + save():void { + 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/app/users/shared/user.model.ts b/client/app/users/shared/user.model.ts new file mode 100644 index 000000000..73fd4ddc0 --- /dev/null +++ b/client/app/users/shared/user.model.ts @@ -0,0 +1,20 @@ +import { Token } from './token.model'; + +export class User { + username: string; + token: Token; + + static load(): User { + return new User(localStorage.getItem('username'), Token.load()); + } + + constructor (username: string, hash_token: any) { + this.username = username; + this.token = new Token(hash_token); + } + + save(): void { + localStorage.setItem('username', this.username); + this.token.save(); + } +} -- cgit v1.2.3