diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d369879aecbb95312028d8ee041108d34e7453a0..f712169653107d5b3cea21d62043e17d18d9297f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,7 +9,7 @@ import { RegisterComponent } from './register/register.component';
 import { PasswordResetComponent } from './password-reset/password-reset.component';
 
 import { AppRoutingModule } from './app-routing.module';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {
@@ -101,7 +101,8 @@ import { AuthenticationGuard } from './authentication.guard';
     MatTableModule,
     MatTabsModule,
     MatToolbarModule,
-    MatTooltipModule
+    MatTooltipModule,
+    ReactiveFormsModule
   ],
   providers: [
     NotificationService,
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index d206569336e58f26ca692bf9ebe42104c80d9125..c5ee50f1d4c1a56e43c651915a30a044983452b0 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,11 +1,13 @@
-<form>
+<form (ngSubmit)="login(userName.value, userPassword.value)">
   <mat-form-field class="input-block">
-    <input matInput placeholder="Username" />
+    <input matInput #userName placeholder="Username" [formControl]="usernameFormControl" [errorStateMatcher]="matcher" name="username" />
+    <mat-error *ngIf="usernameFormControl.hasError('required')">Username is <strong>required</strong>.</mat-error>
   </mat-form-field>
 
   <mat-form-field class="input-block">
-    <input matInput type="password" placeholder="Password" />
+    <input matInput #userPassword type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher" name="password" />
+    <mat-error *ngIf="passwordFormControl.hasError('required')">Password is <strong>required</strong>.</mat-error>
   </mat-form-field>
 
-  <button mat-raised-button color="primary">Login</button>
+  <button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button>
 </form>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 12de138adf7093dd940ed5356c43e1a4d98dad8e..145d3f5c11f6f51d0d8c4d2c181de85801c26663 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,4 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthenticationService } from '../authentication.service';
+import { Router } from '@angular/router';
+import { NotificationService } from '../notification.service';
+import { ErrorStateMatcher } from '@angular/material';
+import { FormControl, FormGroupDirective, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
+
+export class LoginErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return (control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
 
 @Component({
   selector: 'app-login',
@@ -7,9 +19,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  usernameFormControl = new FormControl('', [Validators.required]);
+  passwordFormControl = new FormControl('', [Validators.required]);
+
+  matcher = new LoginErrorStateMatcher();
+
+  constructor(public authenticationService: AuthenticationService,
+              public router: Router,
+              public notificationService: NotificationService) {
+  }
 
   ngOnInit() {
   }
 
+  login(username: string, password: string): void {
+    username = username.trim();
+    password = password.trim();
+
+    if (username !== '' && password !== '') {
+      this.authenticationService.login(username, password).subscribe(loginSuccessful => {
+        if (loginSuccessful) {
+          this.notificationService.show('Login successful!');
+          this.router.navigate(['rooms']);
+        } else {
+          this.notificationService.show('Login failed!');
+        }
+      });
+    } else {
+      this.notificationService.show('Login failed!');
+    }
+  }
+
 }