mirror of https://github.com/immich-app/immich.git
feat(web): onboarding (#6066)
* feat(web): onboarding * feat: openapi * feat: modulization * feat: page advancing * Animation * Add storage templaete settings * sql * more style * Theme * information and styling * hide/show table * Styling * Update user property * fix test * fix test: * fix e2e * test * Update web/src/lib/components/onboarding-page/onboarding-hello.svelte Co-authored-by: bo0tzz <git@bo0tzz.me> * naming * use System Metadata * better return type * onboarding using server metadata * revert previous changes in user entity * sql * test web * fix test server * server/web test * more test * consolidate color theme change logic * consolidate save button to storage template * merge main * fix web --------- Co-authored-by: bo0tzz <git@bo0tzz.me>pull/6163/head
Alex
GitHub
parent
f8d64be13c
commit
18f59f78e3
@ -0,0 +1,10 @@
|
|||||||
|
import { ServerConfigDto } from '@app/domain';
|
||||||
|
import request from 'supertest';
|
||||||
|
|
||||||
|
export const serverInfoApi = {
|
||||||
|
getConfig: async (server: any) => {
|
||||||
|
const res = await request(server).get('/server-info/config');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
return res.body as ServerConfigDto;
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { ISystemMetadataRepository } from '@app/domain';
|
||||||
|
|
||||||
|
export const newSystemMetadataRepositoryMock = (): jest.Mocked<ISystemMetadataRepository> => {
|
||||||
|
return {
|
||||||
|
get: jest.fn(),
|
||||||
|
set: jest.fn(),
|
||||||
|
};
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,11 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
</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-14 dark:border-immich-dark-gray dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
|
||||||
|
in:fade={{ duration: 250 }}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import OnboardingCard from './onboarding-card.svelte';
|
||||||
|
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||||
|
import { mdiArrowRight } from '@mdi/js';
|
||||||
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||||
|
import { user } from '$lib/stores/user.store';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher<{
|
||||||
|
done: void;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<OnboardingCard>
|
||||||
|
<ImmichLogo class="w-12 h-12" />
|
||||||
|
<p class="font-medium text-6xl my-6 text-immich-primary dark:text-immich-dark-primary">
|
||||||
|
Welcome, {$user.name}
|
||||||
|
</p>
|
||||||
|
<p class="text-3xl pb-6 font-light">Let's get your instance set up with some common settings.</p>
|
||||||
|
|
||||||
|
<div class="w-full flex place-content-end">
|
||||||
|
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
|
||||||
|
<p>Theme</p>
|
||||||
|
<Icon path={mdiArrowRight} size="18" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</OnboardingCard>
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import OnboardingCard from './onboarding-card.svelte';
|
||||||
|
import { createEventDispatcher, onMount } from 'svelte';
|
||||||
|
import { featureFlags } from '$lib/stores/server-config.store';
|
||||||
|
import StorageTemplateSettings from '../admin-page/settings/storage-template/storage-template-settings.svelte';
|
||||||
|
import { SystemConfigDto, api } from '@api';
|
||||||
|
import { user } from '$lib/stores/user.store';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher<{
|
||||||
|
done: void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
let configs: SystemConfigDto | null = null;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const { data } = await api.systemConfigApi.getConfig();
|
||||||
|
configs = data;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<OnboardingCard>
|
||||||
|
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">STORAGE TEMPLATE</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The storage template is used to determine the folder structure and file name of your media files. You can use
|
||||||
|
variables to customize the template to your liking.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{#if configs && $user}
|
||||||
|
<StorageTemplateSettings
|
||||||
|
minified
|
||||||
|
disabled={$featureFlags.configFile}
|
||||||
|
storageConfig={configs.storageTemplate}
|
||||||
|
on:save={() => dispatch('done')}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</OnboardingCard>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { mdiArrowRight, mdiWhiteBalanceSunny, mdiMoonWaningCrescent } from '@mdi/js';
|
||||||
|
import Button from '../elements/buttons/button.svelte';
|
||||||
|
import Icon from '../elements/icon.svelte';
|
||||||
|
import OnboardingCard from './onboarding-card.svelte';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { colorTheme } from '$lib/stores/preferences.store';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher<{
|
||||||
|
done: void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const toggleLightTheme = () => {
|
||||||
|
$colorTheme = 'light';
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleDarkTheme = () => {
|
||||||
|
$colorTheme = 'dark';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<OnboardingCard>
|
||||||
|
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">COLOR THEME</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="pb-6 font-light">Choose a color theme for your instance. You can change this later in your settings.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-4 mb-6">
|
||||||
|
<button
|
||||||
|
class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl"
|
||||||
|
on:click={toggleLightTheme}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
|
||||||
|
>
|
||||||
|
<Icon path={mdiWhiteBalanceSunny} size="96" />
|
||||||
|
<p class="font-semibold text-4xl">LIGHT</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl border border-transparent"
|
||||||
|
on:click={toggleDarkTheme}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
|
||||||
|
>
|
||||||
|
<Icon path={mdiMoonWaningCrescent} size="96" />
|
||||||
|
<p class="font-semibold text-4xl">DARK</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex place-content-end">
|
||||||
|
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
|
||||||
|
<p>Storage Template</p>
|
||||||
|
<Icon path={mdiArrowRight} size="18" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</OnboardingCard>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
|
||||||
|
import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
|
||||||
|
import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
|
||||||
|
import { api } from '@api';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
|
||||||
|
let onboardingSteps = [OnboardingHello, OnboardingTheme, OnboadingStorageTemplate];
|
||||||
|
|
||||||
|
const handleDoneClicked = async () => {
|
||||||
|
index++;
|
||||||
|
|
||||||
|
if (index >= onboardingSteps.length) {
|
||||||
|
await api.serverInfoApi.setAdminOnboarding();
|
||||||
|
goto(AppRoute.PHOTOS);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section id="onboarding-page" class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
|
||||||
|
<svelte:component this={onboardingSteps[index]} on:done={handleDoneClicked} />
|
||||||
|
</section>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import type { PageLoad } from './$types';
|
||||||
|
import { authenticate } from '$lib/utils/auth';
|
||||||
|
import { loadConfig } from '$lib/stores/server-config.store';
|
||||||
|
|
||||||
|
export const load = (async () => {
|
||||||
|
await authenticate({ admin: true });
|
||||||
|
await loadConfig();
|
||||||
|
return {
|
||||||
|
meta: {
|
||||||
|
title: 'Onboarding',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) satisfies PageLoad;
|
||||||
Loading…
Reference in New Issue