Added better error messaging

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Fixed register box view on login page
 * Made the form reset properly if adding a new one
+* Added better error messages on register and account edit
 
 # v0.0.1
 

src/app/auth/register.component.html

@@ -6,7 +6,7 @@
           <div class="card-block p-4">
 		    <h1>Register</h1>
             <p class="text-muted">Create your account</p>
-			
+
 			<!-- <div class="input-group mb-3">
 				<span class="input-group-addon"><i class="icon-people"></i></span>
                 <select required class="form-control" type="text" formControlName="usertype">
@@ -25,7 +25,7 @@
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" formControlName="email" placeholder="Email">
       </div>
-			
+
 			<div class="input-group mb-3">
         <span class="input-group-addon"><i class="icon-lock"></i></span>
         <input type="password" class="form-control" formControlName="password" placeholder="Password">
@@ -35,7 +35,7 @@
         <span class="input-group-addon"><i class="icon-lock"></i></span>
         <input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
       </div>
-			
+
 			<div class="input-group mb-3">
 				<span class="input-group-addon"><i class="icon-people"></i></span>
           <select required class="form-control" type="text" formControlName="usertype">
@@ -45,7 +45,7 @@
           </select>
       </div>
 			</form>
-			
+
 			<div [ngSwitch]="signupForm.getForm().value.usertype">
 			<div *ngSwitchCase="'customer'" >
 			<form [formGroup]="customerForm.getForm()" (ngSubmit)="onSubmitCustomer()">
@@ -53,17 +53,17 @@
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="display_name" placeholder="Display Name">
       </div>
-			
+
 			<div class="input-group mb-3">
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="full_name" placeholder="Full Name">
       </div>
-			
+
 			<div class="input-group mb-3">
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
       </div>
-			
+
 			<div class="input-group mb-3">
 				<span class="input-group-addon">Year of Birth</span>
           <select class="form-control" type="text" formControlName="year_of_birth">
@@ -80,9 +80,9 @@
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="name" placeholder="Organisation Name">
       </div>
-      
+
       <!-- Uses the UK SIC 2007 classifications for sector as used by ONS -->
-      
+
       <div class="input-group mb-3">
         <select required class="form-control" type="text" formControlName="sector">
           <option value=''>Select Organisation Sector</option>
@@ -108,17 +108,17 @@
           <option value='T'>Household Domestic Business</option>
         </select>
       </div>
-			
+
 			<div class="input-group mb-3">
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="street_name" placeholder="Street Name">
       </div>
-			
+
 			<div class="input-group mb-3">
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="town" placeholder="Town">
       </div>
- 
+
 			<div class="input-group mb-3">
         <span class="input-group-addon"><i class="icon-user"></i></span>
         <input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
@@ -137,7 +137,7 @@
           Form validation failed, please ensure the form is filled correctly.
         </div>
         <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
-          Failed to send to server, please try again later.
+          {{registerStatusError}}
         </div>
       </div>
 		  </div>

src/app/auth/register.component.ts

@@ -16,7 +16,8 @@ export class RegisterComponent {
   organisationForm: ValidationManager;
   years: Object[];
   registerStatus: any;
-  
+  registerStatusError: string = 'Error received, please try again.';
+
   constructor(
 	private http: Http,
 	private formBuilder: FormBuilder,
@@ -51,9 +52,9 @@ export class RegisterComponent {
 		postcode:     'required',
 	  });
   }
-  
+
   onSubmitCustomer() {
-	  
+
     console.log(this.signupForm.isValid());
 	if (!this.signupForm.isValid() && !this.customerForm.isValid()) {
 		console.log("Not Valid!");
@@ -63,7 +64,7 @@ export class RegisterComponent {
 	}
     let signupForm = this.signupForm.getForm().value;
 	let customerForm = this.customerForm.getForm().value;
-	
+
 	let data = {
 		token:        signupForm.token,
 		usertype:     signupForm.usertype,
@@ -85,14 +86,23 @@ export class RegisterComponent {
 		  this.router.navigate(['/dashboard']);
         },
         error => {
-          console.log( error._body );
+          console.log('Register Error');
+          console.log(error);
+          try {
+            console.log(error.error);
+            let jsonError = error.json();
+            console.log("boop");
+            this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
+          } catch(e) {
+            this.registerStatusError = 'There was a server error, please try again later.';
+          }
           this.registerStatus = "send_failed";
-          console.log(this.registerStatus)
+          console.log(this.registerStatus);
         }
       );
   }
   onSubmitOrganisation() {
-	  
+
     console.log(this.signupForm.isValid());
 	if (!this.signupForm.isValid() || !this.organisationForm.isValid()) {
 		console.log("Not Valid!");
@@ -102,7 +112,7 @@ export class RegisterComponent {
 	}
     let signupForm = this.signupForm.getForm().value;
 	let organisationForm = this.organisationForm.getForm().value;
-	
+
 	let data = {
 		token:        signupForm.token,
 		usertype:     signupForm.usertype,
@@ -125,7 +135,16 @@ export class RegisterComponent {
         this.router.navigate(['/dashboard']);
         },
         error => {
-          console.log( error._body );
+          console.log('Register Error');
+          console.log(error);
+          try {
+            console.log(error.error);
+            let jsonError = error.json();
+            console.log("boop");
+            this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
+          } catch(e) {
+            this.registerStatusError = 'There was a server error, please try again later.';
+          }
           this.registerStatus = "send_failed";
           console.log(this.registerStatus);
         }

src/app/dashboard/account-edit.component.html

@@ -122,7 +122,7 @@
                       Form validation failed, please ensure the form is filled correctly.
                     </div>
                     <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
-                      Failed to send to server, please try again later.
+                      {{submitStatusError}}
                     </div>
                   </div>
                 </div>
@@ -160,7 +160,7 @@
                       Form validation failed, please ensure the form is filled correctly.
                     </div>
                     <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
-                      Failed to send to server, please try again later.
+                      {{submitStatusError}}
                     </div>
                   </div>
                 </div>

src/app/dashboard/account-edit.component.ts

@@ -14,6 +14,7 @@ export class AccountEditComponent implements OnInit {
   accountType: any;
   // @ViewChild('fileInput') fileInput;
   submitStatus: any;
+  submitStatusError: string = 'Error received, please try again.';
 
   constructor(
   private http: Http,
@@ -111,7 +112,16 @@ export class AccountEditComponent implements OnInit {
         console.log(this.submitStatus);
       },
       error => {
-        console.log( error._body );
+        console.log('Edit Error');
+        console.log(error);
+        try {
+          console.log(error.error);
+          let jsonError = error.json();
+          console.log("boop");
+          this.submitStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
+        } catch(e) {
+          this.submitStatusError = 'There was a server error, please try again later.';
+        }
         this.submitStatus = "send_failed";
         console.log(this.submitStatus);
       }
@@ -159,7 +169,16 @@ export class AccountEditComponent implements OnInit {
         console.log(this.submitStatus);
       },
       error => {
-        console.log( error._body );
+        console.log('Edit Error');
+        console.log(error);
+        try {
+          console.log(error.error);
+          let jsonError = error.json();
+          console.log("boop");
+          this.submitStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
+        } catch(e) {
+          this.submitStatusError = 'There was a server error, please try again later.';
+        }
         this.submitStatus = "send_failed";
         console.log(this.submitStatus);
       }