From 6e2b20587c546a4c89097119b8a3a66dd66b0712 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 09:25:01 +0200 Subject: [PATCH 01/13] remove registrationpage --- src/lib/components/UserRegistration.svelte | 49 +++++++++++++++++++--- 1 file changed, 44 insertions(+), 5 deletions(-) diff --git a/src/lib/components/UserRegistration.svelte b/src/lib/components/UserRegistration.svelte index 0f01740d..d9cd22c8 100644 --- a/src/lib/components/UserRegistration.svelte +++ b/src/lib/components/UserRegistration.svelte @@ -1,6 +1,6 @@ -
- -
+ +{#if showAlert} + { + showAlert = false; + missingValues = []; + }} + /> +{/if} + +{#if showCheckMessage} + { + showCheckMessage = false; + }} + /> +{/if} + + + + {#if heading} + {heading} + {/if} + +
+ {#each data as element, i}{/each} +
+ From 181e9b80715e631d26da905d327b72377ce0a260 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 11:10:46 +0200 Subject: [PATCH 02/13] correct config mistake in navbuttons --- src/lib/components/Navigation/NavigationButtons.svelte | 4 ++-- src/lib/components/UserLogin.svelte | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/lib/components/Navigation/NavigationButtons.svelte b/src/lib/components/Navigation/NavigationButtons.svelte index 05f0dff4..5d4d6513 100644 --- a/src/lib/components/Navigation/NavigationButtons.svelte +++ b/src/lib/components/Navigation/NavigationButtons.svelte @@ -2,16 +2,16 @@ import { Button, ButtonGroup } from 'flowbite-svelte'; export let buttons: unknown = []; - export let onclick = () => {}; {#each buttons as bprops} {/each} diff --git a/src/lib/components/UserLogin.svelte b/src/lib/components/UserLogin.svelte index 9b2f6b5d..9d04209a 100644 --- a/src/lib/components/UserLogin.svelte +++ b/src/lib/components/UserLogin.svelte @@ -59,7 +59,8 @@ const buttons = [ { label: 'Login', - href: null + href: null, + onclick: validateCredentials } ]; @@ -140,7 +141,7 @@ - + Not registered? From 8f304793cf98513e17dff2642d38988401b6b780 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 11:11:07 +0200 Subject: [PATCH 03/13] add data validation --- src/lib/components/UserRegistration.svelte | 162 ++++++++++++--------- 1 file changed, 95 insertions(+), 67 deletions(-) diff --git a/src/lib/components/UserRegistration.svelte b/src/lib/components/UserRegistration.svelte index d9cd22c8..c53f4cd5 100644 --- a/src/lib/components/UserRegistration.svelte +++ b/src/lib/components/UserRegistration.svelte @@ -1,67 +1,103 @@ - {#if showAlert} { @@ -71,30 +107,22 @@ /> {/if} -{#if showCheckMessage} - { - showCheckMessage = false; - }} - /> -{/if} - - - {#if heading} - {heading} - {/if} +
+ + {#if heading} + {heading} + {/if} -
- {#each data as element, i}{/each} -
- +
+ {#each data as element, i} + + {/each} +
+ + +
From a28ffbaf734b25de430fef68316b5f8d64f98c14 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 13:55:15 +0200 Subject: [PATCH 04/13] rename dropdown component --- .../DataInput/AbstractDropdownItem.svelte | 19 --------------- src/lib/components/DataInput/Select.svelte | 23 +++++++++++++++++++ .../dataAcquisition/[surveyName]/+page.svelte | 4 ++-- 3 files changed, 25 insertions(+), 21 deletions(-) delete mode 100644 src/lib/components/DataInput/AbstractDropdownItem.svelte create mode 100644 src/lib/components/DataInput/Select.svelte diff --git a/src/lib/components/DataInput/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte deleted file mode 100644 index 4a86edb4..00000000 --- a/src/lib/components/DataInput/AbstractDropdownItem.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - -
- { + return { + name: String(v), + value: v + }; + })} + placeholder={$$props.about} + bind:value + /> +
diff --git a/src/routes/dataAcquisition/[surveyName]/+page.svelte b/src/routes/dataAcquisition/[surveyName]/+page.svelte index 1c8ca0ba..85a7957d 100644 --- a/src/routes/dataAcquisition/[surveyName]/+page.svelte +++ b/src/routes/dataAcquisition/[surveyName]/+page.svelte @@ -1,7 +1,7 @@ {#if $$props.label} @@ -19,5 +29,8 @@ })} placeholder={$$props.about} bind:value + on:change={(event) => { + validate(event.srcElement.value); + }} /> From c1cd3f1366fc904cbe054bb17283c85e220119e3 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 14:52:32 +0200 Subject: [PATCH 06/13] make registration and datainput work --- src/lib/components/UserDataInput.svelte | 236 +++++++++++++++------ src/lib/components/UserRegistration.svelte | 53 ++++- 2 files changed, 210 insertions(+), 79 deletions(-) diff --git a/src/lib/components/UserDataInput.svelte b/src/lib/components/UserDataInput.svelte index 08c8a4c1..de829679 100644 --- a/src/lib/components/UserDataInput.svelte +++ b/src/lib/components/UserDataInput.svelte @@ -1,7 +1,74 @@ - -
- + +{#if showAlert} + { + showAlert = false; + }} + /> +{/if} + + +
+ + {#if heading} + {heading} + {/if} + +
+ {#each data as element, i} + {#if 'items' in element} + + {/if} + {/each} +
+ +
diff --git a/src/lib/components/UserRegistration.svelte b/src/lib/components/UserRegistration.svelte index c53f4cd5..aaeb3ada 100644 --- a/src/lib/components/UserRegistration.svelte +++ b/src/lib/components/UserRegistration.svelte @@ -13,6 +13,10 @@ if (!users.get()['dummyUser123']) { createDummyUser(); } + + if (users.get()['tobeRegistered']) { + users.remove('tobeRegistered'); + } }); onDestroy(async () => { @@ -27,21 +31,52 @@ missingValues[3] = inputValues[3] === null || missingValues[2]; } - function reroute(): void { + async function reroute(): void { validate(); + if ( missingValues.every((v) => { - v === false; + return v === false; }) ) { // README: userID is username+password just as a placeholder - users.add(inputValues[0] + inputValues[1], { + + if (users.get()['tobeRegistered']) { + console.log('removing user ', 'tobeRegistered'); + await users.remove('tobeRegistered'); + } + + let userdata = { name: inputValues[0], - id: inputValues[0] + inputValues[1], + id: inputValues[0] + inputValues[2], // README: without the backend, userID is emulated as username + password role: 'user', password: inputValues[2] - }); - users.save(); + }; + + // README: temporary logic to avoid multiple users with the same id + // needs to be handled server side later + let index = 2; + while (userdata.id in users.get()) { + console.log('adding index to avoid multiple users', index); + userdata.id = inputValues[0] + inputValues[2] + String(index); + index += 1; + } + + try { + await users.add('toBeRegistered', userdata); + } catch (error) { + showAlert = true; + alertMessage = 'Fehler bei Registrierung' + error; + } + + try { + await users.save(); + } catch (error) { + showAlert = true; + alertMessage = 'Fehler bei Registrierung' + error; + } + + showAlert = false; goto('/userLand/userDataInput'); } else { showAlert = true; @@ -81,13 +116,13 @@ const heading = 'Als neuer Benutzer registrieren'; let showAlert: boolean = false; - let showCheckMessage: boolean = false; + let alertMessage: string = 'Bitte füllen Sie die benötigten Felder (hervorgehoben) aus.'; let missingValues: boolean[] = [false, false, false, false]; let inputValues: (string | null)[] = [null, null, null, null]; const buttons = [ { - label: 'Registrieren', + label: 'Weiter', onclick: reroute } ]; @@ -97,7 +132,7 @@ {#if showAlert} { From eb5e659ebfd1a2a81ac4ed7a764398c702d0db49 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 15:22:24 +0200 Subject: [PATCH 07/13] add error highlighting to select class --- src/lib/components/DataInput/Select.svelte | 7 +++++-- src/lib/components/UserDataInput.svelte | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/components/DataInput/Select.svelte b/src/lib/components/DataInput/Select.svelte index 4c2e53d5..8f0a3521 100644 --- a/src/lib/components/DataInput/Select.svelte +++ b/src/lib/components/DataInput/Select.svelte @@ -2,7 +2,8 @@ import { Label, Select } from 'flowbite-svelte'; export let value: string; - export let valid: Boolean = true; + export let valid: Boolean; + export let cls: String = ''; export function validate(value: unknown): void { if (value !== undefined && value !== null && value !== '') { @@ -20,7 +21,9 @@
+ {/if} From ee09862b6994ae97fed957d65106850d4b41302a Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 5 Sep 2024 15:34:05 +0200 Subject: [PATCH 08/13] fix error with childrenstore not being saved --- src/lib/components/UserDataInput.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/components/UserDataInput.svelte b/src/lib/components/UserDataInput.svelte index b257c2ff..c4ccf47f 100644 --- a/src/lib/components/UserDataInput.svelte +++ b/src/lib/components/UserDataInput.svelte @@ -61,6 +61,8 @@ if (userAddSuccess) { await users.setLoggedIn(toBeRegistered.id); // set newly registered user as logged in + await children.save(); + await users.save(); goto('/childrengallery'); From 05978c5d7be9aa31656ebde841260a33c7c75948 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Fri, 6 Sep 2024 10:31:03 +0200 Subject: [PATCH 09/13] register users in first step --- src/lib/components/Frontpage.svelte | 6 +- src/lib/components/UserDataInput.svelte | 56 +++--------------- src/lib/components/UserProfile.svelte | 2 +- src/lib/components/UserRegistration.svelte | 68 ++++++++++++++-------- src/lib/stores/basicStore.ts | 25 ++++---- src/lib/stores/userStore.ts | 1 - 6 files changed, 69 insertions(+), 89 deletions(-) diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte index 9e83c6f4..6ae88c77 100644 --- a/src/lib/components/Frontpage.svelte +++ b/src/lib/components/Frontpage.svelte @@ -72,8 +72,10 @@ onMount(async () => { try { - await createDummyUser(); - await users.setLoggedIn(null); + if (!users.get()['dummyUser123']) { + await createDummyUser(); + await users.setLoggedIn(null); + } } catch (error) { console.log('error in frontpage: ', error); } diff --git a/src/lib/components/UserDataInput.svelte b/src/lib/components/UserDataInput.svelte index c4ccf47f..2d3b1bec 100644 --- a/src/lib/components/UserDataInput.svelte +++ b/src/lib/components/UserDataInput.svelte @@ -4,14 +4,14 @@ import Input from '$lib/components/DataInput/Input.svelte'; import Select from '$lib/components/DataInput/Select.svelte'; import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte'; - import { children } from '$lib/stores/childrenStore'; - import { users } from '$lib/stores/userStore'; + import { users, type UserData } from '$lib/stores/userStore'; import { Card, Heading } from 'flowbite-svelte'; import { onDestroy, onMount } from 'svelte'; onMount(() => { users.load(); - toBeRegistered = users.get()['toBeRegistered']; + const userID = users.get()['loggedIn'] as string; + userData = users.get()[userID]; }); onDestroy(() => { @@ -24,49 +24,9 @@ if (missingValues.every((v) => v === false)) { for (let i = 0; i < inputValues.length; ++i) { - toBeRegistered[data[i].name] = inputValues[i]; - } - - let userAddSuccess: boolean = true; - - // attempt at error handling - try { - await children.addUser(toBeRegistered.id); - } catch (error) { - showAlert = true; - alertMessage = 'Fehler bei Registrierung: ' + error; - userAddSuccess = false; - } - - if (userAddSuccess) { - try { - await users.add(toBeRegistered.id, toBeRegistered); - } catch (error) { - showAlert = true; - alertMessage = 'Fehler bei Registrierung: ' + error; - userAddSuccess = false; - } - } - - if (userAddSuccess) { - try { - await users.remove('toBeRegistered'); - } catch (error) { - showAlert = true; - alertMessage = 'Fehler bei Registrierung: ' + error; - userAddSuccess = false; - } - } - - if (userAddSuccess) { - await users.setLoggedIn(toBeRegistered.id); // set newly registered user as logged in - - await children.save(); - - await users.save(); - - goto('/childrengallery'); + userData[data[i].name] = inputValues[i]; } + goto('/childrengallery'); } else { showAlert = true; } @@ -74,13 +34,13 @@ // this stuff here will become backend calls in the end because that is where the data this page will be filled with // will come from. Hence, they are not put into a separate library or anything - function intervalRange(size, startAt = 0, step = 1) { + function intervalRange(size: number, startAt: number = 0, step: number = 1) { return [...Array(size).keys()].map( (i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt) ); } - function numericalRange(size, startAt = 0, step = 1) { + function numericalRange(size: number, startAt: number = 0, step: number = 1) { return [...Array(size).keys()].map((i) => i * step + startAt); } @@ -150,7 +110,7 @@ } ]; - let toBeRegistered: Object = {}; + let userData: UserData = {}; let inputValues = data.map(() => null); diff --git a/src/lib/components/UserProfile.svelte b/src/lib/components/UserProfile.svelte index b43c6ad9..c25881ff 100644 --- a/src/lib/components/UserProfile.svelte +++ b/src/lib/components/UserProfile.svelte @@ -30,7 +30,7 @@ active items={[ { name: 'Übersicht', href: '/childrengallery', current: true }, - { name: 'Profil', href: '/' } + { name: 'Profil', href: '/userLand/userDataInput' } ]} let:item > diff --git a/src/lib/components/UserRegistration.svelte b/src/lib/components/UserRegistration.svelte index aaeb3ada..a483408d 100644 --- a/src/lib/components/UserRegistration.svelte +++ b/src/lib/components/UserRegistration.svelte @@ -3,6 +3,7 @@ import AlertMessage from '$lib/components/AlertMessage.svelte'; import Input from '$lib/components/DataInput/Input.svelte'; import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte'; + import { children } from '$lib/stores/childrenStore'; import { createDummyUser, users } from '$lib/stores/userStore'; import { Card, Heading } from 'flowbite-svelte'; import { onDestroy, onMount } from 'svelte'; @@ -13,10 +14,6 @@ if (!users.get()['dummyUser123']) { createDummyUser(); } - - if (users.get()['tobeRegistered']) { - users.remove('tobeRegistered'); - } }); onDestroy(async () => { @@ -31,7 +28,7 @@ missingValues[3] = inputValues[3] === null || missingValues[2]; } - async function reroute(): void { + async function reroute(): Promise { validate(); if ( @@ -40,44 +37,64 @@ }) ) { // README: userID is username+password just as a placeholder - - if (users.get()['tobeRegistered']) { - console.log('removing user ', 'tobeRegistered'); - await users.remove('tobeRegistered'); - } + const userID = inputValues[0] + inputValues[2]; + let userAddSuccess: boolean = true; let userdata = { name: inputValues[0], - id: inputValues[0] + inputValues[2], // README: without the backend, userID is emulated as username + password + id: userID, // README: without the backend, userID is emulated as username + password role: 'user', password: inputValues[2] }; - // README: temporary logic to avoid multiple users with the same id - // needs to be handled server side later - let index = 2; - while (userdata.id in users.get()) { - console.log('adding index to avoid multiple users', index); - userdata.id = inputValues[0] + inputValues[2] + String(index); - index += 1; - } - try { - await users.add('toBeRegistered', userdata); + await users.add(userID, userdata); } catch (error) { + userAddSuccess = false; showAlert = true; alertMessage = 'Fehler bei Registrierung' + error; } try { - await users.save(); + await children.addUser(userID); } catch (error) { showAlert = true; - alertMessage = 'Fehler bei Registrierung' + error; + alertMessage = 'Fehler bei Registrierung: ' + error; + userAddSuccess = false; + } + + if (userAddSuccess) { + try { + await users.save(); + } catch (error) { + showAlert = true; + alertMessage = 'Fehler bei Registrierung' + error; + userAddSuccess = false; + } } + if (userAddSuccess) { + try { + await children.save(); + } catch (error) { + showAlert = true; + alertMessage = 'Fehler bei Registrierung' + error; + userAddSuccess = false; + } + } + + if (userAddSuccess) { + try { + await users.setLoggedIn(userID); // set newly registered user as logged in + } catch (error) { + showAlert = true; + alertMessage = 'Fehler bei Registrierung' + error; + userAddSuccess = false; + } + } showAlert = false; - goto('/userLand/userDataInput'); + registrationSuccess = true; + goto('/'); } else { showAlert = true; } @@ -116,13 +133,14 @@ const heading = 'Als neuer Benutzer registrieren'; let showAlert: boolean = false; + let registrationSuccess: boolean = false; let alertMessage: string = 'Bitte füllen Sie die benötigten Felder (hervorgehoben) aus.'; let missingValues: boolean[] = [false, false, false, false]; let inputValues: (string | null)[] = [null, null, null, null]; const buttons = [ { - label: 'Weiter', + label: 'Registrieren', onclick: reroute } ]; diff --git a/src/lib/stores/basicStore.ts b/src/lib/stores/basicStore.ts index a2ec16df..3f55b12b 100644 --- a/src/lib/stores/basicStore.ts +++ b/src/lib/stores/basicStore.ts @@ -41,11 +41,13 @@ class BasicStore> { * @param element */ public async add(userID: string, element: unknown): Promise { - this.store.update((data: T) => { - if (userID in data) { - throw new Error(`User ${userID} already exist`); - } + console.log(`adding ${userID}`); + console.log(`registered users: ${Object.keys(get(this.store))}`); + if (userID in get(this.store)) { + throw new Error(`User ${userID} already exist`); + } + this.store.update((data: T) => { data[userID as keyof T] = element as T[keyof T]; return data; @@ -58,11 +60,10 @@ class BasicStore> { * @param element */ public async update(userID: string, element: unknown): Promise { + if (!(userID in get(this.store))) { + throw new Error(`User ${userID} doesn't exist`); + } this.store.update((data) => { - if (!(userID in data)) { - throw new Error(`User ${userID} doesn't exist`); - } - data[userID as keyof T] = element as T[keyof T]; return data; }); @@ -73,11 +74,11 @@ class BasicStore> { * @param userID */ public async remove(userID: string): Promise { - this.store.update((data) => { - if (!(userID in data)) { - throw new Error(`User ${userID} doesn't exist`); - } + if (!(userID in get(this.store))) { + throw new Error(`User ${userID} doesn't exist`); + } + this.store.update((data) => { delete data[userID]; return data; diff --git a/src/lib/stores/userStore.ts b/src/lib/stores/userStore.ts index 0867666b..1cd87e10 100644 --- a/src/lib/stores/userStore.ts +++ b/src/lib/stores/userStore.ts @@ -48,7 +48,6 @@ class UserStore extends BasicStore { username: string, userpw: string ): Promise { - console.log('data: ', this.get()); return Object.values(this.get()).find((userdata) => { if (!userdata || userdata === null) { } else { From cb02ba52e2b6732ef7d112f7d661459421cfd7a3 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Fri, 6 Sep 2024 10:42:25 +0200 Subject: [PATCH 10/13] add retainment of data input for useres --- src/lib/components/UserDataInput.svelte | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/lib/components/UserDataInput.svelte b/src/lib/components/UserDataInput.svelte index 2d3b1bec..c2e025a9 100644 --- a/src/lib/components/UserDataInput.svelte +++ b/src/lib/components/UserDataInput.svelte @@ -4,7 +4,7 @@ import Input from '$lib/components/DataInput/Input.svelte'; import Select from '$lib/components/DataInput/Select.svelte'; import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte'; - import { users, type UserData } from '$lib/stores/userStore'; + import { users } from '$lib/stores/userStore'; import { Card, Heading } from 'flowbite-svelte'; import { onDestroy, onMount } from 'svelte'; @@ -12,6 +12,15 @@ users.load(); const userID = users.get()['loggedIn'] as string; userData = users.get()[userID]; + inputValues = [ + userData['Geburtsjahr'] ? userData['Geburtsjahr'] : null, + userData['Geschlecht'] ? userData['Geschlecht'] : null, + userData['Höchster Bildungsabschluss'] ? userData['Höchster Bildungsabschluss'] : null, + userData['Arbeitszeit/Woche'] ? userData['Arbeitszeit/Woche'] : null, + userData['Familieneinkommen/Jahr'] ? userData['Familieneinkommen/Jahr'] : null, + userData['Beruf'] ? userData['Beruf'] : null + ]; + buttons[0].label = 'Fertig'; }); onDestroy(() => { @@ -52,7 +61,6 @@ name: 'Geburtsjahr', items: numericalRange(100, 1920), about: 'Wählen sie ihr Geburtsjahr aus', - selected: 1988, label: 'Geburtsjahr', required: true }, @@ -60,7 +68,6 @@ name: 'Geschlecht', items: ['männlich', 'weiblich', 'divers'], about: 'Wählen sie ihr Geschlecht aus', - selected: 'weiblich', label: 'Geschlecht', required: true }, @@ -76,7 +83,6 @@ 'Promotion' ], about: 'Wählen sie ihren höchsten Bildungsabschluss aus', - selected: 'Realschulabschluss', required: true, label: 'Höchster Bildungsabschluss' }, @@ -86,7 +92,6 @@ items: intervalRange(13, 0, 5), about: 'Wählen sie ihre Arbeitszeit pro Woche aus. Wählen sie die Zahl, die dem tatsächlichen Wert am nächsten kommt.', - selected: '35-40', label: 'Arbeitszeit/Woche', required: true }, @@ -95,7 +100,6 @@ items: intervalRange(23, 0, 5000), about: 'Wählen sie ihre Jahreseinkommen aus. Wählen sie die Zahl, die dem tatsächlichen Wert am nächsten kommt.', - selected: '50000-55000', label: 'Familieneinkommen/Jahr', required: true }, @@ -110,7 +114,7 @@ } ]; - let userData: UserData = {}; + let userData: object = {}; let inputValues = data.map(() => null); From 1faf6743d8979dadf31b17c2ab59ddda8a1cf511 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Fri, 6 Sep 2024 11:52:02 +0200 Subject: [PATCH 11/13] add hashfunction to avoid pw storage, add debug output for userstore, --- src/lib/components/DataInput/Input.svelte | 4 ++- src/lib/components/Frontpage.svelte | 10 +++---- src/lib/components/UserLogin.svelte | 11 +++----- src/lib/components/UserRegistration.svelte | 33 +++++++++++++--------- src/lib/stores/basicStore.ts | 2 +- src/lib/stores/userStore.ts | 28 +++++++++++++----- 6 files changed, 54 insertions(+), 34 deletions(-) diff --git a/src/lib/components/DataInput/Input.svelte b/src/lib/components/DataInput/Input.svelte index 81063d91..dd8a4ebd 100644 --- a/src/lib/components/DataInput/Input.svelte +++ b/src/lib/components/DataInput/Input.svelte @@ -1,6 +1,5 @@ @@ -39,4 +40,5 @@ on:change={(event) => { validate(event.srcElement.value); }} + on:blur={onBlur} /> diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte index 6ae88c77..62d40116 100644 --- a/src/lib/components/Frontpage.svelte +++ b/src/lib/components/Frontpage.svelte @@ -4,7 +4,7 @@ import CardDisplay from '$lib/components//DataDisplay/CardDisplay.svelte'; import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte'; import { children } from '$lib/stores/childrenStore'; - import { createDummyUser, users } from '$lib/stores/userStore'; + import { createDummyUser, hash, users } from '$lib/stores/userStore'; import { onMount } from 'svelte'; @@ -71,18 +71,18 @@ const props = {}; onMount(async () => { + const h = await hash('123'); try { - if (!users.get()['dummyUser123']) { + if (!users.get()['dummyUser' + h]) { await createDummyUser(); - await users.setLoggedIn(null); } } catch (error) { console.log('error in frontpage: ', error); } try { - if (!children.get()['dummyUser123']) { - await children.addUser('dummyUser123'); + if (!children.get()['dummyUser' + h]) { + await children.addUser('dummyUser' + h); } } catch (error) { console.log('error in frontpage: ', error); diff --git a/src/lib/components/UserLogin.svelte b/src/lib/components/UserLogin.svelte index 9d04209a..60cb93b9 100644 --- a/src/lib/components/UserLogin.svelte +++ b/src/lib/components/UserLogin.svelte @@ -4,7 +4,7 @@ import AlertMessage from '$lib/components/AlertMessage.svelte'; import Input from '$lib/components/DataInput/Input.svelte'; import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte'; - import { createDummyUser, users, type UserData } from '$lib/stores/userStore'; + import { hash, users, type UserData } from '$lib/stores/userStore'; import { Card, Heading } from 'flowbite-svelte'; import { onDestroy, onMount } from 'svelte'; @@ -15,12 +15,12 @@ * the userstore that has been precreated. What fetchWithCredentials does currently will later go into the backend */ async function validateCredentials() { - // FIXME: this should not be set here but in the child component. However, indication of something missing should + // README: this should not be set here but in the child component. However, indication of something missing should // not happen immediatelly in the first round of entry, so this code here defers it until the first hit of the login button. for (let i = 0; i < credentials.length; ++i) { credentialsValid[i] = credentials[i] !== ''; } - const user = await users.fetchWithCredentials(credentials[uid], credentials[pid]); + const user = await users.fetchWithCredentials(credentials[uid], await hash(credentials[pid])); if (!user || user === null) { showAlert = true; @@ -34,7 +34,7 @@ } await users.setLoggedIn(userID); await users.save(); - goto('/childrengallery/'); + goto('/userLand/userDataInput/'); } } @@ -80,9 +80,6 @@ onMount(async () => { // make dummyUser if not already there users.load(); - if (!users.get()['dummyUser123']) { - createDummyUser(); - } // check if credentials are saved const savedUID = JSON.parse(localStorage.getItem('currentUser')); diff --git a/src/lib/components/UserRegistration.svelte b/src/lib/components/UserRegistration.svelte index a483408d..a4e59e38 100644 --- a/src/lib/components/UserRegistration.svelte +++ b/src/lib/components/UserRegistration.svelte @@ -4,16 +4,13 @@ import Input from '$lib/components/DataInput/Input.svelte'; import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte'; import { children } from '$lib/stores/childrenStore'; - import { createDummyUser, users } from '$lib/stores/userStore'; + import { hash, users } from '$lib/stores/userStore'; import { Card, Heading } from 'flowbite-svelte'; import { onDestroy, onMount } from 'svelte'; onMount(async () => { // make dummyUser if not already there users.load(); - if (!users.get()['dummyUser123']) { - createDummyUser(); - } }); onDestroy(async () => { @@ -24,7 +21,7 @@ const mailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; missingValues[0] = inputValues[0] === null || inputValues[0] === ''; // username missingValues[1] = inputValues[1] === null || mailRegex.test(inputValues[1]) === false; // email - missingValues[2] = inputValues[2] === null || inputValues[2] !== inputValues[3]; // password + missingValues[2] = passwd == null || passwd !== passwdTest; // password missingValues[3] = inputValues[3] === null || missingValues[2]; } @@ -37,14 +34,14 @@ }) ) { // README: userID is username+password just as a placeholder - const userID = inputValues[0] + inputValues[2]; + const userID = inputValues[0] + passwd; let userAddSuccess: boolean = true; let userdata = { name: inputValues[0], id: userID, // README: without the backend, userID is emulated as username + password role: 'user', - password: inputValues[2] + password: passwd }; try { @@ -93,7 +90,6 @@ } } showAlert = false; - registrationSuccess = true; goto('/'); } else { showAlert = true; @@ -120,24 +116,30 @@ name: 'Passwort', type: 'password', placeholder: 'Passwort', - required: true + required: true, + onBlur: async (event: Event) => { + passwd = await hash(event.srcElement.value); + } }, { label: 'Passwort wiederholen', name: 'Passwort wiederholen', type: 'password', placeholder: 'Passwort wiederholen', - required: true + required: true, + onBlur: async (event: Event) => { + passwdTest = await hash(event.srcElement.value); + } } ]; const heading = 'Als neuer Benutzer registrieren'; let showAlert: boolean = false; - let registrationSuccess: boolean = false; let alertMessage: string = 'Bitte füllen Sie die benötigten Felder (hervorgehoben) aus.'; let missingValues: boolean[] = [false, false, false, false]; let inputValues: (string | null)[] = [null, null, null, null]; - + let passwd = ''; + let passwdTest = ''; const buttons = [ { label: 'Registrieren', @@ -173,7 +175,12 @@
{#each data as element, i} - + {/each}
diff --git a/src/lib/stores/basicStore.ts b/src/lib/stores/basicStore.ts index 3f55b12b..d0dfae98 100644 --- a/src/lib/stores/basicStore.ts +++ b/src/lib/stores/basicStore.ts @@ -42,7 +42,7 @@ class BasicStore> { */ public async add(userID: string, element: unknown): Promise { console.log(`adding ${userID}`); - console.log(`registered users: ${Object.keys(get(this.store))}`); + console.log(` registered users: ${Object.keys(get(this.store))}`); if (userID in get(this.store)) { throw new Error(`User ${userID} already exist`); } diff --git a/src/lib/stores/userStore.ts b/src/lib/stores/userStore.ts index 1cd87e10..5f8282dc 100644 --- a/src/lib/stores/userStore.ts +++ b/src/lib/stores/userStore.ts @@ -34,6 +34,7 @@ class UserStore extends BasicStore { } public async setLoggedIn(flag: string) { + console.log('set login to: ', flag); this.store.update((data) => { data['loggedIn'] = flag; return data; @@ -41,17 +42,20 @@ class UserStore extends BasicStore { } public async getLoggedIn(): Promise { + console.log('trying to get login'); return this.get()['loggedIn']; } public async fetchWithCredentials( username: string, userpw: string - ): Promise { + ): Promise { + console.log('Fetching with credentials', username); return Object.values(this.get()).find((userdata) => { - if (!userdata || userdata === null) { - } else { + if (userdata && userdata !== null) { return userdata.name === username && userdata.password === userpw; + } else { + return false; } }); } @@ -60,12 +64,22 @@ class UserStore extends BasicStore { const users = new UserStore(); async function createDummyUser(name: string = 'dummyUser') { - await users.add('dummyUser123', { + console.log('Creating dummy user'); + const h = await hash('123'); + await users.add('dummyUser' + h, { name: name, - id: 'dummyUser123', + id: 'dummyUser' + h, role: 'admin', - password: '123' + password: h }); } -export { createDummyUser, users, UserStore, type UserData, type UserList }; +async function hash(input: string): string { + console.log('hash input'); + const encoder = new TextEncoder(); + const data = encoder.encode(input); + const hash = await crypto.subtle.digest('SHA-256', data); + return String(hash); +} + +export { createDummyUser, hash, users, UserStore, type UserData, type UserList }; From 2463c1472cb8163bae13487791d4ac2f4bb7d184 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Fri, 6 Sep 2024 12:01:00 +0200 Subject: [PATCH 12/13] fix style problem --- src/lib/components/DataInput/Select.svelte | 2 +- src/lib/components/Navigation/BottomNavElement.svelte | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/lib/components/DataInput/Select.svelte b/src/lib/components/DataInput/Select.svelte index 8f0a3521..43897695 100644 --- a/src/lib/components/DataInput/Select.svelte +++ b/src/lib/components/DataInput/Select.svelte @@ -22,7 +22,7 @@