feat: display groups on the account page (#296)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/settings/admin/users/[id]/+page.server.ts

@@ -5,5 +5,8 @@ import type { PageServerLoad } from './$types';
 export const load: PageServerLoad = async ({ params, cookies }) => {
 	const userService = new UserService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
 	const user = await userService.get(params.id);
-	return user;
+
+	return {
+		user
+	};
 };

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -6,18 +6,34 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import CustomClaimService from '$lib/services/custom-claim-service';
+	import UserGroupService from '$lib/services/user-group-service';
 	import UserService from '$lib/services/user-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideChevronLeft } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
+	import UserGroupSelection from '$lib/components/user-group-selection.svelte';
 	import UserForm from '../user-form.svelte';
 
 	let { data } = $props();
-	let user = $state(data);
+	let user = $state({
+		...data.user,
+		userGroupIds: data.user.userGroups.map((g) => g.id)
+	});
 
 	const userService = new UserService();
 	const customClaimService = new CustomClaimService();
+	const userGroupService = new UserGroupService();
+
+	async function updateUserGroups(userIds: string[]) {
+		await userService
+			.updateUserGroups(user.id, userIds)
+			.then(() => toast.success('User groups updated successfully'))
+			.catch((e) => {
+				axiosErrorToast(e);
+			});
+	}
 
 	async function updateUser(updatedUser: UserCreate) {
 		let success = true;
@@ -80,6 +96,28 @@
 	</Card.Content>
 </Card.Root>
 
+<CollapsibleCard
+	id="user-groups"
+	title="User Groups"
+	description="Manage which groups this user belongs to."
+>
+	{#await userGroupService.list() then groups}
+		<UserGroupSelection
+			{groups}
+			bind:selectedGroupIds={user.userGroupIds}
+			selectionDisabled={!!user.ldapId && $appConfigStore.ldapEnabled}
+		/>
+	{/await}
+
+	<div class="mt-5 flex justify-end">
+		<Button
+			on:click={() => updateUserGroups(user.userGroupIds)}
+			disabled={!!user.ldapId && $appConfigStore.ldapEnabled}
+			type="submit">Save</Button
+		>
+	</div>
+</CollapsibleCard>
+
 <CollapsibleCard
 	id="user-custom-claims"
 	title="Custom Claims"
@@ -87,6 +125,6 @@
 >
 	<CustomClaimsInput bind:customClaims={user.customClaims} />
 	<div class="mt-5 flex justify-end">
-		<Button onclick={updateCustomClaims} type="submit">Save</Button>
+		<Button on:click={updateCustomClaims} type="submit">Save</Button>
 	</div>
 </CollapsibleCard>