immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-19 09:13:14 +03:00
Code Issues Packages Projects Releases 17 Wiki Activity

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
12 changed files with 311 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}