feat(web,server): api keys (#1244)

* feat(server): api keys

* chore: open-api

* feat(web): api keys

* fix: remove keys when deleting a user

web/src/api/api.ts

@@ -1,6 +1,7 @@
 import { env } from '$env/dynamic/public';
 import {
 	AlbumApi,
+	APIKeyApi,
 	AssetApi,
 	AuthenticationApi,
 	Configuration,
@@ -21,6 +22,7 @@ class ImmichApi {
 	public deviceInfoApi: DeviceInfoApi;
 	public serverInfoApi: ServerInfoApi;
 	public jobApi: JobApi;
+	public keyApi: APIKeyApi;
 	public systemConfigApi: SystemConfigApi;
 
 	private config = new Configuration({ basePath: '/api' });
@@ -34,6 +36,7 @@ class ImmichApi {
 		this.deviceInfoApi = new DeviceInfoApi(this.config);
 		this.serverInfoApi = new ServerInfoApi(this.config);
 		this.jobApi = new JobApi(this.config);
+		this.keyApi = new APIKeyApi(this.config);
 		this.systemConfigApi = new SystemConfigApi(this.config);
 	}
 

web/src/api/open-api/api.ts

@@ -21,6 +21,82 @@ import { DUMMY_BASE_URL, assertParamExists, setApiKeyToObject, setBasicAuthToObj
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from './base';
 
+/**
+ * 
+ * @export
+ * @interface APIKeyCreateDto
+ */
+export interface APIKeyCreateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyCreateDto
+     */
+    'name'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface APIKeyCreateResponseDto
+ */
+export interface APIKeyCreateResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyCreateResponseDto
+     */
+    'secret': string;
+    /**
+     * 
+     * @type {APIKeyResponseDto}
+     * @memberof APIKeyCreateResponseDto
+     */
+    'apiKey': APIKeyResponseDto;
+}
+/**
+ * 
+ * @export
+ * @interface APIKeyResponseDto
+ */
+export interface APIKeyResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof APIKeyResponseDto
+     */
+    'id': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'name': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'createdAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'updatedAt': string;
+}
+/**
+ * 
+ * @export
+ * @interface APIKeyUpdateDto
+ */
+export interface APIKeyUpdateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyUpdateDto
+     */
+    'name': string;
+}
 /**
  * 
  * @export
@@ -1990,6 +2066,363 @@ export interface ValidateAccessTokenResponseDto {
     'authStatus': boolean;
 }
 
+/**
+ * APIKeyApi - axios parameter creator
+ * @export
+ */
+export const APIKeyApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {APIKeyCreateDto} aPIKeyCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createKey: async (aPIKeyCreateDto: APIKeyCreateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'aPIKeyCreateDto' is not null or undefined
+            assertParamExists('createKey', 'aPIKeyCreateDto', aPIKeyCreateDto)
+            const localVarPath = `/api-key`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(aPIKeyCreateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteKey: async (id: number, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('deleteKey', 'id', id)
+            const localVarPath = `/api-key/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKey: async (id: number, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getKey', 'id', id)
+            const localVarPath = `/api-key/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKeys: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api-key`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {APIKeyUpdateDto} aPIKeyUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateKey: async (id: number, aPIKeyUpdateDto: APIKeyUpdateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateKey', 'id', id)
+            // verify required parameter 'aPIKeyUpdateDto' is not null or undefined
+            assertParamExists('updateKey', 'aPIKeyUpdateDto', aPIKeyUpdateDto)
+            const localVarPath = `/api-key/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(aPIKeyUpdateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * APIKeyApi - functional programming interface
+ * @export
+ */
+export const APIKeyApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = APIKeyApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {APIKeyCreateDto} aPIKeyCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createKey(aPIKeyCreateDto: APIKeyCreateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<APIKeyCreateResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createKey(aPIKeyCreateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async deleteKey(id: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.deleteKey(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getKey(id: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<APIKeyResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getKey(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getKeys(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<APIKeyResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getKeys(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {APIKeyUpdateDto} aPIKeyUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateKey(id: number, aPIKeyUpdateDto: APIKeyUpdateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<APIKeyResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateKey(id, aPIKeyUpdateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * APIKeyApi - factory interface
+ * @export
+ */
+export const APIKeyApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = APIKeyApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {APIKeyCreateDto} aPIKeyCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createKey(aPIKeyCreateDto: APIKeyCreateDto, options?: any): AxiosPromise<APIKeyCreateResponseDto> {
+            return localVarFp.createKey(aPIKeyCreateDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteKey(id: number, options?: any): AxiosPromise<void> {
+            return localVarFp.deleteKey(id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKey(id: number, options?: any): AxiosPromise<APIKeyResponseDto> {
+            return localVarFp.getKey(id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKeys(options?: any): AxiosPromise<Array<APIKeyResponseDto>> {
+            return localVarFp.getKeys(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {number} id 
+         * @param {APIKeyUpdateDto} aPIKeyUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateKey(id: number, aPIKeyUpdateDto: APIKeyUpdateDto, options?: any): AxiosPromise<APIKeyResponseDto> {
+            return localVarFp.updateKey(id, aPIKeyUpdateDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * APIKeyApi - object-oriented interface
+ * @export
+ * @class APIKeyApi
+ * @extends {BaseAPI}
+ */
+export class APIKeyApi extends BaseAPI {
+    /**
+     * 
+     * @param {APIKeyCreateDto} aPIKeyCreateDto 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public createKey(aPIKeyCreateDto: APIKeyCreateDto, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).createKey(aPIKeyCreateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {number} id 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public deleteKey(id: number, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).deleteKey(id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {number} id 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public getKey(id: number, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).getKey(id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public getKeys(options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).getKeys(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {number} id 
+     * @param {APIKeyUpdateDto} aPIKeyUpdateDto 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public updateKey(id: number, aPIKeyUpdateDto: APIKeyUpdateDto, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).updateKey(id, aPIKeyUpdateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
 /**
  * AlbumApi - axios parameter creator
  * @export

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { APIKeyResponseDto } from '@api';
+	import { createEventDispatcher } from 'svelte';
+	import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
+	import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+
+	export let apiKey: Partial<APIKeyResponseDto>;
+	export let title = 'API Key';
+	export let cancelText = 'Cancel';
+	export let submitText = 'Save';
+
+	const dispatch = createEventDispatcher();
+	const handleCancel = () => dispatch('cancel');
+	const handleSubmit = () => dispatch('submit', { ...apiKey, name: apiKey.name });
+</script>
+
+<FullScreenModal on:clickOutside={() => handleCancel()}>
+	<div
+		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	>
+		<div
+			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+		>
+			<KeyVariant size="4em" />
+			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+				{title}
+			</h1>
+		</div>
+
+		<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+			<div class="m-4 flex flex-col gap-2">
+				<label class="immich-form-label" for="email">Name</label>
+				<input
+					class="immich-form-input"
+					id="name"
+					name="name"
+					type="text"
+					bind:value={apiKey.name}
+				/>
+			</div>
+
+			<div class="flex w-full px-4 gap-4 mt-8">
+				<button
+					type="button"
+					on:click={() => handleCancel()}
+					class="flex-1 transition-colors bg-gray-500 dark:bg-gray-200 hover:bg-gray-500/75 dark:hover:bg-gray-200/80 px-6 py-3 text-white dark:text-immich-dark-gray rounded-full shadow-md font-medium"
+					>{cancelText}
+				</button>
+				<button
+					type="submit"
+					class="flex-1 transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+					>{submitText}</button
+				>
+			</div>
+		</form>
+	</div>
+</FullScreenModal>

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
+	import { handleError } from '../../utils/handle-error';
+	import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
+
+	export let secret = '';
+
+	const dispatch = createEventDispatcher();
+	const handleDone = () => dispatch('done');
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(secret);
+			notificationController.show({
+				message: 'Copied to clipboard!',
+				type: NotificationType.Info
+			});
+		} catch (error) {
+			handleError(error, 'Unable to copy to clipboard');
+		}
+	};
+</script>
+
+<FullScreenModal>
+	<div
+		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	>
+		<div
+			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+		>
+			<KeyVariant size="4em" />
+			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+				API Key
+			</h1>
+
+			<p class="text-sm dark:text-immich-dark-fg">
+				This value will only be shown once. Please be sure to copy it before closing the window.
+			</p>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<!-- <label class="immich-form-label" for="email">API Key</label> -->
+			<textarea
+				class="immich-form-input"
+				id="secret"
+				name="secret"
+				readonly={true}
+				value={secret}
+			/>
+		</div>
+
+		<div class="flex w-full px-4 gap-4 mt-8">
+			<button
+				on:click={() => handleCopy()}
+				class="flex-1 transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+				>Copy to Clipboard</button
+			>
+			<button
+				on:click={() => handleDone()}
+				class="flex-1 transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+				>Done</button
+			>
+		</div>
+	</div>
+</FullScreenModal>

web/src/lib/components/shared-components/delete-confirm-dialogue.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import FullScreenModal from './full-screen-modal.svelte';
+
+	export let title = 'Confirm Delete';
+	export let prompt = 'Are you sure you want to delete this item?';
+	export let confirmText = 'Confirm';
+	export let cancelText = 'Cancel';
+
+	const dispatch = createEventDispatcher();
+	const handleCancel = () => dispatch('cancel');
+	const handleConfirm = () => dispatch('confirm');
+</script>
+
+<FullScreenModal on:clickOutside={() => handleCancel()}>
+	<div
+		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	>
+		<div
+			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+		>
+			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+				{title}
+			</h1>
+		</div>
+		<div>
+			<p class="ml-4 text-md py-5 text-center">{prompt}</p>
+
+			<div class="flex w-full px-4 gap-4 mt-4">
+				<button
+					on:click={() => handleCancel()}
+					class="flex-1 transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+				>
+					{cancelText}
+				</button>
+				<button
+					on:click={() => handleConfirm()}
+					class="flex-1 transition-colors bg-red-500 hover:bg-red-400 px-6 py-3 text-white rounded-full w-full font-medium"
+				>
+					{confirmText}
+				</button>
+			</div>
+		</div>
+	</div>
+</FullScreenModal>

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

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { api, APIKeyResponseDto } from '@api';
+	import { onMount } from 'svelte';
+	import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+	import { fade } from 'svelte/transition';
+	import { handleError } from '../../utils/handle-error';
+	import APIKeyForm from '../forms/api-key-form.svelte';
+	import APIKeySecret from '../forms/api-key-secret.svelte';
+	import DeleteConfirmDialogue from '../shared-components/delete-confirm-dialogue.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
+
+	let keys: APIKeyResponseDto[] = [];
+
+	let newKey: Partial<APIKeyResponseDto> | null = null;
+	let editKey: APIKeyResponseDto | null = null;
+	let deleteKey: APIKeyResponseDto | null = null;
+	let secret = '';
+
+	const locale = navigator.language;
+	const format: Intl.DateTimeFormatOptions = {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric'
+	};
+
+	onMount(() => {
+		refreshKeys();
+	});
+
+	async function refreshKeys() {
+		const { data } = await api.keyApi.getKeys();
+		keys = data;
+	}
+
+	const handleCreate = async (event: CustomEvent<APIKeyResponseDto>) => {
+		try {
+			const dto = event.detail;
+			const { data } = await api.keyApi.createKey(dto);
+			secret = data.secret;
+		} catch (error) {
+			handleError(error, 'Unable to create a new API Key');
+		} finally {
+			await refreshKeys();
+			newKey = null;
+		}
+	};
+
+	const handleUpdate = async (event: CustomEvent<APIKeyResponseDto>) => {
+		if (!editKey) {
+			return;
+		}
+
+		const dto = event.detail;
+
+		try {
+			await api.keyApi.updateKey(editKey.id, { name: dto.name });
+			notificationController.show({
+				message: `Saved API Key`,
+				type: NotificationType.Info
+			});
+		} catch (error) {
+			handleError(error, 'Unable to save API Key');
+		} finally {
+			await refreshKeys();
+			editKey = null;
+		}
+	};
+
+	const handleDelete = async () => {
+		if (!deleteKey) {
+			return;
+		}
+
+		try {
+			await api.keyApi.deleteKey(deleteKey.id);
+			notificationController.show({
+				message: `Removed API Key: ${deleteKey.name}`,
+				type: NotificationType.Info
+			});
+		} catch (error) {
+			handleError(error, 'Unable to remove API Key');
+		} finally {
+			await refreshKeys();
+			deleteKey = null;
+		}
+	};
+</script>
+
+{#if newKey}
+	<APIKeyForm
+		title="New API Key"
+		submitText="Create"
+		apiKey={newKey}
+		on:submit={handleCreate}
+		on:cancel={() => (newKey = null)}
+	/>
+{/if}
+
+{#if secret}
+	<APIKeySecret {secret} on:done={() => (secret = '')} />
+{/if}
+
+{#if editKey}
+	<APIKeyForm
+		submitText="Save"
+		apiKey={editKey}
+		on:submit={handleUpdate}
+		on:cancel={() => (editKey = null)}
+	/>
+{/if}
+
+{#if deleteKey}
+	<DeleteConfirmDialogue
+		prompt="Are you sure you want to delete this API Key?"
+		on:confirm={() => handleDelete()}
+		on:cancel={() => (deleteKey = null)}
+	/>
+{/if}
+
+<section class="my-4">
+	<div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
+		<div class="flex justify-end mb-2">
+			<button
+				on:click={() => (newKey = { name: 'API Key' })}
+				class="text-sm bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 px-4 py-2 text-white dark:text-immich-dark-gray rounded-full shadow-md font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+				>New API Key
+			</button>
+		</div>
+
+		{#if keys.length > 0}
+			<table class="text-left w-full">
+				<thead
+					class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
+				>
+					<tr class="flex w-full place-items-center">
+						<th class="text-center w-1/3 font-medium text-sm">Name</th>
+						<th class="text-center w-1/3 font-medium text-sm">Created</th>
+						<th class="text-center w-1/3 font-medium text-sm">Action</th>
+					</tr>
+				</thead>
+				<tbody class="overflow-y-auto rounded-md w-full block border dark:border-immich-dark-gray">
+					{#each keys as key, i}
+						{#key key.id}
+							<tr
+								class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
+									i % 2 == 0
+										? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+										: 'bg-immich-bg dark:bg-immich-dark-gray/50'
+								}`}
+							>
+								<td class="text-sm px-4 w-1/3 text-ellipsis">{key.name}</td>
+								<td class="text-sm px-4 w-1/3 text-ellipsis"
+									>{new Date(key.createdAt).toLocaleDateString(locale, format)}
+								</td>
+								<td class="text-sm px-4 w-1/3 text-ellipsis">
+									<button
+										on:click={() => (editKey = key)}
+										class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700  rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+									>
+										<PencilOutline size="16" />
+									</button>
+									<button
+										on:click={() => (deleteKey = key)}
+										class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700  rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+									>
+										<TrashCanOutline size="16" />
+									</button>
+								</td>
+							</tr>
+						{/key}
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</section>

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

@@ -5,6 +5,7 @@
 	import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
 	import ChangePasswordSettings from './change-password-settings.svelte';
 	import OAuthSettings from './oauth-settings.svelte';
+	import UserAPIKeyList from './user-api-key-list.svelte';
 	import UserProfileSettings from './user-profile-settings.svelte';
 
 	export let user: UserResponseDto;
@@ -32,6 +33,10 @@
 	<ChangePasswordSettings />
 </SettingAccordion>
 
+<SettingAccordion title="API Keys" subtitle="View and manage your API keys">
+	<UserAPIKeyList />
+</SettingAccordion>
+
 {#if oauthEnabled}
 	<SettingAccordion
 		title="OAuth"