refactor: server config and feature flags managers (#23894)

2026-05-18 03:10:24 +03:00 · 2025-11-14 20:10:44 +01:00
parent f11bfb9581
commit 1200bfad13
68 changed files with 378 additions and 416 deletions
@@ -3,7 +3,8 @@
  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
  import { AppRoute } from '$lib/constants';
  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { featureFlags, serverConfig } from '$lib/stores/system-config-manager.svelte';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
  import { oauth } from '$lib/utils';
  import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
  import { login, type LoginResponseDto } from '@immich/sdk';
@@ -25,6 +26,8 @@
  let loading = $state(false);
  let oauthLoading = $state(true);

+  const serverConfig = $derived(serverConfigManager.value);
+
  const onSuccess = async (user: LoginResponseDto) => {
    await goto(data.continueUrl, { invalidateAll: true });
    eventManager.emit('AuthLogin', user);
@@ -34,7 +37,7 @@
  const onOnboarding = () => goto(AppRoute.AUTH_ONBOARDING);

  onMount(async () => {
-    if (!$featureFlags.oauth) {
+    if (!featureFlagsManager.value.oauth) {
      oauthLoading = false;
      return;
    }
@@ -60,7 +63,7 @@

    try {
      if (
-        ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) ||
+        (featureFlagsManager.value.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) ||
        oauth.isAutoLaunchEnabled(globalThis.location)
      ) {
        await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
@@ -80,7 +83,7 @@
      loading = true;
      const user = await login({ loginCredentialDto: { email, password } });

-      if (user.isAdmin && !$serverConfig.isOnboarded) {
+      if (user.isAdmin && !serverConfig.isOnboarded) {
        await onOnboarding();
        return;
      }
@@ -123,64 +126,62 @@
  };
 </script>

-{#if $featureFlags.loaded}
-  <AuthPageLayout title={data.meta.title}>
-    <Stack gap={4}>
-      {#if $serverConfig.loginPageMessage}
-        <Alert color="primary" class="mb-6">
-          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          {@html $serverConfig.loginPageMessage}
-        </Alert>
-      {/if}
+<AuthPageLayout title={data.meta.title}>
+  <Stack gap={4}>
+    {#if serverConfig.loginPageMessage}
+      <Alert color="primary" class="mb-6">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html serverConfig.loginPageMessage}
+      </Alert>
+    {/if}

-      {#if !oauthLoading && $featureFlags.passwordLogin}
-        <form {onsubmit} class="flex flex-col gap-4">
-          {#if errorMessage}
-            <Alert color="danger" title={errorMessage} closable />
-          {/if}
-
-          <Field label={$t('email')}>
-            <Input id="email" name="email" type="email" autocomplete="email" bind:value={email} />
-          </Field>
-
-          <Field label={$t('password')}>
-            <PasswordInput id="password" bind:value={password} autocomplete="current-password" />
-          </Field>
-
-          <Button type="submit" size="large" shape="round" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
-        </form>
-      {/if}
-
-      {#if $featureFlags.oauth}
-        {#if $featureFlags.passwordLogin}
-          <div class="inline-flex w-full items-center justify-center my-4">
-            <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
-            <span
-              class="absolute start-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white uppercase"
-            >
-              {$t('or')}
-            </span>
-          </div>
+    {#if !oauthLoading && featureFlagsManager.value.passwordLogin}
+      <form {onsubmit} class="flex flex-col gap-4">
+        {#if errorMessage}
+          <Alert color="danger" title={errorMessage} closable />
        {/if}
-        {#if oauthError}
-          <Alert color="danger" title={oauthError} closable />
-        {/if}
-        <Button
-          shape="round"
-          loading={loading || oauthLoading}
-          disabled={loading || oauthLoading}
-          size="large"
-          fullWidth
-          color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
-          onclick={handleOAuthLogin}
-        >
-          {$serverConfig.oauthButtonText}
-        </Button>
-      {/if}

-      {#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
-        <Alert color="warning" title={$t('login_has_been_disabled')} />
+        <Field label={$t('email')}>
+          <Input id="email" name="email" type="email" autocomplete="email" bind:value={email} />
+        </Field>
+
+        <Field label={$t('password')}>
+          <PasswordInput id="password" bind:value={password} autocomplete="current-password" />
+        </Field>
+
+        <Button type="submit" size="large" shape="round" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
+      </form>
+    {/if}
+
+    {#if featureFlagsManager.value.oauth}
+      {#if featureFlagsManager.value.passwordLogin}
+        <div class="inline-flex w-full items-center justify-center my-4">
+          <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
+          <span
+            class="absolute start-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white uppercase"
+          >
+            {$t('or')}
+          </span>
+        </div>
      {/if}
-    </Stack>
-  </AuthPageLayout>
-{/if}
+      {#if oauthError}
+        <Alert color="danger" title={oauthError} closable />
+      {/if}
+      <Button
+        shape="round"
+        loading={loading || oauthLoading}
+        disabled={loading || oauthLoading}
+        size="large"
+        fullWidth
+        color={featureFlagsManager.value.passwordLogin ? 'secondary' : 'primary'}
+        onclick={handleOAuthLogin}
+      >
+        {serverConfig.oauthButtonText}
+      </Button>
+    {/if}
+
+    {#if !featureFlagsManager.value.passwordLogin && !featureFlagsManager.value.oauth}
+      <Alert color="warning" title={$t('login_has_been_disabled')} />
+    {/if}
+  </Stack>
+</AuthPageLayout>
@@ -1,16 +1,13 @@
 import { AppRoute } from '$lib/constants';
-import { serverConfig } from '$lib/stores/system-config-manager.svelte';
+import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import { getFormatter } from '$lib/utils/i18n';
-
 import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';

 export const load = (async ({ parent, url }) => {
  await parent();
-  const { isInitialized } = get(serverConfig);

-  if (!isInitialized) {
+  if (!serverConfigManager.value.isInitialized) {
    // Admin not registered
    redirect(302, AppRoute.AUTH_REGISTER);
  }
@@ -11,8 +11,9 @@
  import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
  import OnboardingUserPrivacy from '$lib/components/onboarding-page/onboarding-user-privacy.svelte';
  import { AppRoute, QueryParameter } from '$lib/constants';
+  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
+  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
  import { OnboardingRole } from '$lib/models/onboarding-role';
-  import { retrieveServerConfig, serverConfig, systemConfigManager } from '$lib/stores/system-config-manager.svelte';
  import { user } from '$lib/stores/user.store';
  import { setUserOnboarding, updateAdminOnboarding } from '@immich/sdk';
  import {
@@ -95,7 +96,9 @@
  ]);

  let index = $state(0);
-  let userRole = $derived($user.isAdmin && !$serverConfig.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER);
+  let userRole = $derived(
+    $user.isAdmin && !serverConfigManager.value.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER,
+  );

  let onboardingStepCount = $derived(onboardingSteps.filter((step) => shouldRunStep(step.role, userRole)).length);
  let onboardingProgress = $derived(
@@ -105,7 +108,9 @@
  const shouldRunStep = (stepRole: OnboardingRole, userRole: OnboardingRole) => {
    return (
      stepRole === OnboardingRole.USER ||
-      (stepRole === OnboardingRole.SERVER && userRole === OnboardingRole.SERVER && !$serverConfig.isOnboarded)
+      (stepRole === OnboardingRole.SERVER &&
+        userRole === OnboardingRole.SERVER &&
+        !serverConfigManager.value.isOnboarded)
    );
  };

@@ -127,7 +132,7 @@
    if (nextStepIndex == -1) {
      if ($user.isAdmin) {
        await updateAdminOnboarding({ adminOnboardingUpdateDto: { isOnboarded: true } });
-        await retrieveServerConfig();
+        await serverConfigManager.loadServerConfig();
      }

      await setUserOnboarding({
@@ -2,7 +2,7 @@
  import { goto } from '$app/navigation';
  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
  import { AppRoute } from '$lib/constants';
-  import { retrieveServerConfig } from '$lib/stores/system-config-manager.svelte';
+  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
  import { handleError } from '$lib/utils/handle-error';
  import { signUpAdmin } from '@immich/sdk';
  import { Alert, Button, Field, Input, PasswordInput, Text } from '@immich/ui';
@@ -37,7 +37,7 @@

    try {
      await signUpAdmin({ signUpDto: { email, password, name } });
-      await retrieveServerConfig();
+      await serverConfigManager.loadServerConfig();
      await goto(AppRoute.AUTH_LOGIN);
    } catch (error) {
      handleError(error, $t('errors.unable_to_create_admin_account'));
@@ -1,14 +1,12 @@
 import { AppRoute } from '$lib/constants';
-import { serverConfig } from '$lib/stores/system-config-manager.svelte';
+import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import { getFormatter } from '$lib/utils/i18n';
 import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';

 export const load = (async ({ parent }) => {
  await parent();
-  const { isInitialized } = get(serverConfig);
-  if (isInitialized) {
+  if (serverConfigManager.value.isInitialized) {
    // Admin has been registered, redirect to login
    redirect(302, AppRoute.AUTH_LOGIN);
  }