gitea-mirror/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 07:29:28 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: api key service (#24779)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-12-22 11:09:11 -05:00
committed by GitHub
parent c7510d572a
commit 40e750e8be
6 changed files with 186 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/lib/modals/ApiKeyCreateModal.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
import ApiKeyPermissionsPicker from '$lib/components/ApiKeyPermissionsPicker.svelte';
import { handleError } from '$lib/utils/handle-error';
import { createApiKey, Permission } from '@immich/sdk';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { handleCreateApiKey } 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';
type Props = { onClose: (secret?: string) => void };
type Props = { onClose: () => void };
const { onClose }: Props = $props();
@@ -14,47 +14,22 @@
let selectedPermissions = $state<Permission[]>([]);
const isAllPermissions = $derived(selectedPermissions.length === Object.keys(Permission).length - 1);
const onsubmit = async () => {
if (!name) {
toastManager.warning($t('api_key_empty'));
return;
}
if (selectedPermissions.length === 0) {
toastManager.warning($t('permission_empty'));
return;
}
try {
const { secret } = await createApiKey({
apiKeyCreateDto: {
name,
permissions: isAllPermissions ? [Permission.All] : selectedPermissions,
},
});
onClose(secret);
} catch (error) {
handleError(error, $t('errors.unable_to_create_api_key'));
const onSubmit = async () => {
const success = await handleCreateApiKey({
name,
permissions: isAllPermissions ? [Permission.All] : selectedPermissions,
});
if (success) {
onClose();
}
};
</script>
<Modal title={$t('new_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('create')}</Button>
</HStack>
</ModalFooter>
</Modal>
<FormModal title={$t('new_api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} submitText={$t('create')} size="giant">
<div class="mb-4 flex flex-col gap-2">
<Field label={$t('name')}>
<Input bind:value={name} />
</Field>
</div>
<ApiKeyPermissionsPicker bind:selectedPermissions />
</FormModal>

71
web/src/lib/modals/ApiKeyUpdateModal.svelte
View File

@@ -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>