feat(web): automatically update user info (#5647)

* use svelte store

* fix: websocket error when not authenticated

* more routes

web/src/routes/(user)/albums/+page.svelte

@@ -245,7 +245,7 @@
   </FullScreenModal>
 {/if}
 
-<UserPageLayout user={data.user} title={data.meta.title}>
+<UserPageLayout title={data.meta.title}>
   <div class="flex place-items-center gap-2" slot="buttons">
     <LinkButton on:click={handleCreateAlbum}>
       <div class="flex place-items-center gap-2 text-sm">
@@ -291,11 +291,7 @@
       <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
         {#each $albums as album (album.id)}
           <a data-sveltekit-preload-data="hover" href="{AppRoute.ALBUMS}/{album.id}" animate:flip={{ duration: 200 }}>
-            <AlbumCard
-              {album}
-              on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
-              user={data.user}
-            />
+            <AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} />
           </a>
         {/each}
       </div>

web/src/routes/(user)/albums/+page.ts

@@ -3,11 +3,10 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   const { data: albums } = await api.albumApi.getAllAlbums();
 
   return {
-    user,
     albums,
     meta: {
       title: 'Albums',

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -109,8 +109,8 @@
   const timelineInteractionStore = createAssetInteractionStore();
   const { selectedAssets: timelineSelected } = timelineInteractionStore;
 
-  $: isOwned = data.user.id == album.ownerId;
-  $: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === data.user.id);
+  $: isOwned = $user.id == album.ownerId;
+  $: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === $user.id);
   $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
   $: {
     if (isShowActivity) {
@@ -343,7 +343,7 @@
   };
 
   const handleRemoveUser = async (userId: string) => {
-    if (userId == 'me' || userId === data.user.id) {
+    if (userId == 'me' || userId === $user.id) {
       goto(backUrl);
       return;
     }

web/src/routes/(user)/albums/[albumId]/+page.ts

@@ -3,12 +3,11 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
-  const user = await authenticate();
+  await authenticate();
   const { data: album } = await api.albumApi.getAlbumInfo({ id: params.albumId, withoutAssets: true });
 
   return {
     album,
-    user,
     meta: {
       title: album.albumName,
     },

web/src/routes/(user)/archive/+page.svelte

@@ -44,7 +44,7 @@
   </AssetSelectControlBar>
 {/if}
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
+<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
     <EmptyPlaceholder
       text="Archive photos and videos to hide them from your Photos view"

web/src/routes/(user)/archive/+page.ts

@@ -2,10 +2,9 @@ import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
 
   return {
-    user,
     meta: {
       title: 'Archive',
     },

web/src/routes/(user)/explore/+page.svelte

@@ -36,7 +36,7 @@
 
 <svelte:window bind:innerWidth={screenSize} />
 
-<UserPageLayout user={data.user} title={data.meta.title}>
+<UserPageLayout title={data.meta.title}>
   {#if hasPeople}
     <div class="mb-6 mt-2">
       <div class="flex justify-between">

web/src/routes/(user)/explore/+page.ts

@@ -3,11 +3,10 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   const { data: items } = await api.searchApi.getExploreData();
   const { data: response } = await api.personApi.getAllPeople({ withHidden: false });
   return {
-    user,
     items,
     response,
     meta: {

web/src/routes/(user)/favorites/+page.svelte

@@ -49,7 +49,7 @@
   </AssetSelectControlBar>
 {/if}
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
+<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
     <EmptyPlaceholder
       text="Add favorites to quickly find your best pictures and videos"

web/src/routes/(user)/favorites/+page.ts

@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   return {
-    user,
     meta: {
       title: 'Favorites',
     },

web/src/routes/(user)/map/+page.svelte

@@ -101,7 +101,7 @@
 </script>
 
 {#if $featureFlags.loaded && $featureFlags.map}
-  <UserPageLayout user={data.user} title={data.meta.title}>
+  <UserPageLayout title={data.meta.title}>
     <div class="isolate h-full w-full">
       <Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
     </div></UserPageLayout

web/src/routes/(user)/map/+page.ts

@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   return {
-    user,
     meta: {
       title: 'Map',
     },

web/src/routes/(user)/partners/[userId]/+page.ts

@@ -3,12 +3,11 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
-  const user = await authenticate();
+  await authenticate();
 
   const { data: partner } = await api.userApi.getUserById({ id: params.userId });
 
   return {
-    user,
     partner,
     meta: {
       title: 'Partner',

web/src/routes/(user)/people/+page.svelte

@@ -357,7 +357,7 @@
   </FullScreenModal>
 {/if}
 
-<UserPageLayout user={data.user} title="People">
+<UserPageLayout title="People">
   <svelte:fragment slot="buttons">
     {#if countTotalPeople > 0}
       <IconButton on:click={() => (selectHidden = !selectHidden)}>

web/src/routes/(user)/people/+page.ts

@@ -3,11 +3,10 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
 
   const { data: people } = await api.personApi.getAllPeople({ withHidden: true });
   return {
-    user,
     people,
     meta: {
       title: 'People',

web/src/routes/(user)/people/[personId]/+page.ts

@@ -3,13 +3,12 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
-  const user = await authenticate();
+  await authenticate();
 
   const { data: person } = await api.personApi.getPerson({ id: params.personId });
   const { data: statistics } = await api.personApi.getPersonStatistics({ id: params.personId });
 
   return {
-    user,
     person,
     statistics,
     meta: {

web/src/routes/(user)/photos/+page.svelte

@@ -20,12 +20,10 @@
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { AssetStore } from '$lib/stores/assets.store';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { PageData } from './$types';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
-
-  export let data: PageData;
+  import { user } from '$lib/stores/user.store';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
   let handleEscapeKey = false;
@@ -52,7 +50,7 @@
 
 {#if $isMultiSelectState}
   <AssetSelectControlBar
-    ownerId={data.user.id}
+    ownerId={$user.id}
     assets={$selectedAssets}
     clearSelect={() => assetInteractionStore.clearMultiselect()}
   >
@@ -80,7 +78,7 @@
   </AssetSelectControlBar>
 {/if}
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
+<UserPageLayout hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
   <AssetGrid
     {assetStore}
     {assetInteractionStore}
@@ -88,7 +86,7 @@
     on:escape={handleEscape}
     withStacked
   >
-    {#if data.user.memoriesEnabled}
+    {#if $user.memoriesEnabled}
       <MemoryLane />
     {/if}
     <EmptyPlaceholder

web/src/routes/(user)/photos/+page.ts

@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   return {
-    user,
     meta: {
       title: 'Photos',
     },

web/src/routes/(user)/search/+page.svelte

@@ -142,7 +142,7 @@
         <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
           {#each albums as album (album.id)}
             <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
-              <AlbumCard {album} user={data.user} isSharingView={false} showItemCount={false} showContextMenu={false} />
+              <AlbumCard {album} isSharingView={false} showItemCount={false} showContextMenu={false} />
             </a>
           {/each}
         </div>

web/src/routes/(user)/search/+page.ts

@@ -3,13 +3,12 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async (data) => {
-  const user = await authenticate();
+  await authenticate();
   const url = new URL(data.url.href);
   const term = url.searchParams.get('q') || url.searchParams.get('query') || undefined;
   const { data: results } = await api.searchApi.search({}, { params: url.searchParams });
 
   return {
-    user,
     term,
     results,
     meta: {

web/src/routes/(user)/share/[key]/+page.svelte

@@ -8,12 +8,12 @@
   import { api, SharedLinkType } from '@api';
   import type { PageData } from './$types';
   import { handleError } from '$lib/utils/handle-error';
+  import { user } from '$lib/stores/user.store';
 
   export let data: PageData;
   let { sharedLink, passwordRequired, sharedLinkKey: key } = data;
   let { title, description } = data.meta;
-
-  let isOwned = data.user ? data.user.id === sharedLink?.userId : false;
+  let isOwned = $user ? $user.id === sharedLink?.userId : false;
   let password = '';
 
   const handlePasswordSubmit = async () => {
@@ -21,7 +21,7 @@
       const result = await api.sharedLinkApi.getMySharedLink({ password, key });
       passwordRequired = false;
       sharedLink = result.data;
-      isOwned = data.user ? data.user.id === sharedLink.userId : false;
+      isOwned = $user ? $user.id === sharedLink.userId : false;
       title = (sharedLink.album ? sharedLink.album.albumName : 'Public Share') + ' - Immich';
       description = sharedLink.description || `${sharedLink.assets.length} shared photos & videos.`;
     } catch (error) {

web/src/routes/(user)/share/[key]/+page.ts

@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   const { key } = params;
-  const user = await getAuthUser();
+  await getAuthUser();
 
   try {
     const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
@@ -15,7 +15,6 @@ export const load = (async ({ params }) => {
     const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
 
     return {
-      user,
       sharedLink,
       meta: {
         title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',

web/src/routes/(user)/sharing/+page.svelte

@@ -39,7 +39,7 @@
   };
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title}>
+<UserPageLayout title={data.meta.title}>
   <div class="flex" slot="buttons">
     <LinkButton on:click={createSharedAlbum}>
       <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
@@ -96,7 +96,7 @@
         <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
           {#each data.sharedAlbums as album (album.id)}
             <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
-              <AlbumCard {album} user={data.user} isSharingView showContextMenu={false} />
+              <AlbumCard {album} isSharingView showContextMenu={false} />
             </a>
           {/each}
         </div>

web/src/routes/(user)/sharing/+page.ts

@@ -3,12 +3,11 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   const { data: sharedAlbums } = await api.albumApi.getAllAlbums({ shared: true });
   const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-with' });
 
   return {
-    user,
     sharedAlbums,
     partners,
     meta: {

web/src/routes/(user)/sharing/sharedlinks/+page.ts

@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   return {
-    user,
     meta: {
       title: 'Shared Links',
     },

web/src/routes/(user)/trash/+page.svelte

@@ -71,7 +71,7 @@
 {/if}
 
 {#if $featureFlags.loaded && $featureFlags.trash}
-  <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
+  <UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
     <div class="flex place-items-center gap-2" slot="buttons">
       <LinkButton on:click={handleRestoreTrash}>
         <div class="flex place-items-center gap-2 text-sm">

web/src/routes/(user)/trash/+page.ts

@@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
   return {
-    user,
     meta: {
       title: 'Trash',
     },

web/src/routes/(user)/user-settings/+page.svelte

@@ -6,10 +6,10 @@
   export let data: PageData;
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title}>
+<UserPageLayout title={data.meta.title}>
   <section class="mx-4 flex place-content-center">
     <div class="w-full max-w-3xl">
-      <UserSettingsList user={data.user} keys={data.keys} devices={data.devices} />
+      <UserSettingsList keys={data.keys} devices={data.devices} />
     </div>
   </section>
 </UserPageLayout>

web/src/routes/(user)/user-settings/+page.ts

@@ -3,13 +3,12 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate();
+  await authenticate();
 
   const { data: keys } = await api.keyApi.getApiKeys();
   const { data: devices } = await api.authenticationApi.getAuthDevices();
 
   return {
-    user,
     keys,
     devices,
     meta: {

web/src/routes/+layout.svelte

@@ -7,7 +7,6 @@
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
   import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
-  import type { LayoutData } from './$types';
   import { fileUploadHandler } from '$lib/utils/file-uploader';
   import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
   import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
@@ -19,9 +18,9 @@
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { api } from '@api';
   import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
+  import { user } from '$lib/stores/user.store';
 
   let showNavigationLoadingBar = false;
-  export let data: LayoutData;
   let albumId: string | undefined;
 
   const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
@@ -122,7 +121,7 @@
 <UploadPanel />
 <NotificationList />
 
-{#if data.user?.isAdmin}
+{#if $user?.isAdmin}
   <VersionAnnouncementBox />
 {/if}
 

web/src/routes/+layout.ts

@@ -1,29 +1,10 @@
-import { api } from '@api';
 import type { LayoutLoad } from './$types';
-import { getSavedUser, setUser } from '$lib/stores/user.store';
-
-const getUser = async () => {
-  try {
-    const { data: user } = await api.userApi.getMyUserInfo();
-    return user;
-  } catch {
-    return null;
-  }
-};
 
 export const ssr = false;
 export const csr = true;
 
 export const load = (async () => {
-  const savedUser = getSavedUser();
-  const user = savedUser || (await getUser());
-
-  if (!savedUser) {
-    setUser(user);
-  }
-
   return {
-    user,
     meta: {
       title: 'Immich',
     },

web/src/routes/admin/jobs-status/+page.svelte

@@ -30,7 +30,7 @@
   });
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title} admin>
+<UserPageLayout title={data.meta.title} admin>
   <div class="flex justify-end" slot="buttons">
     <a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
       <LinkButton>

web/src/routes/admin/jobs-status/+page.ts

@@ -3,12 +3,11 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate({ admin: true });
+  await authenticate({ admin: true });
 
   const { data: jobs } = await api.jobApi.getAllJobsStatus();
 
   return {
-    user,
     jobs,
     meta: {
       title: 'Job Status',

web/src/routes/admin/repair/+page.svelte

@@ -170,7 +170,7 @@
   };
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title} admin>
+<UserPageLayout title={data.meta.title} admin>
   <svelte:fragment slot="sidebar" />
   <div class="flex justify-end gap-2" slot="buttons">
     <LinkButton on:click={() => handleRepair()} disabled={matches.length === 0 || repairing}>

web/src/routes/admin/repair/+page.ts

@@ -3,13 +3,12 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate({ admin: true });
+  await authenticate({ admin: true });
   const {
     data: { orphans, extras },
   } = await api.auditApi.getAuditFiles();
 
   return {
-    user,
     orphans,
     extras,
     meta: {

web/src/routes/admin/server-status/+page.svelte

@@ -21,7 +21,7 @@
   });
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title} admin>
+<UserPageLayout title={data.meta.title} admin>
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
       <ServerStatsPanel stats={data.stats} />

web/src/routes/admin/server-status/+page.ts

@@ -3,11 +3,10 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate({ admin: true });
+  await authenticate({ admin: true });
   const { data: stats } = await api.serverInfoApi.getServerStatistics();
 
   return {
-    user,
     stats,
     meta: {
       title: 'Server Stats',

web/src/routes/admin/system-settings/+page.svelte

@@ -44,7 +44,7 @@
   </div>
 {/if}
 
-<UserPageLayout user={data.user} title={data.meta.title} admin>
+<UserPageLayout title={data.meta.title} admin>
   <div class="flex justify-end gap-2" slot="buttons">
     <LinkButton on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
       <div class="flex place-items-center gap-2 text-sm">
@@ -95,11 +95,7 @@
         subtitle="Manage the folder structure and file name of the upload asset"
         isOpen={$page.url.searchParams.get('open') === 'storage-template'}
       >
-        <StorageTemplateSettings
-          disabled={$featureFlags.configFile}
-          storageConfig={configs.storageTemplate}
-          user={data.user}
-        />
+        <StorageTemplateSettings disabled={$featureFlags.configFile} storageConfig={configs.storageTemplate} />
       </SettingAccordion>
 
       <SettingAccordion title="Theme Settings" subtitle="Manage customization of the Immich web interface">

web/src/routes/admin/system-settings/+page.ts

@@ -3,11 +3,10 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate({ admin: true });
+  await authenticate({ admin: true });
   const { data: configs } = await api.systemConfigApi.getConfig();
 
   return {
-    user,
     configs,
     meta: {
       title: 'System Settings',

web/src/routes/admin/user-management/+page.svelte

@@ -13,6 +13,7 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import type { PageData } from './$types';
   import { mdiCheck, mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { user } from '$lib/stores/user.store';
 
   export let data: PageData;
 
@@ -104,7 +105,7 @@
   };
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title} admin>
+<UserPageLayout title={data.meta.title} admin>
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
       {#if shouldShowCreateUserForm}
@@ -117,7 +118,7 @@
         <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
           <EditUserForm
             user={selectedUser}
-            canResetPassword={selectedUser?.id !== data.user.id}
+            canResetPassword={selectedUser?.id !== $user.id}
             on:edit-success={onEditUserSuccess}
             on:reset-password-success={onEditPasswordSuccess}
           />
@@ -175,21 +176,21 @@
         </thead>
         <tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
           {#if allUsers}
-            {#each allUsers as user, i}
+            {#each allUsers as immichUser, i}
               <tr
                 class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-                  isDeleted(user)
+                  isDeleted(immichUser)
                     ? 'bg-red-300 dark:bg-red-900'
                     : i % 2 == 0
                       ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
                       : 'bg-immich-bg dark:bg-immich-dark-gray/50'
                 }`}
               >
-                <td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td>
-                <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
+                <td class="w-4/12 text-ellipsis break-all px-2 text-sm">{immichUser.email}</td>
+                <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{immichUser.name}</td>
                 <td class="w-2/12 text-ellipsis break-all px-2 text-sm">
                   <div class="container mx-auto flex flex-wrap justify-center">
-                    {#if user.externalPath}
+                    {#if immichUser.externalPath}
                       <Icon path={mdiCheck} size="16" />
                     {:else}
                       <Icon path={mdiClose} size="16" />
@@ -197,27 +198,27 @@
                   </div>
                 </td>
                 <td class="w-2/12 text-ellipsis break-all px-4 text-sm">
-                  {#if !isDeleted(user)}
+                  {#if !isDeleted(immichUser)}
                     <button
-                      on:click={() => editUserHandler(user)}
+                      on:click={() => editUserHandler(immichUser)}
                       class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                     >
                       <Icon path={mdiPencilOutline} size="16" />
                     </button>
-                    {#if user.id !== data.user.id}
+                    {#if immichUser.id !== $user.id}
                       <button
-                        on:click={() => deleteUserHandler(user)}
+                        on:click={() => deleteUserHandler(immichUser)}
                         class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                       >
                         <Icon path={mdiTrashCanOutline} size="16" />
                       </button>
                     {/if}
                   {/if}
-                  {#if isDeleted(user)}
+                  {#if isDeleted(immichUser)}
                     <button
-                      on:click={() => restoreUserHandler(user)}
+                      on:click={() => restoreUserHandler(immichUser)}
                       class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-                      title={`scheduled removal on ${getDeleteDate(user)}`}
+                      title={`scheduled removal on ${getDeleteDate(immichUser)}`}
                     >
                       <Icon path={mdiDeleteRestore} size="16" />
                     </button>

web/src/routes/admin/user-management/+page.ts

@@ -3,11 +3,10 @@ import { api } from '@api';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
-  const user = await authenticate({ admin: true });
+  await authenticate({ admin: true });
   const { data: allUsers } = await api.userApi.getAllUsers({ isAll: false });
 
   return {
-    user,
     allUsers,
     meta: {
       title: 'User Management',

web/src/routes/auth/change-password/+page.svelte

@@ -3,6 +3,7 @@
   import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
   import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
   import { AppRoute } from '$lib/constants';
+  import { user } from '$lib/stores/user.store';
   import type { PageData } from './$types';
 
   export let data: PageData;
@@ -16,12 +17,12 @@
 
 <FullscreenContainer title={data.meta.title}>
   <p slot="message">
-    Hi {data.user.name} ({data.user.email}),
+    Hi {$user.name} ({$user.email}),
     <br />
     <br />
     This is either the first time you are signing into the system or a request has been made to change your password. Please
     enter the new password below.
   </p>
 
-  <ChangePasswordForm user={data.user} on:success={onSuccessHandler} />
+  <ChangePasswordForm user={$user} on:success={onSuccessHandler} />
 </FullscreenContainer>

web/src/routes/auth/change-password/+page.ts

@@ -2,15 +2,15 @@ import { AppRoute } from '$lib/constants';
 import { authenticate } from '$lib/utils/auth';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
+import { getSavedUser } from '$lib/stores/user.store';
 
 export const load = (async () => {
-  const user = await authenticate();
-  if (!user.shouldChangePassword) {
+  await authenticate();
+  if (!getSavedUser().shouldChangePassword) {
     throw redirect(302, AppRoute.PHOTOS);
   }
 
   return {
-    user,
     meta: {
       title: 'Change Password',
     },