chore: add docs link and rename to Federated Client Credentials (#636)

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

frontend/src/lib/components/form/form-input.svelte

@@ -2,7 +2,9 @@
 	import DatePicker from '$lib/components/form/date-picker.svelte';
 	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
+	import { m } from '$lib/paraglide/messages';
 	import type { FormInput } from '$lib/utils/form-util';
+	import { LucideExternalLink } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -10,6 +12,7 @@
 		input = $bindable(),
 		label,
 		description,
+		docsLink,
 		placeholder,
 		disabled = false,
 		type = 'text',
@@ -20,6 +23,7 @@
 		input?: FormInput<string | boolean | number | Date | undefined>;
 		label?: string;
 		description?: string;
+		docsLink?: string;
 		placeholder?: string;
 		disabled?: boolean;
 		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
@@ -35,7 +39,19 @@
 		<Label class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
-		<p class="text-muted-foreground mt-1 text-xs">{description}</p>
+		<p class="text-muted-foreground mt-1 text-xs">
+			{description}
+			{#if docsLink}
+				<a
+					class="relative text-white after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:translate-y-[-1px] after:bg-white"
+					href={docsLink}
+					target="_blank"
+				>
+					{m.docs()}
+					<LucideExternalLink class="inline size-3 align-text-top" />
+				</a>
+			{/if}
+		</p>
 	{/if}
 	<div class={label || description ? 'mt-2' : ''}>
 		{#if children}

frontend/src/routes/settings/admin/oidc-clients/federated-identities-input.svelte

@@ -51,7 +51,7 @@
 	}
 
 	function getFieldError(index: number, field: keyof OidcClientFederatedIdentity): string | null {
-		console.log(federatedIdentities)
+		console.log(federatedIdentities);
 		if (!errors) return null;
 		const path = [index, field];
 		return errors?.filter((e) => e.path[0] == path[0] && e.path[1] == path[1])[0]?.message;
@@ -59,7 +59,11 @@
 </script>
 
 <div {...restProps}>
-	<FormInput label={m.federated_identities()} description={m.federated_identities_description()}>
+	<FormInput
+		label={m.federated_client_credentials()}
+		description={m.federated_client_credentials_description()}
+		docsLink="https://pocket-id.org/docs/guides/oidc-client-authentication"
+	>
 		<div class="space-y-4">
 			{#each federatedIdentities as identity, i}
 				<div class="space-y-3 rounded-lg border p-4">
@@ -142,7 +146,7 @@
 	<Button class="mt-3" variant="secondary" size="sm" onclick={addFederatedIdentity} type="button">
 		<LucidePlus class="mr-1 size-4" />
 		{federatedIdentities.length === 0
-			? m.add_federated_identity()
-			: m.add_another_federated_identity()}
+			? m.add_federated_client_credential()
+			: m.add_another_federated_client_credential()}
 	</Button>
 </div>