helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2026-08-15 13:03:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): URI encode slug and reduce confusion for users (#29796)

Browse source 
Co-authored-by: bwees <brandonwees@gmail.com>
This commit is contained in:
Mees Frensel 2026-07-15 19:32:05 +02:00 • committed by GitHub
parent e7f773197f
commit e00dcf7850
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 29 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/src/lib/components/SharedLinkFormFields.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
import { Field, Input, PasswordInput, Switch, Text } from '@immich/ui';
import { Field, HelperText, Input, PasswordInput, Switch, Text } from '@immich/ui';
import { t } from 'svelte-i18n';
type Props = {
@ -32,8 +32,11 @@
<div class="mt-4 flex flex-col gap-4">
<div>
<Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
<Field label={$t('shared_link_custom_url_title')} description={$t('shared_link_custom_url_description')}>
<Input bind:value={slug} autocomplete="off" />
{#if slug.includes('/')}
<HelperText class="text-warning">{$t('shared_link_custom_url_warning')}</HelperText>
{/if}
</Field>
{#if slug}
<Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>

14
web/src/lib/route.spec.ts
View file

@ -24,6 +24,20 @@ describe('Route', () => {
});
});
describe(Route.viewSharedLink.name, () => {
it('should work with key', () => {
expect(Route.viewSharedLink({ key: 'uuid-key' })).toBe('/share/uuid-key');
});
it('should work with key and slug', () => {
expect(Route.viewSharedLink({ key: 'uuid-key', slug: 'custom-slug' })).toBe('/s/custom-slug');
});
it('should URI encode slug', () => {
expect(Route.viewSharedLink({ key: 'uuid-key', slug: 'albums/the-moon?' })).toBe('/s/albums%2Fthe-moon%3F');
});
});
describe(Route.tags.name, () => {
it('should work', () => {
expect(Route.tags()).toBe('/tags');

3
web/src/lib/route.ts
View file

@ -120,7 +120,8 @@ export const Route = {
// shared links
sharedLinks: (params?: { filter?: SharedLinkTab }) => '/shared-links' + asQueryString(params),
editSharedLink: ({ id }: { id: string }) => `/shared-links/${id}/edit`,
viewSharedLink: ({ slug, key }: { slug?: string | null; key: string }) => (slug ? `/s/${slug}` : `/share/${key}`),
viewSharedLink: ({ slug, key }: { slug?: string | null; key: string }) =>
slug ? `/s/${encodeURIComponent(slug)}` : `/share/${key}`,
// settings
userSettings: (params?: { isOpen?: OpenQueryParam }) => '/user-settings' + asQueryString(params),

4
web/src/lib/services/shared-link.service.ts
View file

@ -60,9 +60,7 @@ export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLin
};
export const asUrl = (sharedLink: SharedLinkResponseDto) => {
const path = sharedLink.slug
? `s/${encodeURIComponent(sharedLink.slug)}`
: `share/${encodeURIComponent(sharedLink.key)}`;
const path = Route.viewSharedLink(sharedLink);
return new URL(path, serverConfigManager.value.externalDomain || globalThis.location.origin).href;
};

6
web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte
View file

@ -56,8 +56,10 @@
{#if shareType === SharedLinkType.Individual}
<div class="text-sm">
{$t('individual_share')} |
<span class="text-primary">{sharedLink.description || ''}</span>
{$t('individual_share')}
{#if description !== ''}
| <span class="text-primary">{description}</span>
{/if}
</div>
{/if}