corner/HHFSBRS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added login logic and editable fields

Browse Source
This commit is contained in:
corner 2019-10-29 17:21:52 +01:00
parent 00dc53580c
commit 2722eb2efb
8 changed files with 103 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
server/database/data.json
View File

@ -1,104 +1 @@
{
"data": [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false
]
}
{"data":[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false]}

21
server/routes/index.js
View File

@ -3,9 +3,28 @@ const fs = require('fs');
var router = express.Router();
const path = __dirname + '/../database/data.json'
/* GET home page. */
router.get('/', function(req, res, next) {
res.json(JSON.parse(fs.readFileSync(__dirname + '/../database/data.json').toString()));
res.json(JSON.parse(fs.readFileSync(path).toString()));
});
router.post('/login', (req, res, _next) => {
if (req.body.username === 'Mediatheek' && req.body.password === '@MediatheekHetHeerenlanden!') {
res.json(true)
} else {
res.json(false);
}
});
router.post('/update/:index', (req, res, _next) => {
if (req.body.username === 'Mediatheek' && req.body.password === '@MediatheekHetHeerenlanden!') {
const data = JSON.parse(fs.readFileSync(path).toString());
data.data[Number(req.params.index)] = data.data[Number(req.params.index)] ? false : true;
fs.writeFileSync(path, JSON.stringify(data));
}
res.send(null);
});
module.exports = router;

4
src/app/app.module.ts
View File

@ -1,6 +1,7 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@ -16,7 +17,8 @@ import { LoginComponent } from './components/login/login.component';
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
HttpClientModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]

9
src/app/components/home/home.component.html
View File

@ -1,6 +1,13 @@
<div class="container" *ngIf="data | async as data ">
<span *ngIf="loggedIn" (click)="logout()">Log uit</span>
<div class="container" *ngIf="!loggedIn && (data | async) as data">
<div *ngFor="let item of data.data; let i = index">
{{ i + 1 }}. {{ item ? 'Gereserveerd' : 'Niet gereserveerd' }}
<a [href]="'mailto:doemiddag.hetheerenlanden@cvo-av.nl?subject=Reservatie Surprise box ' + (i + 1)">Reserveer</a>
</div>
</div>
<div class="container" *ngIf="loggedIn && (data | async) as data">
<div *ngFor="let item of data.data; let i = index">
<button (click)="updateItem(i)">{{ i + 1 }}. {{ item ? 'Gereserveerd' : 'Niet gereserveerd' }}</button>
</div>
</div>

23
src/app/components/home/home.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiData, DataService } from 'src/app/services/data.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
@ -10,11 +11,31 @@ import { ApiData, DataService } from 'src/app/services/data.service';
export class HomeComponent implements OnInit {
data: Observable<ApiData>;
loggedIn: boolean;
constructor(private dataService: DataService) { }
constructor(
private dataService: DataService,
private router: Router
) { }
ngOnInit() {
this.data = this.dataService.getData();
const username = localStorage.getItem('username');
const password = localStorage.getItem('password');
this.dataService.login(username, password).subscribe(l => this.loggedIn = l);
}
updateItem(index: number) {
const username = localStorage.getItem('username');
const password = localStorage.getItem('password');
this.dataService.update(index, username, password).subscribe(res => this.data = this.dataService.getData());
}
logout() {
localStorage.clear();
this.router.navigate(['/login']);
}
}

10
src/app/components/login/login.component.html
View File

@ -1 +1,9 @@
<p>login works!</p>
<div class="alert" *ngIf="alert">
De combinatie van de gebruikersnaam en wachtwoord is niet herkend.
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="username" type="text">
<input formControlName="password" type="password">
<input type="submit" value="Login!">
</form>

30
src/app/components/login/login.component.ts
View File

@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { DataService } from 'src/app/services/data.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
@ -7,9 +10,34 @@ import { Component, OnInit } from '@angular/core';
})
export class LoginComponent implements OnInit {
constructor() { }
form = this.fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
alert = false;
constructor(
private fb: FormBuilder,
private data: DataService,
private router: Router
) { }
ngOnInit() {
}
onSubmit() {
const value = this.form.value;
this.data.login(value.username, value.password).subscribe(loggedIn => {
if (loggedIn) {
localStorage.setItem('username', value.username);
localStorage.setItem('password', value.password);
this.router.navigate(['/']);
} else {
this.alert = true;
setTimeout(() => this.alert = false, 4000);
}
});
}
}

12
src/app/services/data.service.ts
View File

@ -11,9 +11,19 @@ export interface ApiData {
})
export class DataService {
apiUrl = 'http://localhost:3000';
constructor(private http: HttpClient) { }
getData(): Observable<ApiData> {
return this.http.get<ApiData>('http://localhost:3000');
return this.http.get<ApiData>(this.apiUrl);
}
login(username: string, password: string): Observable<boolean> {
return this.http.post<boolean>(this.apiUrl + '/login', {username, password});
}
update(index: number, username: string, password: string): Observable<void> {
return this.http.post<void>(this.apiUrl + '/update/' + index, {username, password});
}
}