feat(web,server): logout all devices (#2415)

* feat: logout all devices

* chore: regenerate openapi

* chore: add test

* chore: logout vs log out

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

@@ -6299,6 +6299,44 @@ export const AuthenticationApiAxiosParamCreator = function (configuration?: Conf
 
 
     
+            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}
+         */
+        logoutAuthDevices: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/auth/devices`;
+            // 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;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -6414,6 +6452,15 @@ export const AuthenticationApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.logoutAuthDevice(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async logoutAuthDevices(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.logoutAuthDevices(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -6485,6 +6532,14 @@ export const AuthenticationApiFactory = function (configuration?: Configuration,
         logoutAuthDevice(id: string, options?: any): AxiosPromise<void> {
             return localVarFp.logoutAuthDevice(id, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logoutAuthDevices(options?: any): AxiosPromise<void> {
+            return localVarFp.logoutAuthDevices(options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -6567,6 +6622,16 @@ export class AuthenticationApi extends BaseAPI {
         return AuthenticationApiFp(this.configuration).logoutAuthDevice(id, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public logoutAuthDevices(options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).logoutAuthDevices(options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @param {*} [options] Override http request option.

web/src/lib/components/user-settings-page/device-card.svelte

@@ -62,7 +62,7 @@
 				<button
 					on:click={() => dispatcher('delete')}
 					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"
-					title="Logout"
+					title="Log out"
 				>
 					<TrashCanOutline size="16" />
 				</button>

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

@@ -2,6 +2,7 @@
 	import { api, AuthDeviceResponseDto } from '@api';
 	import { onMount } from 'svelte';
 	import { handleError } from '../../utils/handle-error';
+	import Button from '../elements/buttons/button.svelte';
 	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
 	import {
 		notificationController,
@@ -11,6 +12,7 @@
 
 	let devices: AuthDeviceResponseDto[] = [];
 	let deleteDevice: AuthDeviceResponseDto | null = null;
+	let deleteAll = false;
 
 	const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
 
@@ -30,22 +32,45 @@
 			await api.authenticationApi.logoutAuthDevice(deleteDevice.id);
 			notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
 		} catch (error) {
-			handleError(error, 'Unable to logout device');
+			handleError(error, 'Unable to log out device');
 		} finally {
 			await refresh();
 			deleteDevice = null;
 		}
 	};
+
+	const handleDeleteAll = async () => {
+		try {
+			await api.authenticationApi.logoutAuthDevices();
+			notificationController.show({
+				message: `Logged out all devices`,
+				type: NotificationType.Info
+			});
+		} catch (error) {
+			handleError(error, 'Unable to log out all devices');
+		} finally {
+			await refresh();
+			deleteAll = false;
+		}
+	};
 </script>
 
 {#if deleteDevice}
 	<ConfirmDialogue
-		prompt="Are you sure you want to logout this device?"
+		prompt="Are you sure you want to log out this device?"
 		on:confirm={() => handleDelete()}
 		on:cancel={() => (deleteDevice = null)}
 	/>
 {/if}
 
+{#if deleteAll}
+	<ConfirmDialogue
+		prompt="Are you sure you want to log out all devices?"
+		on:confirm={() => handleDeleteAll()}
+		on:cancel={() => (deleteAll = false)}
+	/>
+{/if}
+
 <section class="my-4">
 	{#if currentDevice}
 		<div class="mb-6">
@@ -56,7 +81,7 @@
 		</div>
 	{/if}
 	{#if otherDevices.length > 0}
-		<div>
+		<div class="mb-6">
 			<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
 				OTHER DEVICES
 			</h3>
@@ -67,5 +92,11 @@
 				{/if}
 			{/each}
 		</div>
+		<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
+			LOG OUT ALL DEVICES
+		</h3>
+		<div class="flex justify-end">
+			<Button color="red" size="sm" on:click={() => (deleteAll = true)}>Log Out All Devices</Button>
+		</div>
 	{/if}
 </section>