Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add privacy step in the onboarding
Browse files Browse the repository at this point in the history
martabal committed Jul 25, 2024
1 parent 8e6bc13 commit 4ec1cf9
Showing 7 changed files with 92 additions and 29 deletions.
1 change: 1 addition & 0 deletions e2e/src/web/specs/auth.e2e-spec.ts
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@ test.describe('Registration', () => {
// onboarding
await expect(page).toHaveURL('/auth/onboarding');
await page.getByRole('button', { name: 'Theme' }).click();
await page.getByRole('button', { name: 'Privacy' }).click();
await page.getByRole('button', { name: 'Storage Template' }).click();
await page.getByRole('button', { name: 'Done' }).click();

Original file line number Diff line number Diff line change
@@ -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 changes: 63 additions & 0 deletions web/src/lib/components/onboarding-page/onboarding-privacy.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<script lang="ts">
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';
import { mdiArrowLeft, mdiArrowRight } 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();
console.log(config);
});
</script>

<OnboardingCard>
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">
{$t('privacy').toUpperCase()}
</p>

<p>
{$t('onboarding_privacy_description')}
</p>

{#if config && $user}
<AdminSettings bind:config let:handleSave>
<SettingSwitch title={$t('admin.map_enable_description')} bind:checked={config.map.enabled} />
<SettingSwitch
title={$t('admin.version_check_enabled_description')}
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>
Original file line number Diff line number Diff line change
@@ -3,19 +3,17 @@
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 { 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;
@@ -48,7 +46,7 @@
>
<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 +55,7 @@
<Button
on:click={() => {
handleSave({ storageTemplate: config?.storageTemplate });
dispatch('done');
onDone();
}}
>
<span class="flex place-content-center place-items-center gap-2">
14 changes: 5 additions & 9 deletions web/src/lib/components/onboarding-page/onboarding-theme.svelte
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
<script lang="ts">
import { mdiArrowRight } from '@mdi/js';
import Button from '../elements/buttons/button.svelte';
import Icon from '../elements/icon.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 { 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>
@@ -51,8 +47,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>
2 changes: 2 additions & 0 deletions web/src/lib/i18n/en.json
Original file line number Diff line number Diff line change
@@ -866,6 +866,7 @@
"ok": "Ok",
"oldest_first": "Oldest first",
"onboarding": "Onboarding",
"onboarding_privacy_description": "To work properly, Immich needs to rely on external services such as a tile provider used for the map feature and Github to be aware of new releases",
"onboarding_theme_description": "Choose a color theme for your instance. You can change this later in your settings.",
"onboarding_welcome_description": "Let's get your instance set up with some common settings.",
"onboarding_welcome_user": "Welcome, {user}",
@@ -935,6 +936,7 @@
"previous_memory": "Previous memory",
"previous_or_next_photo": "Previous or next photo",
"primary": "Primary",
"privacy": "Privacy",
"profile_image_of_user": "Profile image of {user}",
"profile_picture_set": "Profile picture set.",
"public_album": "Public album",
12 changes: 9 additions & 3 deletions web/src/routes/auth/onboarding/+page.svelte
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
import OnboardingPrivacy from '$lib/components/onboarding-page/onboarding-privacy.svelte';
import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
import { AppRoute, QueryParameter } from '$lib/constants';
@@ -11,12 +12,17 @@
interface OnboardingStep {
name: string;
component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate;
component:
| typeof OnboardingHello
| typeof OnboardingTheme
| typeof OnboadingStorageTemplate
| typeof OnboardingPrivacy;
}
const onboardingSteps: OnboardingStep[] = [
{ name: 'hello', component: OnboardingHello },
{ name: 'theme', component: OnboardingTheme },
{ name: 'privacy', component: OnboardingPrivacy },
{ name: 'storage', component: OnboadingStorageTemplate },
];
@@ -55,8 +61,8 @@
<div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
<svelte:component
this={onboardingSteps[index].component}
on:done={handleDoneClicked}
on:previous={handlePrevious}
onDone={handleDoneClicked}
onPrevious={handlePrevious}
/>
</div>
</div>

0 comments on commit 4ec1cf9

Please sign in to comment.