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

Various little things I can't get my mind made up about.

Browse Source
This commit is contained in:
corner 2019-11-06 08:43:30 +01:00
commit f6c00254b0
15 changed files with 125 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -3,12 +3,15 @@
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "concurrently \"ng serve\" \"nodemon ./server/bin/www\"", "start": "concurrently \"ng serve\" \"DEBUG=HHFSBRS:* nodemon ./server/bin/www\"",
"build": "ng build", "build": "ng build",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
}, },
"nodemonConfig": {
"ignore": ["*.json"]
},
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~8.2.11", "@angular/animations": "~8.2.11",

1
server/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
secret.js

2
server/database/confirmations.json
View File

@ -1 +1 @@
{"i6bxw12wk2k5lzpk":{"number":32,"timestamp":1572855599882,"message":"Henl"}} {}

2
server/database/data.json
View File

@ -1 +1 @@
[false,false,false,true,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false] [false,false,false,true,false,true,false,false,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false]

62
server/routes/mail.js
View File

@ -8,11 +8,11 @@ const secret = require('../secret');
var router = express.Router(); var router = express.Router();
const confirmationsPath = '../database/confirmations.json'; const confirmationsPath = '../database/confirmations.json';
const transporter = nodemailer.createTransport({ const transporter = nodemailer.createTransport({
host: "smtp.office365.com", host: "jobbel.nl",
port: 587, port: 465,
secure: false, // upgrade later with STARTTLS secure: true, // upgrade later with STARTTLS
auth: { auth: {
user: "heerenlandencollege@gmail.com", user: "job",
pass: secret pass: secret
} }
}); });
@ -61,7 +61,7 @@ router.post('/', (req, res, _next) => {
// `, // `,
var mailOptions = { var mailOptions = {
from: 'Surprise box team van Het Heerenlanden', from: 'Het Surprise box team van Het Heerenlanden <job@jobbel.nl>',
to: req.body.email, to: req.body.email,
subject: `Aanvraag voor surprise box ${req.body.number}`, subject: `Aanvraag voor surprise box ${req.body.number}`,
html: ` html: `
@ -81,10 +81,10 @@ router.post('/', (req, res, _next) => {
` `
}; };
transporter.sendMail(mailOptions, function(error, info){ transporter.sendMail(mailOptions, (error, info) => {
if (error) { if (error) {
// Notify the front-end // Notify the front-end
res.json({result: {success: false, data: err}}); res.json({result: {success: false, data: error}});
} else { } else {
// Add the user's data to the database identified by the id. // Add the user's data to the database identified by the id.
@ -101,7 +101,7 @@ router.post('/', (req, res, _next) => {
} }
}) })
// Notify the front-end // Notify the front-end
res.json({result: {success: true, data: reply}}); res.json({result: {success: true, data: info}});
} }
}); });
}); });
@ -119,18 +119,46 @@ router.get('/validate/:id', (req, res, _next) => {
// send success result // send success result
// res.json({result: {success: true, data: data[id].number}}); // res.json({result: {success: true, data: data[id].number}});
res.render('validate-success', {number: data[id].number})
// Delete the record var mailOptions = {
delete data[id]; from: 'HHFSBRS <job@jobbel.nl>',
writeJsonFile(confirmationsPath, data); to: 'job@jobbel.nl',
subject: `Aanvraag voor surprise box ${data[id].number}`,
html: `
<html>
<body>
<p>Beste Simone,</p>
<p>
${data[id].name} heeft surprise box ${data[id].number} aangevraagd op ${new Date(data[id].timestamp).toUTCString()}.
Het bericht luidt: ${data[id].message}
</p>
// Process the email to doemiddag.hetheerenlanden@cvo-av.nl <p>Met vriendelijk groet,<br> het computersysteem van Job en Arne</p>
// And set the corresponding records in data.json to 'Gereserveerd' </body>
</html>
`
};
let boxes = readJsonFile('../database/data.json'); transporter.sendMail(mailOptions, (error, info) => {
boxes[Number(data[id].number)] = true; if (error) {
writeJsonFile('../database/data.json', boxes); // Notify the front-end
res.json({result: {success: false, data: error}});
} else {
// And set the corresponding records in data.json to 'Gereserveerd'
let boxes = readJsonFile('../database/data.json');
boxes[Number(data[id].number) - 1] = true;
console.log(boxes);
writeJsonFile('../database/data.json', boxes);
res.render('validate-success', {number: data[id].number})
// Delete the record
delete data[id];
writeJsonFile(confirmationsPath, data);
}
});
} else { } else {
// Else if the id is found but the time is expired // Else if the id is found but the time is expired

38
server/sendmail.js
View File

@ -1,38 +0,0 @@
const nodemailer = require('nodemailer');
const secret = require('./secret');
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false, // upgrade later with STARTTLS
auth: {
user: "heerenlandencollege@gmail.com",
pass: secret
}
});
var mailOptions = {
from: 'Surprise box team van Het Heerenlanden',
to: 'aardtaart1@gmail.com',
subject: `Aanvraag voor surprise box `,
html: `
<html>
<body>
<p>Beste ,</p>
<p>
Deze email is verzonden omdat u surprise box voor de kerstmarkt van Het Heerenlanden heeft aangevraagd.<br>
Om uw aanvraag te bevestigen, moet u om de volgende link klikken:<br>
<a href='http://localhost:3000/mail/validate/'>http://localhost:3000/mail/validate/</a><br>
Deze link verloopt na één uur.
</p>
<p>Met vriendelijk groet,<br> het surprise box team van Het Heerenlanden</p>
</body>
</html>
`
};
transporter.sendMail(mailOptions, function(error, info){
if (error) console.log(error)
console.log(info)
});

7
src/app/app.component.html
View File

@ -1,7 +1,10 @@
<nav> <nav>
<!-- nav here --> <!-- nav here -->
<span>Surprise box reserveren</span> <span><a routerLink="">Surprise box reserveren</a></span>
<a routerLink="login"><fa-icon [icon]="faSignInAlt"></fa-icon></a> <a *ngIf="!loggedIn" routerLink="login">
<fa-icon [icon]="faSignInAlt"></fa-icon>
<span>Log in</span>
</a>
</nav> </nav>
<main> <main>
<div class="overlay" *ngIf="form.visible"></div> <div class="overlay" *ngIf="form.visible"></div>

15
src/app/app.component.scss
View File

@ -26,7 +26,7 @@ nav {
color: white; color: white;
background-color: rgba(0,0,0,0.25); background-color: rgba(0,0,0,0.25);
position: relative; position: relative;
span { span > a {
font-family: 'Staatliches', cursive; font-family: 'Staatliches', cursive;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -36,7 +36,7 @@ nav {
width: max-content; width: max-content;
} }
a { a {
text-decoration: none; // text-decoration: none;
color: white; color: white;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@ -47,10 +47,15 @@ nav {
fa-icon { fa-icon {
padding: 5px; padding: 5px;
} }
span {
display: none;
}
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
a::after { a {
content: "Login"; span {
display: inline;
}
} }
} }
} }
@ -58,7 +63,7 @@ nav {
main { main {
padding: 16px; padding: 16px;
margin: 20px; margin: 20px;
height: min-content; min-height: calc(100vh - 64px - 72px);
border-radius: 1em; border-radius: 1em;
background-color: #ffffff; background-color: #ffffff;
text-align: center; text-align: center;

6
src/app/components/form/form.component.html
View File

@ -3,9 +3,7 @@
<fa-icon (click)="formService.hideForm()" [icon]="faTimes"></fa-icon> <fa-icon (click)="formService.hideForm()" [icon]="faTimes"></fa-icon>
<form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()"> <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()">
<span class="header">Formulier voor surpise box {{ number }}</span>
<h4>Formulier voor surpise box {{ number }}</h4>
<label for="name">Naam: </label> <label for="name">Naam: </label>
<input type="text" formControlName="name"><br> <input type="text" formControlName="name"><br>
@ -20,7 +18,7 @@
</form> </form>
<div *ngIf="submitted"> <div *ngIf="submitted">
<h4>Uw aanvraag is ingediend</h4> <span class="header">Uw aanvraag is ingediend</span>
<p>Check uw mailbox om uw aanvrag te valideren. Als u de mail niet kan vinden, check dan ook uw spam.</p> <p>Check uw mailbox om uw aanvrag te valideren. Als u de mail niet kan vinden, check dan ook uw spam.</p>
</div> </div>

35
src/app/components/form/form.component.scss
View File

@ -1,16 +1,39 @@
.container { .container {
background: white; background: white;
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding-bottom: 20px; padding: 3em 2em 1em 2em;
border-radius: 0.5em;
span.header {
position: absolute;
font-weight: bold;
text-decoration: underline;
top: 0.6em;
left: 1em;
width: calc(100% - 50px);
}
form {
label {
float: left;
margin: 5px;
}
textarea, input {
border: 1px solid grey;
border-radius: 3px;
padding: 0.25em;
margin: 5px;
float: right;
}
}
fa-icon { fa-icon {
position: relative; position: absolute;
float: right;
padding-right: 10px;
padding-top: 10px;
cursor: pointer; cursor: pointer;
top: 0.6em;
right: 1em;
} }
} }

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

@ -10,8 +10,9 @@
Je kan je box op 28 november ophalen en betalen. Je kan je box op 28 november ophalen en betalen.
</p> </p>
<div> <div>
<span *ngIf="loggedIn" (click)="logout()">Log uit</span>
<div class="container" *ngIf="!loggedIn && (data | async) as data"> <span class="logout" *ngIf="loggedIn" (click)="logout()">Log uit</span>
<div class="container" *ngIf="!loggedIn && data">
<div *ngFor="let item of data.result.data; let i = index"> <div *ngFor="let item of data.result.data; let i = index">
<!-- [href]="item ? '' : ('mailto:doemiddag.hetheerenlanden@cvo-av.nl?subject=Reservatie Surprise box ' + (i + 1))" --> <!-- [href]="item ? '' : ('mailto:doemiddag.hetheerenlanden@cvo-av.nl?subject=Reservatie Surprise box ' + (i + 1))" -->
<a [class]="item && 'disabled'" (click)="!item && form.showForm(i + 1)"> <a [class]="item && 'disabled'" (click)="!item && form.showForm(i + 1)">
@ -23,8 +24,8 @@
</div> </div>
</div> </div>
<div class="container" *ngIf="loggedIn && (data | async) as data"> <div class="container" *ngIf="loggedIn">
<div *ngFor="let item of data.data; let i = index"> <div *ngFor="let item of data.result.data; let i = index">
<button (click)="updateItem(i)">{{ i + 1 }}. {{ item ? 'Gereserveerd' : 'Niet gereserveerd' }}</button> <button (click)="updateItem(i)">{{ i + 1 }}. {{ item ? 'Gereserveerd' : 'Niet gereserveerd' }}</button>
</div> </div>
</div> </div>

6
src/app/components/home/home.component.scss
View File

@ -88,4 +88,10 @@
} }
} }
span.logout {
border: 1px solid grey;
border-radius: 3px;
padding: 0.25em;
margin: 5px;
}
} }

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

@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiData, DataService } from 'src/app/services/data.service'; import { ApiData, DataService } from 'src/app/services/data.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { faGift } from '@fortawesome/free-solid-svg-icons'; import { faGift } from '@fortawesome/free-solid-svg-icons';
@ -14,7 +13,7 @@ export class HomeComponent implements OnInit {
faGift = faGift; faGift = faGift;
data: Observable<ApiData>; data: ApiData;
loggedIn: boolean; loggedIn: boolean;
constructor( constructor(
@ -24,7 +23,7 @@ export class HomeComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
this.data = this.dataService.getData(); this.dataService.getData().subscribe(res => this.data = res);
const username = localStorage.getItem('username'); const username = localStorage.getItem('username');
const password = localStorage.getItem('password'); const password = localStorage.getItem('password');
@ -35,7 +34,7 @@ export class HomeComponent implements OnInit {
const username = localStorage.getItem('username'); const username = localStorage.getItem('username');
const password = localStorage.getItem('password'); const password = localStorage.getItem('password');
this.dataService.update(index, username, password).subscribe(res => this.data = this.dataService.getData()); this.dataService.update(index, username, password).subscribe(res => this.dataService.getData().subscribe(res2 => this.data = res2));
} }
logout() { logout() {

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

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

8
src/app/components/login/login.component.scss
View File

@ -0,0 +1,8 @@
form {
textarea, input {
border: 1px solid grey;
border-radius: 3px;
padding: 0.25em;
margin: 5px;
}
}