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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
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.