immich/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
Brandon Wees 74438f5bd8
feat(web): improved user onboarding (#18782)
* wip

* added user metadata key

* wip

* restructure onboarding system and add initial locale

* update language card and fix translation updating

* remove prints

* new card formattings

* fix cursed unmount effect

* add OAuth route onboarding

* remove required admin auth for onboarding

* delete the hotwire button

* update open-api files

* delete import

* fix failing oauth onboarding fields

* fix e2e test

* fix web e2e test

* add onboarding to user registration e2e test

* remove todo

this was a holdover during dev and didn't get deleted

* fix server small tests

* use onDestroy to save settings rather than a bind:this

* change to false for isOnboarded

* fix other auth small test

* provide type annotation in user factory metadata field

* remove onboardingCompelted from UserDto

* move translations to onboarding steps array and mark as derived so they update

* break language selector out into its own component as per @danieldietzler suggestion

* remove hello header on card

* fix flixkering on server privacy card

* label/id fixes

* openapi

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-06-02 21:09:13 +00:00

49 lines
1.7 KiB
Svelte

<script lang="ts">
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';
import { onMount } from 'svelte';
let config: SystemConfigDto | undefined = $state();
let adminSettingsComponent = $state<ReturnType<typeof AdminSettings>>();
onMount(async () => {
config = await getConfig();
});
export const save = async () => {
await adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate });
};
</script>
<div class="flex flex-col">
<p>
<FormatMessage key="admin.storage_template_onboarding_description">
{#snippet children({ message })}
<a class="underline" href="https://immich.app/docs/administration/storage-template">{message}</a>
{/snippet}
</FormatMessage>
</p>
{#if config && $user}
<AdminSettings bind:config bind:this={adminSettingsComponent}>
{#snippet children({ defaultConfig, savedConfig })}
{#if config}
<StorageTemplateSettings
minified
disabled={$featureFlags.configFile}
{config}
{defaultConfig}
{savedConfig}
onSave={(config) => adminSettingsComponent?.handleSave(config)}
onReset={(options) => adminSettingsComponent?.handleReset(options)}
duration={0}
/>
{/if}
{/snippet}
</AdminSettings>
{/if}
</div>