Show error on registration failure.

Also fixed registration flag bug in server side
This commit is contained in:
Josh Stark 2018-02-11 09:47:25 +00:00
parent 77e92ad190
commit 4a67b8ea3a
14 changed files with 62 additions and 26 deletions

View File

@ -1,3 +1,5 @@
** This application is still in early development, and as such, no initial release has been made.**
# Clarkson
Clarkson is a web-based dashboard application that gives you a neat and clean interface for logging your fuel fill-ups for all of your vehicles. The application has full multi-user support, as well as multiple vehicles per user. Whenever you fill-up your car or motorcycle, keep the receipt and record the data in Clarkson.
@ -23,7 +25,7 @@ Clarkson is a web-based dashboard application that gives you a neat and clean in
- Consumption Units: MPG, L/100KM
- Distance Units: Miles, Kilometres
- Currency Units: GBP, USD, EUR, AUD, CAD
## Running the application
Clarkson has an Angular front-end, with ExpressJS backend, connecting to a MySQL database. It uses Flyway as a means of managing incremental migrations of the database schema.
@ -72,7 +74,7 @@ Before you run the application, you'll need to run a database migration using _f
Finally, start the application by running:
```bash
MYSQL_HOST=<mysql_host_ip> MYSQL_USERNAME=<mysql_user> MYSQL_PASSWORD=<mysql_user> ENABLE_REGISTRATIONS=true node clarkson.js
MYSQL_HOST=<mysql_host_ip> MYSQL_USERNAME=<mysql_user> MYSQL_PASSWORD=<mysql_user> ENABLE_REGISTRATIONS=true APP_PORT=3000 node clarkson.js
```
Environment variables at startup:
@ -83,6 +85,7 @@ Environment variables at startup:
| MYSQL_USERNAME | _Yes_ | The user with access to the _clarkson_ schema |
| MYSQL_PASSWORD | _Yes_ | The password for the user |
| ENABLE_REGISTRATIONS | _No_ | **Defaults to _false_**. If set to _true_, allows new users to register |
| APP_PORT | _No_ | **Defaults to 3000**. Changes the running port of the application |
## Credits

View File

@ -1,9 +1,10 @@
var express = require("express"),
app = express(),
path = require("path"),
morgan = require("morgan"),
db = require("./server/db/mysql"),
auth = require("./server/security/auth");
app = express(),
path = require("path"),
morgan = require("morgan"),
db = require("./server/db/mysql"),
config = require("./server/config"),
auth = require("./server/security/auth");
app.use(require("helmet")());
app.use(require("body-parser").json());
@ -40,6 +41,6 @@ db.connect(function(err) {
if (err) {
throw err;
} else {
module.exports = app.listen(3000);
module.exports = app.listen(config.port);
}
});

View File

@ -1,6 +1,6 @@
{
"name": "web",
"version": "0.0.0",
"name": "Clarkson",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
@ -21,10 +21,8 @@
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"ng2-charts": "^1.6.0",
"ngx-bootstrap": "^2.0.0-rc.0",
"popper.js": "^1.12.9",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14",

View File

@ -4,6 +4,8 @@ module.exports = (function() {
return {
port: process.env.APP_PORT || 3000,
enableRegistration: process.env.ENABLE_REGISTRATIONS || false,
mysql: {

View File

@ -26,7 +26,7 @@ router.post("/", auth.verifyRegistrations, function(req, res) {
User.find(userId, function(sqlError, user) {
delete user.password;
response.handle(res, { user }, error);
response.handle(res, { user }, sqlError);
});
});
});

View File

@ -9,7 +9,7 @@ module.exports = (function() {
verifyRegistrations(req, res, next) {
if (config.enableRegistration) {
if (config.enableRegistration === "true") {
next();
} else {
return response.forbidden(res, "Registrations are closed");

View File

@ -5,10 +5,11 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { AuthCredentials } from '../../model/auth-credentials';
import { environment } from '../../../environments/environment';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
@ -45,12 +46,21 @@ export class LoginComponent implements OnInit {
err => {
this.loading = false;
this.errorResponse = err.error.message;
this.showErrorMessage(err.error.message);
}
);
}
public showErrorMessage(err: any) {
if (typeof err.error.message === 'string') {
this.errorResponse = err.error.message;
} else {
this.errorResponse = err.error.message.sqlMessage;
}
}
public registrationsEnabled() {
return true;
return environment.enableRegistrations;
}
}

View File

@ -34,6 +34,12 @@
<div class="invalid-feedback" *ngIf="!registrationForm.controls['password'].valid && registrationForm.controls['password'].touched">Password must be at least 6 characters long</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<input type="hidden" class="form-control is-invalid" />
<div class="invalid-feedback">{{errorResponse}}</div>
</div>
</div>
<div class="col-12 text-center">
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="!registrationForm.valid || loading">Register</button>

View File

@ -7,8 +7,7 @@ import { User } from '../../model/user';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
templateUrl: './register.component.html'
})
export class RegisterComponent implements OnInit {
@ -41,14 +40,23 @@ export class RegisterComponent implements OnInit {
data => {
this.loading = false;
this.router.navigate([ '/login' ]);
this.router.navigate(['/login']);
},
err => {
this.loading = false;
console.log(err.error.message);
this.showErrorMessage(err);
}
);
}
public showErrorMessage(err: any) {
if (typeof err.error.message === 'string') {
this.errorResponse = err.error.message;
} else {
this.errorResponse = err.error.message.sqlMessage;
}
}
}

View File

@ -28,7 +28,7 @@
<div class="row" *ngIf="userPreferences && fuelUnits?.length > 0">
<div class="col-12">
<div class="form-group">
<label for="vin">Fuel Units</label>
<label for="vin">Fuel Units <i class="fas fa-exclamation-triangle"></i></label>
<select class="form-control" [(ngModel)]="userPreferences.fuelUnit.id" [formControl]="userPreferencesForm.controls['fuelUnit']">
<option *ngFor="let fuelUnit of fuelUnits"[value]="fuelUnit.id">{{fuelUnit.unitName}} ({{fuelUnit.unit}})</option>
</select>
@ -50,7 +50,7 @@
<div class="row" *ngIf="userPreferences && distanceUnits?.length > 0">
<div class="col-12">
<div class="form-group">
<label for="vin">Distance Units</label>
<label for="vin">Distance Units <i class="fas fa-exclamation-triangle"></i></label>
<select class="form-control" [(ngModel)]="userPreferences.distanceUnit.id" [formControl]="userPreferencesForm.controls['distanceUnit']">
<option *ngFor="let distanceUnit of distanceUnits"[value]="distanceUnit.id">{{distanceUnit.unitName}} ({{distanceUnit.unit}})</option>
</select>
@ -69,6 +69,12 @@
</div>
</div>
<div class="row">
<div class="col-12">
<i class="fas fa-exclamation-triangle"></i> Updating these values will <em>not</em> recalculate previously supplied fill-up data.
</div>
</div>
<div class="row">
<div class="col-12 clearfix p-3 text-right">
<button type="submit" class="btn btn-primary" [disabled]="!userPreferencesForm.valid">Save</button>

View File

@ -1,4 +1,5 @@
export const environment = {
production: true,
apiBaseUrl: 'https://your-domain-here/api'
apiBaseUrl: 'http://localhost:3000/api',
enableRegistrations: true
};

View File

@ -5,5 +5,6 @@
export const environment = {
production: false,
apiBaseUrl: 'https://localhost:3000/api'
apiBaseUrl: 'http://localhost:3000/api',
enableRegistrations: true
};