feat(web,server): manage authorized devices (#2329)

* feat: manage authorized devices

* chore: open api

* get header from mobile app

* write header from mobile app

* styling

* fix unit test

* feat: use relative time

* feat: update access time

* fix: tests

* chore: confirm wording

* chore: bump test coverage thresholds

* feat: add some icons

* chore: icon tweaks

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { locale } from '$lib/stores/preferences.store';
+	import { AuthDeviceResponseDto } from '@api';
+	import { DateTime, ToRelativeCalendarOptions } from 'luxon';
+	import { createEventDispatcher } from 'svelte';
+	import Android from 'svelte-material-icons/Android.svelte';
+	import Apple from 'svelte-material-icons/Apple.svelte';
+	import AppleSafari from 'svelte-material-icons/AppleSafari.svelte';
+	import GoogleChrome from 'svelte-material-icons/GoogleChrome.svelte';
+	import Help from 'svelte-material-icons/Help.svelte';
+	import Linux from 'svelte-material-icons/Linux.svelte';
+	import MicrosoftWindows from 'svelte-material-icons/MicrosoftWindows.svelte';
+	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+
+	export let device: AuthDeviceResponseDto;
+
+	const dispatcher = createEventDispatcher();
+
+	const options: ToRelativeCalendarOptions = {
+		unit: 'days',
+		locale: $locale
+	};
+</script>
+
+<div class="flex flex-row w-full">
+	<!-- TODO: Device Image -->
+	<div
+		class="hidden sm:flex pr-2 justify-center items-center text-immich-primary dark:text-immich-dark-primary"
+	>
+		{#if device.deviceOS === 'Android'}
+			<Android size="40" />
+		{:else if device.deviceOS === 'iOS' || device.deviceOS === 'Mac OS'}
+			<Apple size="40" />
+		{:else if device.deviceOS.indexOf('Safari') !== -1}
+			<AppleSafari size="40" />
+		{:else if device.deviceOS.indexOf('Windows') !== -1}
+			<MicrosoftWindows size="40" />
+		{:else if device.deviceOS === 'Linux'}
+			<Linux size="40" />
+		{:else if device.deviceOS === 'Chromium OS' || device.deviceType === 'Chrome' || device.deviceType === 'Chromium'}
+			<GoogleChrome size="40" />
+		{:else}
+			<Help size="40" />
+		{/if}
+	</div>
+	<div class="pl-4 sm:pl-0 flex flex-row grow justify-between gap-1">
+		<div class="flex flex-col gap-1 justify-center dark:text-white">
+			<span class="text-sm">
+				{#if device.deviceType || device.deviceOS}
+					<span>{device.deviceOS || 'Unknown'} • {device.deviceType || 'Unknown'}</span>
+				{:else}
+					<span>Unknown</span>
+				{/if}
+			</span>
+			<div class="text-sm">
+				<span class="">Last seen</span>
+				<span>{DateTime.fromISO(device.updatedAt).toRelativeCalendar(options)}</span>
+			</div>
+		</div>
+		{#if !device.current}
+			<div class="text-sm flex flex-col justify-center">
+				<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"
+				>
+					<TrashCanOutline size="16" />
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { api, AuthDeviceResponseDto } from '@api';
+	import { onMount } from 'svelte';
+	import { handleError } from '../../utils/handle-error';
+	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
+	import DeviceCard from './device-card.svelte';
+
+	let devices: AuthDeviceResponseDto[] = [];
+	let deleteDevice: AuthDeviceResponseDto | null = null;
+
+	const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
+
+	onMount(() => {
+		refresh();
+	});
+
+	$: currentDevice = devices.find((device) => device.current);
+	$: otherDevices = devices.filter((device) => !device.current);
+
+	const handleDelete = async () => {
+		if (!deleteDevice) {
+			return;
+		}
+
+		try {
+			await api.authenticationApi.logoutAuthDevice(deleteDevice.id);
+			notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
+		} catch (error) {
+			handleError(error, 'Unable to logout device');
+		} finally {
+			await refresh();
+			deleteDevice = null;
+		}
+	};
+</script>
+
+{#if deleteDevice}
+	<ConfirmDialogue
+		prompt="Are you sure you want to logout this device?"
+		on:confirm={() => handleDelete()}
+		on:cancel={() => (deleteDevice = null)}
+	/>
+{/if}
+
+<section class="my-4">
+	{#if currentDevice}
+		<div class="mb-6">
+			<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
+				CURRENT DEVICE
+			</h3>
+			<DeviceCard device={currentDevice} />
+		</div>
+	{/if}
+	{#if otherDevices.length > 0}
+		<div>
+			<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
+				OTHER DEVICES
+			</h3>
+			{#each otherDevices as device, i}
+				<DeviceCard {device} on:delete={() => (deleteDevice = device)} />
+				{#if i !== otherDevices.length - 1}
+					<hr class="my-3" />
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</section>

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

@@ -6,6 +6,7 @@
 	import ChangePasswordSettings from './change-password-settings.svelte';
 	import OAuthSettings from './oauth-settings.svelte';
 	import UserAPIKeyList from './user-api-key-list.svelte';
+	import DeviceList from './device-list.svelte';
 	import UserProfileSettings from './user-profile-settings.svelte';
 
 	export let user: UserResponseDto;
@@ -46,3 +47,7 @@
 		<OAuthSettings {user} />
 	</SettingAccordion>
 {/if}
+
+<SettingAccordion title="Authorized Devices" subtitle="View and manage your logged-in devices">
+	<DeviceList />
+</SettingAccordion>