Added login logic and editable fields

server/database/data.json

@@ -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
-  ]
-}

server/routes/index.js

@@ -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;

src/app/app.module.ts

@@ -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]

src/app/components/home/home.component.html

@@ -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>

src/app/components/home/home.component.ts

@@ -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']);
   }
 
 }

src/app/components/login/login.component.html

@@ -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>

src/app/components/login/login.component.ts

@@ -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);
+      }
+    });
+  }
+
 }

src/app/services/data.service.ts

@@ -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});
   }
 }