Added better error messaging

This commit is contained in:
piratefinn 2017-09-15 17:33:34 +01:00
parent f34c558d41
commit 7f3e9f4fd0
5 changed files with 65 additions and 26 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -14,6 +14,7 @@ export class AccountEditComponent implements OnInit {
accountType: any; accountType: any;
// @ViewChild('fileInput') fileInput; // @ViewChild('fileInput') fileInput;
submitStatus: any; submitStatus: any;
submitStatusError: string = 'Error received, please try again.';
constructor( constructor(
private http: Http, private http: Http,
@ -111,7 +112,16 @@ export class AccountEditComponent implements OnInit {
console.log(this.submitStatus); console.log(this.submitStatus);
}, },
error => { 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"; this.submitStatus = "send_failed";
console.log(this.submitStatus); console.log(this.submitStatus);
} }
@ -159,7 +169,16 @@ export class AccountEditComponent implements OnInit {
console.log(this.submitStatus); console.log(this.submitStatus);
}, },
error => { 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"; this.submitStatus = "send_failed";
console.log(this.submitStatus); console.log(this.submitStatus);
} }