Add PocketID OAuth provider support

frontend/src/lib/components/AuthSettings.svelte

@@ -10,6 +10,7 @@
 	import CustomSso from './CustomSso.svelte'
 	import AuthentikSetting from '$lib/components/AuthentikSetting.svelte'
 	import AutheliaSetting from '$lib/components/AutheliaSetting.svelte'
+	import PocketIdSetting from '$lib/components/PocketIdSetting.svelte'
 	import KanidmSetting from '$lib/components/KanidmSetting.svelte'
 	import ZitadelSetting from '$lib/components/ZitadelSetting.svelte'
 	import NextcloudSetting from '$lib/components/NextcloudSetting.svelte'
@@ -121,11 +122,12 @@
 				<KeycloakSetting bind:value={oauths['keycloak']} />
 				<AuthentikSetting bind:value={oauths['authentik']} />
 				<AutheliaSetting bind:value={oauths['authelia']} />
+				<PocketIdSetting bind:value={oauths['pocketid']} />
 				<KanidmSetting bind:value={oauths['kanidm']} />
 				<ZitadelSetting bind:value={oauths['zitadel']} />
 				<NextcloudSetting bind:value={oauths['nextcloud']} {baseUrl} />
 				{#each Object.keys(oauths) as k}
-					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud'].includes(k) && 'login_config' in oauths[k]}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud', 'pocketid'].includes(k) && 'login_config' in oauths[k]}
 						{#if oauths[k]}
 							<div class="flex flex-col gap-2 pb-4">
 								<div class="flex flex-row items-center gap-2">

frontend/src/lib/components/PocketIdSetting.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import IconedResourceType from './IconedResourceType.svelte'
+	import Toggle from './Toggle.svelte'
+
+	let { value = $bindable() }: { value: any } = $props()
+
+	let enabled = $derived(value != undefined)
+
+	// Initialize org from existing config or empty string
+	let org = $state(value?.connect_config?.auth_url?.replace('/authorize', '') ?? '')
+
+	// Update configs when org changes
+	$effect(() => {
+		if (value && org) {
+			value = {
+				...value,
+				connect_config: {
+					auth_url: `${org}/authorize`,
+					token_url: `${org}/api/oidc/token`,
+					scopes: ['openid', 'profile', 'email']
+				},
+				login_config: {
+					auth_url: `${org}/authorize`,
+					token_url: `${org}/api/oidc/token`,
+					userinfo_url: `${org}/api/oidc/userinfo`,
+					scopes: ['openid', 'profile', 'email']
+				}
+			}
+		}
+	})
+
+	function handleToggle(e: CustomEvent<boolean>) {
+		if (e.detail) {
+			value = { id: '', secret: '' }
+			org = ''
+		} else {
+			value = undefined
+			org = ''
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-1">
+	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center">
+		<div class="w-[120px]"><IconedResourceType name={'pocketid'} after={true} /></div>
+		<Toggle checked={enabled} onchange={handleToggle} />
+	</label>
+	{#if enabled}
+		<div class="border rounded p-2">
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">
+					Pocket-ID Base URL ({'POCKET_ID_URL/authorize'})
+				</span>
+				<input type="text" placeholder="https://id.example.com" bind:value={org} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Pocket ID" bind:value={value.display_name} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Client Id</span>
+				<input type="text" placeholder="Client Id" bind:value={value.id} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Client Secret</span>
+				<input type="text" placeholder="Client Secret" bind:value={value.secret} />
+			</label>
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/icons/PocketIdIcon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {width} {height} fill="currentColor">
+	<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
+</svg>

frontend/src/lib/components/icons/index.ts

@@ -103,6 +103,7 @@ import ApifyIcon from './ApifyIcon.svelte'
 import McpIcon from './McpIcon.svelte'
 import SageIcon from './SageIcon.svelte'
 import ZohoIcon from './ZohoIcon.svelte'
+import PocketIdIcon from './PocketIdIcon.svelte'
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
 	mysql: Mysql,
@@ -210,7 +211,8 @@ export const APP_TO_ICON_COMPONENT = {
 	mqtt: MqttIcon,
 	apify: ApifyIcon,
 	mcp: McpIcon,
-	zoho: ZohoIcon
+	zoho: ZohoIcon,
+	pocketid: PocketIdIcon
 } as const
 
 export {