mirror of https://github.com/immich-app/immich.git
Jason Rasmussen
GitHub
parent
eb8dfa283e
commit
3066c8198c
@ -1,18 +1,5 @@
|
|||||||
import { authenticate, requestServerInfo } from '$lib/utils/auth';
|
import { AppRoute } from '$lib/constants';
|
||||||
import { getFormatter } from '$lib/utils/i18n';
|
import { redirect } from '@sveltejs/kit';
|
||||||
import { searchUsersAdmin } from '@immich/sdk';
|
|
||||||
import type { PageLoad } from './$types';
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
export const load = (async () => {
|
export const load = (() => redirect(307, AppRoute.ADMIN_USERS)) satisfies PageLoad;
|
||||||
await authenticate({ admin: true });
|
|
||||||
await requestServerInfo();
|
|
||||||
const allUsers = await searchUsersAdmin({ withDeleted: true });
|
|
||||||
const $t = await getFormatter();
|
|
||||||
|
|
||||||
return {
|
|
||||||
allUsers,
|
|
||||||
meta: {
|
|
||||||
title: $t('admin.user_management'),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}) satisfies PageLoad;
|
|
||||||
|
|||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { authenticate, requestServerInfo } from '$lib/utils/auth';
|
||||||
|
import { getFormatter } from '$lib/utils/i18n';
|
||||||
|
import { searchUsersAdmin } from '@immich/sdk';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load = (async () => {
|
||||||
|
await authenticate({ admin: true });
|
||||||
|
await requestServerInfo();
|
||||||
|
const allUsers = await searchUsersAdmin({ withDeleted: true });
|
||||||
|
const $t = await getFormatter();
|
||||||
|
|
||||||
|
return {
|
||||||
|
allUsers,
|
||||||
|
meta: {
|
||||||
|
title: $t('admin.user_management'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) satisfies PageLoad;
|
||||||
@ -0,0 +1,343 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import StatsCard from '$lib/components/admin-page/server-stats/stats-card.svelte';
|
||||||
|
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||||
|
import {
|
||||||
|
notificationController,
|
||||||
|
NotificationType,
|
||||||
|
} from '$lib/components/shared-components/notification/notification';
|
||||||
|
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
|
||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
|
||||||
|
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||||
|
import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
|
||||||
|
import UserEditModal from '$lib/modals/UserEditModal.svelte';
|
||||||
|
import { locale } from '$lib/stores/preferences.store';
|
||||||
|
import { user as authUser } from '$lib/stores/user.store';
|
||||||
|
import { getBytesWithUnit } from '$lib/utils/byte-units';
|
||||||
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
|
import { updateUserAdmin } from '@immich/sdk';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
Code,
|
||||||
|
Container,
|
||||||
|
Field,
|
||||||
|
getByteUnitString,
|
||||||
|
Heading,
|
||||||
|
HStack,
|
||||||
|
Icon,
|
||||||
|
Stack,
|
||||||
|
Switch,
|
||||||
|
Text,
|
||||||
|
} from '@immich/ui';
|
||||||
|
import {
|
||||||
|
mdiAccountOutline,
|
||||||
|
mdiCameraIris,
|
||||||
|
mdiChartPie,
|
||||||
|
mdiChartPieOutline,
|
||||||
|
mdiCheckCircle,
|
||||||
|
mdiFeatureSearchOutline,
|
||||||
|
mdiLockSmart,
|
||||||
|
mdiOnepassword,
|
||||||
|
mdiPencilOutline,
|
||||||
|
mdiPlayCircle,
|
||||||
|
mdiTrashCanOutline,
|
||||||
|
} from '@mdi/js';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: PageData;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { data }: Props = $props();
|
||||||
|
|
||||||
|
let user = $derived(data.user);
|
||||||
|
const userPreferences = $derived(data.userPreferences);
|
||||||
|
const userStatistics = $derived(data.userStatistics);
|
||||||
|
|
||||||
|
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));
|
||||||
|
let canResetPassword = $derived($authUser.id !== user.id);
|
||||||
|
let newPassword = $state<string>('');
|
||||||
|
|
||||||
|
const handleEdit = async () => {
|
||||||
|
const result = await modalManager.show(UserEditModal, { user: { ...user } });
|
||||||
|
if (result) {
|
||||||
|
user = result;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
const result = await modalManager.show(UserDeleteConfirmModal, { user });
|
||||||
|
if (result) {
|
||||||
|
await goto(AppRoute.ADMIN_USERS);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUsageClass = () => {
|
||||||
|
if (usedPercentage >= 95) {
|
||||||
|
return 'bg-red-500';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (usedPercentage > 80) {
|
||||||
|
return 'bg-yellow-500';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'bg-immich-primary dark:bg-immich-dark-primary';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResetPassword = async () => {
|
||||||
|
const isConfirmed = await modalManager.openDialog({
|
||||||
|
prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isConfirmed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
newPassword = generatePassword();
|
||||||
|
|
||||||
|
await updateUserAdmin({
|
||||||
|
id: user.id,
|
||||||
|
userAdminUpdateDto: {
|
||||||
|
password: newPassword,
|
||||||
|
shouldChangePassword: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await modalManager.show(PasswordResetSuccess, { newPassword });
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('errors.unable_to_reset_password'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResetUserPinCode = async () => {
|
||||||
|
const isConfirmed = await modalManager.openDialog({
|
||||||
|
prompt: $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isConfirmed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
|
||||||
|
|
||||||
|
notificationController.show({ type: NotificationType.Info, message: $t('pin_code_reset_successfully') });
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('errors.unable_to_reset_pin_code'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO move password reset server-side
|
||||||
|
function generatePassword(length: number = 16) {
|
||||||
|
let generatedPassword = '';
|
||||||
|
|
||||||
|
const characterSet = '0123456789' + 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + ',.-{}+!#$%/()=?';
|
||||||
|
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
|
||||||
|
randomNumber = randomNumber / 2 ** 32;
|
||||||
|
randomNumber = Math.floor(randomNumber * characterSet.length);
|
||||||
|
|
||||||
|
generatedPassword += characterSet[randomNumber];
|
||||||
|
}
|
||||||
|
|
||||||
|
return generatedPassword;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<UserPageLayout title={data.meta.title} admin>
|
||||||
|
{#snippet buttons()}
|
||||||
|
<HStack gap={0}>
|
||||||
|
{#if canResetPassword}
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="small"
|
||||||
|
variant="ghost"
|
||||||
|
leadingIcon={mdiOnepassword}
|
||||||
|
onclick={handleResetPassword}
|
||||||
|
>
|
||||||
|
<Text class="hidden md:block">{$t('reset_password')}</Text>
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="small"
|
||||||
|
variant="ghost"
|
||||||
|
leadingIcon={mdiLockSmart}
|
||||||
|
onclick={handleResetUserPinCode}
|
||||||
|
>
|
||||||
|
<Text class="hidden md:block">{$t('reset_pin_code')}</Text>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="small"
|
||||||
|
variant="ghost"
|
||||||
|
leadingIcon={mdiPencilOutline}
|
||||||
|
onclick={() => handleEdit()}
|
||||||
|
>
|
||||||
|
<Text class="hidden md:block">{$t('edit_user')}</Text>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="danger"
|
||||||
|
size="small"
|
||||||
|
variant="ghost"
|
||||||
|
leadingIcon={mdiTrashCanOutline}
|
||||||
|
onclick={() => handleDelete()}
|
||||||
|
>
|
||||||
|
<Text class="hidden md:block">{$t('delete_user')}</Text>
|
||||||
|
</Button>
|
||||||
|
</HStack>
|
||||||
|
{/snippet}
|
||||||
|
<div>
|
||||||
|
<Container size="large" center>
|
||||||
|
<div class="grid gap-4 grod-cols-1 lg:grid-cols-2 w-full">
|
||||||
|
<div class="col-span-full flex gap-4 items-center my-4">
|
||||||
|
<UserAvatar {user} size="md" />
|
||||||
|
<Heading tag="h1" size="large">{user.name}</Heading>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-full">
|
||||||
|
<div class="flex flex-col lg:flex-row gap-4 w-full">
|
||||||
|
<StatsCard icon={mdiCameraIris} title={$t('photos').toUpperCase()} value={userStatistics.images} />
|
||||||
|
<StatsCard icon={mdiPlayCircle} title={$t('videos').toUpperCase()} value={userStatistics.videos} />
|
||||||
|
<StatsCard
|
||||||
|
icon={mdiChartPie}
|
||||||
|
title={$t('storage').toUpperCase()}
|
||||||
|
value={statsUsage}
|
||||||
|
unit={statsUsageUnit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Card color="secondary">
|
||||||
|
<CardHeader>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<Icon icon={mdiAccountOutline} size="1.5rem" />
|
||||||
|
<CardTitle>{$t('profile')}</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<Stack gap={2}>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('name')}</Heading>
|
||||||
|
<Text>{user.name}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('email')}</Heading>
|
||||||
|
<Text>{user.email}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
|
||||||
|
<Text>{user.createdAt}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
|
||||||
|
<Text>{user.updatedAt}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('id')}</Heading>
|
||||||
|
<Code>{user.id}</Code>
|
||||||
|
</div>
|
||||||
|
</Stack>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<Card color="secondary">
|
||||||
|
<CardHeader>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
|
||||||
|
<CardTitle>{$t('features')}</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<div>
|
||||||
|
<Stack gap={2}>
|
||||||
|
<Field readOnly label={$t('email_notifications')}>
|
||||||
|
<Switch checked={userPreferences.emailNotifications.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('folders')}>
|
||||||
|
<Switch checked={userPreferences.folders.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('memories')}>
|
||||||
|
<Switch checked={userPreferences.memories.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('people')}>
|
||||||
|
<Switch checked={userPreferences.people.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('rating')}>
|
||||||
|
<Switch checked={userPreferences.ratings.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('shared_links')}>
|
||||||
|
<Switch checked={userPreferences.sharedLinks.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('show_supporter_badge')}>
|
||||||
|
<Switch checked={userPreferences.purchase.showSupportBadge} color="primary" />
|
||||||
|
</Field>
|
||||||
|
<Field readOnly label={$t('tags')}>
|
||||||
|
<Switch checked={userPreferences.tags.enabled} color="primary" />
|
||||||
|
</Field>
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card color="secondary">
|
||||||
|
<CardHeader>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<Icon icon={mdiChartPieOutline} size="1.5rem" />
|
||||||
|
<CardTitle>{$t('storage_quota')}</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<div>
|
||||||
|
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
||||||
|
<Text>
|
||||||
|
{$t('storage_usage', {
|
||||||
|
values: {
|
||||||
|
used: getByteUnitString(usedBytes, $locale, 3),
|
||||||
|
available: getByteUnitString(availableBytes, $locale, 3),
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
</Text>
|
||||||
|
{:else}
|
||||||
|
<Text class="flex items-center gap-1">
|
||||||
|
<Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
|
||||||
|
{$t('unlimited')}
|
||||||
|
</Text>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
||||||
|
<div
|
||||||
|
class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
|
||||||
|
title={$t('storage_usage', {
|
||||||
|
values: {
|
||||||
|
used: getByteUnitString(usedBytes, $locale, 3),
|
||||||
|
available: getByteUnitString(availableBytes, $locale, 3),
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
|
||||||
|
<div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
|
||||||
|
<div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</UserPageLayout>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
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 { redirect } from '@sveltejs/kit';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load = (async ({ params }) => {
|
||||||
|
await authenticate({ admin: true });
|
||||||
|
await requestServerInfo();
|
||||||
|
const [user] = await searchUsersAdmin({ id: params.id }).catch(() => []);
|
||||||
|
if (!user) {
|
||||||
|
redirect(302, AppRoute.ADMIN_USERS);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [userPreferences, userStatistics] = await Promise.all([
|
||||||
|
getUserPreferencesAdmin({ id: user.id }),
|
||||||
|
getUserStatisticsAdmin({ id: user.id }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const $t = await getFormatter();
|
||||||
|
|
||||||
|
return {
|
||||||
|
user,
|
||||||
|
userPreferences,
|
||||||
|
userStatistics,
|
||||||
|
meta: {
|
||||||
|
title: $t('admin.user_details'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) satisfies PageLoad;
|
||||||
Loading…
Reference in New Issue