refactor: auth manager (#27638)

web/src/lib/components/user-settings-page/download-settings.svelte

@@ -2,7 +2,7 @@
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import { preferences } from '$lib/stores/user.store';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { updateMyPreferences } from '@immich/sdk';
@@ -10,12 +10,12 @@
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
-  let archiveSize = $state(convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB));
-  let includeEmbeddedVideos = $state($preferences?.download?.includeEmbeddedVideos || false);
+  let archiveSize = $state(convertFromBytes(authManager.preferences.download.archiveSize || 4, ByteUnit.GiB));
+  let includeEmbeddedVideos = $state(authManager.preferences.download.includeEmbeddedVideos || false);
 
   const handleSave = async () => {
     try {
-      const newPreferences = await updateMyPreferences({
+      const response = await updateMyPreferences({
         userPreferencesUpdateDto: {
           download: {
             archiveSize: Math.floor(convertToBytes(archiveSize, ByteUnit.GiB)),
@@ -23,7 +23,8 @@
           },
         },
       });
-      $preferences = newPreferences;
+
+      authManager.setPreferences(response);
 
       toastManager.primary($t('saved_settings'));
     } catch (error) {

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import { preferences } from '$lib/stores/user.store';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetOrder, updateMyPreferences } from '@immich/sdk';
   import { Button, Field, NumberInput, Select, Switch, toastManager } from '@immich/ui';
@@ -8,37 +8,37 @@
   import { fade } from 'svelte/transition';
 
   // Albums
-  let defaultAssetOrder = $state($preferences?.albums?.defaultAssetOrder ?? AssetOrder.Desc);
+  let defaultAssetOrder = $state(authManager.preferences.albums?.defaultAssetOrder ?? AssetOrder.Desc);
 
   // Folders
-  let foldersEnabled = $state($preferences?.folders?.enabled ?? false);
-  let foldersSidebar = $state($preferences?.folders?.sidebarWeb ?? false);
+  let foldersEnabled = $state(authManager.preferences.folders?.enabled ?? false);
+  let foldersSidebar = $state(authManager.preferences.folders?.sidebarWeb ?? false);
 
   // Memories
-  let memoriesEnabled = $state($preferences?.memories?.enabled ?? true);
-  let memoriesDuration = $state($preferences?.memories?.duration ?? 5);
+  let memoriesEnabled = $state(authManager.preferences.memories?.enabled ?? true);
+  let memoriesDuration = $state(authManager.preferences.memories?.duration ?? 5);
 
   // People
-  let peopleEnabled = $state($preferences?.people?.enabled ?? false);
-  let peopleSidebar = $state($preferences?.people?.sidebarWeb ?? false);
+  let peopleEnabled = $state(authManager.preferences.people?.enabled ?? false);
+  let peopleSidebar = $state(authManager.preferences.people?.sidebarWeb ?? false);
 
   // Ratings
-  let ratingsEnabled = $state($preferences?.ratings?.enabled ?? false);
+  let ratingsEnabled = $state(authManager.preferences.ratings?.enabled ?? false);
 
   // Shared links
-  let sharedLinksEnabled = $state($preferences?.sharedLinks?.enabled ?? true);
-  let sharedLinkSidebar = $state($preferences?.sharedLinks?.sidebarWeb ?? false);
+  let sharedLinksEnabled = $state(authManager.preferences.sharedLinks?.enabled ?? true);
+  let sharedLinkSidebar = $state(authManager.preferences.sharedLinks?.sidebarWeb ?? false);
 
   // Tags
-  let tagsEnabled = $state($preferences?.tags?.enabled ?? false);
-  let tagsSidebar = $state($preferences?.tags?.sidebarWeb ?? false);
+  let tagsEnabled = $state(authManager.preferences.tags?.enabled ?? false);
+  let tagsSidebar = $state(authManager.preferences.tags?.sidebarWeb ?? false);
 
   // Cast
-  let gCastEnabled = $state($preferences?.cast?.gCastEnabled ?? false);
+  let gCastEnabled = $state(authManager.preferences.cast?.gCastEnabled ?? false);
 
   const handleSave = async () => {
     try {
-      const data = await updateMyPreferences({
+      const response = await updateMyPreferences({
         userPreferencesUpdateDto: {
           albums: { defaultAssetOrder },
           folders: { enabled: foldersEnabled, sidebarWeb: foldersSidebar },
@@ -51,8 +51,7 @@
         },
       });
 
-      $preferences = { ...data };
-
+      authManager.setPreferences(response);
       toastManager.primary($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));

web/src/lib/components/user-settings-page/notifications-settings.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import { preferences } from '$lib/stores/user.store';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateMyPreferences } from '@immich/sdk';
   import { Button, Field, Switch, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
-  let emailNotificationsEnabled = $state($preferences?.emailNotifications?.enabled ?? true);
-  let albumInviteNotificationEnabled = $state($preferences?.emailNotifications?.albumInvite ?? true);
-  let albumUpdateNotificationEnabled = $state($preferences?.emailNotifications?.albumUpdate ?? true);
+  let emailNotificationsEnabled = $state(authManager.preferences.emailNotifications?.enabled ?? true);
+  let albumInviteNotificationEnabled = $state(authManager.preferences.emailNotifications?.albumInvite ?? true);
+  let albumUpdateNotificationEnabled = $state(authManager.preferences.emailNotifications?.albumUpdate ?? true);
 
   const handleSave = async () => {
     try {
-      const data = await updateMyPreferences({
+      const response = await updateMyPreferences({
         userPreferencesUpdateDto: {
           emailNotifications: {
             enabled: emailNotificationsEnabled,
@@ -22,10 +22,7 @@
         },
       });
 
-      $preferences.emailNotifications.enabled = data.emailNotifications.enabled;
-      $preferences.emailNotifications.albumInvite = data.emailNotifications.albumInvite;
-      $preferences.emailNotifications.albumUpdate = data.emailNotifications.albumUpdate;
-
+      authManager.setPreferences(response);
       toastManager.primary($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -1,27 +1,22 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { oauth } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { type UserAdminResponseDto } from '@immich/sdk';
   import { Button, LoadingSpinner, toastManager } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
-  interface Props {
-    user: UserAdminResponseDto;
-  }
-
-  let { user = $bindable() }: Props = $props();
-
   let loading = $state(true);
 
   onMount(async () => {
     if (oauth.isCallback(globalThis.location)) {
       try {
         loading = true;
-        user = await oauth.link(globalThis.location);
+        const response = await oauth.link(globalThis.location);
+        authManager.setUser(response);
         toastManager.primary($t('linked_oauth_account'));
       } catch (error) {
         handleError(error, $t('errors.unable_to_link_oauth_account'));
@@ -35,7 +30,8 @@
 
   const handleUnlink = async () => {
     try {
-      user = await oauth.unlink();
+      const response = await oauth.unlink();
+      authManager.setUser(response);
       toastManager.primary($t('unlinked_oauth_account'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_unlink_account'));
@@ -51,7 +47,7 @@
           <LoadingSpinner />
         </div>
       {:else if featureFlagsManager.value.oauth}
-        {#if user.oauthId}
+        {#if authManager.user.oauthId}
           <Button shape="round" size="small" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
         {:else}
           <Button shape="round" size="small" onclick={() => oauth.authorize(globalThis.location)}

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -24,12 +24,6 @@
     inTimeline: boolean;
   }
 
-  interface Props {
-    user: UserResponseDto;
-  }
-
-  let { user }: Props = $props();
-
   let partners: Array<PartnerSharing> = $state([]);
 
   onMount(async () => {
@@ -95,7 +89,7 @@
   };
 
   const handleCreatePartners = async () => {
-    const users = await modalManager.show(PartnerSelectionModal, { user });
+    const users = await modalManager.show(PartnerSelectionModal, {});
 
     if (!users) {
       return;

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { user } from '$lib/stores/user.store';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateMyUser } from '@immich/sdk';
   import { Button, Field, Input, toastManager } from '@immich/ui';
@@ -8,7 +8,7 @@
   import { createBubbler, preventDefault } from 'svelte/legacy';
   import { fade } from 'svelte/transition';
 
-  let editedUser = $state(cloneDeep($user));
+  let editedUser = $state(cloneDeep(authManager.user));
   const bubble = createBubbler();
 
   const handleSaveProfile = async () => {
@@ -21,7 +21,7 @@
       });
 
       Object.assign(editedUser, data);
-      $user = data;
+      authManager.setUser(data);
 
       toastManager.primary($t('saved_profile'));
     } catch (error) {

web/src/lib/components/user-settings-page/user-purchase-settings.svelte

@@ -6,7 +6,6 @@
   import { dateFormats } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import { preferences, user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
   import {
@@ -30,12 +29,12 @@
     const serverInfo = await getAboutInfo();
     isServerProduct = serverInfo.licensed;
 
-    const userInfo = await getMyUser();
-    if (userInfo.license) {
-      $user = { ...$user, license: userInfo.license };
+    const response = await getMyUser();
+    if (response.license) {
+      authManager.setUser(response);
     }
 
-    if (isServerProduct && $user.isAdmin) {
+    if (isServerProduct && authManager.user.isAdmin) {
       serverPurchaseInfo = await getServerPurchaseInfo();
     }
   };
@@ -111,7 +110,7 @@
         <SettingSwitch
           title={$t('show_supporter_badge')}
           subtitle={$t('show_supporter_badge_description')}
-          bind:checked={$preferences.purchase.showSupportBadge}
+          bind:checked={authManager.preferences.purchase.showSupportBadge}
           onToggle={setSupportBadgeVisibility}
         />
       </div>
@@ -128,7 +127,7 @@
               {$t('purchase_server_title')}
             </p>
 
-            {#if $user.isAdmin && serverPurchaseInfo?.activatedAt}
+            {#if authManager.user.isAdmin && serverPurchaseInfo?.activatedAt}
               <p class="dark:text-white text-sm mt-1 col-start-2">
                 {$t('purchase_activated_time', {
                   values: {
@@ -142,7 +141,7 @@
           </div>
         </div>
 
-        {#if $user.isAdmin}
+        {#if authManager.user.isAdmin}
           <div class="text-right mt-4">
             <Button shape="round" size="small" color="danger" onclick={removeServerProductKey}
               >{$t('purchase_button_remove_key')}</Button
@@ -159,11 +158,11 @@
             <p class="text-primary font-semibold text-lg">
               {$t('purchase_individual_title')}
             </p>
-            {#if $user.license?.activatedAt}
+            {#if authManager.user.license?.activatedAt}
               <p class="dark:text-white text-sm mt-1 col-start-2">
                 {$t('purchase_activated_time', {
                   values: {
-                    date: new Date($user.license?.activatedAt).toLocaleString($locale, dateFormats.settings),
+                    date: new Date(authManager.user.license?.activatedAt).toLocaleString($locale, dateFormats.settings),
                   },
                 })}
               </p>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -8,7 +8,6 @@
   import UserUsageStatistic from '$lib/components/user-settings-page/user-usage-statistic.svelte';
   import { OpenQueryParam, QueryParameter } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { user } from '$lib/stores/user.store';
   import { oauth } from '$lib/utils';
   import { type ApiKeyResponseDto, type SessionResponseDto } from '@immich/sdk';
   import {
@@ -120,7 +119,7 @@
       subtitle={$t('manage_your_oauth_connection')}
       isOpen={oauthOpen || undefined}
     >
-      <OAuthSettings user={$user} />
+      <OAuthSettings />
     </SettingAccordion>
   {/if}
 
@@ -139,7 +138,7 @@
     title={$t('partner_sharing')}
     subtitle={$t('manage_sharing_with_partners')}
   >
-    <PartnerSettings user={$user} />
+    <PartnerSettings />
   </SettingAccordion>
 
   <SettingAccordion