feat(server): granular permissions for api keys (#11824)

feat(server): api auth permissions

web/src/lib/components/forms/api-key-form.svelte

@@ -1,25 +1,21 @@
 <script lang="ts">
-  import type { ApiKeyResponseDto } from '@immich/sdk';
   import { mdiKeyVariant } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { t } from 'svelte-i18n';
 
-  export let apiKey: Partial<ApiKeyResponseDto>;
+  export let apiKey: { name: string };
   export let title: string;
   export let cancelText = $t('cancel');
   export let submitText = $t('save');
 
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: Partial<ApiKeyResponseDto>;
-  }>();
-  const handleCancel = () => dispatch('cancel');
+  export let onSubmit: (apiKey: { name: string }) => void;
+  export let onCancel: () => void;
+
   const handleSubmit = () => {
     if (apiKey.name) {
-      dispatch('submit', apiKey);
+      onSubmit({ name: apiKey.name });
     } else {
       notificationController.show({
         message: $t('api_key_empty'),
@@ -29,7 +25,7 @@
   };
 </script>
 
-<FullScreenModal {title} icon={mdiKeyVariant} onClose={handleCancel}>
+<FullScreenModal {title} icon={mdiKeyVariant} onClose={() => onCancel()}>
   <form on:submit|preventDefault={handleSubmit} 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>
@@ -37,7 +33,7 @@
     </div>
   </form>
   <svelte:fragment slot="sticky-bottom">
-    <Button color="gray" fullwidth on:click={handleCancel}>{cancelText}</Button>
+    <Button color="gray" fullwidth on:click={() => onCancel()}>{cancelText}</Button>
     <Button type="submit" fullwidth form="api-key-form">{submitText}</Button>
   </svelte:fragment>
 </FullScreenModal>

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

@@ -1,6 +1,13 @@
 <script lang="ts">
   import { locale } from '$lib/stores/preferences.store';
-  import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
+  import {
+    createApiKey,
+    deleteApiKey,
+    getApiKeys,
+    Permission,
+    updateApiKey,
+    type ApiKeyResponseDto,
+  } from '@immich/sdk';
   import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
@@ -14,7 +21,7 @@
 
   export let keys: ApiKeyResponseDto[];
 
-  let newKey: Partial<ApiKeyResponseDto> | null = null;
+  let newKey: { name: string } | null = null;
   let editKey: ApiKeyResponseDto | null = null;
   let secret = '';
 
@@ -28,9 +35,14 @@
     keys = await getApiKeys();
   }
 
-  const handleCreate = async (detail: Partial<ApiKeyResponseDto>) => {
+  const handleCreate = async ({ name }: { name: string }) => {
     try {
-      const data = await createApiKey({ apiKeyCreateDto: detail });
+      const data = await createApiKey({
+        apiKeyCreateDto: {
+          name,
+          permissions: [Permission.All],
+        },
+      });
       secret = data.secret;
     } catch (error) {
       handleError(error, $t('errors.unable_to_create_api_key'));
@@ -84,8 +96,8 @@
     title={$t('new_api_key')}
     submitText={$t('create')}
     apiKey={newKey}
-    on:submit={({ detail }) => handleCreate(detail)}
-    on:cancel={() => (newKey = null)}
+    onSubmit={(key) => handleCreate(key)}
+    onCancel={() => (newKey = null)}
   />
 {/if}
 
@@ -98,8 +110,8 @@
     title={$t('api_key')}
     submitText={$t('save')}
     apiKey={editKey}
-    on:submit={({ detail }) => handleUpdate(detail)}
-    on:cancel={() => (editKey = null)}
+    onSubmit={(key) => handleUpdate(key)}
+    onCancel={() => (editKey = null)}
   />
 {/if}