mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
feat(web): automatically update user info (#5647)
* use svelte store * fix: websocket error when not authenticated * more routes
This commit is contained in:
parent
cbca69841a
commit
c602eaea4a
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto, UserResponseDto } from '@api';
|
||||
import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto } from '@api';
|
||||
import * as luxon from 'luxon';
|
||||
import handlebar from 'handlebars';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
@ -13,9 +13,9 @@
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let storageConfig: SystemConfigStorageTemplateDto;
|
||||
export let user: UserResponseDto;
|
||||
export let disabled = false;
|
||||
|
||||
let savedConfig: SystemConfigStorageTemplateDto;
|
||||
@ -163,18 +163,18 @@
|
||||
<p class="text-sm">
|
||||
Approximately path length limit : <span
|
||||
class="font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
|
||||
>{parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length}</span
|
||||
>/260
|
||||
</p>
|
||||
|
||||
<p class="text-sm">
|
||||
<code class="text-immich-primary dark:text-immich-dark-primary">{user.storageLabel || user.id}</code> is the user's
|
||||
Storage Label
|
||||
<code class="text-immich-primary dark:text-immich-dark-primary">{$user.storageLabel || $user.id}</code> is the
|
||||
user's Storage Label
|
||||
</p>
|
||||
|
||||
<p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
|
||||
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
|
||||
>UPLOAD_LOCATION/{user.storageLabel || user.id}</span
|
||||
>UPLOAD_LOCATION/{$user.storageLabel || $user.id}</span
|
||||
>/{parsedTemplate()}.jpg
|
||||
</p>
|
||||
|
||||
|
@ -8,10 +8,10 @@
|
||||
import type { OnClick, OnShowContextMenu } from './album-card';
|
||||
import { getContextMenuPosition } from '../../utils/context-menu';
|
||||
import { mdiDotsVertical } from '@mdi/js';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let isSharingView = false;
|
||||
export let user: UserResponseDto;
|
||||
export let showItemCount = true;
|
||||
export let showContextMenu = true;
|
||||
let showVerticalDots = false;
|
||||
@ -119,7 +119,7 @@
|
||||
|
||||
{#if isSharingView}
|
||||
{#await getAlbumOwnerInfo() then albumOwner}
|
||||
{#if user.email == albumOwner.email}
|
||||
{#if $user.email == albumOwner.email}
|
||||
<p>Owned</p>
|
||||
{:else}
|
||||
<p>
|
||||
|
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import { photoZoomState } from '$lib/stores/zoom-image.store';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
@ -23,6 +22,7 @@
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
export let showCopyButton: boolean;
|
||||
@ -34,7 +34,7 @@
|
||||
export let showSlideshow = false;
|
||||
export let hasStackChildren = false;
|
||||
|
||||
$: isOwner = asset.ownerId === $page.data.user?.id;
|
||||
$: isOwner = asset.ownerId === $user?.id;
|
||||
|
||||
type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow' | 'unstack';
|
||||
|
||||
|
@ -1,11 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import type { UserResponseDto } from '@api';
|
||||
import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '../shared-components/side-bar/side-bar.svelte';
|
||||
import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let hideNavbar = false;
|
||||
export let showUploadButton = false;
|
||||
export let title: string | undefined = undefined;
|
||||
@ -18,7 +16,7 @@
|
||||
|
||||
<header>
|
||||
{#if !hideNavbar}
|
||||
<NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
|
||||
<NavigationBar {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
|
||||
{/if}
|
||||
|
||||
<slot name="header" />
|
||||
|
@ -10,6 +10,7 @@
|
||||
import { notificationController, NotificationType } from '../notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import AvatarSelector from './avatar-selector.svelte';
|
||||
import { setUser } from '$lib/stores/user.store';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
@ -33,6 +34,7 @@
|
||||
});
|
||||
|
||||
user = data;
|
||||
setUser(user);
|
||||
isShowSelectAvatar = false;
|
||||
|
||||
notificationController.show({
|
||||
|
@ -4,7 +4,7 @@
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade, fly } from 'svelte/transition';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { api } from '@api';
|
||||
import ThemeButton from '../theme-button.svelte';
|
||||
import { AppRoute } from '../../../constants';
|
||||
import AccountInfoPanel from './account-info-panel.svelte';
|
||||
@ -16,7 +16,8 @@
|
||||
import UserAvatar from '../user-avatar.svelte';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { mdiMagnify, mdiTrayArrowUp, mdiCog } from '@mdi/js';
|
||||
export let user: UserResponseDto;
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let showUploadButton = true;
|
||||
|
||||
let shouldShowAccountInfo = false;
|
||||
@ -71,7 +72,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if user.isAdmin}
|
||||
{#if $user.isAdmin}
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href={AppRoute.ADMIN_USER_MANAGEMENT}
|
||||
@ -121,8 +122,8 @@
|
||||
on:mouseleave={() => (shouldShowAccountInfo = false)}
|
||||
on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
|
||||
>
|
||||
{#key user}
|
||||
<UserAvatar {user} size="lg" showTitle={false} interactive />
|
||||
{#key $user}
|
||||
<UserAvatar user={$user} size="lg" showTitle={false} interactive />
|
||||
{/key}
|
||||
</button>
|
||||
|
||||
@ -132,13 +133,13 @@
|
||||
out:fade={{ delay: 200, duration: 150 }}
|
||||
class="absolute -bottom-12 right-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
|
||||
>
|
||||
<p>{user.name}</p>
|
||||
<p>{user.email}</p>
|
||||
<p>{$user.name}</p>
|
||||
<p>{$user.email}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowAccountInfoPanel}
|
||||
<AccountInfoPanel bind:user on:logout={logOut} />
|
||||
<AccountInfoPanel user={$user} on:logout={logOut} />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
@ -8,6 +8,7 @@
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import { setUser } from '$lib/stores/user.store';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
@ -22,6 +23,7 @@
|
||||
});
|
||||
|
||||
Object.assign(user, data);
|
||||
setUser(data);
|
||||
|
||||
notificationController.show({
|
||||
message: 'Saved profile',
|
||||
|
@ -2,7 +2,7 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { page } from '$app/stores';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { APIKeyResponseDto, AuthDeviceResponseDto, oauth, UserResponseDto } from '@api';
|
||||
import { APIKeyResponseDto, AuthDeviceResponseDto, oauth } from '@api';
|
||||
import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
|
||||
import ChangePasswordSettings from './change-password-settings.svelte';
|
||||
import DeviceList from './device-list.svelte';
|
||||
@ -13,8 +13,7 @@
|
||||
import SidebarSettings from './sidebar-settings.svelte';
|
||||
import UserAPIKeyList from './user-api-key-list.svelte';
|
||||
import UserProfileSettings from './user-profile-settings.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let keys: APIKeyResponseDto[] = [];
|
||||
export let devices: AuthDeviceResponseDto[] = [];
|
||||
@ -26,7 +25,7 @@
|
||||
</script>
|
||||
|
||||
<SettingAccordion title="Account" subtitle="Manage your account">
|
||||
<UserProfileSettings {user} />
|
||||
<UserProfileSettings user={$user} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="API Keys" subtitle="Manage your API keys">
|
||||
@ -42,7 +41,7 @@
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
|
||||
<MemoriesSettings {user} />
|
||||
<MemoriesSettings user={$user} />
|
||||
</SettingAccordion>
|
||||
|
||||
{#if $featureFlags.loaded && $featureFlags.oauth}
|
||||
@ -51,7 +50,7 @@
|
||||
subtitle="Manage your OAuth connection"
|
||||
isOpen={oauthOpen || $page.url.searchParams.get('open') === 'oauth'}
|
||||
>
|
||||
<OAuthSettings {user} />
|
||||
<OAuthSettings user={$user} />
|
||||
</SettingAccordion>
|
||||
{/if}
|
||||
|
||||
@ -60,7 +59,7 @@
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
|
||||
<PartnerSettings {user} />
|
||||
<PartnerSettings user={$user} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Sidebar" subtitle="Manage sidebar settings">
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { get, writable } from 'svelte/store';
|
||||
import type { UserResponseDto } from '@api';
|
||||
|
||||
export const user = writable<UserResponseDto | null>(null);
|
||||
export const user = writable<UserResponseDto>();
|
||||
|
||||
export const setUser = (value: UserResponseDto | null) => {
|
||||
export const setUser = (value: UserResponseDto) => {
|
||||
user.set(value);
|
||||
};
|
||||
|
||||
|
@ -2,6 +2,7 @@ import type { AssetResponseDto, ServerVersionResponseDto } from '@api';
|
||||
import { Socket, io } from 'socket.io-client';
|
||||
import { writable } from 'svelte/store';
|
||||
import { loadConfig } from './server-config.store';
|
||||
import { getSavedUser } from './user.store';
|
||||
|
||||
export interface ReleaseEvent {
|
||||
isAvailable: boolean;
|
||||
@ -25,7 +26,7 @@ let websocket: Socket | null = null;
|
||||
|
||||
export const openWebsocketConnection = () => {
|
||||
try {
|
||||
if (websocket) {
|
||||
if (websocket || !getSavedUser()) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -34,8 +34,13 @@ export const authenticate = async (options?: AuthOptions) => {
|
||||
if (!savedUser) {
|
||||
setUser(user);
|
||||
}
|
||||
|
||||
return user;
|
||||
};
|
||||
|
||||
export const isLoggedIn = async () => getAuthUser().then((user) => !!user);
|
||||
export const isLoggedIn = async () => {
|
||||
const savedUser = getSavedUser();
|
||||
const user = savedUser || (await getAuthUser());
|
||||
if (!savedUser) {
|
||||
setUser(user);
|
||||
}
|
||||
return user;
|
||||
};
|
||||
|
@ -245,7 +245,7 @@
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<UserPageLayout title={data.meta.title}>
|
||||
<div class="flex place-items-center gap-2" slot="buttons">
|
||||
<LinkButton on:click={handleCreateAlbum}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
@ -291,11 +291,7 @@
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
|
||||
{#each $albums as album (album.id)}
|
||||
<a data-sveltekit-preload-data="hover" href="{AppRoute.ALBUMS}/{album.id}" animate:flip={{ duration: 200 }}>
|
||||
<AlbumCard
|
||||
{album}
|
||||
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
|
||||
user={data.user}
|
||||
/>
|
||||
<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
@ -3,11 +3,10 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
const { data: albums } = await api.albumApi.getAllAlbums();
|
||||
|
||||
return {
|
||||
user,
|
||||
albums,
|
||||
meta: {
|
||||
title: 'Albums',
|
||||
|
@ -109,8 +109,8 @@
|
||||
const timelineInteractionStore = createAssetInteractionStore();
|
||||
const { selectedAssets: timelineSelected } = timelineInteractionStore;
|
||||
|
||||
$: isOwned = data.user.id == album.ownerId;
|
||||
$: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === data.user.id);
|
||||
$: isOwned = $user.id == album.ownerId;
|
||||
$: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === $user.id);
|
||||
$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
|
||||
$: {
|
||||
if (isShowActivity) {
|
||||
@ -343,7 +343,7 @@
|
||||
};
|
||||
|
||||
const handleRemoveUser = async (userId: string) => {
|
||||
if (userId == 'me' || userId === data.user.id) {
|
||||
if (userId == 'me' || userId === $user.id) {
|
||||
goto(backUrl);
|
||||
return;
|
||||
}
|
||||
|
@ -3,12 +3,11 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ params }) => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
const { data: album } = await api.albumApi.getAlbumInfo({ id: params.albumId, withoutAssets: true });
|
||||
|
||||
return {
|
||||
album,
|
||||
user,
|
||||
meta: {
|
||||
title: album.albumName,
|
||||
},
|
||||
|
@ -44,7 +44,7 @@
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
|
||||
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
|
||||
<EmptyPlaceholder
|
||||
text="Archive photos and videos to hide them from your Photos view"
|
||||
|
@ -2,10 +2,9 @@ import { authenticate } from '$lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Archive',
|
||||
},
|
||||
|
@ -36,7 +36,7 @@
|
||||
|
||||
<svelte:window bind:innerWidth={screenSize} />
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<UserPageLayout title={data.meta.title}>
|
||||
{#if hasPeople}
|
||||
<div class="mb-6 mt-2">
|
||||
<div class="flex justify-between">
|
||||
|
@ -3,11 +3,10 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
const { data: items } = await api.searchApi.getExploreData();
|
||||
const { data: response } = await api.personApi.getAllPeople({ withHidden: false });
|
||||
return {
|
||||
user,
|
||||
items,
|
||||
response,
|
||||
meta: {
|
||||
|
@ -49,7 +49,7 @@
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
|
||||
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
|
||||
<EmptyPlaceholder
|
||||
text="Add favorites to quickly find your best pictures and videos"
|
||||
|
@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Favorites',
|
||||
},
|
||||
|
@ -101,7 +101,7 @@
|
||||
</script>
|
||||
|
||||
{#if $featureFlags.loaded && $featureFlags.map}
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<UserPageLayout title={data.meta.title}>
|
||||
<div class="isolate h-full w-full">
|
||||
<Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
|
||||
</div></UserPageLayout
|
||||
|
@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Map',
|
||||
},
|
||||
|
@ -3,12 +3,11 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ params }) => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
|
||||
const { data: partner } = await api.userApi.getUserById({ id: params.userId });
|
||||
|
||||
return {
|
||||
user,
|
||||
partner,
|
||||
meta: {
|
||||
title: 'Partner',
|
||||
|
@ -357,7 +357,7 @@
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} title="People">
|
||||
<UserPageLayout title="People">
|
||||
<svelte:fragment slot="buttons">
|
||||
{#if countTotalPeople > 0}
|
||||
<IconButton on:click={() => (selectHidden = !selectHidden)}>
|
||||
|
@ -3,11 +3,10 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
|
||||
const { data: people } = await api.personApi.getAllPeople({ withHidden: true });
|
||||
return {
|
||||
user,
|
||||
people,
|
||||
meta: {
|
||||
title: 'People',
|
||||
|
@ -3,13 +3,12 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ params }) => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
|
||||
const { data: person } = await api.personApi.getPerson({ id: params.personId });
|
||||
const { data: statistics } = await api.personApi.getPersonStatistics({ id: params.personId });
|
||||
|
||||
return {
|
||||
user,
|
||||
person,
|
||||
statistics,
|
||||
meta: {
|
||||
|
@ -20,12 +20,10 @@
|
||||
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
|
||||
import { AssetStore } from '$lib/stores/assets.store';
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import type { PageData } from './$types';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { mdiDotsVertical, mdiPlus } from '@mdi/js';
|
||||
import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
let handleEscapeKey = false;
|
||||
@ -52,7 +50,7 @@
|
||||
|
||||
{#if $isMultiSelectState}
|
||||
<AssetSelectControlBar
|
||||
ownerId={data.user.id}
|
||||
ownerId={$user.id}
|
||||
assets={$selectedAssets}
|
||||
clearSelect={() => assetInteractionStore.clearMultiselect()}
|
||||
>
|
||||
@ -80,7 +78,7 @@
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
|
||||
<AssetGrid
|
||||
{assetStore}
|
||||
{assetInteractionStore}
|
||||
@ -88,7 +86,7 @@
|
||||
on:escape={handleEscape}
|
||||
withStacked
|
||||
>
|
||||
{#if data.user.memoriesEnabled}
|
||||
{#if $user.memoriesEnabled}
|
||||
<MemoryLane />
|
||||
{/if}
|
||||
<EmptyPlaceholder
|
||||
|
@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Photos',
|
||||
},
|
||||
|
@ -142,7 +142,7 @@
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
|
||||
{#each albums as album (album.id)}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
|
||||
<AlbumCard {album} user={data.user} isSharingView={false} showItemCount={false} showContextMenu={false} />
|
||||
<AlbumCard {album} isSharingView={false} showItemCount={false} showContextMenu={false} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
@ -3,13 +3,12 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async (data) => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
const url = new URL(data.url.href);
|
||||
const term = url.searchParams.get('q') || url.searchParams.get('query') || undefined;
|
||||
const { data: results } = await api.searchApi.search({}, { params: url.searchParams });
|
||||
|
||||
return {
|
||||
user,
|
||||
term,
|
||||
results,
|
||||
meta: {
|
||||
|
@ -8,12 +8,12 @@
|
||||
import { api, SharedLinkType } from '@api';
|
||||
import type { PageData } from './$types';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let data: PageData;
|
||||
let { sharedLink, passwordRequired, sharedLinkKey: key } = data;
|
||||
let { title, description } = data.meta;
|
||||
|
||||
let isOwned = data.user ? data.user.id === sharedLink?.userId : false;
|
||||
let isOwned = $user ? $user.id === sharedLink?.userId : false;
|
||||
let password = '';
|
||||
|
||||
const handlePasswordSubmit = async () => {
|
||||
@ -21,7 +21,7 @@
|
||||
const result = await api.sharedLinkApi.getMySharedLink({ password, key });
|
||||
passwordRequired = false;
|
||||
sharedLink = result.data;
|
||||
isOwned = data.user ? data.user.id === sharedLink.userId : false;
|
||||
isOwned = $user ? $user.id === sharedLink.userId : false;
|
||||
title = (sharedLink.album ? sharedLink.album.albumName : 'Public Share') + ' - Immich';
|
||||
description = sharedLink.description || `${sharedLink.assets.length} shared photos & videos.`;
|
||||
} catch (error) {
|
||||
|
@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ params }) => {
|
||||
const { key } = params;
|
||||
const user = await getAuthUser();
|
||||
await getAuthUser();
|
||||
|
||||
try {
|
||||
const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
|
||||
@ -15,7 +15,6 @@ export const load = (async ({ params }) => {
|
||||
const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
|
||||
|
||||
return {
|
||||
user,
|
||||
sharedLink,
|
||||
meta: {
|
||||
title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
|
||||
|
@ -39,7 +39,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<UserPageLayout title={data.meta.title}>
|
||||
<div class="flex" slot="buttons">
|
||||
<LinkButton on:click={createSharedAlbum}>
|
||||
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
|
||||
@ -96,7 +96,7 @@
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
|
||||
{#each data.sharedAlbums as album (album.id)}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
|
||||
<AlbumCard {album} user={data.user} isSharingView showContextMenu={false} />
|
||||
<AlbumCard {album} isSharingView showContextMenu={false} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
@ -3,12 +3,11 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
const { data: sharedAlbums } = await api.albumApi.getAllAlbums({ shared: true });
|
||||
const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-with' });
|
||||
|
||||
return {
|
||||
user,
|
||||
sharedAlbums,
|
||||
partners,
|
||||
meta: {
|
||||
|
@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Shared Links',
|
||||
},
|
||||
|
@ -71,7 +71,7 @@
|
||||
{/if}
|
||||
|
||||
{#if $featureFlags.loaded && $featureFlags.trash}
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
|
||||
<div class="flex place-items-center gap-2" slot="buttons">
|
||||
<LinkButton on:click={handleRestoreTrash}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
|
@ -2,9 +2,8 @@ import { authenticate } from '$lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Trash',
|
||||
},
|
||||
|
@ -6,10 +6,10 @@
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<UserPageLayout title={data.meta.title}>
|
||||
<section class="mx-4 flex place-content-center">
|
||||
<div class="w-full max-w-3xl">
|
||||
<UserSettingsList user={data.user} keys={data.keys} devices={data.devices} />
|
||||
<UserSettingsList keys={data.keys} devices={data.devices} />
|
||||
</div>
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
@ -3,13 +3,12 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
await authenticate();
|
||||
|
||||
const { data: keys } = await api.keyApi.getApiKeys();
|
||||
const { data: devices } = await api.authenticationApi.getAuthDevices();
|
||||
|
||||
return {
|
||||
user,
|
||||
keys,
|
||||
devices,
|
||||
meta: {
|
||||
|
@ -7,7 +7,6 @@
|
||||
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
|
||||
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
|
||||
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
|
||||
import type { LayoutData } from './$types';
|
||||
import { fileUploadHandler } from '$lib/utils/file-uploader';
|
||||
import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
|
||||
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
|
||||
@ -19,9 +18,9 @@
|
||||
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
|
||||
import { api } from '@api';
|
||||
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
let showNavigationLoadingBar = false;
|
||||
export let data: LayoutData;
|
||||
let albumId: string | undefined;
|
||||
|
||||
const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
|
||||
@ -122,7 +121,7 @@
|
||||
<UploadPanel />
|
||||
<NotificationList />
|
||||
|
||||
{#if data.user?.isAdmin}
|
||||
{#if $user?.isAdmin}
|
||||
<VersionAnnouncementBox />
|
||||
{/if}
|
||||
|
||||
|
@ -1,29 +1,10 @@
|
||||
import { api } from '@api';
|
||||
import type { LayoutLoad } from './$types';
|
||||
import { getSavedUser, setUser } from '$lib/stores/user.store';
|
||||
|
||||
const getUser = async () => {
|
||||
try {
|
||||
const { data: user } = await api.userApi.getMyUserInfo();
|
||||
return user;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const ssr = false;
|
||||
export const csr = true;
|
||||
|
||||
export const load = (async () => {
|
||||
const savedUser = getSavedUser();
|
||||
const user = savedUser || (await getUser());
|
||||
|
||||
if (!savedUser) {
|
||||
setUser(user);
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Immich',
|
||||
},
|
||||
|
@ -30,7 +30,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title} admin>
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<div class="flex justify-end" slot="buttons">
|
||||
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
|
||||
<LinkButton>
|
||||
|
@ -3,12 +3,11 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate({ admin: true });
|
||||
await authenticate({ admin: true });
|
||||
|
||||
const { data: jobs } = await api.jobApi.getAllJobsStatus();
|
||||
|
||||
return {
|
||||
user,
|
||||
jobs,
|
||||
meta: {
|
||||
title: 'Job Status',
|
||||
|
@ -170,7 +170,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title} admin>
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<svelte:fragment slot="sidebar" />
|
||||
<div class="flex justify-end gap-2" slot="buttons">
|
||||
<LinkButton on:click={() => handleRepair()} disabled={matches.length === 0 || repairing}>
|
||||
|
@ -3,13 +3,12 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate({ admin: true });
|
||||
await authenticate({ admin: true });
|
||||
const {
|
||||
data: { orphans, extras },
|
||||
} = await api.auditApi.getAuditFiles();
|
||||
|
||||
return {
|
||||
user,
|
||||
orphans,
|
||||
extras,
|
||||
meta: {
|
||||
|
@ -21,7 +21,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title} admin>
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
||||
<section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
|
||||
<ServerStatsPanel stats={data.stats} />
|
||||
|
@ -3,11 +3,10 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate({ admin: true });
|
||||
await authenticate({ admin: true });
|
||||
const { data: stats } = await api.serverInfoApi.getServerStatistics();
|
||||
|
||||
return {
|
||||
user,
|
||||
stats,
|
||||
meta: {
|
||||
title: 'Server Stats',
|
||||
|
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title} admin>
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<div class="flex justify-end gap-2" slot="buttons">
|
||||
<LinkButton on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
@ -95,11 +95,7 @@
|
||||
subtitle="Manage the folder structure and file name of the upload asset"
|
||||
isOpen={$page.url.searchParams.get('open') === 'storage-template'}
|
||||
>
|
||||
<StorageTemplateSettings
|
||||
disabled={$featureFlags.configFile}
|
||||
storageConfig={configs.storageTemplate}
|
||||
user={data.user}
|
||||
/>
|
||||
<StorageTemplateSettings disabled={$featureFlags.configFile} storageConfig={configs.storageTemplate} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Theme Settings" subtitle="Manage customization of the Immich web interface">
|
||||
|
@ -3,11 +3,10 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate({ admin: true });
|
||||
await authenticate({ admin: true });
|
||||
const { data: configs } = await api.systemConfigApi.getConfig();
|
||||
|
||||
return {
|
||||
user,
|
||||
configs,
|
||||
meta: {
|
||||
title: 'System Settings',
|
||||
|
@ -13,6 +13,7 @@
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { mdiCheck, mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@ -104,7 +105,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title} admin>
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
||||
<section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
|
||||
{#if shouldShowCreateUserForm}
|
||||
@ -117,7 +118,7 @@
|
||||
<FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
|
||||
<EditUserForm
|
||||
user={selectedUser}
|
||||
canResetPassword={selectedUser?.id !== data.user.id}
|
||||
canResetPassword={selectedUser?.id !== $user.id}
|
||||
on:edit-success={onEditUserSuccess}
|
||||
on:reset-password-success={onEditPasswordSuccess}
|
||||
/>
|
||||
@ -175,21 +176,21 @@
|
||||
</thead>
|
||||
<tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
|
||||
{#if allUsers}
|
||||
{#each allUsers as user, i}
|
||||
{#each allUsers as immichUser, i}
|
||||
<tr
|
||||
class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
|
||||
isDeleted(user)
|
||||
isDeleted(immichUser)
|
||||
? 'bg-red-300 dark:bg-red-900'
|
||||
: i % 2 == 0
|
||||
? 'bg-immich-gray dark:bg-immich-dark-gray/75'
|
||||
: 'bg-immich-bg dark:bg-immich-dark-gray/50'
|
||||
}`}
|
||||
>
|
||||
<td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td>
|
||||
<td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
|
||||
<td class="w-4/12 text-ellipsis break-all px-2 text-sm">{immichUser.email}</td>
|
||||
<td class="w-2/12 text-ellipsis break-all px-2 text-sm">{immichUser.name}</td>
|
||||
<td class="w-2/12 text-ellipsis break-all px-2 text-sm">
|
||||
<div class="container mx-auto flex flex-wrap justify-center">
|
||||
{#if user.externalPath}
|
||||
{#if immichUser.externalPath}
|
||||
<Icon path={mdiCheck} size="16" />
|
||||
{:else}
|
||||
<Icon path={mdiClose} size="16" />
|
||||
@ -197,27 +198,27 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-2/12 text-ellipsis break-all px-4 text-sm">
|
||||
{#if !isDeleted(user)}
|
||||
{#if !isDeleted(immichUser)}
|
||||
<button
|
||||
on:click={() => editUserHandler(user)}
|
||||
on:click={() => editUserHandler(immichUser)}
|
||||
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
|
||||
>
|
||||
<Icon path={mdiPencilOutline} size="16" />
|
||||
</button>
|
||||
{#if user.id !== data.user.id}
|
||||
{#if immichUser.id !== $user.id}
|
||||
<button
|
||||
on:click={() => deleteUserHandler(user)}
|
||||
on:click={() => deleteUserHandler(immichUser)}
|
||||
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
|
||||
>
|
||||
<Icon path={mdiTrashCanOutline} size="16" />
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if isDeleted(user)}
|
||||
{#if isDeleted(immichUser)}
|
||||
<button
|
||||
on:click={() => restoreUserHandler(user)}
|
||||
on:click={() => restoreUserHandler(immichUser)}
|
||||
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
|
||||
title={`scheduled removal on ${getDeleteDate(user)}`}
|
||||
title={`scheduled removal on ${getDeleteDate(immichUser)}`}
|
||||
>
|
||||
<Icon path={mdiDeleteRestore} size="16" />
|
||||
</button>
|
||||
|
@ -3,11 +3,10 @@ import { api } from '@api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate({ admin: true });
|
||||
await authenticate({ admin: true });
|
||||
const { data: allUsers } = await api.userApi.getAllUsers({ isAll: false });
|
||||
|
||||
return {
|
||||
user,
|
||||
allUsers,
|
||||
meta: {
|
||||
title: 'User Management',
|
||||
|
@ -3,6 +3,7 @@
|
||||
import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
|
||||
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
@ -16,12 +17,12 @@
|
||||
|
||||
<FullscreenContainer title={data.meta.title}>
|
||||
<p slot="message">
|
||||
Hi {data.user.name} ({data.user.email}),
|
||||
Hi {$user.name} ({$user.email}),
|
||||
<br />
|
||||
<br />
|
||||
This is either the first time you are signing into the system or a request has been made to change your password. Please
|
||||
enter the new password below.
|
||||
</p>
|
||||
|
||||
<ChangePasswordForm user={data.user} on:success={onSuccessHandler} />
|
||||
<ChangePasswordForm user={$user} on:success={onSuccessHandler} />
|
||||
</FullscreenContainer>
|
||||
|
@ -2,15 +2,15 @@ import { AppRoute } from '$lib/constants';
|
||||
import { authenticate } from '$lib/utils/auth';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageLoad } from './$types';
|
||||
import { getSavedUser } from '$lib/stores/user.store';
|
||||
|
||||
export const load = (async () => {
|
||||
const user = await authenticate();
|
||||
if (!user.shouldChangePassword) {
|
||||
await authenticate();
|
||||
if (!getSavedUser().shouldChangePassword) {
|
||||
throw redirect(302, AppRoute.PHOTOS);
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Change Password',
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user