mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
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>
This commit is contained in:
Alex
GitHub
parent
f8d64be13c
commit
18f59f78e3
35 changed files with 698 additions and 111 deletions
|
|
@ -16,7 +16,7 @@
|
|||
<div class="flex place-items-center justify-between">
|
||||
<div>
|
||||
<div class="flex h-[26px] place-items-center gap-1">
|
||||
<label class="immich-form-label text-sm" for={title}>
|
||||
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
|
||||
{title}
|
||||
</label>
|
||||
{#if isEdited}
|
||||
|
|
|
|||
|
|
@ -16,15 +16,22 @@
|
|||
import { user } from '$lib/stores/user.store';
|
||||
import type { ResetOptions } from '$lib/utils/dipatch';
|
||||
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiCheck } from '@mdi/js';
|
||||
|
||||
export let storageConfig: SystemConfigStorageTemplateDto;
|
||||
export let disabled = false;
|
||||
export let minified = false;
|
||||
|
||||
let savedConfig: SystemConfigStorageTemplateDto;
|
||||
let defaultConfig: SystemConfigStorageTemplateDto;
|
||||
let templateOptions: SystemConfigTemplateStorageOptionDto;
|
||||
let selectedPreset = '';
|
||||
|
||||
const dispatch = createEventDispatcher<{ save: void }>();
|
||||
|
||||
const handleReset = (detail: ResetOptions) => {
|
||||
if (detail.default) {
|
||||
resetToDefault();
|
||||
|
|
@ -115,10 +122,18 @@
|
|||
storageConfig.template = result.data.storageTemplate.template;
|
||||
savedConfig.template = result.data.storageTemplate.template;
|
||||
|
||||
storageConfig.enabled = result.data.storageTemplate.enabled;
|
||||
savedConfig.enabled = result.data.storageTemplate.enabled;
|
||||
|
||||
storageConfig.hashVerificationEnabled = result.data.storageTemplate.hashVerificationEnabled;
|
||||
savedConfig.hashVerificationEnabled = result.data.storageTemplate.hashVerificationEnabled;
|
||||
|
||||
notificationController.show({
|
||||
message: 'Storage template saved',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
|
||||
dispatch('save');
|
||||
} catch (e) {
|
||||
console.error('Error [storage-template-settings] [saveSetting]', e);
|
||||
notificationController.show({
|
||||
|
|
@ -152,118 +167,138 @@
|
|||
{disabled}
|
||||
subtitle="Enable storage template engine"
|
||||
bind:checked={storageConfig.enabled}
|
||||
isEdited={!(storageConfig.enabled === savedConfig.enabled)}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
title="HASH VERIFICATION ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enables hash verification, don't disable this unless you're certain of the implications"
|
||||
bind:checked={storageConfig.hashVerificationEnabled}
|
||||
/>
|
||||
{#if !minified}
|
||||
<SettingSwitch
|
||||
title="HASH VERIFICATION ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enables hash verification, don't disable this unless you're certain of the implications"
|
||||
bind:checked={storageConfig.hashVerificationEnabled}
|
||||
isEdited={!(storageConfig.hashVerificationEnabled === savedConfig.hashVerificationEnabled)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<hr />
|
||||
{#if storageConfig.enabled}
|
||||
<hr />
|
||||
|
||||
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Variables</h3>
|
||||
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Variables</h3>
|
||||
|
||||
<section class="support-date">
|
||||
{#await getSupportDateTimeFormat()}
|
||||
<LoadingSpinner />
|
||||
{:then options}
|
||||
<div transition:fade={{ duration: 200 }}>
|
||||
<SupportedDatetimePanel {options} />
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<section class="support-date">
|
||||
<SupportedVariablesPanel />
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col mt-4">
|
||||
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
|
||||
|
||||
<div class="my-2 text-sm">
|
||||
<h4>PREVIEW</h4>
|
||||
</div>
|
||||
|
||||
<p class="text-sm">
|
||||
Approximately path length limit : <span
|
||||
class="font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>{parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length}</span
|
||||
>/260
|
||||
</p>
|
||||
|
||||
<p class="text-sm">
|
||||
<code class="text-immich-primary dark:text-immich-dark-primary">{$user.storageLabel || $user.id}</code> is the
|
||||
user's Storage Label
|
||||
</p>
|
||||
|
||||
<p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
|
||||
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
|
||||
>UPLOAD_LOCATION/{$user.storageLabel || $user.id}</span
|
||||
>/{parsedTemplate()}.jpg
|
||||
</p>
|
||||
|
||||
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
|
||||
<div class="flex flex-col my-2">
|
||||
<label class="text-sm" for="preset-select">PRESET</label>
|
||||
<select
|
||||
class="immich-form-input p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
|
||||
disabled={disabled || !storageConfig.enabled}
|
||||
name="presets"
|
||||
id="preset-select"
|
||||
bind:value={selectedPreset}
|
||||
on:change={handlePresetSelection}
|
||||
>
|
||||
{#each templateOptions.presetOptions as preset}
|
||||
<option value={preset}>{renderTemplate(preset)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2 align-bottom">
|
||||
<SettingInputField
|
||||
label="TEMPLATE"
|
||||
disabled={disabled || !storageConfig.enabled}
|
||||
required
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
bind:value={storageConfig.template}
|
||||
isEdited={!(storageConfig.template === savedConfig.template)}
|
||||
/>
|
||||
|
||||
<div class="flex-0">
|
||||
<SettingInputField label="EXTENSION" inputType={SettingInputFieldType.TEXT} value={'.jpg'} disabled />
|
||||
<section class="support-date">
|
||||
{#await getSupportDateTimeFormat()}
|
||||
<LoadingSpinner />
|
||||
{:then options}
|
||||
<div transition:fade={{ duration: 200 }}>
|
||||
<SupportedDatetimePanel {options} />
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<section class="support-date">
|
||||
<SupportedVariablesPanel />
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col mt-4">
|
||||
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
|
||||
|
||||
<div class="my-2 text-sm">
|
||||
<h4>PREVIEW</h4>
|
||||
</div>
|
||||
|
||||
<div id="migration-info" class="mt-2 text-sm">
|
||||
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Notes</h3>
|
||||
<section class="flex flex-col gap-2">
|
||||
<p>
|
||||
Template changes will only apply to new assets. To retroactively apply the template to previously
|
||||
uploaded assets, run the
|
||||
<a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage Migration Job</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
The template variable <span class="font-mono">{`{{album}}`}</span> will always be empty for new assets,
|
||||
so manually running the
|
||||
<p class="text-sm">
|
||||
Approximately path length limit : <span
|
||||
class="font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>{parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length}</span
|
||||
>/260
|
||||
</p>
|
||||
|
||||
<a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage Migration Job</a
|
||||
>
|
||||
is required in order to successfully use the variable.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<SettingButtonsRow
|
||||
on:reset={({ detail }) => handleReset(detail)}
|
||||
on:save={saveSetting}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
{disabled}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<p class="text-sm">
|
||||
<code class="text-immich-primary dark:text-immich-dark-primary">{$user.storageLabel || $user.id}</code> is the
|
||||
user's Storage Label
|
||||
</p>
|
||||
|
||||
<p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
|
||||
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
|
||||
>UPLOAD_LOCATION/{$user.storageLabel || $user.id}</span
|
||||
>/{parsedTemplate()}.jpg
|
||||
</p>
|
||||
|
||||
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
|
||||
<div class="flex flex-col my-2">
|
||||
<label class="text-sm" for="preset-select">PRESET</label>
|
||||
<select
|
||||
class="immich-form-input p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
|
||||
disabled={disabled || !storageConfig.enabled}
|
||||
name="presets"
|
||||
id="preset-select"
|
||||
bind:value={selectedPreset}
|
||||
on:change={handlePresetSelection}
|
||||
>
|
||||
{#each templateOptions.presetOptions as preset}
|
||||
<option value={preset}>{renderTemplate(preset)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2 align-bottom">
|
||||
<SettingInputField
|
||||
label="TEMPLATE"
|
||||
disabled={disabled || !storageConfig.enabled}
|
||||
required
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
bind:value={storageConfig.template}
|
||||
isEdited={!(storageConfig.template === savedConfig.template)}
|
||||
/>
|
||||
|
||||
<div class="flex-0">
|
||||
<SettingInputField label="EXTENSION" inputType={SettingInputFieldType.TEXT} value={'.jpg'} disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !minified}
|
||||
<div id="migration-info" class="mt-2 text-sm">
|
||||
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Notes</h3>
|
||||
<section class="flex flex-col gap-2">
|
||||
<p>
|
||||
Template changes will only apply to new assets. To retroactively apply the template to previously
|
||||
uploaded assets, run the
|
||||
<a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage Migration Job</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
The template variable <span class="font-mono">{`{{album}}`}</span> will always be empty for new
|
||||
assets, so manually running the
|
||||
|
||||
<a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage Migration Job</a
|
||||
>
|
||||
is required in order to successfully use the variable.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if minified}
|
||||
<div class="flex w-full place-content-end">
|
||||
<Button on:click={saveSetting}>
|
||||
<span class="flex place-content-center place-items-center gap-2">
|
||||
Done
|
||||
<Icon path={mdiCheck} size="18" />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<SettingButtonsRow
|
||||
on:reset={({ detail }) => handleReset(detail)}
|
||||
on:save={saveSetting}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig) && !minified}
|
||||
{disabled}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@
|
|||
export let fullwidth = false;
|
||||
export let border = false;
|
||||
export let title: string | undefined = '';
|
||||
let className = '';
|
||||
export { className as class };
|
||||
|
||||
const colorClasses: Record<Color, string> = {
|
||||
primary:
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
'text-gray-500 dark:text-immich-dark-primary enabled:hover:bg-gray-100 enabled:dark:hover:bg-gray-700',
|
||||
'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
|
||||
red: 'bg-red-500 text-white enabled:hover:bg-red-400',
|
||||
green: 'bg-lime-600 text-white enabled:hover:bg-lime-500',
|
||||
green: 'bg-green-500 text-gray-800 enabled:hover:bg-green-400/90',
|
||||
gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
|
||||
'transparent-gray':
|
||||
'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',
|
||||
|
|
@ -60,7 +62,7 @@
|
|||
{disabled}
|
||||
{title}
|
||||
on:click
|
||||
class="inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
|
||||
class="{className} inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
|
||||
color
|
||||
]} {sizeClasses[size]}"
|
||||
class:rounded-lg={rounded === 'lg'}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
const dispatch = createEventDispatcher<{
|
||||
success: void;
|
||||
firstLogin: void;
|
||||
onboarding: void;
|
||||
}>();
|
||||
|
||||
onMount(async () => {
|
||||
|
|
@ -57,14 +58,21 @@
|
|||
errorMessage = '';
|
||||
loading = true;
|
||||
|
||||
const { data } = await api.authenticationApi.login({
|
||||
const { data: user } = await api.authenticationApi.login({
|
||||
loginCredentialDto: {
|
||||
email,
|
||||
password,
|
||||
},
|
||||
});
|
||||
|
||||
if (!data.isAdmin && data.shouldChangePassword) {
|
||||
const { data: serverConfig } = await api.serverInfoApi.getServerConfig();
|
||||
|
||||
if (user.isAdmin && !serverConfig.isOnboarded) {
|
||||
dispatch('onboarding');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!user.isAdmin && user.shouldChangePassword) {
|
||||
dispatch('firstLogin');
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue