feat(web): granular api access controls

open-api/immich-openapi-specs.json

@@ -8230,10 +8230,18 @@
         "properties": {
           "name": {
             "type": "string"
+          },
+          "permissions": {
+            "items": {
+              "$ref": "#/components/schemas/Permission"
+            },
+            "minItems": 1,
+            "type": "array"
           }
         },
         "required": [
-          "name"
+          "name",
+          "permissions"
         ],
         "type": "object"
       },

open-api/typescript-sdk/src/fetch-client.ts

@@ -408,6 +408,7 @@ export type ApiKeyCreateResponseDto = {
 };
 export type ApiKeyUpdateDto = {
     name: string;
+    permissions: Permission[];
 };
 export type AssetBulkDeleteDto = {
     force?: boolean;

server/src/dtos/api-key.dto.ts

@@ -18,6 +18,11 @@ export class APIKeyUpdateDto {
   @IsString()
   @IsNotEmpty()
   name!: string;
+
+  @IsEnum(Permission, { each: true })
+  @ApiProperty({ enum: Permission, enumName: 'Permission', isArray: true })
+  @ArrayMinSize(1)
+  permissions!: Permission[];
 }
 
 export class APIKeyCreateResponseDto {

server/src/services/api-key.service.ts

@@ -32,7 +32,7 @@ export class ApiKeyService extends BaseService {
       throw new BadRequestException('API Key not found');
     }
 
-    const key = await this.apiKeyRepository.update(auth.user.id, id, { name: dto.name });
+    const key = await this.apiKeyRepository.update(auth.user.id, id, { name: dto.name, permissions: dto.permissions });
 
     return this.map(key);
   }

web/src/lib/components/user-settings-page/user-api-key-grid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Checkbox from '../elements/checkbox.svelte';
   import { Permission } from '@immich/sdk';
+  import { Checkbox, Label } from '@immich/ui';
 
   interface Props {
     title: string;
@@ -12,44 +12,46 @@
 
   let { title, subItems, selectedItems, handleSelectItems, handleDeselectItems }: Props = $props();
 
-  let selectAllItems = $state(false);
+  let selectAllSubItems = $derived(subItems.filter((item) => selectedItems.includes(item)).length === subItems.length);
 
-  const handleSelectAll = () => {
-    if (selectAllItems) {
-      handleSelectItems(subItems);
-    } else {
+  const handleSelectAllSubItems = () => {
+    if (selectAllSubItems) {
       handleDeselectItems(subItems);
+    } else {
+      handleSelectItems(subItems);
     }
   };
 
   const handleToggleItem = (permission: Permission) => {
-    if (!selectedItems.includes(permission)) {
-      handleSelectItems([permission]);
-    } else {
+    if (selectedItems.includes(permission)) {
       handleDeselectItems([permission]);
+    } else {
+      handleSelectItems([permission]);
     }
   };
 </script>
 
 <div class="m-4 flex flex-col gap-2">
-  <Checkbox
-    id={title}
-    label={title}
-    labelClass="text-sm dark:text-immich-dark-fg"
-    bind:checked={selectAllItems}
-    onchange={handleSelectAll}
-  />
+  <div class="flex items-center gap-2">
+    <Checkbox
+      id="permission-{title}"
+      size="tiny"
+      checked={selectAllSubItems}
+      onCheckedChange={handleSelectAllSubItems}
+    />
+    <Label label={title} for={title} />
+  </div>
   <div class="ml-4 flex flex-wrap gap-x-5 gap-y-2">
     {#each subItems as item (item)}
-      <Checkbox
-        id={item}
-        label={item}
-        labelClass="text-sm dark:text-immich-dark-fg"
-        checked={selectedItems.includes(item) || selectedItems.includes(Permission.All)}
-        onchange={() => {
-          handleToggleItem(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} />
+      </div>
     {/each}
   </div>
 </div>

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

@@ -26,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'),
     });
 
@@ -62,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,

web/src/lib/modals/ApiKeyModal.svelte

@@ -4,13 +4,14 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
   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;
@@ -19,7 +20,8 @@
 
   let { apiKey = $bindable(), title, cancelText = $t('cancel'), submitText = $t('save'), onClose }: Props = $props();
 
-  let selectedItems: Permission[] = $state([]);
+  let selectedItems: Permission[] = $state(apiKey.permissions);
+  let selectAllItems = $derived(selectedItems.length === Object.keys(Permission).length - 1);
 
   const permissions: Map<string, Permission[]> = new Map();
 
@@ -151,6 +153,14 @@
     selectedItems = selectedItems.filter((item) => !permissions.includes(item));
   };
 
+  const handleSelectAllItems = () => {
+    if (selectAllItems) {
+      selectedItems = [];
+    } else {
+      selectedItems = Object.values(Permission).filter((item) => item !== Permission.All);
+    }
+  };
+
   const handleSubmit = () => {
     if (!apiKey.name) {
       notificationController.show({
@@ -163,7 +173,11 @@
         type: NotificationType.Warning,
       });
     } else {
-      onClose({ name: apiKey.name, permissions: selectedItems });
+      if (selectAllItems) {
+        onClose({ name: apiKey.name, permissions: [Permission.All] });
+      } else {
+        onClose({ name: apiKey.name, permissions: selectedItems });
+      }
     }
   };
 
@@ -171,6 +185,12 @@
     event.preventDefault();
     handleSubmit();
   };
+
+  onMount(() => {
+    if (apiKey.permissions.includes(Permission.All)) {
+      handleSelectAllItems();
+    }
+  });
 </script>
 
 <Modal {title} icon={mdiKeyVariant} {onClose} size="large">
@@ -180,7 +200,17 @@
         <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>
+      <div class="flex items-center gap-2 m-4">
+        <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)}
+        <hr />
         <ApiKeyGrid {title} {subItems} {selectedItems} {handleSelectItems} {handleDeselectItems} />
       {/each}
     </form>