tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-04-16 15:41:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: auth manager (#27638)

Browse Source
This commit is contained in:
Jason Rasmussen 2026-04-14 08:49:24 -04:00 committed by GitHub
parent daed3f0966
commit 1ba0989e15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
77 changed files with 387 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/VersionAnnouncement.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import OnEvents from '$lib/components/OnEvents.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
import { user } from '$lib/stores/user.store';
import type { ReleaseEvent } from '$lib/types';
import { getReleaseType, semverToName } from '$lib/utils';
import { modalManager } from '@immich/ui';
@ -12,7 +12,7 @@
}>();
const onReleaseEvent = async (release: ReleaseEvent) => {
if (!release.isAvailable || !$user.isAdmin) {
if (!release.isAvailable || !authManager.user.isAdmin) {
return;
}

6
web/src/lib/components/admin-settings/NotificationSettings.svelte
View File

@ -5,10 +5,10 @@
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
import { handleSystemConfigSave } from '$lib/services/system-config.service';
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { sendTestEmailAdmin } from '@immich/sdk';
import { Button, toastManager } from '@immich/ui';
@ -45,7 +45,9 @@
},
});
toastManager.primary($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
toastManager.primary(
$t('admin.notification_email_test_email_sent', { values: { email: authManager.user.email } }),
);
if (!disabled) {
await handleSystemConfigSave({ notifications: configToEdit.notifications });

14
web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
View File

@ -6,11 +6,11 @@
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
import { Route } from '$lib/route';
import { handleSystemConfigSave } from '$lib/services/system-config.service';
import { user } from '$lib/stores/user.store';
import { getStorageTemplateOptions, type SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
import { Heading, Link, LoadingSpinner, Text } from '@immich/ui';
import handlebar from 'handlebars';
@ -177,7 +177,10 @@
<p class="text-sm">
<FormatMessage
key="admin.storage_template_path_length"
values={{ length: parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length, limit: 260 }}
values={{
length: parsedTemplate().length + authManager.user.id.length + 'UPLOAD_LOCATION'.length,
limit: 260,
}}
>
{#snippet children({ message })}
<span class="font-semibold text-primary">{message}</span>
@ -186,7 +189,10 @@
</p>
<p class="text-sm">
<FormatMessage key="admin.storage_template_user_label" values={{ label: $user.storageLabel || $user.id }}>
<FormatMessage
key="admin.storage_template_user_label"
values={{ label: authManager.user.storageLabel || authManager.user.id }}
>
{#snippet children({ message })}
<code class="text-primary">{message}</code>
{/snippet}
@ -195,7 +201,7 @@
<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/library/{$user.storageLabel || $user.id}</span
>UPLOAD_LOCATION/library/{authManager.user.storageLabel || authManager.user.id}</span
>/{parsedTemplate()}.jpg
</p>

4
web/src/lib/components/album-page/album-card.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
import { user } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
import { getShortDateRange } from '$lib/utils/date-time';
import type { AlbumResponseDto } from '@immich/sdk';
@ -85,7 +85,7 @@
{/if}
{#if showOwner}
{#if $user.id === album.ownerId}
{#if authManager.user.id === album.ownerId}
<p>{$t('owned')}</p>
{:else if album.owner}
<p>{$t('shared_by_user', { values: { user: album.owner.name } })}</p>

8
web/src/lib/components/album-page/albums-list.svelte
View File

@ -4,6 +4,7 @@
import OnEvents from '$lib/components/OnEvents.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
import { handleDeleteAlbum, handleDownloadAlbum } from '$lib/services/album.service';
@ -16,7 +17,6 @@
SortOrder,
type AlbumViewSettings,
} from '$lib/stores/preferences.store';
import { user } from '$lib/stores/user.store';
import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
import type { ContextMenuPosition } from '$lib/utils/context-menu';
import { normalizeSearchString } from '$lib/utils/string-utils';
@ -97,7 +97,7 @@
/** Group by owner */
[AlbumGroupBy.Owner]: (order, albums): AlbumGroup[] => {
const currentUserId = $user.id;
const currentUserId = authManager.user.id;
const groupedByOwnerIds = groupBy(albums, 'ownerId');
const sortSign = order === SortOrder.Desc ? -1 : 1;
@ -130,7 +130,7 @@
return sharedAlbums;
}
default: {
const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== $user.id);
const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== authManager.user.id);
return nonOwnedAlbums.length > 0 ? ownedAlbums.concat(nonOwnedAlbums) : ownedAlbums;
}
}
@ -167,7 +167,7 @@
albumGroupIds = groupedAlbums.map(({ id }) => id);
});
let showFullContextMenu = $derived(allowEdit && selectedAlbum && selectedAlbum.ownerId === $user.id);
let showFullContextMenu = $derived(allowEdit && selectedAlbum && selectedAlbum.ownerId === authManager.user.id);
onMount(async () => {
if (allowEdit) {

4
web/src/lib/components/album-page/albums-table-row.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { dateFormats } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Route } from '$lib/route';
import { locale } from '$lib/stores/preferences.store';
import { user } from '$lib/stores/user.store';
import type { ContextMenuPosition } from '$lib/utils/context-menu';
import type { AlbumResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui';
@ -43,7 +43,7 @@
icon={mdiShareVariantOutline}
size="16"
class="inline ms-1 opacity-70"
title={album.ownerId === $user.id
title={album.ownerId === authManager.user.id
? $t('shared_by_you')
: $t('shared_by_user', { values: { user: album.owner.name } })}
/>

4
web/src/lib/components/asset-viewer/actions/rating-action.svelte
View File

@ -2,7 +2,7 @@
import { shortcuts } from '$lib/actions/shortcut';
import type { OnAction } from '$lib/components/asset-viewer/actions/action';
import { AssetAction } from '$lib/constants';
import { preferences } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
@ -42,7 +42,7 @@
</script>
<svelte:document
use:shortcuts={$preferences?.ratings.enabled
use:shortcuts={authManager.authenticated && authManager.preferences.ratings.enabled
? [
{ shortcut: { key: '0' }, onShortcut: () => rateAsset(null) },
...[1, 2, 3, 4, 5].map((rating) => ({

12
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@ -5,13 +5,14 @@
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
import { activityManager } from '$lib/managers/activity-manager.svelte';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Route } from '$lib/route';
import { locale } from '$lib/stores/preferences.store';
import { getAssetMediaUrl } from '$lib/utils';
import { getAssetType } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { isTenMinutesApart } from '$lib/utils/timesince';
import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
import { ReactionType, type ActivityResponseDto, type AssetTypeEnum } from '@immich/sdk';
import { Icon, IconButton, LoadingSpinner, Textarea, toastManager } from '@immich/ui';
import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiSend, mdiThumbUp } from '@mdi/js';
import * as luxon from 'luxon';
@ -39,7 +40,6 @@
};
interface Props {
user: UserResponseDto;
assetId?: string | undefined;
albumId: string;
assetType?: AssetTypeEnum | undefined;
@ -47,7 +47,7 @@
disabled: boolean;
}
let { user, assetId = undefined, albumId, assetType = undefined, albumOwnerId, disabled }: Props = $props();
let { assetId = undefined, albumId, assetType = undefined, albumOwnerId, disabled }: Props = $props();
let innerHeight: number = $state(0);
let activityHeight: number = $state(0);
@ -147,7 +147,7 @@
/>
</a>
{/if}
{#if reaction.user.id === user.id || albumOwnerId === user.id}
{#if reaction.user.id === authManager.user.id || albumOwnerId === authManager.user.id}
<div class="me-4">
<ButtonContextMenu
icon={mdiDotsVertical}
@ -200,7 +200,7 @@
/>
</a>
{/if}
{#if reaction.user.id === user.id || albumOwnerId === user.id}
{#if reaction.user.id === authManager.user.id || albumOwnerId === authManager.user.id}
<div class="me-4">
<ButtonContextMenu
icon={mdiDotsVertical}
@ -238,7 +238,7 @@
<div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
<div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
<div>
<UserAvatar {user} size="md" noTitle />
<UserAvatar user={authManager.user} size="md" noTitle />
</div>
<form class="flex w-full items-center max-h-56 gap-1" {onsubmit}>
<Textarea

14
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
View File

@ -1,5 +1,5 @@
import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { renderWithTooltips } from '$tests/helpers';
import { assetFactory } from '@test-data/factories/asset-factory';
import { preferencesFactory } from '@test-data/factories/preferences-factory';
@ -36,7 +36,7 @@ describe('AssetViewerNavBar component', () => {
});
afterEach(() => {
resetSavedUser();
authManager.reset();
});
afterAll(() => {
@ -44,8 +44,8 @@ describe('AssetViewerNavBar component', () => {
});
it('shows back button', () => {
const prefs = preferencesFactory.build({ cast: { gCastEnabled: false } });
preferencesStore.set(prefs);
const preferences = preferencesFactory.build({ cast: { gCastEnabled: false } });
authManager.setPreferences(preferences);
const asset = assetFactory.build({ isTrashed: false });
const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
@ -57,10 +57,10 @@ describe('AssetViewerNavBar component', () => {
const ownerId = 'id-of-the-user';
const user = userAdminFactory.build({ id: ownerId });
const asset = assetFactory.build({ ownerId, isTrashed: false });
userStore.set(user);
authManager.setUser(user);
const prefs = preferencesFactory.build({ cast: { gCastEnabled: false } });
preferencesStore.set(prefs);
const preferences = preferencesFactory.build({ cast: { gCastEnabled: false } });
authManager.setPreferences(preferences);
const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
expect(getByLabelText('delete')).toBeInTheDocument();

8
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -8,7 +8,6 @@
import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
@ -19,13 +18,14 @@
import LoadingDots from '$lib/components/LoadingDots.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { languageManager } from '$lib/managers/language-manager.svelte';
import { Route } from '$lib/route';
import { getGlobalActions } from '$lib/services/app.service';
import { getAssetActions } from '$lib/services/asset.service';
import { user } from '$lib/stores/user.store';
import { getSharedLink, withoutIcons } from '$lib/utils';
import type { OnUndoDelete } from '$lib/utils/actions';
import { toTimelineAsset } from '$lib/utils/timeline-util';
@ -81,8 +81,8 @@
setPlayOriginalVideo,
}: Props = $props();
const isOwner = $derived($user && asset.ownerId === $user?.id);
const isAlbumOwner = $derived($user && album?.ownerId === $user?.id);
const isOwner = $derived(authManager.authenticated && asset.ownerId === authManager.user.id);
const isAlbumOwner = $derived(authManager.authenticated && album?.ownerId === authManager.user.id);
const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
const smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);

9
web/src/lib/components/asset-viewer/asset-viewer.spec.ts
View File

@ -1,7 +1,7 @@
import { getAnimateMock } from '$lib/__mocks__/animate.mock';
import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
import { renderWithTooltips } from '$tests/helpers';
import { updateAsset } from '@immich/sdk';
import { assetFactory } from '@test-data/factories/asset-factory';
@ -43,7 +43,7 @@ describe('AssetViewer', () => {
afterEach(() => {
slideshowStore.slideshowState.set(SlideshowState.None);
resetSavedUser();
authManager.reset();
vi.clearAllMocks();
});
@ -56,8 +56,9 @@ describe('AssetViewer', () => {
const user = userAdminFactory.build({ id: ownerId });
const asset = assetFactory.build({ ownerId, isFavorite: false, isTrashed: false });
userStore.set(user);
preferencesStore.set(preferencesFactory.build({ cast: { gCastEnabled: false } }));
authManager.setUser(user);
authManager.setPreferences(preferencesFactory.build({ cast: { gCastEnabled: false } }));
vi.mocked(updateAsset).mockResolvedValue({ ...asset, isFavorite: true });
const { getByLabelText, queryByLabelText } = renderWithTooltips(AssetViewer, {

4
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -17,7 +17,6 @@
import { ocrManager } from '$lib/stores/ocr.svelte';
import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { user } from '$lib/stores/user.store';
import { getSharedLink, handlePromiseError } from '$lib/utils';
import type { OnUndoDelete } from '$lib/utils/actions';
import { navigateToAsset } from '$lib/utils/asset-utils';
@ -629,7 +628,7 @@
</div>
{/if}
{#if isShared && album && assetViewerManager.isShowActivityPanel && $user}
{#if isShared && album && assetViewerManager.isShowActivityPanel && authManager.authenticated}
<div
transition:fly={{ duration: 150 }}
id="activity-panel"
@ -637,7 +636,6 @@
translate="yes"
>
<ActivityViewer
user={$user}
disabled={!album.isActivityEnabled}
assetType={asset.type}
albumOwnerId={album.ownerId}

3
web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts">
import StarRating, { type Rating } from '$lib/elements/StarRating.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { preferences } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
@ -25,7 +24,7 @@
};
</script>
{#if !authManager.isSharedLink && $preferences?.ratings.enabled}
{#if !authManager.isSharedLink && authManager.authenticated && authManager.preferences.ratings.enabled}
<section class="px-4 pt-4">
<StarRating {rating} readOnly={!isOwner} onRating={(rating) => handlePromiseError(handleChangeRating(rating))} />
</section>

7
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -12,7 +12,6 @@
import { Route } from '$lib/route';
import { boundingBoxesArray } from '$lib/stores/people.store';
import { locale } from '$lib/stores/preferences.store';
import { preferences, user } from '$lib/stores/user.store';
import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
import { delay, getDimensions } from '$lib/utils/asset-utils';
import { getByteUnitString } from '$lib/utils/byte-units';
@ -56,7 +55,7 @@
let { asset, currentAlbum = null }: Props = $props();
let showEditFaces = $state(false);
let isOwner = $derived($user?.id === asset.ownerId);
let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
let people = $derived(asset.people || []);
let unassignedFaces = $derived(asset.unassignedFaces || []);
let showingHiddenPeople = $state(false);
@ -164,7 +163,7 @@
</div>
<div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
<p>
{#if $user?.isAdmin}
{#if authManager.authenticated && authManager.user.isAdmin}
{$t('admin.asset_offline_description')}
{:else}
{$t('asset_offline_description')}
@ -563,7 +562,7 @@
{/if}
{/await}
{#if $preferences?.tags?.enabled}
{#if authManager.authenticated && authManager.preferences.tags.enabled}
<section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
<DetailPanelTags {asset} {isOwner} />
</section>

6
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -27,7 +27,6 @@
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store';
import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
import { AssetMediaSize, AssetTypeEnum, getAssetInfo } from '@immich/sdk';
@ -104,7 +103,8 @@
});
} else {
progressBarController = new Tween<number>(0, {
duration: (from: number, to: number) => (to ? $preferences.memories.duration * 1000 * (to - from) : 0),
duration: (from: number, to: number) =>
to ? authManager.preferences.memories.duration * 1000 * (to - from) : 0,
});
}
};
@ -362,7 +362,7 @@
unarchive={assetMultiSelectManager.isAllArchived}
onArchive={handleDeleteOrArchiveAssets}
/>
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
{#if authManager.preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
<TagAction menuItem />
{/if}
<DeleteAssets menuItem onAssetDelete={handleDeleteOrArchiveAssets} />

6
web/src/lib/components/onboarding-page/onboarding-hello.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts">
import { authManager } from '$lib/managers/auth-manager.svelte';
import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
import { user } from '$lib/stores/user.store';
import { OnboardingRole } from '$lib/types';
import { Logo } from '@immich/ui';
import { t } from 'svelte-i18n';
let userRole = $derived(
$user.isAdmin && !serverConfigManager.value.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER,
authManager.user.isAdmin && !serverConfigManager.value.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER,
);
</script>
<div class="gap-4">
<Logo variant="icon" size="giant" class="mb-2" />
<p class="font-medium mb-6 text-6xl text-primary">
{$t('onboarding_welcome_user', { values: { user: $user.name } })}
{$t('onboarding_welcome_user', { values: { user: authManager.user.name } })}
</p>
<p class="text-3xl pb-6 font-light">
{userRole == OnboardingRole.SERVER

4
web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import StorageTemplateSettings from '$lib/components/admin-settings/StorageTemplateSettings.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { user } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Link } from '@immich/ui';
</script>
@ -14,7 +14,7 @@
</FormatMessage>
</p>
{#if $user}
{#if authManager.authenticated}
<StorageTemplateSettings minified duration={0} saveOnClose />
{/if}
</div>

13
web/src/lib/components/onboarding-page/onboarding-user-privacy.svelte
View File

@ -1,22 +1,17 @@
<script lang="ts">
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
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 { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
let gCastEnabled = $state($preferences?.cast?.gCastEnabled ?? false);
let gCastEnabled = $state(authManager.authenticated ? authManager.preferences.cast.gCastEnabled : false);
onDestroy(async () => {
try {
const data = await updateMyPreferences({
userPreferencesUpdateDto: {
cast: { gCastEnabled },
},
});
$preferences = { ...data };
const response = await updateMyPreferences({ userPreferencesUpdateDto: { cast: { gCastEnabled } } });
authManager.setPreferences(response);
} catch (error) {
handleError(error, $t('errors.unable_to_update_settings'));
}

4
web/src/lib/components/pages/SharedLinkPage.svelte
View File

@ -4,7 +4,7 @@
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { user } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { setSharedLink } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { navigate } from '$lib/utils/navigation';
@ -33,7 +33,7 @@
let { sharedLink, passwordRequired, key, slug, meta } = $state(data);
let { title, description } = $state(meta);
let isOwned = $derived($user ? $user.id === sharedLink?.userId : false);
let isOwned = $derived(authManager.authenticated && authManager.user.id === sharedLink?.userId);
let password = $state('');
const handlePasswordSubmit = async () => {

4
web/src/lib/components/shared-components/map/MapTimelinePanel.svelte
View File

@ -19,10 +19,10 @@
import Timeline from '$lib/components/timeline/Timeline.svelte';
import Portal from '$lib/elements/Portal.svelte';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { mapSettings } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store';
import {
updateStackedAssetInTimeline,
updateUnstackedAssetInTimeline,
@ -158,7 +158,7 @@
unarchive={assetMultiSelectManager.isAllArchived}
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
/>
{#if $preferences.tags.enabled}
{#if authManager.preferences.tags.enabled}
<TagAction menuItem />
{/if}
<DeleteAssets

10
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@ -1,10 +1,10 @@
<script lang="ts">
import { page } from '$app/state';
import { focusTrap } from '$lib/actions/focus-trap';
import { authManager } from '$lib/managers/auth-manager.svelte';
import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
import { Route } from '$lib/route';
import { user } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
import { Button, Icon, IconButton, modalManager } from '@immich/ui';
@ -39,7 +39,7 @@
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-t-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
>
<div class="relative">
<UserAvatar user={$user} size="xl" />
<UserAvatar user={authManager.user} size="xl" />
<div class="absolute bottom-0 end-0 rounded-full w-6 h-6">
<IconButton
color="primary"
@ -56,9 +56,9 @@
</div>
<div>
<p class="text-center text-lg font-medium text-primary">
{$user.name}
{authManager.user.name}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{authManager.user.email}</p>
</div>
<div class="flex flex-col gap-1">
@ -76,7 +76,7 @@
{$t('account_settings')}
</div>
</Button>
{#if $user.isAdmin}
{#if authManager.user.isAdmin}
<Button
href={Route.systemSettings()}
onclick={onClose}

7
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -15,7 +15,6 @@
import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
import { notificationManager } from '$lib/stores/notification-manager.svelte';
import { sidebarStore } from '$lib/stores/sidebar.svelte';
import { user } from '$lib/stores/user.store';
import { ActionButton, Button, IconButton, Logo } from '@immich/ui';
import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
import { onMount } from 'svelte';
@ -171,10 +170,10 @@
type="button"
class="flex ps-2"
onclick={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
title={`${$user.name} (${$user.email})`}
title="{authManager.user.name} ({authManager.user.email})"
>
{#key $user}
<UserAvatar user={$user} size="md" noTitle interactive />
{#key authManager.user}
<UserAvatar user={authManager.user} size="md" noTitle interactive />
{/key}
</button>

4
web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
import { Button, Icon } from '@immich/ui';
import { mdiPartyPopper } from '@mdi/js';
@ -22,7 +22,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>

4
web/src/lib/components/shared-components/search-bar/search-tags-section.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import { preferences } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { getAllTags, type TagResponseDto } from '@immich/sdk';
import { Checkbox, Label, Text } from '@immich/ui';
import { onMount } from 'svelte';
@ -40,7 +40,7 @@
};
</script>
{#if $preferences?.tags?.enabled}
{#if authManager.authenticated && authManager.preferences.tags.enabled}
<div id="location-selection">
<form autocomplete="off" id="create-tag-form">
<div class="mb-4 flex flex-col">

6
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View File

@ -5,7 +5,6 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
import { Route } from '$lib/route';
import { preferences } from '$lib/stores/user.store';
import { getAccountAge } from '$lib/utils/auth';
import { handleError } from '$lib/utils/handle-error';
import { getButtonVisibility } from '$lib/utils/purchase-utils';
@ -50,7 +49,8 @@
},
});
preferences.set(response);
authManager.setPreferences(response);
showBuyButton = getButtonVisibility();
showMessage = false;
} catch (error) {
@ -70,7 +70,7 @@
</script>
<div class="license-status ps-4 text-sm">
{#if authManager.isPurchased && $preferences.purchase.showSupportBadge}
{#if authManager.isPurchased && authManager.preferences.purchase.showSupportBadge}
<button
onclick={() => goto(Route.userSettings({ isOpen: OpenQueryParam.PURCHASE_SETTINGS }))}
class="w-full mt-2"

4
web/src/lib/components/shared-components/side-bar/server-status.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { authManager } from '$lib/managers/auth-manager.svelte';
import { releaseManager } from '$lib/managers/release-manager.svelte';
import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
import { user } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { websocketStore } from '$lib/stores/websocket';
import type { ReleaseEvent } from '$lib/types';
@ -40,7 +40,7 @@
);
const getReleaseInfo = (release?: ReleaseEvent) => {
if (!release || !release?.isAvailable || !$user.isAdmin) {
if (!release || !release?.isAvailable || !authManager.user.isAdmin) {
return;
}

18
web/src/lib/components/shared-components/side-bar/storage-space.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { authManager } from '$lib/managers/auth-manager.svelte';
import { locale } from '$lib/stores/preferences.store';
import { user } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { requestServerInfo } from '$lib/utils/auth';
import { getByteUnitString } from '$lib/utils/byte-units';
@ -8,9 +8,17 @@
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
let hasQuota = $derived($user?.quotaSizeInBytes !== null);
let availableBytes = $derived((hasQuota ? $user?.quotaSizeInBytes : userInteraction.serverInfo?.diskSizeRaw) || 0);
let usedBytes = $derived((hasQuota ? $user?.quotaUsageInBytes : userInteraction.serverInfo?.diskUseRaw) || 0);
let hasQuota = $derived(authManager.user.quotaSizeInBytes !== null);
let availableBytes = $derived(
(hasQuota && authManager.authenticated
? authManager.user.quotaSizeInBytes
: userInteraction.serverInfo?.diskSizeRaw) || 0,
);
let usedBytes = $derived(
(hasQuota && authManager.authenticated
? authManager.user.quotaUsageInBytes
: userInteraction.serverInfo?.diskUseRaw) || 0,
);
const thresholds = [
{ from: 0.8, className: 'bg-warning' },
@ -18,7 +26,7 @@
];
onMount(async () => {
if (userInteraction.serverInfo && $user) {
if (userInteraction.serverInfo && authManager.authenticated) {
return;
}
await requestServerInfo();

10
web/src/lib/components/shared-components/side-bar/user-sidebar.svelte
View File

@ -2,10 +2,10 @@
import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
import Sidebar from '$lib/components/sidebar/sidebar.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { Route } from '$lib/route';
import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store';
import { NavbarGroup, NavbarItem } from '@immich/ui';
import {
mdiAccount,
@ -47,11 +47,11 @@
<NavbarItem title={$t('map')} href={Route.map()} icon={mdiMapOutline} activeIcon={mdiMap} />
{/if}
{#if $preferences.people.enabled && $preferences.people.sidebarWeb}
{#if authManager.preferences.people.enabled && authManager.preferences.people.sidebarWeb}
<NavbarItem title={$t('people')} href={Route.people()} icon={mdiAccountOutline} activeIcon={mdiAccount} />
{/if}
{#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
{#if authManager.preferences.sharedLinks.enabled && authManager.preferences.sharedLinks.sidebarWeb}
<NavbarItem title={$t('shared_links')} href={Route.sharedLinks()} icon={mdiLink} />
{/if}
@ -79,11 +79,11 @@
{/snippet}
</NavbarItem>
{#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
{#if authManager.preferences.tags.enabled && authManager.preferences.tags.sidebarWeb}
<NavbarItem title={$t('tags')} href={Route.tags()} icon={{ icon: mdiTagMultipleOutline, flipped: true }} />
{/if}
{#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
{#if authManager.preferences.folders.enabled && authManager.preferences.folders.sidebarWeb}
<NavbarItem title={$t('folders')} href={Route.folders()} icon={{ icon: mdiFolderOutline, flipped: true }} />
{/if}

4
web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import AssetUpdateDescriptionConfirmModal from '$lib/modals/AssetUpdateDescriptionConfirmModal.svelte';
import { user } from '$lib/stores/user.store';
import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { updateAssets } from '@immich/sdk';
@ -19,7 +19,7 @@
const handleUpdateDescription = async () => {
const description = await modalManager.show(AssetUpdateDescriptionConfirmModal);
if (description) {
const ids = getOwnedAssetsWithWarning(assetMultiSelectManager.assets, $user);
const ids = getOwnedAssetsWithWarning(assetMultiSelectManager.assets, authManager.user);
try {
await updateAssets({ assetBulkUpdateDto: { ids, description } });

4
web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
import { user } from '$lib/stores/user.store';
import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { updateAssets } from '@immich/sdk';
@ -22,7 +22,7 @@
return;
}
const ids = getOwnedAssetsWithWarning(assetMultiSelectManager.assets, $user);
const ids = getOwnedAssetsWithWarning(assetMultiSelectManager.assets, authManager.user);
try {
await updateAssets({ assetBulkUpdateDto: { ids, latitude: point.lat, longitude: point.lng } });

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

@ -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) {

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

@ -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'));

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

@ -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'));

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

@ -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)}

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

@ -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;

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

@ -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) {

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

@ -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>

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

@ -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

4
web/src/lib/managers/activity-manager.svelte.ts
View File

@ -1,4 +1,4 @@
import { user } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import {
@ -157,7 +157,7 @@ class ActivityManager {
const [liked] = await getActivities({
albumId,
assetId,
userId: get(user).id,
userId: authManager.user.id,
$type: ReactionType.Like,
level: assetId ? undefined : ReactionLevel.Album,
});

10
web/src/lib/managers/asset-multi-select-manager.svelte.spec.ts
View File

@ -1,7 +1,8 @@
import { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { resetSavedUser, user } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { AssetVisibility } from '@immich/sdk';
import { timelineAssetFactory } from '@test-data/factories/asset-factory';
import { preferencesFactory } from '@test-data/factories/preferences-factory';
import { userAdminFactory } from '@test-data/factories/user-factory';
describe('AssetMultiSelectManager', () => {
@ -32,14 +33,15 @@ describe('AssetMultiSelectManager', () => {
const cleanup = $effect.root(() => {
expect(sut.isAllUserOwned).toBe(false);
user.set(user1);
authManager.setUser(user1);
authManager.setPreferences(preferencesFactory.build());
expect(sut.isAllUserOwned).toBe(true);
user.set(user2);
authManager.setUser(user2);
expect(sut.isAllUserOwned).toBe(false);
});
cleanup();
resetSavedUser();
authManager.reset();
});
});

19
web/src/lib/managers/asset-multi-select-manager.svelte.ts
View File

@ -1,17 +1,14 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import { user } from '$lib/stores/user.store';
import { AssetVisibility, type UserAdminResponseDto } from '@immich/sdk';
import { AssetVisibility } from '@immich/sdk';
import { SvelteMap, SvelteSet } from 'svelte/reactivity';
import { fromStore } from 'svelte/store';
export type AssetMultiSelectOptions = {
resetOnNavigate?: boolean;
};
export class AssetMultiSelectManager {
#selectedMap = new SvelteMap<string, TimelineAsset>();
#user = fromStore<UserAdminResponseDto | undefined>(user);
#userId = $derived(this.#user.current?.id);
selectAll = $state(false);
startAsset = $state<TimelineAsset | null>(null);
@ -23,12 +20,16 @@ export class AssetMultiSelectManager {
selectionActive = $derived(this.#selectedMap.size > 0);
assets = $derived(Array.from(this.#selectedMap.values()));
ownedAssets = $derived(this.#userId ? this.assets.filter((asset) => asset.ownerId === this.#userId) : this.assets);
ownedAssets = $derived(
authManager.authenticated ? this.assets.filter((asset) => asset.ownerId === authManager.user.id) : this.assets,
);
isAllTrashed = $derived(this.assets.every((asset) => asset.isTrashed));
isAllArchived = $derived(this.assets.every((asset) => asset.visibility === AssetVisibility.Archive));
isAllFavorite = $derived(this.assets.every((asset) => asset.isFavorite));
isAllUserOwned = $derived(this.assets.every((asset) => asset.ownerId === this.#userId));
isAllUserOwned = $derived(
authManager.authenticated && this.assets.every((asset) => asset.ownerId === authManager.user.id),
);
#unsubscribe?: () => void;
@ -44,7 +45,9 @@ export class AssetMultiSelectManager {
}
getOwnedAssets() {
return this.#userId ? this.assets.filter((asset) => asset.ownerId === this.#userId) : this.assets;
return authManager.authenticated
? this.assets.filter((asset) => asset.ownerId === authManager.user.id)
: this.assets;
}
hasSelectedAsset(assetId: string) {

99
web/src/lib/managers/auth-manager.svelte.ts
View File

@ -1,31 +1,86 @@
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { page } from '$app/state';
import { eventManager } from '$lib/managers/event-manager.svelte';
import { Route } from '$lib/route';
import { isSharedLinkRoute } from '$lib/utils/navigation';
import { getAboutInfo, logout, type UserAdminResponseDto } from '@immich/sdk';
import {
getAboutInfo,
getMyPreferences,
getMyUser,
logout,
type UserAdminResponseDto,
type UserPreferencesResponseDto,
} from '@immich/sdk';
class AuthManager {
isPurchased = $state(false);
isSharedLink = $derived(isSharedLinkRoute(page.route?.id));
params = $derived(this.isSharedLink ? { key: page.params.key, slug: page.params.slug } : {});
constructor() {
eventManager.on({
AuthUserLoaded: (user) => this.onAuthUserLoaded(user),
});
#user = $state<UserAdminResponseDto>();
#preferences = $state<UserPreferencesResponseDto>();
get authenticated() {
return !!(this.#user && this.#preferences);
}
private async onAuthUserLoaded(user: UserAdminResponseDto) {
if (user.license?.activatedAt) {
authManager.isPurchased = true;
get user() {
if (!this.#user) {
throw new TypeError('AuthManager.user is undefined');
}
return this.#user;
}
get preferences() {
if (!this.#preferences) {
throw new TypeError('AuthManager.preferences is undefined');
}
return this.#preferences;
}
async load() {
if (authManager.authenticated) {
return;
}
const serverInfo = await getAboutInfo().catch(() => undefined);
if (serverInfo?.licensed) {
authManager.isPurchased = true;
if (!this.#hasAuthCookie()) {
return;
}
return this.refresh();
}
async refresh() {
try {
const [user, preferences] = await Promise.all([getMyUser(), getMyPreferences()]);
this.#preferences = preferences;
this.#user = user;
if (user.license?.activatedAt) {
this.isPurchased = true;
} else {
// check server status
const serverInfo = await getAboutInfo().catch(() => {});
if (serverInfo?.licensed) {
this.isPurchased = true;
}
}
eventManager.emit('AuthUserLoaded', user);
} catch {
// noop
}
}
setUser(user: UserAdminResponseDto) {
this.#user = user;
}
setPreferences(preferences: UserPreferencesResponseDto) {
this.#preferences = preferences;
}
async logout() {
@ -50,9 +105,31 @@ class AuthManager {
}
} finally {
this.isPurchased = false;
this.reset();
eventManager.emit('AuthLogout');
}
}
reset() {
this.#user = undefined;
this.#preferences = undefined;
}
#hasAuthCookie() {
if (!browser) {
return;
}
for (const cookie of document.cookie.split('; ')) {
const [name] = cookie.split('=');
if (name === 'immich_is_authenticated') {
return true;
}
}
return false;
}
}
export const authManager = new AuthManager();

5
web/src/lib/managers/memory-manager.svelte.ts
View File

@ -1,11 +1,10 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import { user } from '$lib/stores/user.store';
import { asLocalTimeISO } from '$lib/utils/date-time';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { deleteMemory, type MemoryResponseDto, removeMemoryAssets, searchMemories, updateMemory } from '@immich/sdk';
import { DateTime } from 'luxon';
import { get } from 'svelte/store';
type MemoryIndex = {
memoryIndex: number;
@ -31,7 +30,7 @@ class MemoryManager {
});
// loaded event might have already happened
if (get(user)) {
if (authManager.authenticated) {
void this.initialize();
}
}

4
web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts
View File

@ -2,7 +2,9 @@ import { getAnimateMock } from '$lib/__mocks__/animate.mock';
import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
import { sdkMock } from '$lib/__mocks__/sdk.mock';
import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { calcNewDate } from '$lib/modals/timezone-utils';
import { userAdminFactory } from '@test-data/factories/user-factory';
import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { DateTime } from 'luxon';
@ -25,6 +27,8 @@ describe('DateSelectionModal component', () => {
vi.stubGlobal('visualViewport', getVisualViewportMock());
vi.resetAllMocks();
Element.prototype.animate = getAnimateMock();
authManager.setUser(userAdminFactory.build());
});
afterAll(async () => {

4
web/src/lib/modals/AssetSelectionChangeDateModal.svelte
View File

@ -2,9 +2,9 @@
import Combobox from '$lib/components/shared-components/combobox.svelte';
import DateInput from '$lib/elements/DateInput.svelte';
import DurationInput from '$lib/elements/DurationInput.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import { getPreferredTimeZone, getTimezones, toIsoDate, type ZoneOption } from '$lib/modals/timezone-utils';
import { user } from '$lib/stores/user.store';
import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { updateAssets } from '@immich/sdk';
@ -31,7 +31,7 @@
let selectedOption = $derived(getPreferredTimeZone(initialDate, initialTimeZone, timezones, lastSelectedTimezone));
const onSubmit = async () => {
const ids = getOwnedAssetsWithWarning(assets, $user);
const ids = getOwnedAssetsWithWarning(assets, authManager.user);
try {
if (showRelative && (selectedDuration || selectedOption)) {
await updateAssets({

13
web/src/lib/modals/AvatarEditModal.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { user } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
import { Modal, ModalBody, toastManager } from '@immich/ui';
@ -16,13 +16,14 @@
const onSave = async (color: UserAvatarColor) => {
try {
if ($user.profileImagePath !== '') {
if (authManager.user.profileImagePath !== '') {
await deleteProfileImage();
}
toastManager.primary($t('saved_profile'));
$user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
const response = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
authManager.setUser(response);
onClose();
} catch (error) {
handleError(error, $t('errors.unable_to_save_profile'));
@ -35,7 +36,11 @@
<div class="grid grid-cols-2 sm:grid-cols-5 gap-4 place-items-center">
{#each colors as color (color)}
<button type="button" onclick={() => onSave(color)}>
<UserAvatar label={color} user={{ ...$user, profileImagePath: '', avatarColor: color }} size="xl" />
<UserAvatar
label={color}
user={{ ...authManager.user, profileImagePath: '', avatarColor: color }}
size="xl"
/>
</button>
{/each}
</div>

6
web/src/lib/modals/PartnerSelectionModal.svelte
View File

@ -1,15 +1,15 @@
<script lang="ts">
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
import { Button, ListButton, LoadingSpinner, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
user: UserResponseDto;
onClose: (users?: UserResponseDto[]) => void;
}
let { user, onClose }: Props = $props();
let { onClose }: Props = $props();
let availableUsers: UserResponseDto[] = $state([]);
let selectedUsers: UserResponseDto[] = $state([]);
@ -18,7 +18,7 @@
let users = await searchUsers();
// remove current user
users = users.filter((_user) => _user.id !== user.id);
users = users.filter(({ id }) => id !== authManager.user.id);
// exclude partners from the list of users available for selection
const partners = await getPartners({ direction: PartnerDirection.SharedBy });

8
web/src/lib/modals/ProfileImageCropperModal.svelte
View File

@ -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 { createProfileImage, type AssetResponseDto } from '@immich/sdk';
import { FormModal, toastManager } from '@immich/ui';
@ -68,10 +68,10 @@
return;
}
const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
const { profileImagePath, profileChangedAt } = await createProfileImage({ createProfileImageDto: { file } });
await createProfileImage({ createProfileImageDto: { file } });
toastManager.primary($t('profile_picture_set'));
$user.profileImagePath = profileImagePath;
$user.profileChangedAt = profileChangedAt;
await authManager.refresh();
onClose();
} catch (error) {

4
web/src/lib/modals/SearchFilterModal.svelte
View File

@ -9,7 +9,7 @@
import SearchTagsSection from '$lib/components/shared-components/search-bar/search-tags-section.svelte';
import SearchTextSection from '$lib/components/shared-components/search-bar/search-text-section.svelte';
import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
import { preferences } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import type { SearchFilter } from '$lib/types';
import { parseUtcDate } from '$lib/utils/date-time';
import { generateId } from '$lib/utils/generate-id';
@ -193,7 +193,7 @@
<SearchDateSection bind:filters={filter.date} />
<!-- RATING -->
{#if $preferences?.ratings.enabled}
{#if authManager.authenticated && authManager.preferences.ratings.enabled}
<SearchRatingsSection bind:rating={filter.rating} />
{/if}

4
web/src/lib/modals/ShortcutsModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { preferences } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Icon, Modal, ModalBody } from '@immich/ui';
import { mdiInformationOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -45,7 +45,7 @@
{ key: ['⇧', 'd'], action: $t('download') },
{ key: ['Space'], action: $t('play_or_pause_video') },
{ key: ['Del'], action: $t('trash_delete_asset'), info: $t('shift_to_permanent_delete') },
...($preferences?.ratings.enabled
...(authManager.authenticated && authManager.preferences.ratings.enabled
? [{ key: ['1-5'], action: $t('rate_asset'), info: $t('zero_to_clear_rating') }]
: []),
],

5
web/src/lib/services/album.service.ts
View File

@ -6,11 +6,9 @@ import AlbumAddUsersModal from '$lib/modals/AlbumAddUsersModal.svelte';
import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { Route } from '$lib/route';
import { user } from '$lib/stores/user.store';
import { createAlbumAndRedirect } from '$lib/utils/album-utils';
import { downloadArchive } from '$lib/utils/asset-utils';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { handleError } from '$lib/utils/handle-error';
import { getFormatter } from '$lib/utils/i18n';
import {
@ -32,7 +30,6 @@ import {
import { modalManager, toastManager, type ActionItem } from '@immich/ui';
import { mdiLink, mdiPlus, mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload } from '@mdi/js';
import { type MessageFormatter } from 'svelte-i18n';
import { get } from 'svelte/store';
export const getAlbumsActions = ($t: MessageFormatter) => {
const Create: ActionItem = {
@ -45,7 +42,7 @@ export const getAlbumsActions = ($t: MessageFormatter) => {
};
export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) => {
const isOwned = get(user).id === album.ownerId;
const isOwned = authManager.user.id === album.ownerId;
const Share: ActionItem = {
title: $t('share'),

11
web/src/lib/services/asset.service.spec.ts
View File

@ -1,10 +1,11 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { getAssetActions, handleDownloadAsset } from '$lib/services/asset.service';
import { user as userStore } from '$lib/stores/user.store';
import { setSharedLink } from '$lib/utils';
import { getFormatter } from '$lib/utils/i18n';
import { getAssetInfo } from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { assetFactory } from '@test-data/factories/asset-factory';
import { preferencesFactory } from '@test-data/factories/preferences-factory';
import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
import { userAdminFactory } from '@test-data/factories/user-factory';
import { vitest } from 'vitest';
@ -32,11 +33,15 @@ vitest.mock('$lib/utils', async () => {
describe('AssetService', () => {
describe('getAssetActions', () => {
beforeEach(() => {
authManager.setPreferences(preferencesFactory.build());
});
it('should allow shared link downloads if the user owns the asset and shared link downloads are disabled', () => {
const ownerId = 'owner';
const user = userAdminFactory.build({ id: ownerId });
const asset = assetFactory.build({ ownerId });
userStore.set(user);
authManager.setUser(user);
setSharedLink(sharedLinkFactory.build({ allowDownload: false }));
const assetActions = getAssetActions(() => '', asset);
expect(assetActions.SharedLinkDownload.$if?.()).toStrictEqual(true);
@ -46,7 +51,7 @@ describe('AssetService', () => {
const ownerId = 'owner';
const user = userAdminFactory.build({ id: 'non-owner' });
const asset = assetFactory.build({ ownerId });
userStore.set(user);
authManager.setUser(user);
setSharedLink(sharedLinkFactory.build({ allowDownload: false }));
const assetActions = getAssetActions(() => '', asset);
expect(assetActions.SharedLinkDownload.$if?.()).toStrictEqual(false);

20
web/src/lib/services/asset.service.ts
View File

@ -6,7 +6,6 @@ import { eventManager } from '$lib/managers/event-manager.svelte';
import AssetAddToAlbumModal from '$lib/modals/AssetAddToAlbumModal.svelte';
import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { user as authUser, preferences } from '$lib/stores/user.store';
import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
import { downloadUrl } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
@ -46,7 +45,6 @@ import {
mdiTune,
} from '@mdi/js';
import type { MessageFormatter } from 'svelte-i18n';
import { get } from 'svelte/store';
export const getAssetBulkActions = ($t: MessageFormatter) => {
const ownedAssets = assetMultiSelectManager.ownedAssets;
@ -95,15 +93,14 @@ export const getAssetBulkActions = ($t: MessageFormatter) => {
export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) => {
const sharedLink = getSharedLink();
const currentAuthUser = get(authUser);
const userPreferences = get(preferences);
const isOwner = !!(currentAuthUser && currentAuthUser.id === asset.ownerId);
const authUser = authManager.authenticated ? authManager.user : undefined;
const isOwner = !!(authUser && authUser.id === asset.ownerId);
const Share: ActionItem = {
title: $t('share'),
icon: mdiShareVariantOutline,
type: $t('assets'),
$if: () => !!(currentAuthUser && !asset.isTrashed && asset.visibility !== AssetVisibility.Locked),
$if: () => !!(authUser && !asset.isTrashed && asset.visibility !== AssetVisibility.Locked),
onAction: () => modalManager.show(SharedLinkCreateModal, { assetIds: [asset.id] }),
};
@ -112,7 +109,7 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
icon: mdiDownload,
shortcuts: { key: 'd', shift: true },
type: $t('assets'),
$if: () => !!currentAuthUser,
$if: () => !!authUser,
onAction: () => handleDownloadAsset(asset, { edited: true }),
};
@ -120,7 +117,7 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
title: $t('download_original'),
icon: mdiDownloadBox,
type: $t('assets'),
$if: () => !!currentAuthUser && asset.isEdited,
$if: () => !!authUser && asset.isEdited,
onAction: () => handleDownloadAsset(asset, { edited: false }),
};
@ -218,7 +215,7 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
title: $t('add_tag'),
icon: mdiTagPlusOutline,
type: $t('assets'),
$if: () => userPreferences.tags.enabled,
$if: () => authManager.authenticated && authManager.preferences.tags.enabled,
onAction: () => modalManager.show(AssetTagModal, { assetIds: [asset.id] }),
shortcuts: { key: 't' },
};
@ -315,7 +312,10 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
if (asset.livePhotoVideoId) {
const motionAsset = await getAssetInfo({ ...authManager.params, id: asset.livePhotoVideoId });
if (!isAndroidMotionVideo(motionAsset) || get(preferences)?.download.includeEmbeddedVideos) {
if (
!isAndroidMotionVideo(motionAsset) ||
(authManager.authenticated && authManager.preferences.download.includeEmbeddedVideos)
) {
const motionFilename = motionAsset.originalFileName;
const lastDotIndex = motionFilename.lastIndexOf('.');
const motionDownloadFilename =

7
web/src/lib/services/user-admin.service.ts
View File

@ -1,11 +1,11 @@
import { goto } from '$app/navigation';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
import { Route } from '$lib/route';
import { user as authUser } from '$lib/stores/user.store';
import type { HeaderButtonActionItem } from '$lib/types';
import { handleError } from '$lib/utils/handle-error';
import { getFormatter } from '$lib/utils/i18n';
@ -32,7 +32,6 @@ import {
} from '@mdi/js';
import { DateTime } from 'luxon';
import type { MessageFormatter } from 'svelte-i18n';
import { get } from 'svelte/store';
export const getUserAdminsActions = ($t: MessageFormatter) => {
const Create: ActionItem = {
@ -64,7 +63,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
title: $t('delete'),
type: $t('command'),
color: 'danger',
$if: () => get(authUser).id !== user.id && !user.deletedAt,
$if: () => authManager.user.id !== user.id && !user.deletedAt,
onAction: () => modalManager.show(UserDeleteConfirmModal, { user }),
shortcuts: { key: 'Backspace' },
shortcutOptions: { ignoreInputFields: true },
@ -89,7 +88,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
icon: mdiLockReset,
title: $t('reset_password'),
type: $t('command'),
$if: () => get(authUser).id !== user.id,
$if: () => authManager.user.id !== user.id,
onAction: () => handleResetPasswordUserAdmin(user),
};

19
web/src/lib/stores/user.store.ts
View File

@ -1,19 +0,0 @@
import { eventManager } from '$lib/managers/event-manager.svelte';
import { type UserAdminResponseDto, type UserPreferencesResponseDto } from '@immich/sdk';
import { writable } from 'svelte/store';
export const user = writable<UserAdminResponseDto>();
export const preferences = writable<UserPreferencesResponseDto>();
/**
* Reset the store to its initial undefined value. Make sure to
* only do this _after_ redirecting to an unauthenticated page.
*/
export const resetSavedUser = () => {
user.set(undefined as unknown as UserAdminResponseDto);
preferences.set(undefined as unknown as UserPreferencesResponseDto);
};
eventManager.on({
AuthLogout: () => resetSavedUser(),
});

7
web/src/lib/stores/websocket.ts
View File

@ -17,7 +17,6 @@ import {
} from '@immich/sdk';
import { io, type Socket } from 'socket.io-client';
import { get, writable } from 'svelte/store';
import { user } from './user.store';
interface AppRestartEvent {
isMaintenanceMode: boolean;
@ -88,7 +87,11 @@ websocket
export const openWebsocketConnection = () => {
try {
if (get(user) || get(websocketStore.serverRestarting) || page.url.pathname.startsWith(Route.maintenanceMode())) {
if (
authManager.authenticated ||
get(websocketStore.serverRestarting) ||
page.url.pathname.startsWith(Route.maintenanceMode())
) {
websocket.connect();
}
} catch (error) {

7
web/src/lib/utils/asset-utils.ts
View File

@ -3,7 +3,6 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
import { downloadManager } from '$lib/managers/download-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import { preferences } from '$lib/stores/user.store';
import { downloadRequest, withError } from '$lib/utils';
import { getByteUnitString } from '$lib/utils/byte-units';
import { getFormatter } from '$lib/utils/i18n';
@ -26,7 +25,6 @@ import {
type DownloadInfoDto,
type ExifResponseDto,
type StackResponseDto,
type UserPreferencesResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { toastManager } from '@immich/ui';
@ -102,9 +100,8 @@ export const downloadUrl = (url: string, filename: string) => {
};
export const downloadArchive = async (fileName: string, options: Omit<DownloadInfoDto, 'archiveSize'>) => {
const $preferences = get<UserPreferencesResponseDto | undefined>(preferences);
const dto = { ...options, archiveSize: $preferences?.download.archiveSize };
const archiveSize = authManager.authenticated ? authManager.preferences.download.archiveSize : undefined;
const dto = { ...options, archiveSize };
const [error, downloadInfo] = await withError(() => getDownloadInfo({ ...authManager.params, downloadInfoDto: dto }));
if (error) {
const $t = get(t);

53
web/src/lib/utils/auth.ts
View File

@ -1,82 +1,45 @@
import { browser } from '$app/environment';
import { eventManager } from '$lib/managers/event-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Route } from '$lib/route';
import { preferences as preferences$, user as user$ } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { getMyPreferences, getMyUser, getStorage } from '@immich/sdk';
import { getStorage } from '@immich/sdk';
import { redirect } from '@sveltejs/kit';
import { DateTime } from 'luxon';
import { get } from 'svelte/store';
export interface AuthOptions {
admin?: true;
public?: boolean;
}
export const loadUser = async () => {
try {
let user = get(user$);
let preferences = get(preferences$);
if ((!user || !preferences) && hasAuthCookie()) {
[user, preferences] = await Promise.all([getMyUser(), getMyPreferences()]);
user$.set(user);
preferences$.set(preferences);
eventManager.emit('AuthUserLoaded', user);
}
return user;
} catch {
return null;
}
};
const hasAuthCookie = (): boolean => {
if (!browser) {
return false;
}
for (const cookie of document.cookie.split('; ')) {
const [name] = cookie.split('=');
if (name === 'immich_is_authenticated') {
return true;
}
}
return false;
};
export const authenticate = async (url: URL, options?: AuthOptions) => {
const { public: publicRoute, admin: adminRoute } = options || {};
const user = await loadUser();
await authManager.load();
if (publicRoute) {
return;
}
if (!user) {
if (!authManager.authenticated) {
redirect(307, Route.login({ continue: url.pathname + url.search }));
}
if (adminRoute && !user.isAdmin) {
if (adminRoute && !authManager.user.isAdmin) {
redirect(307, Route.photos());
}
};
export const requestServerInfo = async () => {
if (get(user$)) {
if (authManager.authenticated) {
const data = await getStorage();
userInteraction.serverInfo = data;
}
};
export const getAccountAge = (): number => {
const user = get(user$);
if (!user) {
if (!authManager.authenticated) {
return 0;
}
const createdDate = DateTime.fromISO(user.createdAt);
const createdDate = DateTime.fromISO(authManager.user.createdAt);
const now = DateTime.now();
const accountAge = now.diff(createdDate, 'days').days.toFixed(0);

6
web/src/lib/utils/cast/gcast-destination.svelte.ts
View File

@ -1,8 +1,7 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { CastDestinationType, CastState, type ICastDestination } from '$lib/managers/cast-manager.svelte';
import { preferences } from '$lib/stores/user.store';
import 'chromecast-caf-sender';
import { Duration } from 'luxon';
import { get } from 'svelte/store';
const FRAMEWORK_LINK = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';
@ -26,8 +25,7 @@ export class GCastDestination implements ICastDestination {
private currentUrl: string | null = null;
async initialize(): Promise<boolean> {
const preferencesStore = get(preferences);
if (!preferencesStore || !preferencesStore.cast.gCastEnabled) {
if (!authManager.authenticated || authManager.preferences.cast.gCastEnabled) {
this.isAvailable = false;
return false;
}

12
web/src/lib/utils/file-uploader.spec.ts
View File

@ -1,9 +1,10 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { uploadManager } from '$lib/managers/upload-manager.svelte';
import { uploadAssetsStore } from '$lib/stores/upload';
import { resetSavedUser, user } from '$lib/stores/user.store';
import { UploadState } from '$lib/types';
import * as utils from '$lib/utils';
import { AssetMediaStatus, type AssetMediaResponseDto, type UserAdminResponseDto } from '@immich/sdk';
import { preferencesFactory } from '@test-data/factories/preferences-factory';
import { get } from 'svelte/store';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fileUploadHandler } from './file-uploader';
@ -18,7 +19,7 @@ describe('fileUploader error handling', () => {
vi.clearAllMocks();
vi.spyOn(uploadManager, 'getExtensions').mockReturnValue(['.jpg']);
uploadAssetsStore.reset();
resetSavedUser();
authManager.reset();
// Stub out crypto to avoid that branch
vi.stubGlobal('crypto', undefined);
@ -31,7 +32,7 @@ describe('fileUploader error handling', () => {
describe(`for ${name}`, () => {
beforeEach(() => {
if (mockUser) {
user.set(mockUserObject);
authManager.setUser(mockUserObject);
}
});
@ -58,9 +59,10 @@ describe('fileUploader error handling', () => {
}
it('should suppress errors on logout', async () => {
user.set(mockUserObject);
authManager.setUser(mockUserObject);
authManager.setPreferences(preferencesFactory.build());
vi.spyOn(utils, 'uploadRequest').mockImplementationOnce(() => {
resetSavedUser();
authManager.reset();
return Promise.reject(mockError);
});

5
web/src/lib/utils/file-uploader.ts
View File

@ -2,7 +2,6 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
import { uploadManager } from '$lib/managers/upload-manager.svelte';
import { addAssetsToAlbums } from '$lib/services/album.service';
import { uploadAssetsStore } from '$lib/stores/upload';
import { user } from '$lib/stores/user.store';
import { UploadState } from '$lib/types';
import { uploadRequest } from '$lib/utils';
import { ExecutorQueue } from '$lib/utils/executor-queue';
@ -145,7 +144,7 @@ async function fileUploader({
}: FileUploaderParams): Promise<string | undefined> {
const fileCreatedAt = new Date(assetFile.lastModified).toISOString();
const $t = get(t);
const wasInitiallyLoggedIn = !!get(user);
const wasInitiallyLoggedIn = !!authManager.authenticated;
uploadAssetsStore.markStarted(deviceAssetId);
@ -238,7 +237,7 @@ async function fileUploader({
} catch (error) {
// If the user store no longer holds a user, it means they have logged out
// In this case don't bother reporting any errors.
if (wasInitiallyLoggedIn && !get(user)) {
if (wasInitiallyLoggedIn && !authManager.authenticated) {
return;
}

10
web/src/lib/utils/license-utils.ts
View File

@ -1,14 +1,16 @@
import { PUBLIC_IMMICH_BUY_HOST, PUBLIC_IMMICH_PAY_HOST } from '$env/static/public';
import type { ImmichProduct } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
import { setServerLicense, setUserLicense, type LicenseResponseDto } from '@immich/sdk';
import { loadUser } from './auth';
export const activateProduct = async (licenseKey: string, activationKey: string): Promise<LicenseResponseDto> => {
// Send server key to user activation if user is not admin
const user = await loadUser();
const isServerActivation = user?.isAdmin && licenseKey.search('IMSV') !== -1;
// TODO is this needed?
await authManager.load();
const isServerActivation = authManager.user.isAdmin && licenseKey.search('IMSV') !== -1;
const licenseKeyDto = { licenseKey, activationKey };
// Send server key to user activation if user is not admin
return isServerActivation ? setServerLicense({ licenseKeyDto }) : setUserLicense({ licenseKeyDto });
};

23
web/src/lib/utils/purchase-utils.ts
View File

@ -1,32 +1,19 @@
import { preferences } from '$lib/stores/user.store';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { updateMyPreferences } from '@immich/sdk';
import { DateTime } from 'luxon';
import { get } from 'svelte/store';
export const getButtonVisibility = (): boolean => {
const myPreferences = get(preferences);
if (!myPreferences) {
if (!authManager.authenticated) {
return true;
}
const { purchase } = myPreferences;
const now = DateTime.now();
const hideUntilDate = DateTime.fromISO(purchase.hideBuyButtonUntil);
const hideUntilDate = DateTime.fromISO(authManager.preferences.purchase.hideBuyButtonUntil);
const dayLeft = Number(now.diff(hideUntilDate, 'days').days.toFixed(0));
return dayLeft > 0;
};
export const setSupportBadgeVisibility = async (value: boolean) => {
const response = await updateMyPreferences({
userPreferencesUpdateDto: {
purchase: {
showSupportBadge: value,
},
},
});
preferences.set(response);
const response = await updateMyPreferences({ userPreferencesUpdateDto: { purchase: { showSupportBadge: value } } });
authManager.setPreferences(response);
};

19
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -31,6 +31,7 @@
import { activityManager } from '$lib/managers/activity-manager.svelte';
import { assetMultiSelectManager, AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@ -47,7 +48,6 @@
import { getGlobalActions } from '$lib/services/app.service';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { preferences, user } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '$lib/utils/navigation';
@ -243,7 +243,7 @@
onDestroy(() => activityManager.reset());
let isOwned = $derived($user.id == album.ownerId);
let isOwned = $derived(authManager.user.id == album.ownerId);
let showActivityStatus = $derived(
album.albumUsers.length > 0 &&
@ -251,8 +251,8 @@
(album.isActivityEnabled || activityManager.commentCount > 0),
);
let isEditor = $derived(
album.albumUsers.find(({ user: { id } }) => id === $user.id)?.role === AlbumUserRole.Editor ||
album.ownerId === $user.id,
album.albumUsers.find(({ user: { id } }) => id === authManager.user.id)?.role === AlbumUserRole.Editor ||
album.ownerId === authManager.user.id,
);
let albumHasViewers = $derived(album.albumUsers.some(({ role }) => role === AlbumUserRole.Viewer));
@ -485,7 +485,7 @@
/>
{/if}
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
{#if authManager.preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
<TagAction menuItem />
{/if}
@ -615,7 +615,7 @@
{/if}
{/if}
</div>
{#if album.albumUsers.length > 0 && album && assetViewerManager.isShowActivityPanel && $user && !assetViewerManager.isViewing}
{#if album.albumUsers.length > 0 && album && assetViewerManager.isShowActivityPanel && authManager.authenticated && !assetViewerManager.isViewing}
<div class="flex">
<div
transition:fly={{ duration: 150 }}
@ -623,12 +623,7 @@
class="z-2 w-90 md:w-115 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
translate="yes"
>
<ActivityViewer
user={$user}
disabled={!album.isActivityEnabled}
albumOwnerId={album.ownerId}
albumId={album.id}
/>
<ActivityViewer disabled={!album.isActivityEnabled} albumOwnerId={album.ownerId} albumId={album.id} />
</div>
</div>
{/if}

4
web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -16,9 +16,9 @@
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { preferences } from '$lib/stores/user.store';
import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
import { mdiDotsVertical } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -80,7 +80,7 @@
unarchive={assetMultiSelectManager.isAllArchived}
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
/>
{#if $preferences.tags.enabled}
{#if authManager.preferences.tags.enabled}
<TagAction menuItem />
{/if}
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />

4
web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -21,11 +21,11 @@
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import SkipLink from '$lib/elements/SkipLink.svelte';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import type { Viewport } from '$lib/managers/timeline-manager/types';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { foldersStore } from '$lib/stores/folders.svelte';
import { preferences } from '$lib/stores/user.store';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { joinPaths } from '$lib/utils/tree-utils';
import { ActionButton, CommandPaletteDefaultProvider, IconButton, Text } from '@immich/ui';
@ -149,7 +149,7 @@
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} onArchive={triggerAssetUpdate} />
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
{#if authManager.preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
<TagAction menuItem />
{/if}
<DeleteAssets menuItem onAssetDelete={triggerAssetUpdate} onUndoDelete={triggerAssetUpdate} />

4
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -27,6 +27,7 @@
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
@ -34,7 +35,6 @@
import { getAssetBulkActions } from '$lib/services/asset.service';
import { getPersonActions } from '$lib/services/person.service';
import { locale } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store';
import { websocketEvents } from '$lib/stores/websocket';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
@ -483,7 +483,7 @@
unarchive={assetMultiSelectManager.isAllArchived}
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
/>
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
{#if authManager.preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
<TagAction menuItem />
{/if}
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />

6
web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
View File

@ -21,11 +21,11 @@
import { AssetAction } from '$lib/constants';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { memoryManager } from '$lib/managers/memory-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { preferences } from '$lib/stores/user.store';
import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
import {
updateStackedAssetInTimeline,
@ -102,7 +102,7 @@
onEscape={handleEscape}
withStacked
>
{#if $preferences.memories.enabled}
{#if authManager.preferences.memories.enabled}
<ImageCarousel {items} />
{/if}
{#snippet empty()}
@ -150,7 +150,7 @@
menuItem
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
/>
{#if $preferences.tags.enabled}
{#if authManager.preferences.tags.enabled}
<TagAction menuItem />
{/if}
<DeleteAssets

4
web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -20,12 +20,12 @@
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import { QueryParameter } from '$lib/constants';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import type { Viewport } from '$lib/managers/timeline-manager/types';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { lang, locale } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';
import { parseUtcDate } from '$lib/utils/date-time';
import { handleError } from '$lib/utils/handle-error';
@ -353,7 +353,7 @@
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} />
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
{#if $preferences.tags.enabled}
{#if authManager.preferences.tags.enabled}
<TagAction menuItem />
{/if}
<DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />

4
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -23,11 +23,11 @@
import { AssetAction } from '$lib/constants';
import SkipLink from '$lib/elements/SkipLink.svelte';
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { getTagActions } from '$lib/services/tag.service';
import { preferences } from '$lib/stores/user.store';
import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
import { getAllTags, type TagResponseDto } from '@immich/sdk';
import { ActionButton, CommandPaletteDefaultProvider, Text } from '@immich/ui';
@ -132,7 +132,7 @@
menuItem
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
/>
{#if $preferences.tags.enabled}
{#if authManager.preferences.tags.enabled}
<TagAction menuItem />
{/if}
<DeleteAssets

6
web/src/routes/+layout.svelte
View File

@ -8,6 +8,7 @@
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import VersionAnnouncement from '$lib/components/VersionAnnouncement.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
import { themeManager } from '$lib/managers/theme-manager.svelte';
@ -15,7 +16,6 @@
import { Route } from '$lib/route';
import { locale } from '$lib/stores/preferences.store';
import { sidebarStore } from '$lib/stores/sidebar.svelte';
import { user } from '$lib/stores/user.store';
import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
import { copyToClipboard } from '$lib/utils';
import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
@ -112,7 +112,7 @@
const { serverRestarting } = websocketStore;
$effect.pre(() => {
if ($user || $serverRestarting || page.url.pathname.startsWith(Route.maintenanceMode())) {
if (authManager.authenticated || $serverRestarting || page.url.pathname.startsWith(Route.maintenanceMode())) {
openWebsocketConnection();
} else {
closeWebsocketConnection();
@ -182,7 +182,7 @@
icon: mdiServer,
onAction: () => goto(Route.systemStatistics()),
},
].map((route) => ({ ...route, type: $t('page'), $if: () => $user?.isAdmin }));
].map((route) => ({ ...route, type: $t('page'), $if: () => authManager.user.isAdmin }));
const commands = $derived([...userCommands, ...adminCommands]);
</script>

6
web/src/routes/+page.ts
View File

@ -1,9 +1,9 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
import { Route } from '$lib/route';
import { getFormatter } from '$lib/utils/i18n';
import { init } from '$lib/utils/server';
import { redirect } from '@sveltejs/kit';
import { loadUser } from '../lib/utils/auth';
import type { PageLoad } from './$types';
export const ssr = false;
@ -17,8 +17,8 @@ export const load = (async ({ fetch }) => {
redirect(307, Route.maintenanceMode());
}
const authenticated = await loadUser();
if (authenticated) {
await authManager.load();
if (authManager.authenticated) {
redirect(307, Route.photos());
}

4
web/src/routes/admin/library-management/(list)/new/+page.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Route } from '$lib/route';
import { handleCreateLibrary } from '$lib/services/library.service';
import { user } from '$lib/stores/user.store';
import { Field, FormModal, HelperText, Select } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -14,7 +14,7 @@
const { data }: Props = $props();
let ownerId: string = $state($user.id);
let ownerId: string = $state(authManager.user.id);
const users = $state(data.allUsers);
const onClose = async () => {

4
web/src/routes/admin/users/[id]/edit/+page.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Route } from '$lib/route';
import { handleUpdateUserAdmin } from '$lib/services/user-admin.service';
import { user as authUser } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
import { Field, FormModal, Input, Link, NumberInput, Switch, Text } from '@immich/ui';
@ -82,7 +82,7 @@
</Link>
</Text>
{#if user.id !== $authUser.id}
{#if user.id !== authManager.user.id}
<Field label={$t('admin.admin_user')}>
<Switch bind:checked={isAdmin} class="mt-4" />
</Field>

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

@ -1,7 +1,6 @@
<script lang="ts">
import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { user } from '$lib/stores/user.store';
import { updateMyUser } from '@immich/sdk';
import { Alert, Button, Field, HelperText, PasswordInput, Stack, Text } from '@immich/ui';
import { t } from 'svelte-i18n';
@ -32,7 +31,7 @@
<form onsubmit={onSubmit} class="flex flex-col gap-4">
<Alert color="primary" size="small" class="mb-2">
<Stack gap={4}>
<Text>{$t('hi_user', { values: { name: $user.name, email: $user.email } })}</Text>
<Text>{$t('hi_user', { values: { name: authManager.user.name, email: authManager.user.email } })}</Text>
<Text>{$t('change_password_description')}</Text>
</Stack>
</Alert>

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

@ -1,14 +1,13 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { Route } from '$lib/route';
import { user } from '$lib/stores/user.store';
import { authenticate } from '$lib/utils/auth';
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 ({ url }) => {
await authenticate(url);
if (!get(user).shouldChangePassword) {
if (!authManager.user.shouldChangePassword) {
redirect(307, Route.photos());
}

6
web/src/routes/auth/onboarding/+page.svelte
View File

@ -10,10 +10,10 @@
import OnboardingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
import OnboardingUserPrivacy from '$lib/components/onboarding-page/onboarding-user-privacy.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
import { Route } from '$lib/route';
import { user } from '$lib/stores/user.store';
import { OnboardingRole } from '$lib/types';
import { setUserOnboarding, updateAdminOnboarding } from '@immich/sdk';
import {
@ -101,7 +101,7 @@
return temporaryIndex === -1 ? 0 : temporaryIndex;
});
let userRole = $derived(
$user.isAdmin && !serverConfigManager.value.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER,
authManager.user.isAdmin && !serverConfigManager.value.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER,
);
let onboardingStepCount = $derived(onboardingSteps.filter((step) => shouldRunStep(step.role, userRole)).length);
@ -128,7 +128,7 @@
const handleNextClicked = async () => {
if (nextStepIndex == -1) {
if ($user.isAdmin) {
if (authManager.user.isAdmin) {
await updateAdminOnboarding({ adminOnboardingUpdateDto: { isOnboarded: true } });
await serverConfigManager.loadServerConfig();
}