frontend: add defaultUser, supporter

frontend/src/lib/components/InputField.svelte

@@ -130,6 +130,9 @@
 		{#if error}
 			<span class="error-message">{error}</span>
 		{/if}
+		{#if readonly}
+			<input {name} type="hidden" bind:value />
+		{/if}
 		{#if type === 'select'}
 			<select
 				{name}

frontend/src/lib/components/UserEditForm.svelte

@@ -14,85 +14,13 @@
 	export let subscriptions;
 
 	/** @type {App.Locals['user']} */
-	const blankUser = {
-		id: 0,
-		email: '',
-		first_name: '',
-		last_name: '',
-		password: '',
-		phone: '',
-		address: '',
-		zip_code: '',
-		city: '',
-		company: '',
-		dateofbirth: '',
-		notes: '',
-		profile_picture: '',
-		payment_status: 0,
-		status: 1,
-		role_id: 1,
-		membership: {
-			id: 0,
-			start_date: '',
-			end_date: '',
-			status: 3,
-			parent_member_id: 0,
-			subscription_model: {
-				id: 0,
-				name: '',
-				details: '',
-				conditions: '',
-				monthly_fee: 0,
-				hourly_rate: 0,
-				included_hours_per_month: 0,
-				included_hours_per_year: 0
-			}
-		},
-		licence: {
-			id: 0,
-			status: 1,
-			number: '',
-			issued_date: '',
-			expiration_date: '',
-			country: '',
-			categories: []
-		},
-		bank_account: {
-			id: 0,
-			mandate_date_signed: '',
-			bank: '',
-			account_holder_name: '',
-			iban: '',
-			bic: '',
-			mandate_reference: ''
-		}
-	};
-
-	/** @type {App.Locals['user'] | null} */
 	export let user;
 
 	/** @type {App.Locals['user']} */
 	export let editor;
 
-	/** @type {App.Locals['user'] } */
-	let localUser;
-
 	let readonlyUser = !hasPrivilige(editor, PERMISSIONS.Update);
 
-	$: {
-		if (user !== undefined && !localUser) {
-			localUser =
-				user === null
-					? { ...blankUser }
-					: {
-							...user,
-							licence: user.licence || blankUser.licence,
-							membership: user.membership || blankUser.membership,
-							bank_account: user.bank_account || blankUser.bank_account
-						};
-		}
-	}
-
 	// $: isNewUser = user === null;
 	$: isLoading = user === undefined;
 
@@ -126,7 +54,9 @@
 	];
 
 	const dispatch = createEventDispatcher();
-	const TABS = ['profile', 'licence', 'membership', 'bankaccount'];
+	const TABS = hasPrivilige(user, PERMISSIONS.Member)
+		? ['profile', 'licence', 'membership', 'bankaccount']
+		: ['profile', 'bankaccount', 'membership'];
 	let activeTab = TABS[0];
 
 	let isUpdating = false,
@@ -140,8 +70,7 @@
 		label: sub?.name ?? ''
 	}));
 	$: selectedSubscriptionModel =
-		subscriptions.find((sub) => sub?.name === localUser.membership?.subscription_model.name) ||
-		null;
+		subscriptions.find((sub) => sub?.name === user.membership?.subscription_model.name) || null;
 
 	/**
 	 * creates groups of categories depending on the first letter
@@ -189,11 +118,11 @@
 
 {#if isLoading}
 	<SmallLoader width={30} message={$t('loading.user_data')} />
-{:else if localUser}
+{:else if user}
 	<form class="content" action="?/updateUser" method="POST" use:enhance={handleUpdate}>
-		<input name="user[id]" type="hidden" bind:value={localUser.id} />
+		<input name="user[id]" type="hidden" bind:value={user.id} />
 		<h1 class="step-title" style="text-align: center;">
-			{localUser.id ? $t('user.edit') : $t('user.create')}
+			{user.id ? $t('user.edit') : $t('user.create')}
 		</h1>
 		{#if form?.success}
 			<h4
@@ -234,7 +163,7 @@
 				name="user[status]"
 				type="select"
 				label={$t('status')}
-				bind:value={localUser.status}
+				bind:value={user.status}
 				options={userStatusOptions}
 				readonly={readonlyUser}
 			/>
@@ -243,11 +172,11 @@
 					name="user[role_id]"
 					type="select"
 					label={$t('user.role')}
-					bind:value={localUser.role_id}
+					bind:value={user.role_id}
 					options={userRoleOptions}
 				/>
 			{/if}
-			{#if hasPrivilige(localUser, PERMISSIONS.Member)}
+			{#if hasPrivilige(user, PERMISSIONS.Member)}
 				<InputField
 					name="user[password]"
 					type="password"
@@ -268,7 +197,7 @@
 			<InputField
 				name="user[first_name]"
 				label={$t('user.first_name')}
-				bind:value={localUser.first_name}
+				bind:value={user.first_name}
 				placeholder={$t('placeholder.first_name')}
 				required={true}
 				readonly={readonlyUser}
@@ -276,7 +205,7 @@
 			<InputField
 				name="user[last_name]"
 				label={$t('user.last_name')}
-				bind:value={localUser.last_name}
+				bind:value={user.last_name}
 				placeholder={$t('placeholder.last_name')}
 				required={true}
 				readonly={readonlyUser}
@@ -284,14 +213,14 @@
 			<InputField
 				name="user[company]"
 				label={$t('company')}
-				bind:value={localUser.company}
+				bind:value={user.company}
 				placeholder={$t('placeholder.company')}
 			/>
 			<InputField
 				name="user[email]"
 				type="email"
 				label={$t('user.email')}
-				bind:value={localUser.email}
+				bind:value={user.email}
 				placeholder={$t('placeholder.email')}
 				required={true}
 			/>
@@ -299,35 +228,39 @@
 				name="user[phone]"
 				type="tel"
 				label={$t('user.phone')}
-				bind:value={localUser.phone}
+				bind:value={user.phone}
 				placeholder={$t('placeholder.phone')}
 			/>
-			{#if hasPrivilige(localUser, PERMISSIONS.Member)}
+			{#if hasPrivilige(user, PERMISSIONS.Member)}
 				<InputField
 					name="user[dateofbirth]"
 					type="date"
 					label={$t('user.dateofbirth')}
-					bind:value={localUser.dateofbirth}
+					bind:value={user.dateofbirth}
 					placeholder={$t('placeholder.dateofbirth')}
+					required={true}
 					readonly={readonlyUser}
 				/>
 			{/if}
 			<InputField
 				name="user[address]"
 				label={$t('address')}
-				bind:value={localUser.address}
+				bind:value={user.address}
+				required={true}
 				placeholder={$t('placeholder.address')}
 			/>
 			<InputField
 				name="user[zip_code]"
 				label={$t('zip_code')}
-				bind:value={localUser.zip_code}
+				bind:value={user.zip_code}
+				required={true}
 				placeholder={$t('placeholder.zip_code')}
 			/>
 			<InputField
 				name="user[city]"
 				label={$t('city')}
-				bind:value={localUser.city}
+				bind:value={user.city}
+				required={true}
 				placeholder={$t('placeholder.city')}
 			/>
 			{#if !readonlyUser}
@@ -335,22 +268,22 @@
 					name="user[notes]"
 					type="textarea"
 					label={$t('notes')}
-					bind:value={localUser.notes}
+					bind:value={user.notes}
 					placeholder={$t('placeholder.notes', {
-						values: { name: localUser.first_name || '' }
+						values: { name: user.first_name || '' }
 					})}
 					rows={10}
 				/>
 			{/if}
 		</div>
 
-		{#if hasPrivilige(localUser, PERMISSIONS.Member)}
+		{#if hasPrivilige(user, PERMISSIONS.Member)}
 			<div class="tab-content" style="display: {activeTab === 'licence' ? 'block' : 'none'}">
 				<InputField
 					name="user[licence][status]"
 					type="select"
 					label={$t('status')}
-					bind:value={localUser.licence.status}
+					bind:value={user.licence.status}
 					options={licenceStatusOptions}
 					readonly={readonlyUser}
 				/>
@@ -358,7 +291,7 @@
 					name="user[licence][number]"
 					type="text"
 					label={$t('licence_number')}
-					bind:value={localUser.licence.number}
+					bind:value={user.licence.number}
 					placeholder={$t('placeholder.licence_number')}
 					toUpperCase={true}
 					readonly={readonlyUser}
@@ -367,7 +300,7 @@
 					name="user[licence][issued_date]"
 					type="date"
 					label={$t('issued_date')}
-					bind:value={localUser.licence.issued_date}
+					bind:value={user.licence.issued_date}
 					placeholder={$t('placeholder.issued_date')}
 					readonly={readonlyUser}
 				/>
@@ -375,14 +308,14 @@
 					name="user[licence][expiration_date]"
 					type="date"
 					label={$t('expiration_date')}
-					bind:value={localUser.licence.expiration_date}
+					bind:value={user.licence.expiration_date}
 					placeholder={$t('placeholder.expiration_date')}
 					readonly={readonlyUser}
 				/>
 				<InputField
 					name="user[licence][country]"
 					label={$t('country')}
-					bind:value={localUser.licence.country}
+					bind:value={user.licence.country}
 					placeholder={$t('placeholder.issuing_country')}
 					readonly={readonlyUser}
 				/>
@@ -401,10 +334,8 @@
 											name="user[licence][categories][]"
 											value={JSON.stringify(category)}
 											label={category.category}
-											checked={localUser.licence.categories != null &&
-												localUser.licence.categories.some(
-													(cat) => cat.category === category.category
-												)}
+											checked={user.licence.categories != null &&
+												user.licence.categories.some((cat) => cat.category === category.category)}
 										/>
 									</div>
 									<span class="checkbox-description">
@@ -422,7 +353,7 @@
 				name="user[membership][status]"
 				type="select"
 				label={$t('status')}
-				bind:value={localUser.membership.status}
+				bind:value={user.membership.status}
 				options={membershipStatusOptions}
 				readonly={readonlyUser}
 			/>
@@ -430,12 +361,12 @@
 				name="user[membership][subscription_model][name]"
 				type="select"
 				label={$t('subscription.subscription')}
-				bind:value={localUser.membership.subscription_model.name}
+				bind:value={user.membership.subscription_model.name}
 				options={subscriptionModelOptions}
-				readonly={readonlyUser}
+				readonly={readonlyUser || !hasPrivilige(user, PERMISSIONS.Member)}
 			/>
 			<div class="subscription-info">
-				{#if hasPrivilige(editor, PERMISSIONS.Member)}
+				{#if hasPrivilige(user, PERMISSIONS.Member)}
 					<div class="subscription-column">
 						<p>
 							<strong>{$t('subscription.monthly_fee')}:</strong>
@@ -476,7 +407,7 @@
 				name="user[membership][start_date]"
 				type="date"
 				label={$t('start')}
-				bind:value={localUser.membership.start_date}
+				bind:value={user.membership.start_date}
 				placeholder={$t('placeholder.start_date')}
 				readonly={readonlyUser}
 			/>
@@ -484,16 +415,16 @@
 				name="user[membership][end_date]"
 				type="date"
 				label={$t('end')}
-				bind:value={localUser.membership.end_date}
+				bind:value={user.membership.end_date}
 				placeholder={$t('placeholder.end_date')}
 				readonly={readonlyUser}
 			/>
-			{#if hasPrivilige(editor, PERMISSIONS.Member)}
+			{#if hasPrivilige(user, PERMISSIONS.Member)}
 				<InputField
 					name="user[membership][parent_member_id]"
 					type="number"
 					label={$t('parent_member_id')}
-					bind:value={localUser.membership.parent_member_id}
+					bind:value={user.membership.parent_member_id}
 					placeholder={$t('placeholder.parent_member_id')}
 					readonly={readonlyUser}
 				/>
@@ -503,33 +434,34 @@
 			<InputField
 				name="user[bank_account][account_holder_name]"
 				label={$t('bank_account_holder')}
-				bind:value={localUser.bank_account.account_holder_name}
+				bind:value={user.bank_account.account_holder_name}
 				placeholder={$t('placeholder.bank_account_holder')}
 			/>
 			<InputField
 				name="user[bank_account][bank_name]"
 				label={$t('bank_name')}
-				bind:value={localUser.bank_account.bank}
+				bind:value={user.bank_account.bank}
 				placeholder={$t('placeholder.bank_name')}
 			/>
 			<InputField
 				name="user[bank_account][iban]"
 				label={$t('iban')}
-				bind:value={localUser.bank_account.iban}
+				bind:value={user.bank_account.iban}
 				placeholder={$t('placeholder.iban')}
+				required={true}
 				toUpperCase={true}
 			/>
 			<InputField
 				name="user[bank_account][bic]"
 				label={$t('bic')}
-				bind:value={localUser.bank_account.bic}
+				bind:value={user.bank_account.bic}
 				placeholder={$t('placeholder.bic')}
 				toUpperCase={true}
 			/>
 			<InputField
 				name="user[bank_account][mandate_reference]"
 				label={$t('mandate_reference')}
-				bind:value={localUser.bank_account.mandate_reference}
+				bind:value={user.bank_account.mandate_reference}
 				placeholder={$t('placeholder.mandate_reference')}
 				readonly={readonlyUser}
 			/>
@@ -537,7 +469,7 @@
 				name="user[bank_account][mandate_date_signed]"
 				label={$t('mandate_date_signed')}
 				type="date"
-				bind:value={localUser.bank_account.mandate_date_signed}
+				bind:value={user.bank_account.mandate_date_signed}
 				readonly={true}
 			/>
 		</div>