mirror of
https://github.com/immich-app/immich.git
synced 2025-12-17 01:11:13 +03:00
74438f5bd8
* 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>
84 lines
2.2 KiB
Svelte
84 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import { Button } from '@immich/ui';
|
|
import { mdiArrowLeft, mdiArrowRight, mdiCheck } from '@mdi/js';
|
|
import type { Snippet } from 'svelte';
|
|
import { t } from 'svelte-i18n';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
interface Props {
|
|
title?: string | undefined;
|
|
icon?: string | undefined;
|
|
children?: Snippet;
|
|
previousTitle?: string | undefined;
|
|
nextTitle?: string | undefined;
|
|
onNext?: () => void;
|
|
onPrevious?: () => void;
|
|
onLeave?: () => void;
|
|
}
|
|
|
|
let {
|
|
title = undefined,
|
|
icon = undefined,
|
|
children,
|
|
previousTitle,
|
|
nextTitle,
|
|
onLeave,
|
|
onNext,
|
|
onPrevious,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
id="onboarding-card"
|
|
class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-8 dark:border-immich-dark-gray dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
|
|
in:fade={{ duration: 250 }}
|
|
>
|
|
{#if title || icon}
|
|
<div class="flex gap-2 items-center justify-center w-fit">
|
|
{#if icon}
|
|
<Icon path={icon} size="30" class="text-immich-primary dark:text-immich-dark-primary" />
|
|
{/if}
|
|
{#if title}
|
|
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">
|
|
{title.toUpperCase()}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{@render children?.()}
|
|
|
|
<div class="flex pt-4">
|
|
{#if previousTitle}
|
|
<div class="w-full flex place-content-start">
|
|
<Button
|
|
shape="round"
|
|
leadingIcon={mdiArrowLeft}
|
|
class="flex gap-2 place-content-center"
|
|
onclick={() => {
|
|
onLeave?.();
|
|
onPrevious?.();
|
|
}}
|
|
>
|
|
<p>{previousTitle}</p>
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex w-full place-content-end">
|
|
<Button
|
|
shape="round"
|
|
trailingIcon={nextTitle ? mdiArrowRight : mdiCheck}
|
|
onclick={() => {
|
|
onLeave?.();
|
|
onNext?.();
|
|
}}
|
|
>
|
|
<span class="flex place-content-center place-items-center gap-2">
|
|
{nextTitle ?? $t('done')}
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|