fix(forms): Add required field validation to login and forgot password forms. (#40)

Fixes #24.

Author: mraible

src/authport/authport.component.ts

@@ -16,11 +16,11 @@ import { Account } from '../shared/account';
           <div class="panel-heading">
             <h4>
               <ul class="nav nav-pills">
-                <li role="presentation" [ngClass]="{active:loginService.login || loginService.forgot}" id="login" (click)="showLogin()">
-                  <a>Sign In</a>
+                <li role="presentation" [ngClass]="{active:loginService.login || loginService.forgot}" id="login">
+                  <a href="" (click)="showLogin(); false">Sign In</a>
                 </li>
-                <li role="presentation" [ngClass]="{active:loginService.register}" (click)="showRegister()" id="register" class="pull-right">
-                  <a>Register</a>
+                <li role="presentation" [ngClass]="{active:loginService.register}" id="register" class="pull-right">
+                  <a href="" (click)="showRegister(); false">Register</a>
                 </li>
               </ul>
             </h4>

src/forgot-password/forgot-password.component.ts

@@ -15,12 +15,12 @@ import { Stormpath, ForgotPasswordFormModel, StormpathErrorResponse } from '../s
   </div>
   <div class="row">
     <div class="col-xs-12">
-      <form class="form-horizontal" *ngIf="!sent" (ngSubmit)="onSubmit()">
+      <form class="form-horizontal" *ngIf="!sent" #form="ngForm" (ngSubmit)="onSubmit(form.value)">
         <div class="form-group">
           <label for="spEmail" class="col-sm-3 control-label">Email</label>
           <div class="col-sm-9">
             <input class="form-control" name="email" type="email" id="spEmail" [(ngModel)]="forgotPasswordFormModel.email"
-                   placeholder="Your Email Address" [disabled]="posting">
+                   placeholder="Your Email Address" [disabled]="posting" required>
           </div>
         </div>
         <div class="form-group">
@@ -70,7 +70,7 @@ export class ForgotPasswordComponent implements OnInit {
         (error: StormpathErrorResponse) => this.error = error.message);
   }
 
-  onSubmit(): void {
+  onSubmit(form: any): void {
     this.send();
   }
 }

src/login/login.component.ts

@@ -5,33 +5,32 @@ import { Account } from '../shared/account';
 import {
   Stormpath, LoginFormModel, LoginService, StormpathErrorResponse
 } from '../stormpath/stormpath.service';
-import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'login-form',
   template: `<template #defaultTemplate>
-<form class="form-horizontal">
+<form class="form-horizontal" #form="ngForm" (ngSubmit)="login(form.value)">
   <div class="form-group">
     <label for="loginField" class="col-sm-3 control-label">Email</label>
     <div class="col-sm-9">
-      <input class="form-control" name="login" id="loginField" type="text" [(ngModel)]="loginFormModel.login">
+      <input class="form-control" name="login" id="loginField" type="text" required [(ngModel)]="loginFormModel.login">
     </div>
   </div>
   <div class="form-group">
     <label for="passwordField" class="col-sm-3 control-label">Password</label>
     <div class="col-sm-9">
-      <input class="form-control" name="password" id="passwordField" type="password" [(ngModel)]="loginFormModel.password">
+      <input class="form-control" name="password" id="passwordField" type="password" required [(ngModel)]="loginFormModel.password">
     </div>
   </div>
 
   <div class="form-group">
     <div class="col-xs-10 col-xs-offset-3 text-left">
-      <a href="#" (click)="forgot()">&nbsp;Forgot Password?</a>
+      <a href="#" (click)="forgot(); false">&nbsp;Forgot Password?</a>
     </div>
   </div>
 
   <div *ngIf="error" class="alert alert-danger">{{error}}</div>
-  <button (click)="login()" id="loginBtn" type="submit" class="btn btn-primary pull-right">Login</button>
+  <button id="loginBtn" type="submit" class="btn btn-primary pull-right">Login</button>
 </form>
 </template>
 <template
@@ -68,7 +67,7 @@ export class LoginComponent implements OnInit {
     };
   }
 
-  login(): void {
+  login(form: any): void {
     this.error = null;
     this.stormpath.login(this.loginFormModel)
       .subscribe(null, (error: StormpathErrorResponse) => {

test/forgot-password/forgot-password.component.spec.ts

@@ -15,6 +15,6 @@ describe('ForgotPasswordComponent', () => {
     let html: string = fixture.nativeElement.innerHTML.trim();
 
     expect(html).toMatch(/<label class="(.*)control-label" for="spEmail">Email<\/label>/);
-    expect(html).toMatch(/<input class="form-control(.*)" id="spEmail" name="email" placeholder="Your Email Address" type="email"/);
+    expect(html).toMatch(/<input class="form-control(.*)" id="spEmail" name="email" placeholder="Your Email Address" required="" type="email"/);
   });
 });

test/login/login.component.spec.ts

@@ -17,8 +17,8 @@ describe('LoginComponent', () => {
     expect(html).toMatch(/<label class="(.*)control-label" for="loginField">Email<\/label>/);
     expect(html).toMatch(/<label class="(.*)control-label" for="passwordField">Password<\/label>/);
 
-    expect(html).toMatch(/<input class="form-control(.*)" id="loginField" name="login" type="text"/);
-    expect(html).toMatch(/<input class="form-control(.*)" id="passwordField" name="password" type="password"/);
+    expect(html).toMatch(/<input class="form-control(.*)" id="loginField" name="login" required="" type="text"/);
+    expect(html).toMatch(/<input class="form-control(.*)" id="passwordField" name="password" required="" type="password"/);
   });
 
 });