From 03b3683b638055c9251c9808eece0e6268bff575 Mon Sep 17 00:00:00 2001
From: Alex <$(pass /github/email)>
Date: Thu, 20 Feb 2025 10:16:48 +0100
Subject: [PATCH] frontend moved select fields to themed coloring, added
 permissions to usereditmodal

---
 frontend/src/lib/components/InputField.svelte |  6 +-
 .../src/lib/components/UserEditForm.svelte    | 80 +++++++++++--------
 frontend/src/lib/css/styles.min.css           |  7 +-
 .../src/routes/auth/about/[id]/+page.svelte   |  1 +
 4 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/components/InputField.svelte b/frontend/src/lib/components/InputField.svelte
index b1f2bb1..0802071 100644
--- a/frontend/src/lib/components/InputField.svelte
+++ b/frontend/src/lib/components/InputField.svelte
@@ -38,7 +38,7 @@
 	export let readonly = false;
 
 	/** @type {string} */
-	export let backgroundColor = '--surface0'; // New prop for background color
+	export let backgroundColor = '--surface0';
 
 	/**
 	 * @param {Event} event - The input event
@@ -110,7 +110,7 @@
 
 	$: error = validateField(name, value, required);
 	$: selectedOption = options.find((option) => option.value == value);
-	$: selectedColor = selectedOption ? selectedOption.color : '';
+	$: selectedColor = selectedOption ? `var(${selectedOption.color})` : '';
 </script>
 
 <div
@@ -143,6 +143,7 @@
 				{required}
 				class="input select"
 				style={selectedColor ? `color: ${selectedColor};` : ''}
+				disabled={readonly}
 			>
 				{#each options as option}
 					<option value={option.value}>{option.label}</option>
@@ -270,6 +271,7 @@
 	.select {
 		padding-right: 1.5em;
 		background-color: var(--surface0);
+		font-weight: bold;
 	}
 	.input-error-container {
 		display: flex;
diff --git a/frontend/src/lib/components/UserEditForm.svelte b/frontend/src/lib/components/UserEditForm.svelte
index ec31aef..022761f 100644
--- a/frontend/src/lib/components/UserEditForm.svelte
+++ b/frontend/src/lib/components/UserEditForm.svelte
@@ -70,6 +70,9 @@
 	/** @type {App.Locals['user'] | null} */
 	export let user;
 
+	/** @type {Number} */
+	export let role_id;
+
 	/** @type {App.Locals['user'] } */
 	let localUser;
 
@@ -94,29 +97,28 @@
 	export let licence_categories;
 
 	const userStatusOptions = [
-		{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert"
-		{ value: 2, label: $t('userStatus.2'), color: '#90EE90' }, // Light green for "Verifiziert"
-		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
-		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
-		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
+		{ value: 1, label: $t('userStatus.1'), color: '--subtext1' }, // Grey for "Nicht verifiziert"
+		{ value: 2, label: $t('userStatus.2'), color: '--light-green' }, // Light green for "Verifiziert"
+		{ value: 3, label: $t('userStatus.3'), color: '--green' }, // Green for "Aktiv"
+		{ value: 4, label: $t('userStatus.4'), color: '--pink' }, // Pink for "Passiv"
+		{ value: 5, label: $t('userStatus.5'), color: '--red' } // Red for "Deaktiviert"
 	];
-
 	const userRoleOptions = [
-		{ value: 0, label: $t('userRole.0'), color: '#b1b1b1' }, // Grey for "Mitglied"
-		{ value: 1, label: $t('userRole.1'), color: '#00bc00' }, // Green for "Betrachter"
-		{ value: 4, label: $t('userRole.4'), color: '#FFC0CB' }, // Pink for "Bearbeiter"
-		{ value: 8, label: $t('userRole.8'), color: '#FF4646' } // Red for "Admin"
+		{ value: 0, label: $t('userRole.0'), color: '--subtext1' }, // Grey for "Nicht verifiziert"
+		{ value: 1, label: $t('userRole.1'), color: '--light-green' }, // Light green for "Verifiziert"
+		{ value: 4, label: $t('userRole.4'), color: '--green' }, // Green for "Aktiv"
+		{ value: 8, label: $t('userRole.8'), color: '--pink' } // Pink for "Passiv"
 	];
 	const membershipStatusOptions = [
-		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
-		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
-		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
+		{ value: 3, label: $t('userStatus.3'), color: '--green' }, // Green for "Aktiv"
+		{ value: 4, label: $t('userStatus.4'), color: '--pink' }, // Pink for "Passiv"
+		{ value: 5, label: $t('userStatus.5'), color: '--red' } // Red for "Deaktiviert"
 	];
 	const licenceStatusOptions = [
-		{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert"
-		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
-		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
-		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
+		{ value: 1, label: $t('userStatus.1'), color: '--subtext1' }, // Grey for "Nicht verifiziert"
+		{ value: 3, label: $t('userStatus.3'), color: '--green' }, // Green for "Aktiv"
+		{ value: 4, label: $t('userStatus.4'), color: '--pink' }, // Pink for "Passiv"
+		{ value: 5, label: $t('userStatus.5'), color: '--red' } // Red for "Deaktiviert"
 	];
 
 	const dispatch = createEventDispatcher();
@@ -211,13 +213,6 @@
 			{/each}
 		{/if}
 
-		<input
-			type="hidden"
-			hidden
-			name="user[profile_picture]"
-			bind:value={localUser.profile_picture}
-		/>
-
 		<div class="button-container">
 			{#each TABS as tab}
 				<button
@@ -237,6 +232,7 @@
 				label={$t('status')}
 				bind:value={localUser.status}
 				options={userStatusOptions}
+				readonly={role_id === 0}
 			/>
 			{#if localUser.role_id === 8}
 				<InputField
@@ -269,6 +265,7 @@
 				bind:value={localUser.first_name}
 				placeholder={$t('placeholder.first_name')}
 				required={true}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[last_name]"
@@ -276,6 +273,7 @@
 				bind:value={localUser.last_name}
 				placeholder={$t('placeholder.last_name')}
 				required={true}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[company]"
@@ -304,6 +302,7 @@
 				label={$t('dateofbirth')}
 				bind:value={localUser.dateofbirth}
 				placeholder={$t('placeholder.dateofbirth')}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[address]"
@@ -323,16 +322,18 @@
 				bind:value={localUser.city}
 				placeholder={$t('placeholder.city')}
 			/>
-			<InputField
-				name="user[notes]"
-				type="textarea"
-				label={$t('notes')}
-				bind:value={localUser.notes}
-				placeholder={$t('placeholder.notes', {
-					values: { name: localUser.first_name || '' }
-				})}
-				rows={10}
-			/>
+			{#if localUser.role_id > 0}
+				<InputField
+					name="user[notes]"
+					type="textarea"
+					label={$t('notes')}
+					bind:value={localUser.notes}
+					placeholder={$t('placeholder.notes', {
+						values: { name: localUser.first_name || '' }
+					})}
+					rows={10}
+				/>
+			{/if}
 		</div>
 		<div class="tab-content" style="display: {activeTab === 'licence' ? 'block' : 'none'}">
 			<InputField
@@ -341,6 +342,7 @@
 				label={$t('status')}
 				bind:value={localUser.licence.status}
 				options={licenceStatusOptions}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[licence][number]"
@@ -349,6 +351,7 @@
 				bind:value={localUser.licence.number}
 				placeholder={$t('placeholder.licence_number')}
 				toUpperCase={true}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[licence][issued_date]"
@@ -356,6 +359,7 @@
 				label={$t('issued_date')}
 				bind:value={localUser.licence.issued_date}
 				placeholder={$t('placeholder.issued_date')}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[licence][expiration_date]"
@@ -363,12 +367,14 @@
 				label={$t('expiration_date')}
 				bind:value={localUser.licence.expiration_date}
 				placeholder={$t('placeholder.expiration_date')}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[licence][country]"
 				label={$t('country')}
 				bind:value={localUser.licence.country}
 				placeholder={$t('placeholder.issuing_country')}
+				readonly={role_id === 0}
 			/>
 			<div class="licence-categories">
 				<h3>{$t('licence_categories')}</h3>
@@ -407,6 +413,7 @@
 				label={$t('status')}
 				bind:value={localUser.membership.status}
 				options={membershipStatusOptions}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[membership][subscription_model][name]"
@@ -414,6 +421,7 @@
 				label={$t('subscription.subscription')}
 				bind:value={localUser.membership.subscription_model.name}
 				options={subscriptionModelOptions}
+				readonly={role_id === 0}
 			/>
 			<div class="subscription-info">
 				<div class="subscription-column">
@@ -457,6 +465,7 @@
 				label={$t('start')}
 				bind:value={localUser.membership.start_date}
 				placeholder={$t('placeholder.start_date')}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[membership][end_date]"
@@ -464,6 +473,7 @@
 				label={$t('end')}
 				bind:value={localUser.membership.end_date}
 				placeholder={$t('placeholder.end_date')}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[membership][parent_member_id]"
@@ -471,6 +481,7 @@
 				label={$t('parent_member_id')}
 				bind:value={localUser.membership.parent_member_id}
 				placeholder={$t('placeholder.parent_member_id')}
+				readonly={role_id === 0}
 			/>
 		</div>
 		<div class="tab-content" style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}">
@@ -505,6 +516,7 @@
 				label={$t('mandate_reference')}
 				bind:value={localUser.bank_account.mandate_reference}
 				placeholder={$t('placeholder.mandate_reference')}
+				readonly={role_id === 0}
 			/>
 			<InputField
 				name="user[bank_account][mandate_date_signed]"
diff --git a/frontend/src/lib/css/styles.min.css b/frontend/src/lib/css/styles.min.css
index 964e502..1325a51 100644
--- a/frontend/src/lib/css/styles.min.css
+++ b/frontend/src/lib/css/styles.min.css
@@ -9,7 +9,8 @@
 	--maroon: #eba0ac;
 	--peach: #fab387;
 	--yellow: #f9e2af;
-	--green: #a6e3a1;
+	--light-green: #b5e8b0;
+	--green: #3a8f46;
 	--teal: #94e2d5;
 	--sky: #89dceb;
 	--sapphire: #74c7ec;
@@ -40,7 +41,8 @@
 	--bright-maroon: #e64553;
 	--bright-peach: #fe640b;
 	--bright-yellow: #df8e1d;
-	--bright-green: #40a02b;
+	--bright-light-green: #52b05d;
+	--bright-green: #1b9200;
 	--bright-teal: #179299;
 	--bright-sky: #04a5e5;
 	--bright-sapphire: #209fb5;
@@ -72,6 +74,7 @@
 	--maroon: var(--bright-maroon);
 	--peach: var(--bright-peach);
 	--yellow: var(--bright-yellow);
+	--light-green: var(--bright-light-green);
 	--green: var(--bright-green);
 	--teal: var(--bright-teal);
 	--sky: var(--bright-sky);
diff --git a/frontend/src/routes/auth/about/[id]/+page.svelte b/frontend/src/routes/auth/about/[id]/+page.svelte
index 65477c7..7b680c0 100644
--- a/frontend/src/routes/auth/about/[id]/+page.svelte
+++ b/frontend/src/routes/auth/about/[id]/+page.svelte
@@ -93,6 +93,7 @@
 			{licence_categories}
 			on:close={close}
 			on:cancel={close}
+			role_id={user.role_id}
 		/>
 	</Modal>
 {/if}