api form directive

src/app/accounts/login.component.html

@@ -1,5 +1,5 @@
 <div id="login">
-    <form (ngSubmit)="onSubmit()">
+    <form #form (ngSubmit)="onSubmit()" [appApiForm]="formPromise">
         <div class="content">
             <img src="../../images/logo@2x.png" alt="bitwarden">
             <p>{{'loginOrCreateNewAccount' | i18n}}</p>
@@ -18,9 +18,9 @@
                 </div>
             </div>
             <div class="buttons">
-                <button type="submit" class="btn primary block" [disabled]="loading">
-                    <span [hidden]="loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
-                    <i class="fa fa-spinner fa-spin" [hidden]="!loading"></i>
+                <button type="submit" class="btn primary block" [disabled]="form.loading">
+                    <span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
+                    <i class="fa fa-spinner fa-spin" [hidden]="!form.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,8 +12,6 @@ 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,
@@ -21,11 +19,10 @@ import { ValidationService } from '../services/validation.service';
 export class LoginComponent {
     email: string = '';
     masterPassword: string = '';
-    loading: boolean;
+    formPromise: Promise<any>;
 
     constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
-        private toasterService: ToasterService, private i18nService: I18nService,
-        private validationService: ValidationService) { }
+        private toasterService: ToasterService, private i18nService: I18nService) { }
 
     async onSubmit() {
         if (this.email == null || this.email === '') {
@@ -44,10 +41,9 @@ export class LoginComponent {
             return;
         }
 
-        this.loading = true;
         try {
-            const response = await this.authService.logIn(this.email, this.masterPassword);
-            this.loading = false;
+            this.formPromise = this.authService.logIn(this.email, this.masterPassword);
+            const response = await this.formPromise;
             if (response.twoFactor) {
                 this.analytics.eventTrack.next({ action: 'Logged In To Two-step' });
                 this.router.navigate(['twoFactor']);
@@ -57,9 +53,6 @@ export class LoginComponent {
                 this.router.navigate(['vault']);
                 // TODO: sync on load to vault?
             }
-        } catch (e) {
-            this.loading = false;
-            this.validationService.showError(e);
-        }
+        } catch { }
     }
 }

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { ServicesModule } from './services/services.module';
 import { ToasterModule } from 'angular2-toaster';
 
 import { AddEditComponent } from './vault/add-edit.component';
+import { ApiFormDirective } from './directives/api-form.directive';
 import { AppComponent } from './app.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { AutofocusDirective } from './directives/autofocus.directive';
@@ -46,6 +47,7 @@ import { ViewComponent } from './vault/view.component';
     ],
     declarations: [
         AddEditComponent,
+        ApiFormDirective,
         AppComponent,
         AttachmentsComponent,
         AutofocusDirective,

src/app/directives/api-form.directive.ts

@@ -0,0 +1,32 @@
+import {
+    Directive,
+    ElementRef,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+import { ValidationService } from '../services/validation.service';
+
+@Directive({
+    selector: '[appApiForm]',
+})
+export class ApiFormDirective implements OnChanges {
+    @Input() appApiForm: Promise<any>;
+
+    constructor(private el: ElementRef, private validationService: ValidationService) { }
+
+    ngOnChanges(changes: any) {
+        if (this.appApiForm == null || this.appApiForm.then == null) {
+            return;
+        }
+
+        this.el.nativeElement.loading = true;
+
+        this.appApiForm.then((response: any) => {
+            this.el.nativeElement.loading = false;
+        }, (e: any) => {
+            this.el.nativeElement.loading = false;
+            this.validationService.showError(e);
+        });
+    }
+}