helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): add privacy step in the onboarding (#11359)

Browse source 
* feat: add privacy step in the onboarding

* fix: remove console.log

* feat:Details the implications of enabling the map on the settings page

Added a link to the guide on customizing map styles as well

* feat: add map implication

* refactor: onboarding style

* fix: tile provider

* fix: remove long explanations

* chore: cleanup

---------

Co-authored-by: pcouy <contact@pierre-couy.dev>
Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
martin 2024-08-13 19:01:30 +02:00 • committed by GitHub
parent c924f6c27c
commit fdf0b16fe3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 136 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/components/onboarding-page/onboarding-card.svelte
View file

@ -1,11 +1,27 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { fade } from 'svelte/transition';
export let title: string | undefined = undefined;
export let icon: string | undefined = undefined;
</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"
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}
<slot />
</div>

9
web/src/lib/components/onboarding-page/onboarding-hello.svelte
View file

@ -3,14 +3,11 @@
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 ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { user } from '$lib/stores/user.store';
import { t } from 'svelte-i18n';
const dispatch = createEventDispatcher<{
done: void;
}>();
export let onDone: () => void;
</script>
<OnboardingCard>
@ -21,7 +18,7 @@
<p class="text-3xl pb-6 font-light">{$t('onboarding_welcome_description')}</p>
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
<Button class="flex gap-2 place-content-center" on:click={() => onDone()}>
<p>{$t('theme')}</p>
<Icon path={mdiArrowRight} size="18" />
</Button>

63
web/src/lib/components/onboarding-page/onboarding-privacy.svelte Normal file
View file

@ -0,0 +1,63 @@
<script lang="ts">
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';
import { mdiArrowLeft, mdiArrowRight, mdiIncognito } from '@mdi/js';
import { onMount } from 'svelte';
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { t } from 'svelte-i18n';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let onDone: () => void;
export let onPrevious: () => void;
let config: SystemConfigDto | null = null;
onMount(async () => {
config = await getConfig();
});
</script>
<OnboardingCard title={$t('privacy')} icon={mdiIncognito}>
<p>
{$t('onboarding_privacy_description')}
</p>
{#if config && $user}
<AdminSettings bind:config let:handleSave>
<SettingSwitch
title={$t('admin.map_settings')}
subtitle={$t('admin.map_implications')}
bind:checked={config.map.enabled}
/>
<SettingSwitch
title={$t('admin.version_check_settings')}
subtitle={$t('admin.version_check_implications')}
bind:checked={config.newVersionCheck.enabled}
/>
<div class="flex pt-4">
<div class="w-full flex place-content-start">
<Button class="flex gap-2 place-content-center" on:click={() => onPrevious()}>
<Icon path={mdiArrowLeft} size="18" />
<p>{$t('theme')}</p>
</Button>
</div>
<div class="flex w-full place-content-end">
<Button
on:click={() => {
handleSave({ map: config?.map, newVersionCheck: config?.newVersionCheck });
onDone();
}}
>
<span class="flex place-content-center place-items-center gap-2">
{$t('admin.storage_template_settings')}
<Icon path={mdiArrowRight} size="18" />
</span>
</Button>
</div>
</div>
</AdminSettings>
{/if}
</OnboardingCard>

29
web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
View file

@ -2,20 +2,18 @@
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';
import { mdiArrowLeft, mdiCheck } from '@mdi/js';
import { createEventDispatcher, onMount } from 'svelte';
import AdminSettings from '../admin-page/settings/admin-settings.svelte';
import StorageTemplateSettings from '../admin-page/settings/storage-template/storage-template-settings.svelte';
import Button from '../elements/buttons/button.svelte';
import Icon from '../elements/icon.svelte';
import { mdiArrowLeft, mdiCheck, mdiHarddisk } from '@mdi/js';
import { onMount } from 'svelte';
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 Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
const dispatch = createEventDispatcher<{
done: void;
previous: void;
}>();
export let onDone: () => void;
export let onPrevious: () => void;
let config: SystemConfigDto | null = null;
@ -24,11 +22,7 @@
});
</script>
<OnboardingCard>
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">
{$t('admin.storage_template_settings').toUpperCase()}
</p>
<OnboardingCard title={$t('admin.storage_template_settings')} icon={mdiHarddisk}>
<p>
<FormatMessage key="admin.storage_template_onboarding_description" let:message>
<a class="underline" href="https://immich.app/docs/administration/storage-template">{message}</a>
@ -45,10 +39,11 @@
{savedConfig}
onSave={(config) => handleSave(config)}
onReset={(options) => handleReset(options)}
duration={0}
>
<div class="flex pt-4">
<div class="w-full flex place-content-start">
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('previous')}>
<Button class="flex gap-2 place-content-center" on:click={() => onPrevious()}>
<Icon path={mdiArrowLeft} size="18" />
<p>{$t('theme')}</p>
</Button>
@ -57,7 +52,7 @@
<Button
on:click={() => {
handleSave({ storageTemplate: config?.storageTemplate });
dispatch('done');
onDone();
}}
>
<span class="flex place-content-center place-items-center gap-2">

20
web/src/lib/components/onboarding-page/onboarding-theme.svelte
View file

@ -1,23 +1,17 @@
<script lang="ts">
import { mdiArrowRight } from '@mdi/js';
import Button from '../elements/buttons/button.svelte';
import Icon from '../elements/icon.svelte';
import { mdiArrowRight, mdiThemeLightDark } from '@mdi/js';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { createEventDispatcher } from 'svelte';
import { colorTheme } from '$lib/stores/preferences.store';
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import { Theme } from '$lib/constants';
import { t } from 'svelte-i18n';
const dispatch = createEventDispatcher<{
done: void;
previous: void;
}>();
export let onDone: () => void;
</script>
<OnboardingCard>
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">{$t('color_theme').toUpperCase()}</p>
<OnboardingCard icon={mdiThemeLightDark} title={$t('color_theme')}>
<div>
<p class="pb-6 font-light">{$t('onboarding_theme_description')}</p>
</div>
@ -51,8 +45,8 @@
<div class="flex">
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
<p>{$t('admin.storage_template_settings')}</p>
<Button class="flex gap-2 place-content-center" on:click={() => onDone()}>
<p>{$t('privacy')}</p>
<Icon path={mdiArrowRight} size="18" />
</Button>
</div>