helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): granular api access controls (#18179)

Browse source 
* feat: api access control

* feat(web): granular api access controls

* fix test

* fix e2e test

* fix: lint

* pr feedback

* merge main + new design

* finalize styling

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Daimolean 2025-05-29 02:16:43 +08:00 • committed by GitHub
parent f0d881b4f8
commit b054e9dc2c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 311 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web/src/lib/components/user-settings-page/user-api-key-grid.svelte Normal file
View file

@ -0,0 +1,57 @@
<script lang="ts">
import { Permission } from '@immich/sdk';
import { Checkbox, Label } from '@immich/ui';
interface Props {
title: string;
subItems: Permission[];
selectedItems: Permission[];
handleSelectItems: (permissions: Permission[]) => void;
handleDeselectItems: (permissions: Permission[]) => void;
}
let { title, subItems, selectedItems, handleSelectItems, handleDeselectItems }: Props = $props();
let selectAllSubItems = $derived(subItems.filter((item) => selectedItems.includes(item)).length === subItems.length);
const handleSelectAllSubItems = () => {
if (selectAllSubItems) {
handleDeselectItems(subItems);
} else {
handleSelectItems(subItems);
}
};
const handleToggleItem = (permission: Permission) => {
if (selectedItems.includes(permission)) {
handleDeselectItems([permission]);
} else {
handleSelectItems([permission]);
}
};
</script>
<div class="mx-4 my-2 border bg-subtle dark:bg-black/30 dark:border-black p-4 rounded-2xl">
<div class="flex items-center gap-2">
<Checkbox
id="permission-{title}"
size="tiny"
checked={selectAllSubItems}
onCheckedChange={handleSelectAllSubItems}
/>
<Label label={title} for={title} class="font-mono text-primary text-lg" />
</div>
<div class="mx-6 mt-3 grid grid-cols-3 gap-2">
{#each subItems as item (item)}
<div class="flex items-center gap-2">
<Checkbox
id="permission-{item}"
size="tiny"
checked={selectedItems.includes(item)}
onCheckedChange={() => handleToggleItem(item)}
/>
<Label label={item} for={item} class="text-sm font-mono" />
</div>
{/each}
</div>
</div>

34
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View file

@ -1,24 +1,17 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dateFormats } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
import { locale } from '$lib/stores/preferences.store';
import {
createApiKey,
deleteApiKey,
getApiKeys,
Permission,
updateApiKey,
type ApiKeyResponseDto,
} from '@immich/sdk';
import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
import { dateFormats } from '$lib/constants';
interface Props {
keys: ApiKeyResponseDto[];
@ -33,7 +26,7 @@
const handleCreate = async () => {
const result = await modalManager.show(ApiKeyModal, {
title: $t('new_api_key'),
apiKey: { name: 'API Key' },
apiKey: { name: 'API Key', permissions: [] },
submitText: $t('create'),
});
@ -45,7 +38,7 @@
const { secret } = await createApiKey({
apiKeyCreateDto: {
name: result.name,
permissions: [Permission.All],
permissions: result.permissions,
},
});
@ -69,7 +62,7 @@
}
try {
await updateApiKey({ id: key.id, apiKeyUpdateDto: { name: result.name } });
await updateApiKey({ id: key.id, apiKeyUpdateDto: { name: result.name, permissions: result.permissions } });
notificationController.show({
message: $t('saved_api_key'),
type: NotificationType.Info,
@ -113,9 +106,10 @@
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
>
<tr class="flex w-full place-items-center">
<th class="w-1/3 text-center text-sm font-medium">{$t('name')}</th>
<th class="w-1/3 text-center text-sm font-medium">{$t('created')}</th>
<th class="w-1/3 text-center text-sm font-medium">{$t('action')}</th>
<th class="w-1/4 text-center text-sm font-medium">{$t('name')}</th>
<th class="w-1/4 text-center text-sm font-medium">{$t('permission')}</th>
<th class="w-1/4 text-center text-sm font-medium">{$t('created')}</th>
<th class="w-1/4 text-center text-sm font-medium">{$t('action')}</th>
</tr>
</thead>
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
@ -123,11 +117,15 @@
<tr
class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="w-1/3 text-ellipsis px-4 text-sm">{key.name}</td>
<td class="w-1/3 text-ellipsis px-4 text-sm"
<td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden">{key.name}</td>
<td
class="w-1/4 text-ellipsis px-4 text-xs overflow-hidden line-clamp-3 break-all font-mono"
title={JSON.stringify(key.permissions, undefined, 2)}>{key.permissions}</td
>
<td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden"
>{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
</td>
<td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/3">
<td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/4">
<CircleIconButton
color="primary"
icon={mdiPencilOutline}