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

refactor: migrate shadcn-components to Svelte 5 and TW4 (#551)

Browse Source 
Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Kyle Mendell
2025-05-21 12:15:27 -05:00
committed by Elias Schneider
parent 05b443d984
commit 28c85990ba
197 changed files with 8142 additions and 7471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/routes/settings/admin/oidc-clients/+page.svelte
View File

@@ -8,7 +8,7 @@
import clientSecretStore from '$lib/stores/client-secret-store';
import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucideMinus, ShieldCheck, ShieldPlus } from 'lucide-svelte';
import { LucideMinus, ShieldCheck, ShieldPlus } from '@lucide/svelte';
import { toast } from 'svelte-sonner';
import { slide } from 'svelte/transition';
import OIDCClientForm from './oidc-client-form.svelte';
@@ -49,7 +49,7 @@
<div class="flex items-center justify-between">
<div>
<Card.Title>
<ShieldPlus class="text-primary/80 h-5 w-5" />
<ShieldPlus class="text-primary/80 size-5" />
{m.create_oidc_client()}
</Card.Title>
<Card.Description
@@ -59,10 +59,10 @@
>
</div>
{#if !expandAddClient}
<Button on:click={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
<Button onclick={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
{:else}
<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddClient = false)}>
<LucideMinus class="h-5 w-5" />
<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddClient = false)}>
<LucideMinus class="size-5" />
</Button>
{/if}
</div>
@@ -81,7 +81,7 @@
<Card.Root>
<Card.Header>
<Card.Title>
<ShieldCheck class="text-primary/80 h-5 w-5" />
<ShieldCheck class="text-primary/80 size-5" />
{m.manage_oidc_clients()}
</Card.Title>
</Card.Header>

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

@@ -1,6 +1,6 @@
<script lang="ts">
import { beforeNavigate } from '$app/navigation';
import { page } from '$app/stores';
import { page } from '$app/state';
import CollapsibleCard from '$lib/components/collapsible-card.svelte';
import { openConfirmDialog } from '$lib/components/confirm-dialog';
import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
@@ -12,7 +12,7 @@
import clientSecretStore from '$lib/stores/client-secret-store';
import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucideChevronLeft, LucideRefreshCcw } from 'lucide-svelte';
import { LucideChevronLeft, LucideRefreshCcw } from '@lucide/svelte';
import { toast } from 'svelte-sonner';
import { slide } from 'svelte/transition';
import OidcForm from '../oidc-client-form.svelte';
@@ -28,12 +28,12 @@
const oidcService = new OidcService();
const setupDetails = $state({
[m.authorization_url()]: `https://${$page.url.hostname}/authorize`,
[m.oidc_discovery_url()]: `https://${$page.url.hostname}/.well-known/openid-configuration`,
[m.token_url()]: `https://${$page.url.hostname}/api/oidc/token`,
[m.userinfo_url()]: `https://${$page.url.hostname}/api/oidc/userinfo`,
[m.logout_url()]: `https://${$page.url.hostname}/api/oidc/end-session`,
[m.certificate_url()]: `https://${$page.url.hostname}/.well-known/jwks.json`,
[m.authorization_url()]: `https://${page.url.hostname}/authorize`,
[m.oidc_discovery_url()]: `https://${page.url.hostname}/.well-known/openid-configuration`,
[m.token_url()]: `https://${page.url.hostname}/api/oidc/token`,
[m.userinfo_url()]: `https://${page.url.hostname}/api/oidc/userinfo`,
[m.logout_url()]: `https://${page.url.hostname}/api/oidc/end-session`,
[m.certificate_url()]: `https://${page.url.hostname}/.well-known/jwks.json`,
[m.pkce()]: client.pkceEnabled ? m.enabled() : m.disabled()
});
@@ -102,7 +102,7 @@
<div>
<a class="text-muted-foreground flex text-sm" href="/settings/admin/oidc-clients"
><LucideChevronLeft class="h-5 w-5" /> {m.back()}</a
><LucideChevronLeft class="size-5" /> {m.back()}</a
>
</div>
<Card.Root>
@@ -136,7 +136,7 @@
onclick={createClientSecret}
size="sm"
variant="ghost"
aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
aria-label="Create new client secret"><LucideRefreshCcw class="size-3" /></Button
>
</div>
{/if}
@@ -157,7 +157,7 @@
{#if !showAllDetails}
<div class="mt-4 flex justify-center">
<Button on:click={() => (showAllDetails = true)} size="sm" variant="ghost"
<Button onclick={() => (showAllDetails = true)} size="sm" variant="ghost"
>{m.show_more_details()}</Button
>
</div>
@@ -177,6 +177,6 @@
>
<UserGroupSelection bind:selectedGroupIds={client.allowedUserGroupIds} />
<div class="mt-5 flex justify-end">
<Button on:click={() => updateUserGroupClients(client.allowedUserGroupIds)}>{m.save()}</Button>
<Button onclick={() => updateUserGroupClients(client.allowedUserGroupIds)}>{m.save()}</Button>
</div>
</CollapsibleCard>

18
frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte
View File

@@ -3,7 +3,7 @@
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { m } from '$lib/paraglide/messages';
import { LucideMinus, LucidePlus } from 'lucide-svelte';
import { LucideMinus, LucidePlus } from '@lucide/svelte';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
@@ -27,14 +27,18 @@
<div class="flex flex-col gap-y-2">
{#each callbackURLs as _, i}
<div class="flex gap-x-2">
<Input data-testid={`callback-url-${i + 1}`} bind:value={callbackURLs[i]} />
<Input
aria-invalid={!!error}
data-testid={`callback-url-${i + 1}`}
bind:value={callbackURLs[i]}
/>
{#if callbackURLs.length > 1 || allowEmpty}
<Button
variant="outline"
size="sm"
on:click={() => (callbackURLs = callbackURLs.filter((_, index) => index !== i))}
onclick={() => (callbackURLs = callbackURLs.filter((_, index) => index !== i))}
>
<LucideMinus class="h-4 w-4" />
<LucideMinus class="size-4" />
</Button>
{/if}
</div>
@@ -42,15 +46,15 @@
</div>
</FormInput>
{#if error}
<p class="mt-1 text-sm text-red-500">{error}</p>
<p class="text-destructive mt-1 text-xs">{error}</p>
{/if}
<Button
class="mt-2"
variant="secondary"
size="sm"
on:click={() => (callbackURLs = [...callbackURLs, ''])}
onclick={() => (callbackURLs = [...callbackURLs, ''])}
>
<LucidePlus class="mr-1 h-4 w-4" />
<LucidePlus class="mr-1 size-4" />
{callbackURLs.length === 0 ? m.add() : m.add_another()}
</Button>
</div>

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

@@ -112,7 +112,7 @@
<Label for="logo">{m.logo()}</Label>
<div class="mt-2 flex items-end gap-3">
{#if logoDataURL}
<div class="bg-muted h-32 w-32 rounded-2xl p-3">
<div class="bg-muted size-32 rounded-2xl p-3">
<img
class="m-auto max-h-full max-w-full object-contain"
src={logoDataURL}
@@ -132,7 +132,7 @@
</Button>
</FileInput>
{#if logoDataURL}
<Button variant="outline" on:click={resetLogo}>{m.remove_logo()}</Button>
<Button variant="outline" onclick={resetLogo}>{m.remove_logo()}</Button>
{/if}
</div>
</div>

13
frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
View File

@@ -8,7 +8,7 @@
import type { OidcClient } from '$lib/types/oidc.type';
import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucidePencil, LucideTrash } from 'lucide-svelte';
import { LucidePencil, LucideTrash } from '@lucide/svelte';
import { toast } from 'svelte-sonner';
let {
@@ -56,7 +56,7 @@
<Table.Cell class="w-8 font-medium">
{#if item.hasLogo}
<div class="bg-secondary rounded-2xl p-3">
<div class="h-8 w-8">
<div class="size-8">
<img
class="m-auto max-h-full max-w-full object-contain"
src="/api/oidc/clients/{item.id}/logo"
@@ -72,13 +72,10 @@
href="/settings/admin/oidc-clients/{item.id}"
size="sm"
variant="outline"
aria-label={m.edit()}><LucidePencil class="h-3 w-3 " /></Button
aria-label={m.edit()}><LucidePencil class="size-3 " /></Button
>
<Button
on:click={() => deleteClient(item)}
size="sm"
variant="outline"
aria-label={m.delete()}><LucideTrash class="h-3 w-3 text-red-500" /></Button
<Button onclick={() => deleteClient(item)} size="sm" variant="outline" aria-label={m.delete()}
><LucideTrash class="size-3 text-red-500" /></Button
>
</Table.Cell>
{/snippet}