4 files changed, 49 insertions, 0 deletions

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}`);
+        }
+      }
+    );
+  }
+}