feat: implement user management settings page with user editing functionality

web/src/lib/components/app-sidebar.svelte

@@ -1,92 +1,94 @@
 <script lang="ts" module>
-	import LifeBuoy from '@lucide/svelte/icons/life-buoy';
-	import Send from '@lucide/svelte/icons/send';
-	import TvIcon from '@lucide/svelte/icons/tv';
-	import LayoutPanelLeft from '@lucide/svelte/icons/layout-panel-left';
-	import {PUBLIC_VERSION} from '$env/static/public';
+    import {Settings, LifeBuoy, Send, LayoutPanelLeft, TvIcon} from "lucide-svelte";
+    import {PUBLIC_VERSION} from '$env/static/public';
 
-	const data = {
-		navMain: [
-			{
-				title: 'TV',
-				url: '/dashboard/tv',
-				icon: TvIcon,
-				isActive: true,
-				items: [
-					{
-						title: 'Add a show',
-						url: '/dashboard/tv/add-show'
-					},
-					{
-						title: 'Torrents',
-						url: '/dashboard/tv/torrents'
-					},
-					{
-						title: 'Requests',
-						url: '/dashboard/tv/requests'
-					}
-				]
-			}
-		],
-		navSecondary: [
-			{
-				title: 'Support',
-				url: '#',
-				icon: LifeBuoy
-			},
-			{
-				title: 'Feedback',
-				url: '#',
-				icon: Send
-			}
-		],
-		projects: [
-			{
-				name: 'Dashboard',
-				url: '/dashboard',
-				icon: LayoutPanelLeft
-			}
-		]
-	};
+    const data = {
+        navMain: [
+            {
+                title: 'TV',
+                url: '/dashboard/tv',
+                icon: TvIcon,
+                isActive: true,
+                items: [
+                    {
+                        title: 'Add a show',
+                        url: '/dashboard/tv/add-show'
+                    },
+                    {
+                        title: 'Torrents',
+                        url: '/dashboard/tv/torrents'
+                    },
+                    {
+                        title: 'Requests',
+                        url: '/dashboard/tv/requests'
+                    }
+                ]
+            }
+        ],
+        navSecondary: [
+            {
+                title: 'Support',
+                url: '#',
+                icon: LifeBuoy
+            },
+            {
+                title: 'Feedback',
+                url: '#',
+                icon: Send
+            }
+        ],
+        projects: [
+            {
+                name: 'Dashboard',
+                url: '/dashboard',
+                icon: LayoutPanelLeft
+            },
+            {
+                name: 'Settings',
+                url: '/dashboard/settings',
+                icon: Settings
+            }
+        ]
+    };
 </script>
 
 <script lang="ts">
-	import NavMain from '$lib/components/nav-main.svelte';
-	import NavProjects from '$lib/components/nav-projects.svelte';
-	import NavSecondary from '$lib/components/nav-secondary.svelte';
-	import NavUser from '$lib/components/nav-user.svelte';
-	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import type {ComponentProps} from 'svelte';
-	import logo from '$lib/images/logo.svg';
-	import {base} from '$app/paths';
+    import NavMain from '$lib/components/nav-main.svelte';
+    import NavProjects from '$lib/components/nav-projects.svelte';
+    import NavSecondary from '$lib/components/nav-secondary.svelte';
+    import NavUser from '$lib/components/nav-user.svelte';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import type {ComponentProps} from 'svelte';
+    import logo from '$lib/images/logo.svg';
+    import {base} from '$app/paths';
 
-	let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
+    let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
 </script>
 
-<Sidebar.Root bind:ref variant="inset" {...restProps}>
-	<Sidebar.Header>
-		<Sidebar.Menu>
-			<Sidebar.MenuItem>
-				<Sidebar.MenuButton size="lg">
-					{#snippet child({props})}
-						<a href="{base}/dashboard" {...props}>
-							<img class="size-12" src={logo} alt="Media Manager Logo"/>
-							<div class="grid flex-1 text-left text-sm leading-tight">
-								<span class="truncate font-semibold">Media Manager</span>
-								<span class="truncate text-xs">v{PUBLIC_VERSION}</span>
-							</div>
-						</a>
-					{/snippet}
-				</Sidebar.MenuButton>
-			</Sidebar.MenuItem>
-		</Sidebar.Menu>
-	</Sidebar.Header>
-	<Sidebar.Content>
-		<NavMain items={data.navMain}/>
-		<NavProjects projects={data.projects}/>
-		<NavSecondary items={data.navSecondary} class="mt-auto"/>
-	</Sidebar.Content>
-	<Sidebar.Footer>
-		<NavUser/>
-	</Sidebar.Footer>
+<Sidebar.Root {...restProps} bind:ref variant="inset">
+    <Sidebar.Header>
+        <Sidebar.Menu>
+            <Sidebar.MenuItem>
+                <Sidebar.MenuButton size="lg">
+                    {#snippet child({props})}
+                        <a href="{base}/dashboard" {...props}>
+                            <img class="size-12" src={logo} alt="Media Manager Logo"/>
+                            <div class="grid flex-1 text-left text-sm leading-tight">
+                                <span class="truncate font-semibold">Media Manager</span>
+                                <span class="truncate text-xs">v{PUBLIC_VERSION}</span>
+                            </div>
+                        </a>
+                    {/snippet}
+                </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+        </Sidebar.Menu>
+    </Sidebar.Header>
+    <Sidebar.Content>
+        <NavMain items={data.navMain}/>
+        <NavProjects projects={data.projects}/>
+        <NavSecondary class="mt-auto" items={data.navSecondary}/>
+    </Sidebar.Content>
+    <Sidebar.Footer>
+        <NavUser/>
+    </Sidebar.Footer>
 </Sidebar.Root>

web/src/lib/components/nav-projects.svelte

@@ -66,11 +66,5 @@
 				</DropdownMenu.Root>
 			</Sidebar.MenuItem>
 		{/each}
-		<Sidebar.MenuItem>
-			<Sidebar.MenuButton>
-				<Ellipsis/>
-				<span>More</span>
-			</Sidebar.MenuButton>
-		</Sidebar.MenuItem>
 	</Sidebar.Menu>
 </Sidebar.Group>

web/src/lib/components/torrent-table.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import {
         convertTorrentSeasonRangeToIntegerRange,
         getTorrentQualityString,

web/src/lib/components/user-data-table.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+    import type {User} from '$lib/types.js';
+    import CheckmarkX from '$lib/components/checkmark-x.svelte';
+    import * as Table from '$lib/components/ui/table/index.js';
+    import {Button} from "$lib/components/ui/button/index.js";
+    import {env} from "$env/dynamic/public";
+    import {toast} from "svelte-sonner";
+    import * as Dialog from "$lib/components/ui/dialog/index.js";
+    import {getTorrentQualityString} from "$lib/utils";
+    import {Label} from "$lib/components/ui/label/index.js";
+    import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
+    import {Input} from "$lib/components/ui/input/index.js";
+    import {invalidateAll} from "$app/navigation";
+
+    let {users}: { users: User[] } = $props();
+    let sortedUsers = $derived(users.sort((a, b) => a.email.localeCompare(b.email)));
+    let selectedUser: User | null = $state(null);
+    let newPassword: string = $state('');
+    let dialogOpen = $state(false);
+
+    async function saveUser() {
+        if (!selectedUser) return;
+
+        try {
+            const response = await fetch(`${env.PUBLIC_API_URL}/users/${selectedUser.id}`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    is_verified: selectedUser.is_verified,
+                    is_active: selectedUser.is_active,
+                    is_superuser: selectedUser.is_superuser,
+                    ...newPassword !== "" && {password: newPassword}
+                })
+            });
+
+            if (response.ok) {
+                toast.success(`User ${selectedUser.email} updated successfully.`);
+                dialogOpen = false;
+
+                const idx = sortedUsers.findIndex(u => u.id === selectedUser.id);
+                if (idx !== -1) {
+                    sortedUsers[idx] = selectedUser;
+                }
+
+                selectedUser = null;
+            } else {
+                const errorText = await response.text();
+                console.error(`Failed to update user ${response.statusText}`, errorText);
+                toast.error(`Failed to update user: ${response.statusText}`);
+            }
+        } catch (error) {
+            console.error('Error updating user:', error);
+            toast.error('Error updating user: ' + (error instanceof Error ? error.message : String(error)));
+        } finally {
+            newPassword = '';
+        }
+    }
+</script>
+
+<Table.Root>
+    <Table.Caption>A list of all users.</Table.Caption>
+    <Table.Header>
+        <Table.Row>
+            <Table.Head>Email</Table.Head>
+            <Table.Head>Verified</Table.Head>
+            <Table.Head>Active</Table.Head>
+            <Table.Head>Admin</Table.Head>
+        </Table.Row>
+    </Table.Header>
+    <Table.Body>
+        {#each sortedUsers as user}
+            <Table.Row>
+                <Table.Cell class="font-medium">
+                    {user.email}
+                </Table.Cell>
+                <Table.Cell>
+                    <CheckmarkX state={user.is_verified}/>
+                </Table.Cell>
+                <Table.Cell>
+                    <CheckmarkX state={user.is_active}/>
+                </Table.Cell>
+                <Table.Cell>
+                    <CheckmarkX state={user.is_superuser}/>
+                </Table.Cell>
+                <Table.Cell>
+                    <Button variant="secondary" onclick={() => {selectedUser=user; dialogOpen=true}}>
+                        Edit
+                    </Button>
+                </Table.Cell>
+            </Table.Row>
+        {/each}
+    </Table.Body>
+</Table.Root>
+<Dialog.Root bind:open={dialogOpen}>
+    <Dialog.Content class="max-w-[600px] w-full rounded-lg shadow-lg bg-white p-6">
+        <Dialog.Header>
+            <Dialog.Title class="text-xl font-semibold mb-1">
+                Edit user
+            </Dialog.Title>
+            <Dialog.Description class="text-sm text-gray-500 mb-4">
+                Edit {selectedUser?.email}
+            </Dialog.Description>
+        </Dialog.Header>
+        <div class="space-y-6">
+            <!-- Verified -->
+            <div>
+                <Label class="block text-sm font-medium mb-1" for="verified">Verified</Label>
+                <RadioGroup.Root
+                        class="flex gap-4"
+                        onValueChange={(v) => { if (selectedUser) selectedUser.is_verified = v === 'true'; }}
+                        value={selectedUser?.is_verified ? 'true' : 'false'}>
+                    <div class="flex items-center gap-1">
+                        <RadioGroup.Item class="accent-green-600" id="verified-true" value="true"/>
+                        <Label class="text-sm" for="verified-true">True</Label>
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <RadioGroup.Item class="accent-red-600" id="verified-false" value="false"/>
+                        <Label class="text-sm" for="verified-false">False</Label>
+                    </div>
+                </RadioGroup.Root>
+            </div>
+            <hr/>
+            <!-- Active -->
+            <div>
+                <Label class="block text-sm font-medium mb-1" for="active">Active</Label>
+                <RadioGroup.Root
+                        class="flex gap-4"
+                        onValueChange={(v) => { if (selectedUser) selectedUser.is_active = v === 'true'; }}
+                        value={selectedUser?.is_active ? 'true' : 'false'}>
+                    <div class="flex items-center gap-1">
+                        <RadioGroup.Item class="accent-green-600" id="active-true" value="true"/>
+                        <Label class="text-sm" for="active-true">True</Label>
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <RadioGroup.Item class="accent-red-600" id="active-false" value="false"/>
+                        <Label class="text-sm" for="active-false">False</Label>
+                    </div>
+                </RadioGroup.Root>
+            </div>
+            <hr/>
+            <!-- Super User -->
+            <div>
+                <Label class="block text-sm font-medium mb-1" for="superuser">Admin</Label>
+                <RadioGroup.Root
+                        class="flex gap-4"
+                        onValueChange={(v) => { if (selectedUser) selectedUser.is_superuser = v === 'true'; }}
+                        value={selectedUser?.is_superuser ? 'true' : 'false'}>
+                    <div class="flex items-center gap-1">
+                        <RadioGroup.Item class="accent-green-600" id="superuser-true" value="true"/>
+                        <Label class="text-sm" for="superuser-true">True</Label>
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <RadioGroup.Item class="accent-red-600" id="superuser-false" value="false"/>
+                        <Label class="text-sm" for="superuser-false">False</Label>
+                    </div>
+                </RadioGroup.Root>
+            </div>
+            <!-- Password -->
+            <div>
+                <Label class="block text-sm font-medium mb-1" for="superuser">Password</Label>
+                <Input
+                        bind:value={newPassword}
+                        class="w-full"
+                        id="password"
+                        placeholder="Keep empty to not change the password"
+                        type="password"
+                />
+            </div>
+        </div>
+        <div class="mt-8 flex justify-end gap-2">
+            <Button onclick={() => dialogOpen = false} variant="outline">Cancel</Button>
+            <Button onclick={() => saveUser()} variant="destructive">Save</Button>
+        </div>
+    </Dialog.Content>
+</Dialog.Root>

web/src/routes/dashboard/settings/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import UserTable from '$lib/components/user-data-table.svelte';
+    import {page} from '$app/state';
+    import * as Card from "$lib/components/ui/card/index.js";
+
+
+    let users = page.data.users;
+</script>
+<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
+    <h1 class="scroll-m-20 my-6 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        Settings
+    </h1>
+    <Card.Root>
+        <Card.Header>
+            <Card.Title>Users</Card.Title>
+            <Card.Description>Edit or delete users</Card.Description>
+        </Card.Header>
+        <Card.Content>
+            <UserTable bind:users={users}/>
+        </Card.Content>
+    </Card.Root>
+</div>
+

web/src/routes/dashboard/settings/+page.ts

@@ -0,0 +1,33 @@
+import {env} from '$env/dynamic/public';
+import type {PageLoad} from './$types';
+
+export const load: PageLoad = async ({params, fetch}) => {
+    try {
+        const users = await fetch(env.PUBLIC_API_URL + "/users/all", {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'include'
+        });
+
+        if (!users.ok) {
+            console.error(`Failed to fetch users: ${users.statusText}`);
+            return {
+                users: null,
+            };
+        }
+
+        const usersData = await users.json();
+        console.log('Fetched users:', usersData);
+
+        return {
+            users: usersData,
+        };
+    } catch (error) {
+        console.error('Error fetching users:', error);
+        return {
+            users: null,
+        };
+    }
+};

web/src/routes/login/+page.svelte

@@ -26,7 +26,7 @@
     <div class="relative hidden lg:block">
         <img
                 alt="background"
-                class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale rounded-l-3xl "
+                class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.8]  rounded-l-3xl "
                 src="{toOptimizedURL(background)}"
         />
     </div>