Follow the angular styleguide for the directories structure

10 files changed, 217 insertions, 0 deletions

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 @@
+<h3>Login</h3>
+<form role="form" (submit)="login(username.value, password.value)">
+  <div class="form-group">
+    <label for="username">Username</label>
+    <input type="text" #username class="form-control" id="username" placeholder="Username">
+  </div>
+
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input type="password" #password class="form-control" id="password" placeholder="Password">
+  </div>
+
+  <input type="submit" value="Login" class="btn btn-default">
+</form>
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
--- /dev/null
+++ b/client/app/users/login/login.component.scss
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<AuthStatus>();
+    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();
+  }
+}