Maurice/pocketdb-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
maurice
2025-12-27 22:43:37 +01:00
commit 890f3b5571
26 changed files with 2579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
pb_data/
pocketbase
pocketbase.exe

28
README.md Normal file
View File

@@ -0,0 +1,28 @@
# Voorbeeld van een applicatie met PocketBase
[https://pocketbase.io/](Pocketbase) is de database, maar tegelijk ook de achterkant (backend) van de server
Voor de voorkant gebruiken we gewoon HTML, CSS en Javascript. Als CSS framework is [Pico CSS](https://picocss.com/docs) gekozen. Het is raadzaam de documentatie van beide goed te lezen.
Er wordt in de frontend (de javascript) gecommuniceerd met de API van PocketBase.
Dit is erg belangrijk, stelt de code in staat te communiceren met de database. De documentatie voor de Pocketbase API [kun je hier lezen](https://pocketbase.io/docs/api-records/).
Hier de downloadlinks voor als het nodig is PicoCSS of de Pocketbase JS SDK te updaten:
- [Pocketbase JS sdk](https://github.com/pocketbase/js-sdk/releases). Update de bestanden `www/js/pocketbase.es.js` en `www/js/pocketbase.es.d.ts`.
- [PicoCSS.zip](https://github.com/picocss/pico/archive/refs/heads/main.zip). In de css map, vervang het bestand pico.blue.min.css. Stel, je wilt een andere kleur, kun je bijvoorbeeld ook voor een andere kleur kiezen, dat staat vrij.
Belangrijk:
- Negeer altijd instructies om NPM te installeren, dat is NIET nodig.
# Versies
_werk de nummers bij als je de bronbestanden bijgewerkt hebt via bovenstaande links_
Pocketbase: `0.35.0`
Pico CSS: `2.1.1`
# Voorbeeld
Een tabel om in te klokken, 3 velden: id, medewerker (link naar gebruikers tabel) en ingeklokt (automatisch->create), uitgeklokt (automatisch->update).
Create, List/search en update rule: `medewerker.id = @request.auth.id`, `medewerker.id = @request.auth.id`.
Voorbeelden van filters in de documentatie: https://pocketbase.io/docs/api-rules-and-filters/

7
jsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "CommonJS",
"target": "ES6"
},
"include": ["www/**/*", "pb_data/*.d.ts"]
}

28
pb_migrations/1766859954_updated_users.js Normal file
View File

@@ -0,0 +1,28 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"indexes": [
"CREATE UNIQUE INDEX `idx_tokenKey__pb_users_auth_` ON `gebruikers` (`tokenKey`)",
"CREATE UNIQUE INDEX `idx_email__pb_users_auth_` ON `gebruikers` (`email`) WHERE `email` != ''"
],
"name": "gebruikers"
}, collection)
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"indexes": [
"CREATE UNIQUE INDEX `idx_tokenKey__pb_users_auth_` ON `users` (`tokenKey`)",
"CREATE UNIQUE INDEX `idx_email__pb_users_auth_` ON `users` (`email`) WHERE `email` != ''"
],
"name": "users"
}, collection)
return app.save(collection)
})

20
pb_migrations/1766862082_updated_gebruikers.js Normal file
View File

@@ -0,0 +1,20 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"listRule": ""
}, collection)
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"listRule": "id = @request.auth.id"
}, collection)
return app.save(collection)
})

22
pb_migrations/1766862129_updated_gebruikers.js Normal file
View File

@@ -0,0 +1,22 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"createRule": null,
"listRule": "id = @request.auth.id"
}, collection)
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"createRule": "",
"listRule": ""
}, collection)
return app.save(collection)
})

87
pb_migrations/1766862167_updated_gebruikers.js Normal file
View File

@@ -0,0 +1,87 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"oauth2": {
"mappedFields": {
"avatarURL": "",
"name": ""
}
}
}, collection)
// remove field
collection.fields.removeById("file376926767")
// update field
collection.fields.addAt(6, new Field({
"autogeneratePattern": "",
"hidden": false,
"id": "text1579384326",
"max": 255,
"min": 0,
"name": "naam",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}))
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("_pb_users_auth_")
// update collection data
unmarshal({
"oauth2": {
"mappedFields": {
"avatarURL": "avatar",
"name": "name"
}
}
}, collection)
// add field
collection.fields.addAt(7, new Field({
"hidden": false,
"id": "file376926767",
"maxSelect": 1,
"maxSize": 0,
"mimeTypes": [
"image/jpeg",
"image/png",
"image/svg+xml",
"image/gif",
"image/webp"
],
"name": "avatar",
"presentable": false,
"protected": false,
"required": false,
"system": false,
"thumbs": null,
"type": "file"
}))
// update field
collection.fields.addAt(6, new Field({
"autogeneratePattern": "",
"hidden": false,
"id": "text1579384326",
"max": 255,
"min": 0,
"name": "name",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}))
return app.save(collection)
})

60
pb_migrations/1766865917_created_klokken.js Normal file
View File

@@ -0,0 +1,60 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = new Collection({
"createRule": null,
"deleteRule": null,
"fields": [
{
"autogeneratePattern": "[a-z0-9]{15}",
"hidden": false,
"id": "text3208210256",
"max": 15,
"min": 15,
"name": "id",
"pattern": "^[a-z0-9]+$",
"presentable": false,
"primaryKey": true,
"required": true,
"system": true,
"type": "text"
},
{
"cascadeDelete": false,
"collectionId": "_pb_users_auth_",
"hidden": false,
"id": "relation948496446",
"maxSelect": 1,
"minSelect": 0,
"name": "medewerker",
"presentable": false,
"required": false,
"system": false,
"type": "relation"
},
{
"hidden": false,
"id": "autodate2939903645",
"name": "datumtijd",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
}
],
"id": "pbc_4227797064",
"indexes": [],
"listRule": null,
"name": "klokken",
"system": false,
"type": "base",
"updateRule": null,
"viewRule": null
});
return app.save(collection);
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_4227797064");
return app.delete(collection);
})

61
pb_migrations/1766866192_updated_klokken.js Normal file
View File

@@ -0,0 +1,61 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("pbc_4227797064")
// update collection data
unmarshal({
"createRule": "medewerker.id = @request.auth.id",
"updateRule": "medewerker.id = @request.auth.id"
}, collection)
// add field
collection.fields.addAt(3, new Field({
"hidden": false,
"id": "autodate820045582",
"name": "uitgeklokt",
"onCreate": false,
"onUpdate": true,
"presentable": false,
"system": false,
"type": "autodate"
}))
// update field
collection.fields.addAt(2, new Field({
"hidden": false,
"id": "autodate2939903645",
"name": "ingeklokt",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
}))
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_4227797064")
// update collection data
unmarshal({
"createRule": null,
"updateRule": null
}, collection)
// remove field
collection.fields.removeById("autodate820045582")
// update field
collection.fields.addAt(2, new Field({
"hidden": false,
"id": "autodate2939903645",
"name": "datumtijd",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
}))
return app.save(collection)
})

20
pb_migrations/1766866668_updated_klokken.js Normal file
View File

@@ -0,0 +1,20 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("pbc_4227797064")
// update collection data
unmarshal({
"listRule": "medewerker.id = @request.auth.id"
}, collection)
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_4227797064")
// update collection data
unmarshal({
"listRule": null
}, collection)
return app.save(collection)
})

74
pb_migrations/1766868538_created_berichten.js Normal file
View File

@@ -0,0 +1,74 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = new Collection({
"createRule": "afzender = @request.auth.id",
"deleteRule": null,
"fields": [
{
"autogeneratePattern": "[a-z0-9]{15}",
"hidden": false,
"id": "text3208210256",
"max": 15,
"min": 15,
"name": "id",
"pattern": "^[a-z0-9]+$",
"presentable": false,
"primaryKey": true,
"required": true,
"system": true,
"type": "text"
},
{
"cascadeDelete": false,
"collectionId": "_pb_users_auth_",
"hidden": false,
"id": "relation1489550391",
"maxSelect": 1,
"minSelect": 0,
"name": "afzender",
"presentable": false,
"required": false,
"system": false,
"type": "relation"
},
{
"autogeneratePattern": "",
"hidden": false,
"id": "text2895984270",
"max": 0,
"min": 0,
"name": "bericht",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
},
{
"hidden": false,
"id": "autodate1587919980",
"name": "verstuurd",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
}
],
"id": "pbc_4257786651",
"indexes": [],
"listRule": "",
"name": "berichten",
"system": false,
"type": "base",
"updateRule": null,
"viewRule": null
});
return app.save(collection);
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_4257786651");
return app.delete(collection);
})

20
pb_migrations/1766869940_updated_berichten.js Normal file
View File

@@ -0,0 +1,20 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("pbc_4257786651")
// update collection data
unmarshal({
"listRule": "@request.auth.id != ''"
}, collection)
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_4257786651")
// update collection data
unmarshal({
"listRule": ""
}, collection)
return app.save(collection)
})

76
pb_migrations/1766870430_created_berichten_bekijken.js Normal file
View File

@@ -0,0 +1,76 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = new Collection({
"createRule": null,
"deleteRule": null,
"fields": [
{
"autogeneratePattern": "",
"hidden": false,
"id": "text3208210256",
"max": 0,
"min": 0,
"name": "id",
"pattern": "^[a-z0-9]+$",
"presentable": false,
"primaryKey": true,
"required": true,
"system": true,
"type": "text"
},
{
"autogeneratePattern": "",
"hidden": false,
"id": "_clone_7KTY",
"max": 0,
"min": 0,
"name": "bericht",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
},
{
"hidden": false,
"id": "_clone_HF2I",
"name": "verstuurd",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
},
{
"autogeneratePattern": "",
"hidden": false,
"id": "_clone_ItTJ",
"max": 255,
"min": 0,
"name": "naam",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}
],
"id": "pbc_147944274",
"indexes": [],
"listRule": null,
"name": "berichten_bekijken",
"system": false,
"type": "view",
"updateRule": null,
"viewQuery": "SELECT berichten.id, berichten.bericht, berichten.verstuurd, gebruikers.naam FROM berichten\nINNER JOIN gebruikers ON gebruikers.id = berichten.afzender",
"viewRule": null
});
return app.save(collection);
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_147944274");
return app.delete(collection);
})

126
pb_migrations/1766870460_updated_berichten_bekijken.js Normal file
View File

@@ -0,0 +1,126 @@
/// <reference path="../pb_data/types.d.ts" />
migrate((app) => {
const collection = app.findCollectionByNameOrId("pbc_147944274")
// update collection data
unmarshal({
"listRule": ""
}, collection)
// remove field
collection.fields.removeById("_clone_7KTY")
// remove field
collection.fields.removeById("_clone_HF2I")
// remove field
collection.fields.removeById("_clone_ItTJ")
// add field
collection.fields.addAt(1, new Field({
"autogeneratePattern": "",
"hidden": false,
"id": "_clone_oLDn",
"max": 0,
"min": 0,
"name": "bericht",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}))
// add field
collection.fields.addAt(2, new Field({
"hidden": false,
"id": "_clone_bb1h",
"name": "verstuurd",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
}))
// add field
collection.fields.addAt(3, new Field({
"autogeneratePattern": "",
"hidden": false,
"id": "_clone_gXjC",
"max": 255,
"min": 0,
"name": "naam",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}))
return app.save(collection)
}, (app) => {
const collection = app.findCollectionByNameOrId("pbc_147944274")
// update collection data
unmarshal({
"listRule": null
}, collection)
// add field
collection.fields.addAt(1, new Field({
"autogeneratePattern": "",
"hidden": false,
"id": "_clone_7KTY",
"max": 0,
"min": 0,
"name": "bericht",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}))
// add field
collection.fields.addAt(2, new Field({
"hidden": false,
"id": "_clone_HF2I",
"name": "verstuurd",
"onCreate": true,
"onUpdate": false,
"presentable": false,
"system": false,
"type": "autodate"
}))
// add field
collection.fields.addAt(3, new Field({
"autogeneratePattern": "",
"hidden": false,
"id": "_clone_ItTJ",
"max": 255,
"min": 0,
"name": "naam",
"pattern": "",
"presentable": false,
"primaryKey": false,
"required": false,
"system": false,
"type": "text"
}))
// remove field
collection.fields.removeById("_clone_oLDn")
// remove field
collection.fields.removeById("_clone_bb1h")
// remove field
collection.fields.removeById("_clone_gXjC")
return app.save(collection)
})

46
www/chat.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Chat demo</title>
<!-- Link Pico CSS bestand aan deze pagina -->
<link rel="stylesheet" href="css/vendor/pico.blue.min.css">
<!-- <script defer type="module" src="js/chat.js"></script> -->
<script defer type="module" src="js/chat-onveilig.js"></script>
</head>
<body>
<main class="container">
<nav>
<ul>
<li>
<strong>Demo van Pocketbase</strong>
</li>
</ul>
<ul>
<li>
<a class="outline" role="button" href="index.html">Home</a>
</li>
</ul>
</nav>
<div class="grid">
<article id="berichten">
</article>
<article>
<h2>Bericht versturen</h2>
<form id="verstuurform">
<textarea name="bericht" placeholder="Type je bericht..."></textarea>
<button>Versturen</button>
</form>
</article>
</div>
</main>
</body>
</html>

3
www/css/index.css Normal file
View File

@@ -0,0 +1,3 @@
.verborgen {
display: none;
}

4
www/css/vendor/pico.blue.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

41
www/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>PocketDB Demo</title>
<!-- Link Pico CSS bestand aan deze pagina -->
<link rel="stylesheet" href="css/vendor/pico.blue.min.css">
<script defer type="module" src="js/home.js"></script>
</head>
<body>
<main class="container">
<nav>
<ul>
<li>
<strong>Demo van Pocketbase</strong>
</li>
</ul>
<ul>
<li>
<a class="secondary outline" role="button" href="chat.html">Chat</a>
</li>
</ul>
</nav>
<article>
<h1>Welkom, <span id="naam"></span></h1>
<button id="klokknop">Inklokken</button>
<button id="uitlogknop" class="outline">Uitloggen</button>
</article>
</main>
</body>
</html>

41
www/inloggen.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="nl" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Demo - Inloggen</title>
<!-- Link Pico CSS bestand aan deze pagina -->
<link rel="stylesheet" href="css/vendor/pico.blue.min.css">
<!-- En onze eigen CSS -->
<link rel="stylesheet" href="css/index.css">
<script defer type="module" src="js/inloggen.js"></script>
</head>
<body>
<main class="container">
<article>
<h1>Inloggen</h1>
<form id="loginform">
<fieldset>
<label>
Email
<input type="email" name="email" placeholder="E-mail" />
</label>
<label>
Wachtwoord
<input type="password" name="wachtwoord" placeholder="Wachtwoord" />
<small class="verborgen" id="foutmelding">Gebruikersnaam of wachtwoord onjuist</small>
</label>
</fieldset>
<button>Inloggen</button>
</form>
</article>
</main>
</body>
</html>

58
www/js/chat-onveilig.js Normal file
View File

@@ -0,0 +1,58 @@
import { database, alleenIngelogd } from "./index.js";
alleenIngelogd();
// Berichten versturen
/** @type {HTMLFormElement} */
const formulier = document.getElementById('verstuurform');
formulier.addEventListener('submit', async (event) => {
event.preventDefault();
const gegevens = new FormData(formulier);
await verstuurBericht(gegevens.get('bericht'))
formulier.reset();
});
async function verstuurBericht(bericht) {
await database.collection('berichten').create({
afzender: database.authStore.record.id,
bericht
});
}
// Laad 20 nieuwste berichten in, soorteer bij verstuurd (hoog naar laag)
const berichten = await database.collection('berichten').getList(1, 20, {
sort: '-verstuurd',
expand: 'afzender'
});
const berichtenlijst = document.getElementById('berichten');
let berichtenHtml = [];
berichten.items.forEach(bericht => {
berichtenHtml.push(`<article>
<h3>${bericht.expand.afzender.naam}</h3>
<p>${bericht.verstuurd}</p>
<h5>${bericht.bericht}</h5>
</article>`);
});
berichtenlijst.innerHTML = berichtenHtml.join('\n');
// Schrijf in op nieuwe berichten (Create) en werk dan de berichtenlijst bij
database.collection('berichten').subscribe('*', function(event) {
if(event.action !== 'create') {
return;
}
const bericht = event.record;
berichtenlijst.innerHTML = `<article>
<h3>${bericht.expand.afzender.naam}</h3>
<p>${bericht.verstuurd}</p>
<h5>${bericht.bericht}</h5>
</article>` + '\n' + berichtenlijst.innerHTML;
}, {
expand: 'afzender'
});

54
www/js/chat-veilig.js Normal file
View File

@@ -0,0 +1,54 @@
import { database, alleenIngelogd } from "./index.js";
alleenIngelogd();
// Berichten versturen
/** @type {HTMLFormElement} */
const formulier = document.getElementById('verstuurform');
formulier.addEventListener('submit', async (event) => {
event.preventDefault();
const gegevens = new FormData(formulier);
await verstuurBericht(gegevens.get('bericht'))
formulier.reset();
});
async function verstuurBericht(bericht) {
await database.collection('berichten').create({
afzender: database.authStore.record.id,
bericht
});
}
// Laad 20 nieuwste berichten in, soorteer bij verstuurd (hoog naar laag)
const berichten = await database.collection('berichten_bekijken').getList(1, 20, {
sort: '-verstuurd'
});
const berichtenlijst = document.getElementById('berichten');
let berichtenHtml = [];
berichten.items.forEach(bericht => {
berichtenHtml.push(`<article>
<h3>${bericht.naam}</h3>
<p>${bericht.verstuurd}</p>
<h5>${bericht.bericht}</h5>
</article>`);
});
berichtenlijst.innerHTML = berichtenHtml.join('\n');
// Schrijf in op nieuwe berichten (Create) en werk dan de berichtenlijst bij
// Helaas kan dit niet, subscriben op een view...
database.collection('berichten_bekijken').subscribe('*', function(event) {
const bericht = event.record;
berichtenlijst.innerHTML = `<article>
<h3>${bericht.naam}</h3>
<p>${bericht.verstuurd}</p>
<h5>${bericht.bericht}</h5>
</article>` + '\n' + berichtenlijst.innerHTML;
}, {
expand: 'afzender'
});

52
www/js/home.js Normal file
View File

@@ -0,0 +1,52 @@
import { alleenIngelogd, database } from "./index.js";
// Controleer of iemand ingelogd is
alleenIngelogd();
// Toon naam van ingelogde gebruiker
document.getElementById('naam').textContent =
database.authStore.record.naam;
// Haal eerste record is waarop gebruiker NIET uitgeklokt is (dan is iemand namelijk ingeklokt)
let ingeklokt = undefined;
try {
const item = await database.collection('klokken').getFirstListItem('uitgeklokt = NULL');
ingeklokt = item.id;
document.getElementById('klokknop').textContent = 'Uitklokken';
} catch {
// Niet ingeklokt, want niet gevonden
}
document.getElementById('klokknop').addEventListener('click', async () => {
try {
if (!ingeklokt) {
await inklokken();
} else {
await uitklokken();
}
} catch {
alert('In- of uitklokken mislukt');
}
});
document.getElementById('uitlogknop').addEventListener('click', () => {
database.authStore.clear();
window.location.href = 'inloggen.html';
});
async function inklokken() {
const item = await database.collection('klokken')
.create({ medewerker: database.authStore.record.id });
document.getElementById('klokknop').textContent = 'Uitklokken';
ingeklokt = item.id;
}
async function uitklokken() {
await database.collection('klokken')
.update(ingeklokt);
document.getElementById('klokknop').textContent = 'Inklokken';
ingeklokt = undefined;
}

18
www/js/index.js Normal file
View File

@@ -0,0 +1,18 @@
import PocketBase from './vendor/pocketbase.es.js';
/**
* Database
*/
export const database = new PocketBase('http://localhost:8090');
window.db = database;
/**
* Controleer of iemand ingelogd is. Zo niet, stuur iemand naar inloggen.html
*/
export function alleenIngelogd() {
// Als iemand niet ingelogd is, stuur iemand naar inloggen.js
if (!database.authStore.isValid) {
window.location.href = 'inloggen.html';
}
}

45
www/js/inloggen.js Normal file
View File

@@ -0,0 +1,45 @@
import { ClientResponseError } from './vendor/pocketbase.es.js';
import { database } from './index.js';
/** @type {HTMLFormElement} */
const inlogformulier = document.getElementById('loginform');
inlogformulier.addEventListener('submit', async (event) => {
event.preventDefault(); // Voorkomt dat de pagina gaat herladen
const formdata = new FormData(inlogformulier);
try {
const email = formdata.get('email');
const wachtwoord = formdata.get('wachtwoord');
await database.collection('gebruikers').authWithPassword(email, wachtwoord);
verbergFoutmeldingen();
// Inloggen gelukt, ga naar andere pagina
window.location.href = 'index.html';
} catch (e) {
/** @type {ClientResponseError} */
const error = e;
if (error.status === 400) {
toonFoutmeldingen();
}
}
});
function toonFoutmeldingen() {
// Toon foutmelding
document.getElementById('foutmelding').classList.remove('verborgen');
// Maak wachtwoord, email rood
Array.from(document.getElementsByTagName('input'))
.forEach(veld => veld.ariaInvalid = true);
}
function verbergFoutmeldingen() {
document.getElementById('foutmelding').classList.add('verborgen');
Array.from(document.getElementsByTagName('input'))
.forEach(veld => veld.ariaInvalid = undefined);
}

1583
www/js/vendor/pocketbase.es.d.ts vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
www/js/vendor/pocketbase.es.js vendored Normal file
View File

File diff suppressed because one or more lines are too long