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>
2025-12-17 01:11:13 +03:00 · 2025-05-29 02:16:43 +08:00
parent f0d881b4f8
commit b054e9dc2c
12 changed files with 311 additions and 37 deletions
--- a/web/src/lib/components/user-settings-page/user-api-key-grid.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-grid.svelte
@@ -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>
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -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}
--- a/web/src/lib/modals/ApiKeyModal.svelte
+++ b/web/src/lib/modals/ApiKeyModal.svelte
@@ -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>