src/app/modules/forms/login/login.html

@@ -37,6 +37,11 @@
       i18n="@@MINDS__LOGIN__EXCEPTION__INVALID_TOKEN">
       Invalid token
     </ng-container>
+    <ng-container
+      *ngIf="errorMessage == 'LoginException::EmailAddress'"
+      i18n="@@MINDS__LOGIN__EXCEPTION__ENTERED_EMAIL_ADDRESS_NOT_USERNAME">
+      Please enter a username instead of an email address.
+    </ng-container>
     <ng-container
       *ngIf="errorMessage == 'LoginException::Unknown'"
       i18n="@@MINDS__LOGIN__EXCEPTION__SORRY_THERE_WAS_AN_ERROR_PLEASE_TRY_AGAIN">

src/app/modules/forms/login/login.spec.ts

@@ -28,8 +28,8 @@ describe('LoginForm', () => {
   let twoFactorLoginButton: DebugElement;
   let session: Session;
 
-  function login(response) {
-    username.nativeElement.value = 'username';
+  function login(response, _username = 'username') {
+    username.nativeElement.value = _username;
     username.nativeElement.dispatchEvent(new Event('input'));
     password.nativeElement.value = 'password';
     password.nativeElement.dispatchEvent(new Event('input'));
@@ -229,6 +229,7 @@ describe('LoginForm', () => {
     expect(loginForm.nativeElement.hidden).toBeTruthy();
     expect(twoFactorForm.nativeElement.hidden).toBeFalsy();
   }));
+
   it('should spawn error message when incorrect code is written', fakeAsync(() => {
     login({ 'status': 'error', 'code': '403', 'message': 'imaprettymessage' });
 
@@ -237,6 +238,12 @@ describe('LoginForm', () => {
     expect(errorMessage.nativeElement.hidden).toBeFalsy();
   }));
 
+  it('should spawn error message when an email is entered as a username', fakeAsync(() => {
+    username.nativeElement.value = 'test@minds.com';
+    login({ 'status': 'error'}, 'test@minds.com');
+    expect(errorMessage.nativeElement.hidden).toBeFalsy();
+  }));
+
   it('should login successfully', fakeAsync(() => {
     login({ 'status': 'error', 'code': '403', 'message': 'imaprettymessage' });
 

src/app/modules/forms/login/login.ts

@@ -4,7 +4,6 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Client } from '../../../services/api';
 import { Session } from '../../../services/session';
 
-
 @Component({
   moduleId: module.id,
   selector: 'minds-form-login',
@@ -13,7 +12,6 @@ import { Session } from '../../../services/session';
 })
 
 export class LoginForm {
-
   errorMessage: string = '';
   twofactorToken: string = '';
   hideLogin: boolean = false;
@@ -25,6 +23,9 @@ export class LoginForm {
 
   done: EventEmitter<any> = new EventEmitter();
   doneRegistered: EventEmitter<any> = new EventEmitter();
+  
+  //Taken from advice in https://stackoverflow.com/a/1373724
+  private emailRegex: RegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
 
   constructor(public session: Session, public client: Client, fb: FormBuilder, private zone: NgZone) {
 
@@ -39,12 +40,17 @@ export class LoginForm {
     if (this.inProgress)
       return;
 
+    let username = this.form.value.username.trim();
+    if (this.emailRegex.test(username)) {
+      this.errorMessage = 'LoginException::EmailAddress';
+      return;
+    }
     //re-enable cookies
     document.cookie = 'disabled_cookies=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
 
     this.errorMessage = '';
     this.inProgress = true;
-    this.client.post('api/v1/authenticate', { username: this.form.value.username.trim(), password: this.form.value.password })
+    this.client.post('api/v1/authenticate', { username: username, password: this.form.value.password })
       .then((data: any) => {
         // TODO: [emi/sprint/bison] Find a way to reset controls. Old implementation throws Exception;
         this.inProgress = false;