From fd21ce5aac1daeba04e4e7399a0720338ea710c2 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Tue, 3 Sep 2024 22:24:29 +0200
Subject: [PATCH] feat: add setup details to oidc client details

---
 .../components/header/header-avatar.svelte    |  2 +-
 frontend/src/routes/settings/+layout.svelte   | 34 +++++-----
 .../admin/oidc-clients/[id]/+page.svelte      | 64 ++++++++++++++-----
 3 files changed, 67 insertions(+), 33 deletions(-)

diff --git a/frontend/src/lib/components/header/header-avatar.svelte b/frontend/src/lib/components/header/header-avatar.svelte
index d7ff792..fb0b156 100644
--- a/frontend/src/lib/components/header/header-avatar.svelte
+++ b/frontend/src/lib/components/header/header-avatar.svelte
@@ -23,7 +23,7 @@
 			<Avatar.Fallback>{initials}</Avatar.Fallback>
 		</Avatar.Root></DropdownMenu.Trigger
 	>
-	<DropdownMenu.Content class="w-40" align="start">
+	<DropdownMenu.Content class="min-w-40" align="start">
 		<DropdownMenu.Label class="font-normal">
 			<div class="flex flex-col space-y-1">
 				<p class="text-sm font-medium leading-none">
diff --git a/frontend/src/routes/settings/+layout.svelte b/frontend/src/routes/settings/+layout.svelte
index ef70caf..e873ccd 100644
--- a/frontend/src/routes/settings/+layout.svelte
+++ b/frontend/src/routes/settings/+layout.svelte
@@ -23,23 +23,25 @@
 
 <section>
 	<div class="h-screen w-full">
-		<main class="flex min-h-screen flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
-			<div class="mx-auto grid w-full max-w-[1440px] gap-2">
-				<h1 class="text-3xl font-semibold">Settings</h1>
-			</div>
-			<div
-				class="mx-auto grid w-full max-w-[1440px] items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"
-			>
-				<nav class="grid gap-4 text-sm text-muted-foreground">
-					{#each links as { href, label }}
-						<a {href} class={$page.url.pathname.startsWith(href) ? 'font-bold text-primary' : ''}>
-							{label}
-						</a>
-					{/each}
-				</nav>
-				<div class="flex flex-col gap-5">
-					{@render children()}
+		<main class="bg-muted/40 flex min-h-screen flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row">
+			<div>
+				<div class="mx-auto grid w-full max-w-[1440px] gap-2">
+					<h1 class="mb-5 text-3xl font-semibold">Settings</h1>
 				</div>
+				<div
+					class="mx-auto grid w-full max-w-[1440px] items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"
+				>
+					<nav class="text-muted-foreground grid gap-4 text-sm">
+						{#each links as { href, label }}
+							<a {href} class={$page.url.pathname.startsWith(href) ? 'text-primary font-bold' : ''}>
+								{label}
+							</a>
+						{/each}
+					</nav>
+				</div>
+			</div>
+			<div class="flex w-full flex-col gap-5">
+				{@render children()}
 			</div>
 		</main>
 	</div>
diff --git a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
index d29a6a1..d431f03 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { beforeNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
@@ -10,13 +11,24 @@
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideChevronLeft, LucideRefreshCcw } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
+	import { slide } from 'svelte/transition';
 	import OidcForm from '../oidc-client-form.svelte';
 
 	let { data } = $props();
 	let client = $state(data);
+	let showAllDetails = $state(false);
 
 	const oidcService = new OidcService();
 
+	const setupDetails = {
+		'Authorization URL': `https://${$page.url.hostname}/authorize`,
+		'OIDC Discovery URL': `https://${$page.url.hostname}/.well-known/openid-configuration`,
+		'Token URL': `https://${$page.url.hostname}/api/oidc/token`,
+		'Userinfo URL': `https://${$page.url.hostname}/api/oidc/userinfo`,
+		'Certificate URL': `https://${$page.url.hostname}/.well-known/jwks.json`,
+		PKCE: 'Disabled'
+	};
+
 	async function updateClient(updatedClient: OidcClientCreateWithLogo) {
 		let success = true;
 		const dataPromise = oidcService.updateClient(client.id, updatedClient);
@@ -74,23 +86,43 @@
 		<Card.Title>{client.name}</Card.Title>
 	</Card.Header>
 	<Card.Content>
-		<div class="flex">
-			<Label class="mb-0 w-44">Client ID</Label>
-			<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
-		</div>
-		<div class="mt-3 flex items-center">
-			<Label class="mb-0 w-44">Client secret</Label>
-			<span class="text-muted-foreground text-sm" data-testid="client-secret"
-				>{$clientSecretStore ?? '••••••••••••••••••••••••••••••••'}</span
-			>
-			{#if !$clientSecretStore}
-				<Button
-					class="ml-2"
-					onclick={createClientSecret}
-					size="sm"
-					variant="ghost"
-					aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
+		<div class="flex flex-col">
+			<div class="mb-2 flex">
+				<Label class="mb-0 w-44">Client ID</Label>
+				<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
+			</div>
+			<div class="mb-2 mt-1 flex items-center">
+				<Label class="w-44">Client secret</Label>
+				<span class="text-muted-foreground text-sm" data-testid="client-secret"
+					>{$clientSecretStore ?? '••••••••••••••••••••••••••••••••'}</span
 				>
+				{#if !$clientSecretStore}
+					<Button
+						class="ml-2"
+						onclick={createClientSecret}
+						size="sm"
+						variant="ghost"
+						aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
+					>
+				{/if}
+			</div>
+			{#if showAllDetails}
+				<div transition:slide>
+					{#each Object.entries(setupDetails) as [key, value]}
+						<div class="mb-5 flex">
+							<Label class="mb-0 w-44">{key}</Label>
+							<span class="text-muted-foreground text-sm">{value}</span>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if !showAllDetails}
+				<div class="mt-4 flex justify-center">
+					<Button on:click={() => (showAllDetails = true)} size="sm" variant="ghost"
+						>Show more details</Button
+					>
+				</div>
 			{/if}
 		</div>
 	</Card.Content>