feat: device authorization endpoint (#270)

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

frontend/src/lib/components/header/header.svelte

@@ -5,7 +5,7 @@
 	import Logo from '../logo.svelte';
 	import HeaderAvatar from './header-avatar.svelte';
 
-	const authUrls = [/^\/authorize$/, /^\/login(?:\/.*)?$/, /^\/logout$/];
+	const authUrls = [/^\/authorize$/, /^\/device$/, /^\/login(?:\/.*)?$/, /^\/logout$/];
 
 	let isAuthPage = $derived(
 		!page.error && authUrls.some((pattern) => pattern.test(page.url.pathname))

frontend/src/lib/components/scope-item.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let icon: ConstructorOfATypedSvelteComponent;
+	export let name: string;
+	export let description: string;
+</script>
+
+<div class="flex items-center">
+	<div class="mr-5 rounded-lg bg-muted p-2"><svelte:component this={icon} /></div>
+	<div class="text-start">
+		<h3 class="font-semibold">{name}</h3>
+		<p class="text-sm text-muted-foreground">{description}</p>
+	</div>
+</div>

frontend/src/lib/components/scope-list.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { m } from '$lib/paraglide/messages';
+	import { LucideMail, LucideUser, LucideUsers } from 'lucide-svelte';
+	import ScopeItem from './scope-item.svelte';
+
+	let { scope }: { scope: string } = $props();
+</script>
+
+<div class="flex flex-col gap-3" data-testid="scopes">
+	{#if scope!.includes('email')}
+		<ScopeItem icon={LucideMail} name={m.email()} description={m.view_your_email_address()} />
+	{/if}
+	{#if scope!.includes('profile')}
+		<ScopeItem
+			icon={LucideUser}
+			name={m.profile()}
+			description={m.view_your_profile_information()}
+		/>
+	{/if}
+	{#if scope!.includes('groups')}
+		<ScopeItem
+			icon={LucideUsers}
+			name={m.groups()}
+			description={m.view_the_groups_you_are_a_member_of()}
+		/>
+	{/if}
+</div>