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

* feat: logout all devices

* chore: regenerate openapi

* chore: add test

* chore: logout vs log out

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>