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>
2025-12-09 21:13:45 +09:00 · 2024-01-03 23:28:32 -06:00
parent f8d64be13c
commit 18f59f78e3
35 changed files with 698 additions and 111 deletions
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -3019,6 +3019,12 @@ export interface ServerConfigDto {
     * @memberof ServerConfigDto
     */
    'isInitialized': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ServerConfigDto
+     */
+    'isOnboarded': boolean;
    /**
     * 
     * @type {string}
@@ -15142,6 +15148,44 @@ export const ServerInfoApiAxiosParamCreator = function (configuration?: Configur


    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        setAdminOnboarding: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/server-info/admin-onboarding`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
            setSearchParams(localVarUrlObj, localVarQueryParameter);
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -15233,6 +15277,15 @@ export const ServerInfoApiFp = function(configuration?: Configuration) {
            const localVarAxiosArgs = await localVarAxiosParamCreator.pingServer(options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async setAdminOnboarding(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.setAdminOnboarding(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
    }
 };

@@ -15307,6 +15360,14 @@ export const ServerInfoApiFactory = function (configuration?: Configuration, bas
        pingServer(options?: AxiosRequestConfig): AxiosPromise<ServerPingResponse> {
            return localVarFp.pingServer(options).then((request) => request(axios, basePath));
        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        setAdminOnboarding(options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.setAdminOnboarding(options).then((request) => request(axios, basePath));
+        },
    };
 };

@@ -15396,6 +15457,16 @@ export class ServerInfoApi extends BaseAPI {
    public pingServer(options?: AxiosRequestConfig) {
        return ServerInfoApiFp(this.configuration).pingServer(options).then((request) => request(this.axios, this.basePath));
    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ServerInfoApi
+     */
+    public setAdminOnboarding(options?: AxiosRequestConfig) {
+        return ServerInfoApiFp(this.configuration).setAdminOnboarding(options).then((request) => request(this.axios, this.basePath));
+    }
 }


--- a/web/src/lib/assets/settings-outline.svg
+++ b/web/src/lib/assets/settings-outline.svg
--- a/web/src/lib/components/admin-page/settings/setting-switch.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-switch.svelte
@@ -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}
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -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>
--- a/web/src/lib/components/elements/buttons/button.svelte
+++ b/web/src/lib/components/elements/buttons/button.svelte
@@ -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'}
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -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;
      }
--- a/web/src/lib/components/onboarding-page/onboarding-card.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-card.svelte
@@ -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>
--- a/web/src/lib/components/onboarding-page/onboarding-hello.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-hello.svelte
@@ -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>
--- a/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
@@ -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>
--- a/web/src/lib/components/onboarding-page/onboarding-theme.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
@@ -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>
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -36,6 +36,7 @@ export enum AppRoute {
  AUTH_LOGOUT = '/auth/logout',
  AUTH_REGISTER = '/auth/register',
  AUTH_CHANGE_PASSWORD = '/auth/change-password',
+  AUTH_ONBOARDING = '/auth/onboarding',
 }

 export enum ProjectionType {
--- a/web/src/lib/stores/server-config.store.ts
+++ b/web/src/lib/stores/server-config.store.ts
@@ -26,6 +26,7 @@ export const serverConfig = writable<ServerConfig>({
  loginPageMessage: '',
  trashDays: 30,
  isInitialized: false,
+  isOnboarded: false,
  externalDomain: '',
 });

--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -18,6 +18,8 @@
  import { api } from '@api';
  import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
  import { user } from '$lib/stores/user.store';
+  import { browser } from '$app/environment';
+  import { colorTheme } from '$lib/stores/preferences.store';

  let showNavigationLoadingBar = false;
  let albumId: string | undefined;
@@ -25,6 +27,16 @@
  const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
  const isAuthRoute = (route?: string) => route?.startsWith('/auth');

+  $: {
+    if (browser) {
+      if ($colorTheme === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+    }
+  }
+
  if (isSharedLinkRoute($page.route?.id)) {
    api.setKey($page.params.key);
  }
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@@ -19,6 +19,7 @@
    <LoginForm
      on:success={() => goto(AppRoute.PHOTOS, { invalidateAll: true })}
      on:firstLogin={() => goto(AppRoute.AUTH_CHANGE_PASSWORD)}
+      on:onboarding={() => goto(AppRoute.AUTH_ONBOARDING)}
    />
  </FullscreenContainer>
 {/if}
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -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>
--- a/web/src/routes/auth/onboarding/+page.ts
+++ b/web/src/routes/auth/onboarding/+page.ts
@@ -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;