sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-29 18:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: map allowed groups to OIDC clients (#202)

Browse Source
This commit is contained in:
Elias Schneider
2025-02-03 18:41:15 +01:00
committed by GitHub
parent 430421e98b
commit 13b02a072f
30 changed files with 518 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/routes/settings/admin/application-configuration/+page.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import CollapsibleCard from '$lib/components/collapsible-card.svelte';
import AppConfigService from '$lib/services/app-config-service';
import appConfigStore from '$lib/stores/application-configuration-store';
import type { AllAppConfig } from '$lib/types/application-configuration';
@@ -55,45 +55,27 @@
<title>Application Configuration</title>
</svelte:head>
<Card.Root>
<Card.Header>
<Card.Title>General</Card.Title>
</Card.Header>
<Card.Content>
<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
</Card.Content>
</Card.Root>
<CollapsibleCard id="application-configuration-general" title="General" defaultExpanded>
<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
</CollapsibleCard>
<Card.Root>
<Card.Header>
<Card.Title>Email</Card.Title>
<Card.Description>
Enable email notifications to alert users when a login is detected from a new device or
location.
</Card.Description>
</Card.Header>
<Card.Content>
<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
</Card.Content>
</Card.Root>
<CollapsibleCard
id="application-configuration-email"
title="Email"
description="Enable email notifications to alert users when a login is detected from a new device or
location."
>
<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
</CollapsibleCard>
<Card.Root>
<Card.Header>
<Card.Title>LDAP</Card.Title>
<Card.Description>
Configure LDAP settings to sync users and groups from an LDAP server.
</Card.Description>
</Card.Header>
<Card.Content>
<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
</Card.Content>
</Card.Root>
<CollapsibleCard
id="application-configuration-ldap"
title="LDAP"
description="Configure LDAP settings to sync users and groups from an LDAP server."
>
<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
</CollapsibleCard>
<Card.Root>
<Card.Header>
<Card.Title>Images</Card.Title>
</Card.Header>
<Card.Content>
<UpdateApplicationImages callback={updateImages} />
</Card.Content>
</Card.Root>
<CollapsibleCard id="application-configuration-images" title="Images">
<UpdateApplicationImages callback={updateImages} />
</CollapsibleCard>

42
frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
View File

@@ -1,12 +1,14 @@
<script lang="ts">
import { beforeNavigate } from '$app/navigation';
import { page } from '$app/stores';
import CollapsibleCard from '$lib/components/collapsible-card.svelte';
import { openConfirmDialog } from '$lib/components/confirm-dialog';
import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
import Label from '$lib/components/ui/label/label.svelte';
import OidcService from '$lib/services/oidc-service';
import UserGroupService from '$lib/services/user-group-service';
import clientSecretStore from '$lib/stores/client-secret-store';
import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
import { axiosErrorToast } from '$lib/utils/error-util';
@@ -14,12 +16,17 @@
import { toast } from 'svelte-sonner';
import { slide } from 'svelte/transition';
import OidcForm from '../oidc-client-form.svelte';
import UserGroupSelection from '../user-group-selection.svelte';
let { data } = $props();
let client = $state(data);
let client = $state({
...data,
allowedUserGroupIds: data.allowedUserGroups.map((g) => g.id)
});
let showAllDetails = $state(false);
const oidcService = new OidcService();
const userGroupService = new UserGroupService();
const setupDetails = $state({
'Authorization URL': `https://${$page.url.hostname}/authorize`,
@@ -74,6 +81,17 @@
});
}
async function updateUserGroupClients(allowedGroups: string[]) {
await oidcService
.updateAllowedUserGroups(client.id, allowedGroups)
.then(() => {
toast.success('Allowed user groups updated successfully');
})
.catch((e) => {
axiosErrorToast(e);
});
}
beforeNavigate(() => {
clientSecretStore.clear();
});
@@ -84,7 +102,7 @@
</svelte:head>
<div>
<a class="flex text-sm text-muted-foreground" href="/settings/admin/oidc-clients"
<a class="text-muted-foreground flex text-sm" href="/settings/admin/oidc-clients"
><LucideChevronLeft class="h-5 w-5" /> Back</a
>
</div>
@@ -97,7 +115,7 @@
<div class="mb-2 flex">
<Label class="mb-0 w-44">Client ID</Label>
<CopyToClipboard value={client.id}>
<span class="text-sm text-muted-foreground" data-testid="client-id"> {client.id}</span>
<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
</CopyToClipboard>
</div>
{#if !client.isPublic}
@@ -105,12 +123,12 @@
<Label class="w-44">Client secret</Label>
{#if $clientSecretStore}
<CopyToClipboard value={$clientSecretStore}>
<span class="text-sm text-muted-foreground" data-testid="client-secret">
<span class="text-muted-foreground text-sm" data-testid="client-secret">
{$clientSecretStore}
</span>
</CopyToClipboard>
{:else}
<span class="text-sm text-muted-foreground" data-testid="client-secret"
<span class="text-muted-foreground text-sm" data-testid="client-secret"
>••••••••••••••••••••••••••••••••</span
>
<Button
@@ -129,7 +147,7 @@
<div class="mb-5 flex">
<Label class="mb-0 w-44">{key}</Label>
<CopyToClipboard {value}>
<span class="text-sm text-muted-foreground">{value}</span>
<span class="text-muted-foreground text-sm">{value}</span>
</CopyToClipboard>
</div>
{/each}
@@ -151,3 +169,15 @@
<OidcForm existingClient={client} callback={updateClient} />
</Card.Content>
</Card.Root>
<CollapsibleCard
id="allowed-user-groups"
title="Allowed User Groups"
description="Add user groups to this client to restrict access to users in these groups. If no user groups are selected, all users will have access to this client."
>
{#await userGroupService.list() then groups}
<UserGroupSelection {groups} bind:selectedGroupIds={client.allowedUserGroupIds} />
{/await}
<div class="mt-5 flex justify-end">
<Button on:click={() => updateUserGroupClients(client.allowedUserGroupIds)}>Save</Button>
</div>
</CollapsibleCard>

2
frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
View File

@@ -76,7 +76,7 @@
</script>
<form onsubmit={onSubmit}>
<div class="grid grid-cols-2 gap-3 sm:flex-row">
<div class="grid grid-cols-2 gap-x-3 gap-y-7 sm:flex-row">
<FormInput label="Name" class="w-full" bind:input={$inputs.name} />
<OidcCallbackUrlInput
class="w-full"

34
frontend/src/routes/settings/admin/oidc-clients/user-group-selection.svelte Normal file
View File

@@ -0,0 +1,34 @@
<script lang="ts">
import AdvancedTable from '$lib/components/advanced-table.svelte';
import * as Table from '$lib/components/ui/table';
import UserGroupService from '$lib/services/user-group-service';
import type { OidcClient } from '$lib/types/oidc.type';
import type { Paginated } from '$lib/types/pagination.type';
import type { UserGroup } from '$lib/types/user-group.type';
let {
groups: initialGroups,
selectionDisabled = false,
selectedGroupIds = $bindable()
}: {
groups: Paginated<UserGroup>;
selectionDisabled?: boolean;
selectedGroupIds: string[];
} = $props();
const userGroupService = new UserGroupService();
let groups = $state(initialGroups);
</script>
<AdvancedTable
items={groups}
onRefresh={async (o) => (groups = await userGroupService.list(o))}
columns={[{ label: 'Name', sortColumn: 'name' }]}
bind:selectedIds={selectedGroupIds}
{selectionDisabled}
>
{#snippet rows({ item })}
<Table.Cell>{item.name}</Table.Cell>
{/snippet}
</AdvancedTable>

29
frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import CollapsibleCard from '$lib/components/collapsible-card.svelte';
import CustomClaimsInput from '$lib/components/custom-claims-input.svelte';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
@@ -61,7 +62,7 @@
</svelte:head>
<div class="flex items-center justify-between">
<a class="flex text-sm text-muted-foreground" href="/settings/admin/user-groups"
<a class="text-muted-foreground flex text-sm" href="/settings/admin/user-groups"
><LucideChevronLeft class="h-5 w-5" /> Back</a
>
{#if !!userGroup.ldapId}
@@ -100,19 +101,13 @@
</Card.Content>
</Card.Root>
<Card.Root>
<Card.Header>
<Card.Title>Custom Claims</Card.Title>
<Card.Description>
Custom claims are key-value pairs that can be used to store additional information about a
user. These claims will be included in the ID token if the scope "profile" is requested.
Custom claims defined on the user will be prioritized if there are conflicts.
</Card.Description>
</Card.Header>
<Card.Content>
<CustomClaimsInput bind:customClaims={userGroup.customClaims} />
<div class="mt-5 flex justify-end">
<Button onclick={updateCustomClaims} type="submit">Save</Button>
</div>
</Card.Content>
</Card.Root>
<CollapsibleCard
id="user-group-custom-claims"
title="Custom Claims"
description="Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested. Custom claims defined on the user will be prioritized if there are conflicts."
>
<CustomClaimsInput bind:customClaims={userGroup.customClaims} />
<div class="mt-5 flex justify-end">
<Button onclick={updateCustomClaims} type="submit">Save</Button>
</div>
</CollapsibleCard>

4
frontend/src/routes/settings/admin/user-groups/user-group-list.svelte
View File

@@ -32,10 +32,10 @@
try {
await userGroupService.remove(userGroup.id);
userGroups = await userGroupService.list(requestOptions!);
toast.success('User group deleted successfully');
} catch (e) {
axiosErrorToast(e);
}
toast.success('User group deleted successfully');
}
}
}
});

28
frontend/src/routes/settings/admin/users/[id]/+page.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import CollapsibleCard from '$lib/components/collapsible-card.svelte';
import Badge from '$lib/components/ui/badge/badge.svelte';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
@@ -45,7 +46,7 @@
</svelte:head>
<div class="flex items-center justify-between">
<a class="flex text-sm text-muted-foreground" href="/settings/admin/users"
<a class="text-muted-foreground flex text-sm" href="/settings/admin/users"
><LucideChevronLeft class="h-5 w-5" /> Back</a
>
{#if !!user.ldapId}
@@ -61,18 +62,13 @@
</Card.Content>
</Card.Root>
<Card.Root>
<Card.Header>
<Card.Title>Custom Claims</Card.Title>
<Card.Description>
Custom claims are key-value pairs that can be used to store additional information about a
user. These claims will be included in the ID token if the scope "profile" is requested.
</Card.Description>
</Card.Header>
<Card.Content>
<CustomClaimsInput bind:customClaims={user.customClaims} />
<div class="mt-5 flex justify-end">
<Button onclick={updateCustomClaims} type="submit">Save</Button>
</div>
</Card.Content>
</Card.Root>
<CollapsibleCard
id="user-custom-claims"
title="Custom Claims"
description="Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested."
>
<CustomClaimsInput bind:customClaims={user.customClaims} />
<div class="mt-5 flex justify-end">
<Button onclick={updateCustomClaims} type="submit">Save</Button>
</div>
</CollapsibleCard>