mirror of
https://github.com/immich-app/immich
synced 2025-10-17 18:19:27 +00:00
feat(web): granular api access controls (#18179)
* 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
GitHub
parent
f0d881b4f8
commit
b054e9dc2c
12 changed files with 311 additions and 37 deletions
|
|
@ -3,28 +3,177 @@
|
|||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||
import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
|
||||
import { Permission } from '@immich/sdk';
|
||||
import { Button, Checkbox, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||
import { mdiKeyVariant } from '@mdi/js';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
apiKey: { name: string };
|
||||
apiKey: { name: string; permissions: Permission[] };
|
||||
title: string;
|
||||
cancelText?: string;
|
||||
submitText?: string;
|
||||
onClose: (apiKey?: { name: string }) => void;
|
||||
onClose: (apiKey?: { name: string; permissions: Permission[] }) => void;
|
||||
}
|
||||
|
||||
let { apiKey = $bindable(), title, cancelText = $t('cancel'), submitText = $t('save'), onClose }: Props = $props();
|
||||
|
||||
let selectedItems: Permission[] = $state(apiKey.permissions);
|
||||
let selectAllItems = $derived(selectedItems.length === Object.keys(Permission).length - 1);
|
||||
|
||||
const permissions: Map<string, Permission[]> = new Map();
|
||||
|
||||
permissions.set('activity', [
|
||||
Permission.ActivityCreate,
|
||||
Permission.ActivityRead,
|
||||
Permission.ActivityUpdate,
|
||||
Permission.ActivityDelete,
|
||||
Permission.ActivityStatistics,
|
||||
]);
|
||||
|
||||
permissions.set('api_key', [
|
||||
Permission.ApiKeyCreate,
|
||||
Permission.ApiKeyRead,
|
||||
Permission.ApiKeyUpdate,
|
||||
Permission.ApiKeyDelete,
|
||||
]);
|
||||
|
||||
permissions.set('asset', [
|
||||
Permission.AssetRead,
|
||||
Permission.AssetUpdate,
|
||||
Permission.AssetDelete,
|
||||
Permission.AssetShare,
|
||||
Permission.AssetView,
|
||||
Permission.AssetDownload,
|
||||
Permission.AssetUpload,
|
||||
]);
|
||||
|
||||
permissions.set('album', [
|
||||
Permission.AlbumCreate,
|
||||
Permission.AlbumRead,
|
||||
Permission.AlbumUpdate,
|
||||
Permission.AlbumDelete,
|
||||
Permission.AlbumStatistics,
|
||||
|
||||
Permission.AlbumAddAsset,
|
||||
Permission.AlbumRemoveAsset,
|
||||
Permission.AlbumShare,
|
||||
Permission.AlbumDownload,
|
||||
]);
|
||||
|
||||
permissions.set('auth_device', [Permission.AuthDeviceDelete]);
|
||||
|
||||
permissions.set('archive', [Permission.ArchiveRead]);
|
||||
|
||||
permissions.set('face', [Permission.FaceCreate, Permission.FaceRead, Permission.FaceUpdate, Permission.FaceDelete]);
|
||||
|
||||
permissions.set('library', [
|
||||
Permission.LibraryCreate,
|
||||
Permission.LibraryRead,
|
||||
Permission.LibraryUpdate,
|
||||
Permission.LibraryDelete,
|
||||
Permission.LibraryStatistics,
|
||||
]);
|
||||
|
||||
permissions.set('timeline', [Permission.TimelineRead, Permission.TimelineDownload]);
|
||||
|
||||
permissions.set('memory', [
|
||||
Permission.MemoryCreate,
|
||||
Permission.MemoryRead,
|
||||
Permission.MemoryUpdate,
|
||||
Permission.MemoryDelete,
|
||||
]);
|
||||
|
||||
permissions.set('notification', [
|
||||
Permission.NotificationCreate,
|
||||
Permission.NotificationRead,
|
||||
Permission.NotificationUpdate,
|
||||
Permission.NotificationDelete,
|
||||
]);
|
||||
|
||||
permissions.set('partner', [
|
||||
Permission.PartnerCreate,
|
||||
Permission.PartnerRead,
|
||||
Permission.PartnerUpdate,
|
||||
Permission.PartnerDelete,
|
||||
]);
|
||||
|
||||
permissions.set('person', [
|
||||
Permission.PersonCreate,
|
||||
Permission.PersonRead,
|
||||
Permission.PersonUpdate,
|
||||
Permission.PersonDelete,
|
||||
Permission.PersonStatistics,
|
||||
Permission.PersonMerge,
|
||||
Permission.PersonReassign,
|
||||
]);
|
||||
|
||||
permissions.set('session', [Permission.SessionRead, Permission.SessionUpdate, Permission.SessionDelete]);
|
||||
|
||||
permissions.set('sharedLink', [
|
||||
Permission.SharedLinkCreate,
|
||||
Permission.SharedLinkRead,
|
||||
Permission.SharedLinkUpdate,
|
||||
Permission.SharedLinkDelete,
|
||||
]);
|
||||
|
||||
permissions.set('stack', [
|
||||
Permission.StackCreate,
|
||||
Permission.StackRead,
|
||||
Permission.StackUpdate,
|
||||
Permission.StackDelete,
|
||||
]);
|
||||
|
||||
permissions.set('systemConfig', [Permission.SystemConfigRead, Permission.SystemConfigUpdate]);
|
||||
|
||||
permissions.set('systemMetadata', [Permission.SystemMetadataRead, Permission.SystemMetadataUpdate]);
|
||||
|
||||
permissions.set('tag', [
|
||||
Permission.TagCreate,
|
||||
Permission.TagRead,
|
||||
Permission.TagUpdate,
|
||||
Permission.TagDelete,
|
||||
Permission.TagAsset,
|
||||
]);
|
||||
|
||||
permissions.set('adminUser', [
|
||||
Permission.AdminUserCreate,
|
||||
Permission.AdminUserRead,
|
||||
Permission.AdminUserUpdate,
|
||||
Permission.AdminUserDelete,
|
||||
]);
|
||||
|
||||
const handleSelectItems = (permissions: Permission[]) => {
|
||||
selectedItems = Array.from(new Set([...selectedItems, ...permissions]));
|
||||
};
|
||||
|
||||
const handleDeselectItems = (permissions: Permission[]) => {
|
||||
selectedItems = selectedItems.filter((item) => !permissions.includes(item));
|
||||
};
|
||||
|
||||
const handleSelectAllItems = () => {
|
||||
selectedItems = selectAllItems ? [] : Object.values(Permission).filter((item) => item !== Permission.All);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (apiKey.name) {
|
||||
onClose({ name: apiKey.name });
|
||||
} else {
|
||||
if (!apiKey.name) {
|
||||
notificationController.show({
|
||||
message: $t('api_key_empty'),
|
||||
type: NotificationType.Warning,
|
||||
});
|
||||
} else if (selectedItems.length === 0) {
|
||||
notificationController.show({
|
||||
message: $t('permission_empty'),
|
||||
type: NotificationType.Warning,
|
||||
});
|
||||
} else {
|
||||
if (selectAllItems) {
|
||||
onClose({ name: apiKey.name, permissions: [Permission.All] });
|
||||
} else {
|
||||
onClose({ name: apiKey.name, permissions: selectedItems });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -32,15 +181,34 @@
|
|||
event.preventDefault();
|
||||
handleSubmit();
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
if (apiKey.permissions.includes(Permission.All)) {
|
||||
handleSelectAllItems();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal {title} icon={mdiKeyVariant} {onClose} size="small">
|
||||
<Modal {title} icon={mdiKeyVariant} {onClose} size="giant">
|
||||
<ModalBody>
|
||||
<form {onsubmit} autocomplete="off" id="api-key-form">
|
||||
<div class="mb-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">{$t('name')}</label>
|
||||
<input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
|
||||
</div>
|
||||
<label class="immich-form-label" for="permission">{$t('permission')}</label>
|
||||
<div class="flex items-center gap-2 m-4" id="permission">
|
||||
<Checkbox
|
||||
id="select-all-permissions"
|
||||
size="tiny"
|
||||
checked={selectAllItems}
|
||||
onCheckedChange={handleSelectAllItems}
|
||||
/>
|
||||
<Label label={$t('select_all')} for="select-all-permissions" />
|
||||
</div>
|
||||
{#each permissions as [title, subItems] (title)}
|
||||
<ApiKeyGrid {title} {subItems} {selectedItems} {handleSelectItems} {handleDeselectItems} />
|
||||
{/each}
|
||||
</form>
|
||||
</ModalBody>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue