mirror of https://github.com/immich-app/immich.git
refactor: api key service (#24779)
Jason Rasmussen
GitHub
parent
c7510d572a
commit
40e750e8be
@ -1,14 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { IconButton, type ActionItem } from '@immich/ui';
|
||||
import { IconButton, type ActionItem, type Size } from '@immich/ui';
|
||||
|
||||
type Props = {
|
||||
action: ActionItem;
|
||||
size?: Size;
|
||||
};
|
||||
|
||||
const { action }: Props = $props();
|
||||
const { action, size }: Props = $props();
|
||||
const { title, icon, onAction } = $derived(action);
|
||||
</script>
|
||||
|
||||
{#if action.$if?.() ?? true}
|
||||
<IconButton shape="round" color="primary" {icon} aria-label={title} onclick={() => onAction(action)} />
|
||||
<IconButton {size} shape="round" color="primary" {icon} aria-label={title} onclick={() => onAction(action)} />
|
||||
{/if}
|
||||
|
||||
@ -1,69 +1,44 @@
|
||||
<script lang="ts">
|
||||
import ApiKeyPermissionsPicker from '$lib/components/ApiKeyPermissionsPicker.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { Permission, updateApiKey } from '@immich/sdk';
|
||||
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
|
||||
import { handleUpdateApiKey } from '$lib/services/api-key.service';
|
||||
import { Permission } from '@immich/sdk';
|
||||
import { Field, FormModal, Input } from '@immich/ui';
|
||||
import { mdiKeyVariant } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
type Props = {
|
||||
apiKey: { id: string; name: string; permissions: Permission[] };
|
||||
onClose: (success?: true) => void;
|
||||
}
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
let { apiKey, onClose }: Props = $props();
|
||||
|
||||
const isAllPermissions = (permissions: Permission[]) => permissions.length === Object.keys(Permission).length - 1;
|
||||
|
||||
const mapPermissions = (permissions: Permission[]) =>
|
||||
permissions.includes(Permission.All)
|
||||
? Object.values(Permission).filter((permission) => permission !== Permission.All)
|
||||
: permissions;
|
||||
const isAllPermissions = (permissions: Permission[]) => permissions.length === Object.keys(Permission).length - 1;
|
||||
|
||||
let name = $state(apiKey.name);
|
||||
let selectedPermissions = $state<Permission[]>(mapPermissions(apiKey.permissions));
|
||||
|
||||
const onsubmit = async () => {
|
||||
if (!name) {
|
||||
toastManager.warning($t('api_key_empty'));
|
||||
return;
|
||||
}
|
||||
if (selectedPermissions.length === 0) {
|
||||
toastManager.warning($t('permission_empty'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await updateApiKey({
|
||||
id: apiKey.id,
|
||||
apiKeyUpdateDto: {
|
||||
name,
|
||||
permissions: isAllPermissions(selectedPermissions) ? [Permission.All] : selectedPermissions,
|
||||
},
|
||||
});
|
||||
toastManager.success($t('saved_api_key'));
|
||||
onClose(true);
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_save_api_key'));
|
||||
const onSubmit = async () => {
|
||||
const success = await handleUpdateApiKey(apiKey, {
|
||||
name,
|
||||
permissions: isAllPermissions(selectedPermissions) ? [Permission.All] : selectedPermissions,
|
||||
});
|
||||
if (success) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="giant">
|
||||
<ModalBody>
|
||||
<form {onsubmit} autocomplete="off" id="api-key-form">
|
||||
<div class="mb-4 flex flex-col gap-2">
|
||||
<Field label={$t('name')}>
|
||||
<Input bind:value={name} />
|
||||
</Field>
|
||||
</div>
|
||||
<ApiKeyPermissionsPicker bind:selectedPermissions />
|
||||
</form>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<HStack fullWidth>
|
||||
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
|
||||
<Button shape="round" type="submit" fullWidth form="api-key-form">{$t('save')}</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
<FormModal title={$t('api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} size="giant" submitText={$t('save')}>
|
||||
<div class="mb-4 flex flex-col gap-2">
|
||||
<Field label={$t('name')}>
|
||||
<Input bind:value={name} />
|
||||
</Field>
|
||||
</div>
|
||||
<ApiKeyPermissionsPicker bind:selectedPermissions />
|
||||
</FormModal>
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
import { eventManager } from '$lib/managers/event-manager.svelte';
|
||||
import ApiKeyCreateModal from '$lib/modals/ApiKeyCreateModal.svelte';
|
||||
import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
|
||||
import ApiKeyUpdateModal from '$lib/modals/ApiKeyUpdateModal.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import {
|
||||
createApiKey,
|
||||
deleteApiKey,
|
||||
updateApiKey,
|
||||
type ApiKeyCreateDto,
|
||||
type ApiKeyResponseDto,
|
||||
type ApiKeyUpdateDto,
|
||||
} from '@immich/sdk';
|
||||
import { modalManager, toastManager, type ActionItem } from '@immich/ui';
|
||||
import { mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
|
||||
import type { MessageFormatter } from 'svelte-i18n';
|
||||
|
||||
export const getApiKeysActions = ($t: MessageFormatter) => {
|
||||
const Create: ActionItem = {
|
||||
title: $t('new_api_key'),
|
||||
icon: mdiPlus,
|
||||
onAction: () => modalManager.show(ApiKeyCreateModal, {}),
|
||||
};
|
||||
|
||||
return { Create };
|
||||
};
|
||||
|
||||
export const getApiKeyActions = ($t: MessageFormatter, apiKey: ApiKeyResponseDto) => {
|
||||
const Update: ActionItem = {
|
||||
title: $t('edit_key'),
|
||||
icon: mdiPencilOutline,
|
||||
onAction: () => modalManager.show(ApiKeyUpdateModal, { apiKey }),
|
||||
};
|
||||
|
||||
const Delete: ActionItem = {
|
||||
title: $t('delete_key'),
|
||||
icon: mdiTrashCanOutline,
|
||||
onAction: () => handleDeleteApiKey(apiKey),
|
||||
};
|
||||
|
||||
return { Update, Delete };
|
||||
};
|
||||
|
||||
export const handleCreateApiKey = async (dto: ApiKeyCreateDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
try {
|
||||
if (!dto.name) {
|
||||
toastManager.warning($t('api_key_empty'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (dto.permissions.length === 0) {
|
||||
toastManager.warning($t('permission_empty'));
|
||||
return;
|
||||
}
|
||||
|
||||
const { apiKey, secret } = await createApiKey({ apiKeyCreateDto: dto });
|
||||
|
||||
eventManager.emit('ApiKeyCreate', apiKey);
|
||||
|
||||
// no nested modal
|
||||
void modalManager.show(ApiKeySecretModal, { secret });
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_create_api_key'));
|
||||
}
|
||||
};
|
||||
|
||||
export const handleUpdateApiKey = async (apiKey: { id: string }, dto: ApiKeyUpdateDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
if (!dto.name) {
|
||||
toastManager.warning($t('api_key_empty'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (dto.permissions && dto.permissions.length === 0) {
|
||||
toastManager.warning($t('permission_empty'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await updateApiKey({ id: apiKey.id, apiKeyUpdateDto: dto });
|
||||
eventManager.emit('ApiKeyUpdate', response);
|
||||
toastManager.success($t('saved_api_key'));
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_save_api_key'));
|
||||
}
|
||||
};
|
||||
|
||||
export const handleDeleteApiKey = async (apiKey: ApiKeyResponseDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
const confirmed = await modalManager.showDialog({ prompt: $t('delete_api_key_prompt') });
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteApiKey({ id: apiKey.id });
|
||||
eventManager.emit('ApiKeyDelete', apiKey);
|
||||
toastManager.success($t('removed_api_key', { values: { name: apiKey.name } }));
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_remove_api_key'));
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue