added validation to login form

src/app/accounts/login.component.html

@@ -8,18 +8,19 @@
                     <div class="box-content-row" appBoxRow>
                         <label for="email">{{'emailAddress' | i18n}}</label>
                         <input id="email" type="text" name="Email" [(ngModel)]="email" required
-                               [appAutofocus]="!email || email === ''">
+                               [appAutofocus]="email === ''">
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
-                               required [appAutofocus]="email && email !== ''">
+                               required [appAutofocus]="email !== ''">
                     </div>
                 </div>
             </div>
             <div class="buttons">
-                <button type="submit" class="btn primary block">
+                <button type="submit" class="btn primary block" [disabled]="loading">
-                    <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
+                    <span [hidden]="loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
+                    <i class="fa fa-spinner fa-spin" [hidden]="!loading"></i>
                 </button>
                 <button type="button" class="btn block">
                     <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}

src/app/accounts/login.component.ts

@@ -12,6 +12,8 @@ import { ToasterService } from 'angular2-toaster';
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 
+import { ValidationService } from '../services/validation.service';
+
 @Component({
     selector: 'app-login',
     template: template,
@@ -19,28 +21,33 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
 export class LoginComponent {
     email: string = '';
     masterPassword: string = '';
+    loading: boolean;
 
     constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
-        private toasterService: ToasterService, private i18nService: I18nService) { }
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private validationService: ValidationService) { }
 
     async onSubmit() {
         if (this.email == null || this.email === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorsOccurred'),
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('emailRequired'));
             return;
         }
         if (this.email.indexOf('@') === -1) {
-            this.toasterService.popAsync('error', this.i18nService.t('errorsOccurred'),
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('invalidEmail'));
             return;
         }
         if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorsOccurred'),
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('masterPassRequired'));
             return;
         }
 
+        this.loading = true;
+        try {
             const response = await this.authService.logIn(this.email, this.masterPassword);
+            this.loading = false;
             if (response.twoFactor) {
                 this.analytics.eventTrack.next({ action: 'Logged In To Two-step' });
                 this.router.navigate(['twoFactor']);
@@ -50,5 +57,9 @@ export class LoginComponent {
                 this.router.navigate(['vault']);
                 // TODO: sync on load to vault?
             }
+        } catch (e) {
+            this.loading = false;
+            this.validationService.showError(e);
+        }
     }
 }

src/app/services/services.module.ts

@@ -5,12 +5,16 @@ import {
     NgModule,
 } from '@angular/core';
 
+import { ToasterModule } from 'angular2-toaster';
+
 import { DesktopMessagingService } from '../../services/desktopMessaging.service';
 import { DesktopPlatformUtilsService } from '../../services/desktopPlatformUtils.service';
 import { DesktopStorageService } from '../../services/desktopStorage.service';
 import { DesktopSecureStorageService } from '../../services/desktopSecureStorage.service';
 import { I18nService } from '../../services/i18n.service';
 
+import { ValidationService } from './validation.service';
+
 import { Analytics } from 'jslib/misc/analytics';
 
 import {
@@ -108,9 +112,12 @@ function initFactory(i18n: I18nService, platformUtilsService: DesktopPlatformUti
 }
 
 @NgModule({
-    imports: [],
+    imports: [
+        ToasterModule,
+    ],
     declarations: [],
     providers: [
+        ValidationService,
         { provide: AuthServiceAbstraction, useValue: authService },
         { provide: CipherServiceAbstraction, useValue: cipherService },
         { provide: FolderServiceAbstraction, useValue: folderService },
@@ -123,6 +130,7 @@ function initFactory(i18n: I18nService, platformUtilsService: DesktopPlatformUti
         { provide: CryptoServiceAbstraction, useValue: cryptoService },
         { provide: PlatformUtilsServiceAbstraction, useValue: platformUtilsService },
         { provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
+        { provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/app/services/validation.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Injectable()
+export class ValidationService {
+    constructor(private toasterService: ToasterService, private i18nService: I18nService) { }
+
+    showError(data: any): string[] {
+        const defaultErrorMessage = this.i18nService.t('unexpectedError');
+        const errors: string[] = [];
+
+        if (data == null || typeof data !== 'object') {
+            errors.push(defaultErrorMessage);
+        } else if (data.validationErrors == null) {
+            errors.push(data.message ? data.message : defaultErrorMessage);
+        } else {
+            for (const key in data.validationErrors) {
+                if (!data.validationErrors.hasOwnProperty(key)) {
+                    continue;
+                }
+
+                data.validationErrors[key].forEach((item: string) => {
+                    errors.push(item);
+                });
+            }
+        }
+
+        if (errors.length > 0) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), errors[0]);
+        }
+
+        return errors;
+    }
+}

src/locales/en/messages.json

@@ -439,5 +439,8 @@
   },
   "masterPassSent": {
     "message": "We've sent you an email with your master password hint."
+  },
+  "unexpectedError": {
+    "message": "An unexpected error has occurred."
   }
 }

src/scss/buttons.scss

@@ -8,18 +8,23 @@
     font-size: $font-size-base;
     color: $button-color;
 
-    &:hover, &:focus {
+    &:hover:not([disabled]), &:focus:not([disabled]) {
         cursor: pointer;
         background-color: darken($button-backgound-color, 1.5%);
         border-color: darken($button-border-color, 17%);
     }
 
-    &:focus {
+    &:focus:not([disabled]) {
         background-color: darken($button-backgound-color, 6%);
         border-color: darken($button-border-color, 25%);
         outline: 0;
     }
 
+    &[disabled] {
+        background-color: darken($button-backgound-color, 1.5%);
+        cursor: default;
+    }
+
     &.primary {
         color: $button-color-primary;
     }

src/scss/misc.scss

@@ -8,6 +8,10 @@
     color: $text-muted !important;
 }
 
+[hidden] {
+    display: none !important;
+}
+
 .monospaced {
     font-family: $font-family-monospace;
 }