Basic Error messages and some correct valid added to login & register

src/app/auth/login.component.html

@@ -16,9 +16,19 @@
                     <span class="input-group-addon"><i class="icon-lock"></i></span>
                     <input type="password" class="form-control" formControlName="password" placeholder="Password">
                   </div>
+                  <div class="mb-4">
+                      <div [ngSwitch]="loginStatus">
+                        <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
+                          Login Succeeded, routing to homepage.
+                        </div>
+                        <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
+                          Error received, please try again.
+                        </div>
+                      </div>
+                    </div>
                   <div class="row">
                     <div class="col-6">
-                      <button type="submit" class="btn btn-primary px-4">Login</button>
+                      <button type="submit" [disabled]="!signin.valid" class="btn btn-primary px-4">Login</button>
                     </div>
                     <div class="col-6 text-right">
                       <button type="button" class="btn btn-link px-0">Forgot password?</button>

src/app/auth/login.component.ts

@@ -12,6 +12,7 @@ import 'rxjs/add/operator/map';
 export class LoginComponent implements OnInit {
   signin: FormGroup;
   returnUrl: string;
+  loginStatus: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -52,10 +53,14 @@ export class LoginComponent implements OnInit {
     .subscribe(
       result => {
         console.log('logged in!');
+        this.loginStatus = "success";
+        console.log(this.loginStatus);
         this.router.navigate([this.returnUrl]);
       },
       error => {
         console.log( error._body );
+        this.loginStatus = "send_failed";
+        console.log(this.loginStatus);
       }
     );
   }

src/app/auth/register.component.html

@@ -134,6 +134,17 @@
 			</div>
 			<div heading="Pending" *ngSwitchDefault>Please Select a User Type</div>
 			</div>
+      <div [ngSwitch]="registerStatus">
+        <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
+          Register Succeeded.
+        </div>
+        <div *ngSwitchCase="'validation_failed'" class="alert alert-danger" role="alert">
+          Form validation failed, please ensure the form is filled.
+        </div>
+        <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
+          Failed to send to server, please try again later.
+        </div>
+      </div>
 		  </div>
         </div>
       </div>

src/app/auth/register.component.ts

@@ -16,6 +16,7 @@ export class RegisterComponent {
   customerForm: ValidationManager;
   organisationForm: ValidationManager;
   years: Object[];
+  registerStatus: any;
   
   constructor(
 	private http: Http,
@@ -57,6 +58,8 @@ export class RegisterComponent {
     console.log(this.signupForm.isValid());
 	if (!this.signupForm.isValid() && !this.customerForm.isValid()) {
 		console.log("Not Valid!");
+    this.registerStatus = "validation_failed";
+    console.log(this.registerStatus);
 		return;
 	}
     let signupForm = this.signupForm.getForm().value;
@@ -90,6 +93,8 @@ export class RegisterComponent {
     console.log(this.signupForm.isValid());
 	if (!this.signupForm.isValid() || !this.organisationForm.isValid()) {
 		console.log("Not Valid!");
+    this.registerStatus = "validation_failed";
+    console.log(this.registerStatus);
 		return;
 	}
     let signupForm = this.signupForm.getForm().value;
@@ -112,10 +117,14 @@ export class RegisterComponent {
       .subscribe(
         result => {
           console.log('registered!');
+          this.registerStatus = "success";
+          console.log(this.registerStatus);
         this.router.navigate(['/dashboard']);
         },
         error => {
           console.log( error._body );
+          this.registerStatus = "send_failed";
+          console.log(this.registerStatus);
         }
       );
   }