🚀Bumped version to 0.1.0

CHANGELOG.md

@@ -0,0 +1,42 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### 0.1.0
+
+- Basic sveltekit project [`e0c0cbb`](https://git.odit.services/lfk/kiosk/commit/e0c0cbbbd8b2c4cb7db0a8ae3aa295083ae636d1)
+- Release config [`6b98ee9`](https://git.odit.services/lfk/kiosk/commit/6b98ee96341def78447317a39e1ff30f9db73a9d)
+- Added basic welcome page [`5ed21bb`](https://git.odit.services/lfk/kiosk/commit/5ed21bb13d30cc43bc16fd6357f2e92e031c3273)
+- Bump ts [`50764bc`](https://git.odit.services/lfk/kiosk/commit/50764bca472a441c2e84fc3273771303a94759ae)
+- Basic registration page [`09aee15`](https://git.odit.services/lfk/kiosk/commit/09aee15f60bec58ca3cc3b9ce392774a7ff77219)
+- Added basic drone docker build, build checks and typechecks [`eca9966`](https://git.odit.services/lfk/kiosk/commit/eca9966e29f5222189e0f10a6874e3c9e5f32b56)
+- Basic userstore [`88f3657`](https://git.odit.services/lfk/kiosk/commit/88f36575fb81c47b2e88f708890da77dcadde2e1)
+- Added login page with logic [`078e8dc`](https://git.odit.services/lfk/kiosk/commit/078e8dcb9af67ea874a7547c9303cb2a831a8486)
+- Added license exporter [`28b45f8`](https://git.odit.services/lfk/kiosk/commit/28b45f876877391d466a4a71e0772793bbe02137)
+- Added readme [`0bd83f8`](https://git.odit.services/lfk/kiosk/commit/0bd83f8000daeef993764aea29149036b1d80254)
+- Added runnerid as barcode [`5a81cb6`](https://git.odit.services/lfk/kiosk/commit/5a81cb64f59ca75264a38d09d54c19e506486e3a)
+- Registration feedback logic [`d3d0d17`](https://git.odit.services/lfk/kiosk/commit/d3d0d17b3a99ab8412df3111dc2d4c029fd04908)
+- Pin dependencies [`abff31a`](https://git.odit.services/lfk/kiosk/commit/abff31aaee4b6f6a07f4e1292e2b95d13b995fab)
+- Register results [`7cecbfe`](https://git.odit.services/lfk/kiosk/commit/7cecbfe80e60bc22cab9f4c0e8e2aa0b33899280)
+- Authed page login logic [`7879ca8`](https://git.odit.services/lfk/kiosk/commit/7879ca82fde600fdb9f314b6dd63a324eb308102)
+- Added dockerfile + compose [`e5535f1`](https://git.odit.services/lfk/kiosk/commit/e5535f18692d7afc3f2636283722e61aa0437c59)
+- Package project info [`2e355db`](https://git.odit.services/lfk/kiosk/commit/2e355dbb46404fe0eccd8409614ec7444933bcae)
+- Added bwip types [`1a0f52f`](https://git.odit.services/lfk/kiosk/commit/1a0f52f31f9bdd0fd78756e714f23433e16deb1e)
+- Fix in auth [`710cad3`](https://git.odit.services/lfk/kiosk/commit/710cad376eb865a0c82743a7213c3f4097027c23)
+- Switched to adapter static [`93bf436`](https://git.odit.services/lfk/kiosk/commit/93bf436e94ad492a1bc1acdaa8958ef9e79e3a73)
+- fix(a11y): input borders [`fffe290`](https://git.odit.services/lfk/kiosk/commit/fffe29036045ead825b54f44b38d824d09f039b8)
+- Added lfk client [`f927cc9`](https://git.odit.services/lfk/kiosk/commit/f927cc916b07e908c3bd18ee7d16d82cb41ca972)
+- Added license [`39fc381`](https://git.odit.services/lfk/kiosk/commit/39fc381343de6d2be4f8e5aa53c9d986f05a99bb)
+- Added login error [`8b086c5`](https://git.odit.services/lfk/kiosk/commit/8b086c5aa850f423b19a54499ae636937ff33387)
+- Updated typing [`d68e88e`](https://git.odit.services/lfk/kiosk/commit/d68e88ec9a890e418070f0698d5da6d7c75cc0c1)
+- Moved barcode height to main config [`3d110e8`](https://git.odit.services/lfk/kiosk/commit/3d110e8f48b9a3df8dba462e2ee71125e47aa875)
+- Open footer links in new tab [`c1400c0`](https://git.odit.services/lfk/kiosk/commit/c1400c0120a1b3b0e4358b3c6bb6ac38f4f01e35)
+- Moved config into call [`e25aaf3`](https://git.odit.services/lfk/kiosk/commit/e25aaf3e5e0c2ed52413b8289c7d5bdd5b8a54f1)
+- Added sample env [`f6dd25c`](https://git.odit.services/lfk/kiosk/commit/f6dd25c988a67b4d826410fea59473ca8d0b718f)
+- typo [`22be683`](https://git.odit.services/lfk/kiosk/commit/22be68311baaa3d866106603deb6c7ae3a8ab09b)
+- updated release hook [`5d7a25e`](https://git.odit.services/lfk/kiosk/commit/5d7a25e54ffe454ce4e61876acaae7b1a34df3eb)
+- pnpx -> npx [`16deab5`](https://git.odit.services/lfk/kiosk/commit/16deab5308b7245860d42b8f49aba0706595d95f)
+- release from main [`c0a39bd`](https://git.odit.services/lfk/kiosk/commit/c0a39bdabe9a597823fd28cee059b690bc7e34c3)
+- fix(registration): typo [`1c5e246`](https://git.odit.services/lfk/kiosk/commit/1c5e2460958919951968c8c20eb69929cfba81d5)
+- pinned dependency [`910fa38`](https://git.odit.services/lfk/kiosk/commit/910fa3867b32918e3791642526d414268049ed38)
+- Hide error on successfull signin [`f98a4fc`](https://git.odit.services/lfk/kiosk/commit/f98a4fc2b1a34343353fdc361ef08e92ea046ced)

README.md

@@ -1,38 +1,27 @@
-# create-svelte
+# @lfk/kiosk
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## Overview 👀
+This is a simple kiosk style register form for the LfK runnersystem.
+The basic idea is:
+1. Create a runnersystem user with only `RUNNER:CREATE` permissions.
+2. Login with this user under `/login`
+3. Runners can register via their firstnam and lastname
+4. The kiosk creates the runner via the backend and shows their id, firstname, lastname and a barcode containing their id
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
+## Development 🛠️
+```
+pnpm i
+pnpm dev --open
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Build 🚀
+```
+pnpm i
+pnpm build
 ```
 
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
+## Docker 🐳
 ```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+docker build .
+docker-compose up
+```

package.json

@@ -1,7 +1,26 @@
 {
 	"name": "@lfk/kiosk",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"private": false,
+	"license": "MIT",
+	"repository": "https://git.odit.services/lfk/kiosk",
+	"author": {
+		"name": "ODIT.Services",
+		"email": "info@odit.services",
+		"url": "https://odit.services"
+	},
+	"contributors": [
+		{
+			"name": "Philipp Dormann",
+			"email": "philipp@philippdormann.de",
+			"url": "https://philippdormann.de"
+		},
+		{
+			"name": "Nicolai Ort",
+			"email": "info@nicolai-ort.com",
+			"url": "https://nicolai-ort.com"
+		}
+	],
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -17,6 +36,7 @@
 		"@odit/license-exporter": "0.0.12",
 		"@sveltejs/adapter-static": "2.0.2",
 		"@sveltejs/kit": "1.5.0",
+		"@types/bwip-js": "^3.2.0",
 		"@typescript-eslint/eslint-plugin": "5.45.0",
 		"@typescript-eslint/parser": "5.45.0",
 		"auto-changelog": "2.4.0",
@@ -39,7 +59,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@odit/lfk-client-js": "^1.0.1",
+		"@odit/lfk-client-js": "1.0.1",
 		"bwip-js": "3.4.0"
 	},
 	"release-it": {
@@ -47,7 +67,7 @@
 			"commit": true,
 			"requireCleanWorkingDir": false,
 			"commitMessage": "🚀Bumped version to ${version}",
-			"requireBranch": "dev",
+			"requireBranch": "main",
 			"push": true,
 			"tag": true,
 			"tagName": null,
@@ -57,7 +77,7 @@
 			"publish": false
 		},
 		"hooks": {
-			"after:bump": "pnpx auto-changelog --commit-limit false -p -u --hide-credit && pnpm licenses:export && git add CHANGELOG.md licenses.md"
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && npm run license:export && git add CHANGELOG.md && git add licenses.md"
 		}
 	},
 	"volta": {
@@ -66,4 +86,4 @@
 	"engines": {
 		"pnpm": "8"
 	}
-}
+}

pnpm-lock.yaml

@@ -2,7 +2,7 @@ lockfileVersion: '6.0'
 
 dependencies:
   '@odit/lfk-client-js':
-    specifier: ^1.0.1
+    specifier: 1.0.1
     version: 1.0.1
   bwip-js:
     specifier: 3.4.0
@@ -18,6 +18,9 @@ devDependencies:
   '@sveltejs/kit':
     specifier: 1.5.0
     version: 1.5.0(svelte@3.54.0)(vite@4.2.0)
+  '@types/bwip-js':
+    specifier: ^3.2.0
+    version: 3.2.0
   '@typescript-eslint/eslint-plugin':
     specifier: 5.45.0
     version: 5.45.0(@typescript-eslint/parser@5.45.0)(eslint@8.28.0)(typescript@5.0.4)
@@ -603,6 +606,12 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /@types/bwip-js@3.2.0:
+    resolution: {integrity: sha512-UNcuIorD+Cw+jlJm9YExx0fkUeR0z3a6bidcgvK13GmBshShLv6NTWkuzklBeFl+90ZxBvJx1CHkDFNptSCbAA==}
+    dependencies:
+      '@types/node': 18.15.11
+    dev: true
+
   /@types/cookie@0.5.1:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
     dev: true
@@ -615,6 +624,10 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/node@18.15.11:
+    resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
+    dev: true
+
   /@types/pug@2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true

src/lib/userstore.ts

@@ -5,7 +5,7 @@ type UserState = {
     access_token: string;
     refresh_token: string;
     isLoggedIn: boolean;
-    refreshInterval: number
+    refreshInterval: NodeJS.Timer | undefined
 };
 
 const userStore = () => {
@@ -13,7 +13,7 @@ const userStore = () => {
         access_token: '',
         refresh_token: '',
         isLoggedIn: false,
-        refreshInterval: 0
+        refreshInterval: undefined
     };
 
     const { subscribe, set, update } = writable(state);
@@ -34,7 +34,7 @@ const userStore = () => {
 
                 localStorage.setItem('userdata', JSON.stringify(state));
                 localStorage.setItem('access_token', state.access_token);
-                localStorage.setItem('refresh_token', state.refresh_token);
+                OpenAPI.TOKEN = resAuth.access_token;
                 return state;
             });
         },
@@ -46,9 +46,9 @@ const userStore = () => {
                 this.logout();
             }
         },
-        loginFromStorage() {
+        async loginFromStorage() {
             console.log('loginFromStorage');
-            const access_token = localStorage.getItem('token');
+            const access_token = localStorage.getItem('access_token');
             if (!access_token) {
                 throw new Error('Unauthorized');
             }
@@ -63,17 +63,19 @@ const userStore = () => {
                 state.refreshInterval = setInterval(() => {
                     this.refreshAuth();
                 }, 2 * 60000);
+                OpenAPI.TOKEN = userdata.access_token;
+
                 return state;
             });
 
-            this.refreshAuth
+            await this.refreshAuth();
         },
         async logout() {
             update((state: UserState) => {
                 state.isLoggedIn = false;
                 state.access_token = '';
                 state.refresh_token = '';
-                state.refreshInterval = 0;
+                state.refreshInterval = undefined;
                 localStorage.clear();
                 return state;
             });

src/routes/login/+page.svelte

@@ -53,7 +53,7 @@
 									type="username"
 									id="username"
 									name="username"
-									class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+									class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
 									required
 									aria-describedby="username-error"
 								/>
@@ -72,7 +72,7 @@
 									type="password"
 									id="password"
 									name="password"
-									class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+									class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
 									required
 									aria-describedby="password-error"
 								/>

src/routes/registration/+layout.svelte

@@ -4,14 +4,14 @@
 
 	$: loginRendered = false;
 
-	onMount(() => {
+	onMount(async () => {
 		try {
-			userstore.loginFromStorage();
+			await userstore.loginFromStorage();
 			loginRendered = true;
 		} catch (error) {
 			console.log(error);
 			userstore.logout();
-			location.replace(`${location.pathname}/login`);
+			location.replace(`/login`);
 		}
 	});
 </script>

src/routes/registration/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
+	import bwipjs from 'bwip-js';
 
 	$: firstname = '';
 	$: lastname = '';
-	$: showResult = true;
+	$: accepted = false;
+	$: showResult = false;
 	$: showError = false;
 
 	let response: ResponseRunner;
@@ -17,10 +19,33 @@
 				group
 			})) as ResponseRunner;
 			showError = false;
+			showResult = true;
 		} catch (error) {
 			console.log(error);
 			showError = true;
+			showResult = false;
 		}
+		firstname = '';
+		lastname = '';
+		accepted = false;
+	}
+
+	function textToBase64Barcode(text: string, is_qrcode: boolean) {
+		const canvas = document.createElement('canvas');
+		let bcid = 'code128';
+		if (is_qrcode) {
+			bcid = 'qrcode';
+		}
+		bwipjs.toCanvas(canvas, {
+			bcid,
+			text: `${text}`,
+			scale: 10,
+			includetext: true,
+			textxalign: 'center',
+			backgroundcolor: 'ffffff',
+			height: 10
+		});
+		return canvas.toDataURL('image/png');
 	}
 </script>
 
@@ -48,13 +73,14 @@
 											type="text"
 											id="firstname"
 											name="firstname"
-											class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+											class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
 											required
 											bind:value={firstname}
 											aria-describedby="firstname-error"
 										/>
-										<div
-											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+										<!-- <div
+											class:hidden={firstname || firstname.length != 0}
+											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
 										>
 											<svg
 												class="h-5 w-5 text-red-500"
@@ -68,11 +94,15 @@
 													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
 												/>
 											</svg>
-										</div>
+										</div> -->
 									</div>
-									<p class="hidden text-xs text-red-600 mt-2" id="firstname-error">
+									<!-- <p
+										class:hidden={firstname || firstname.length != 0}
+										class="text-xs text-red-600 mt-2"
+										id="firstname-error"
+									>
 										Bitte gebe deinen Vornamen ein
-									</p>
+									</p> -->
 								</div>
 								<!-- End Form Group -->
 
@@ -84,13 +114,14 @@
 											type="lastname"
 											id="lastname"
 											name="lastname"
-											class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+											class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
 											required
 											aria-describedby="lastname-error"
 											bind:value={lastname}
 										/>
-										<div
-											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+										<!-- <div
+											class:hidden={lastname || lastname.length != 0}
+											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
 										>
 											<svg
 												class="h-5 w-5 text-red-500"
@@ -104,21 +135,32 @@
 													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
 												/>
 											</svg>
-										</div>
+										</div> -->
 									</div>
-									<p class="hidden text-xs text-red-600 mt-2" id="lastname-error">
+									<!-- <p
+										class:hidden={lastname || lastname.length != 0}
+										class="text-xs text-red-600 mt-2"
+										id="lastname-error"
+									>
 										Bitte gebe deinen Nachnamen ein
-									</p>
+									</p> -->
 								</div>
 								<!-- End Form Group -->
 
 								<!-- Checkbox -->
-								<div class="flex items-center">
+								<div
+									class="flex items-center"
+									on:click={() => {
+										accepted = !accepted;
+									}}
+									on:keydown={() => {}}
+								>
 									<div class="flex">
 										<input
 											id="remember-me"
 											name="remember-me"
 											type="checkbox"
+											bind:checked={accepted}
 											class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
 										/>
 									</div>
@@ -127,7 +169,7 @@
 											>Ich habe die <a
 												class="text-blue-600 decoration-2 hover:underline font-medium"
 												href="https://lauf-fuer-kaya.de/datenschutz">Datenschutzerklärung</a
-											> gelesen und aktzeptiert</label
+											> gelesen und akzeptiert</label
 										>
 									</div>
 								</div>
@@ -135,16 +177,39 @@
 
 								<button
 									type="submit"
-									class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+									disabled={!firstname || !lastname || !accepted}
+									class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
 									>Anmelden</button
 								>
 							</div>
 						</form>
 						<!-- End Form -->
 					{:else}
-						<p class="block text-lg mb-2 dark:text-white">ID: {response.id}</p>
-						<p class="block text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
-						<p class="block text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
+						<div class="mb-2">
+							<h3 class="text-xl font-semibold text-center dark:text-white">Läuferdaten</h3>
+							<p class="text-lg dark:text-white">ID: {response.id}</p>
+							<p class="text-lg dark:text-white">Vorname: {response.firstname}</p>
+							<p class="text-lg dark:text-white">Nachname: {response.lastname}</p>
+						</div>
+
+						<div class="mb-2 text-center">
+							<h3 class="text-xl font-semibold dark:text-white">Läufercode</h3>
+							<img
+								class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
+								alt="Runnerid"
+								src={textToBase64Barcode(response.id.toString(), false)}
+							/>
+						</div>
+
+						<div class="mx-auto text-center items-center">
+							<button
+								on:click={() => {
+									showResult = false;
+								}}
+								class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+								>Fertig</button
+							>
+						</div>
 					{/if}
 				</div>
 			</div>