immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-21 09:15:44 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat: view the user's app version on the user page (#21345)

Browse Source 
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
This commit is contained in:
aviv926
2025-10-22 01:36:18 +03:00
committed by GitHub
parent c3a533ab40
commit 032de9ff2f
27 changed files with 301 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/lib/components/user-settings-page/device-card.svelte
View File

@@ -18,11 +18,11 @@
import { t } from 'svelte-i18n';
interface Props {
device: SessionResponseDto;
session: SessionResponseDto;
onDelete?: (() => void) | undefined;
}
let { device, onDelete = undefined }: Props = $props();
const { session, onDelete = undefined }: Props = $props();
const options: ToRelativeCalendarOptions = {
unit: 'days',
@@ -32,21 +32,21 @@
<div class="flex w-full flex-row">
<div class="hidden items-center justify-center pe-2 text-primary sm:flex">
{#if device.deviceOS === 'Android'}
{#if session.deviceOS === 'Android'}
<Icon icon={mdiAndroid} size="40" />
{:else if device.deviceOS === 'iOS' || device.deviceOS === 'macOS'}
{:else if session.deviceOS === 'iOS' || session.deviceOS === 'macOS'}
<Icon icon={mdiApple} size="40" />
{:else if device.deviceOS.includes('Safari')}
{:else if session.deviceOS.includes('Safari')}
<Icon icon={mdiAppleSafari} size="40" />
{:else if device.deviceOS.includes('Windows')}
{:else if session.deviceOS.includes('Windows')}
<Icon icon={mdiMicrosoftWindows} size="40" />
{:else if device.deviceOS === 'Linux'}
{:else if session.deviceOS === 'Linux'}
<Icon icon={mdiLinux} size="40" />
{:else if device.deviceOS === 'Ubuntu'}
{:else if session.deviceOS === 'Ubuntu'}
<Icon icon={mdiUbuntu} size="40" />
{:else if device.deviceOS === 'Chrome OS' || device.deviceType === 'Chrome' || device.deviceType === 'Chromium' || device.deviceType === 'Mobile Chrome'}
{:else if session.deviceOS === 'Chrome OS' || session.deviceType === 'Chrome' || session.deviceType === 'Chromium' || session.deviceType === 'Mobile Chrome'}
<Icon icon={mdiGoogleChrome} size="40" />
{:else if device.deviceOS === 'Google Cast'}
{:else if session.deviceOS === 'Google Cast'}
<Icon icon={mdiCast} size="40" />
{:else}
<Icon icon={mdiHelp} size="40" />
@@ -55,24 +55,28 @@
<div class="flex grow flex-row justify-between gap-1 ps-4 sm:ps-0">
<div class="flex flex-col justify-center gap-1 dark:text-white">
<span class="text-sm">
{#if device.deviceType || device.deviceOS}
<span>{device.deviceOS || $t('unknown')} • {device.deviceType || $t('unknown')}</span>
{#if session.deviceType || session.deviceOS}
<span
>{session.deviceOS || $t('unknown')} • {session.deviceType || $t('unknown')}{session.appVersion
? `(v${session.appVersion})`
: ''}</span
>
{:else}
<span>{$t('unknown')}</span>
{/if}
</span>
<div class="text-sm">
<span class="">{$t('last_seen')}</span>
<span>{DateTime.fromISO(device.updatedAt, { locale: $locale }).toRelativeCalendar(options)}</span>
<span>{DateTime.fromISO(session.updatedAt, { locale: $locale }).toRelativeCalendar(options)}</span>
<span class="text-xs text-gray-500 dark:text-gray-400"> - </span>
<span class="text-xs text-gray-500 dark:text-gray-400">
{DateTime.fromISO(device.updatedAt, { locale: $locale }).toLocaleString(DateTime.DATETIME_MED, {
{DateTime.fromISO(session.updatedAt, { locale: $locale }).toLocaleString(DateTime.DATETIME_MED, {
locale: $locale,
})}
</span>
</div>
</div>
{#if !device.current && onDelete}
{#if !session.current && onDelete}
<div>
<IconButton
color="danger"

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

@@ -14,8 +14,8 @@
const refresh = () => getSessions().then((_devices) => (devices = _devices));
let currentDevice = $derived(devices.find((device) => device.current));
let otherDevices = $derived(devices.filter((device) => !device.current));
let currentSession = $derived(devices.find((device) => device.current));
let otherSessions = $derived(devices.filter((device) => !device.current));
const handleDelete = async (device: SessionResponseDto) => {
const isConfirmed = await modalManager.showDialog({ prompt: $t('logout_this_device_confirmation') });
@@ -54,22 +54,22 @@
</script>
<section class="my-4">
{#if currentDevice}
{#if currentSession}
<div class="mb-6">
<h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('current_device')}
</h3>
<DeviceCard device={currentDevice} />
<DeviceCard session={currentSession} />
</div>
{/if}
{#if otherDevices.length > 0}
{#if otherSessions.length > 0}
<div class="mb-6">
<h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('other_devices')}
</h3>
{#each otherDevices as device, index (device.id)}
<DeviceCard {device} onDelete={() => handleDelete(device)} />
{#if index !== otherDevices.length - 1}
{#each otherSessions as session, index (session.id)}
<DeviceCard {session} onDelete={() => handleDelete(session)} />
{#if index !== otherSessions.length - 1}
<hr class="my-3" />
{/if}
{/each}

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

@@ -6,6 +6,7 @@
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
@@ -36,6 +37,7 @@
} from '@immich/ui';
import {
mdiAccountOutline,
mdiAppsBox,
mdiCameraIris,
mdiChartPie,
mdiChartPieOutline,
@@ -60,11 +62,10 @@
let user = $derived(data.user);
const userPreferences = $derived(data.userPreferences);
const userStatistics = $derived(data.userStatistics);
const userSessions = $derived(data.userSessions);
const TiB = 1024 ** 4;
const usage = $derived(user.quotaUsageInBytes ?? 0);
let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usage, usage > TiB ? 2 : 0));
const usedBytes = $derived(user.quotaUsageInBytes ?? 0);
const availableBytes = $derived(user.quotaSizeInBytes ?? 1);
let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
@@ -350,6 +351,25 @@
{/if}
</CardBody>
</Card>
<Card color="secondary">
<CardHeader>
<div class="flex items-center gap-2 px-4 py-2 text-primary">
<Icon icon={mdiAppsBox} size="1.5rem" />
<CardTitle>Sessions</CardTitle>
</div>
</CardHeader>
<CardBody>
<div class="px-4 pb-7">
<Stack gap={3}>
{#each userSessions as session (session.id)}
<DeviceCard {session} />
{:else}
<span class="text-subtle">No mobile devices</span>
{/each}
</Stack>
</div>
</CardBody>
</Card>
</div>
</Container>
</div>

6
web/src/routes/admin/users/[id]/+page.ts
View File

@@ -1,7 +1,7 @@
import { AppRoute } from '$lib/constants';
import { authenticate, requestServerInfo } from '$lib/utils/auth';
import { getFormatter } from '$lib/utils/i18n';
import { getUserPreferencesAdmin, getUserStatisticsAdmin, searchUsersAdmin } from '@immich/sdk';
import { getUserPreferencesAdmin, getUserSessionsAdmin, getUserStatisticsAdmin, searchUsersAdmin } from '@immich/sdk';
import { redirect } from '@sveltejs/kit';
import type { PageLoad } from './$types';
@@ -13,9 +13,10 @@ export const load = (async ({ params, url }) => {
redirect(302, AppRoute.ADMIN_USERS);
}
const [userPreferences, userStatistics] = await Promise.all([
const [userPreferences, userStatistics, userSessions] = await Promise.all([
getUserPreferencesAdmin({ id: user.id }),
getUserStatisticsAdmin({ id: user.id }),
getUserSessionsAdmin({ id: user.id }),
]);
const $t = await getFormatter();
@@ -24,6 +25,7 @@ export const load = (async ({ params, url }) => {
user,
userPreferences,
userStatistics,
userSessions,
meta: {
title: $t('admin.user_details'),
},