3 files changed, 51 insertions, 0 deletions

diff --git a/client/src/app/login/index.ts b/client/src/app/login/index.ts
new file mode 100644
index 000000000..69c16441f
--- /dev/null
+++ b/client/src/app/login/index.ts
@@ -0,0 +1 @@
+export * from './login.component';
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
new file mode 100644
index 000000000..940694515
--- /dev/null
+++ b/client/src/app/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/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
new file mode 100644
index 000000000..9d88536ca
--- /dev/null
+++ b/client/src/app/login/login.component.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
+
+import { AuthService, AuthStatus, User } from '../shared';
+
+@Component({
+  selector: 'my-login',
+  template: require('./login.component.html')
+})
+
+export class LoginComponent {
+  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}`);
+        }
+      }
+    );
+  }
+}