add static pages for component testing

src/routes/+layout.svelte

@@ -32,6 +32,6 @@
 	</NavUl>
 </Navbar>
 
-<div class="mx-auto max-w-6xl flex-1 overflow-y-auto p-4 pb-20">
+<div class="mx-auto flex max-w-6xl justify-center overflow-y-auto p-4 pb-20">
 	<slot></slot>
 </div>

src/routes/firstdropdown/+page.svelte

@@ -33,9 +33,9 @@
 
 <AbstractContent showBottomNavbar={true} lastpage={'/'} nextpage={'/nextdropdown'} infopage="/info">
 	<AbstractDataInput
-		data={data_to_display}
 		{heading}
 		itemComponent={AbstractDropdownItem}
 		{description}
+		componentProps={data_to_display}
 	/>
 </AbstractContent>

src/routes/nextdropdown/+page.svelte

@@ -44,7 +44,7 @@
 	infopage="/info"
 >
 	<AbstractDataInput
-		data={dropdownData}
+		componentProps={dropdownData}
 		{heading}
 		itemComponent={AbstractDropdownItem}
 		{description}

src/routes/registerUser/+page.svelte

@@ -1,31 +1,62 @@
 <script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
 	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
-	const data = [
+	import { Input } from 'flowbite-svelte';
+
+	const props = [
+		{
+			componentProps: {
+				label: 'Benutzername',
+				type: 'text',
+				placeholder: 'Wählen sie einen beliebigen Benutzernamen',
+				required: true
+			},
+			itemComponent: Input
+		},
 		{
-			label: 'Benutzername',
-			type: 'text',
-			placeholder: 'Wählen sie einen beliebigen Benutzernamen'
+			componentProps: {
+				label: 'E-Mail (optional)',
+				type: 'email',
+				placeholder: 'E-Mail'
+			},
+			itemComponent: Input
 		},
 		{
-			label: 'E-Mail (optional)',
-			type: 'text',
-			placeholder: 'E-Mail'
+			componentProps: {
+				label: 'Passwort',
+				type: 'password',
+				placeholder: 'Passwort',
+				required: true
+			},
+			itemComponent: Input
 		},
 		{
-			label: 'Passwort',
-			type: 'text',
-			placeholder: 'Passwort'
+			componentProps: {
+				label: 'Passwort wiederholen',
+				type: 'password',
+				placeholder: 'Passwort wiederholen',
+				required: true
+			},
+			itemComponent: Input
 		},
 		{
-			label: 'Passwort wiederholen',
-			type: 'text',
-			placeholder: 'Passwort wiederholen'
+			componentProps: {
+				name: 'Benutzerrolle',
+				items: ['Benutzer/in', 'Admin', 'Forscher/in'],
+				about: 'Welche Rolle soll der neue Benutzer haben?',
+				selected: 'Benutzer/in'
+			},
+			itemComponent: AbstractDropdownItem
 		}
 	];
 	const heading = 'Als neuer Benutzer registrieren';
 	const buttonLabel = 'Weiter';
+	const href = '/registerUser/userDataInput';
 </script>
 
-<div class="flex">
-	<AbstractRegistrationForm {data} {heading} {buttonLabel} />
+<div class="m-1 w-full max-w-md items-center justify-center">
+	<AbstractContent infopage={'/info'} nextpage={'/registerUser/userDataInput'}>
+		<AbstractRegistrationForm {heading} {href} {props} />
+	</AbstractContent>
 </div>

src/routes/registerUser/userDataInput/+page.svelte

@@ -0,0 +1,102 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
+	import { Input } from 'flowbite-svelte';
+
+	function range(size, startAt = 0, step = 1) {
+		return [...Array(size).keys()].map((i) => i * step + startAt);
+	}
+
+	export let role = 'Benutzer/in';
+
+	const heading = 'Benutzerdaten eingeben';
+	const description =
+		'Bitte vervollständigen sie ihre Daten um die Registrierung abzuschließen. Wählen sie dazu das jeweils zutreffende aus der jeweiligen Liste aus';
+	const props = [
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Geburtsjahr',
+				items: range(100, 1920),
+				about: 'Wählen sie ihr Geburtsjahr aus',
+				selected: 1988
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Geschlecht',
+				items: ['männlich', 'weiblich', 'divers'],
+				about: 'Wählen sie ihr Geschlecht aus',
+				selected: 'weiblich'
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Höchster Bildungsabschluss',
+				items: [
+					'kein Schulabschluss',
+					'Hauptschulabschluss',
+					'Realschulabschluss',
+					'Abitur',
+					'Bachelor',
+					'Master',
+					'Promotion'
+				],
+				about: 'Wählen sie ihren höchsten Bildungsabschluss aus',
+				selected: 'Realschulabschluss'
+			}
+		},
+
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Arbeitszeit/Woche',
+				items: range(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: 40
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Familieneinkommen/Jahr',
+				items: range(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
+			}
+		},
+
+		{
+			itemComponent: Input,
+			componentProps: {
+				name: 'Beruf',
+				type: 'text',
+				about: 'Geben sie ihren Beruf an',
+				placeholder: 'Geben sie ihren Beruf an'
+			}
+		}
+	];
+
+	if (role == 'Forscher/in') {
+		props.push({
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Forschungsbereich',
+				items: ['Bereich 1', 'Bereich 2', 'Bereich 3'],
+				about: 'Wählen sie ihren Forschungsbereich aus',
+				selected: 'Bereich 1'
+			}
+		});
+	}
+</script>
+
+<div class="m-1 w-full max-w-md items-center justify-center">
+	<AbstractContent infopage={'/info'} nextpage={'/registerUser/userDataInput'}>
+		<AbstractDataInput {props} {heading} {description} />
+	</AbstractContent>
+</div>

src/routes/registerUser/userDataValidation/+page.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>