forked from Cutlery/immich
796c933fb8
* feat(web,a11y): standardize the FullScreenModal look * consistent header, padding, close button, and radius as BaseModal * vertically stacking ConfirmDialogue CTA buttons in narrow screens * adding aria-modal tags for screen reader * add viewport-specific height limits on modals, to enable scrolling * prevent focus from being hidden under sticky content in modals * standardize FullScreenModal widths using a Prop * wip: consistent padding with header * fix: alignment on "create user" and "edit user" modals * fix: horizontal modal content alignment * fix: create user CTA buttons * chore: remove unnecessary warning --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
91 lines
2.9 KiB
Svelte
91 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { getAuthDevices, logoutAuthDevice, logoutAuthDevices, type AuthDeviceResponseDto } from '@immich/sdk';
|
|
import { handleError } from '../../utils/handle-error';
|
|
import Button from '../elements/buttons/button.svelte';
|
|
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
|
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
|
import DeviceCard from './device-card.svelte';
|
|
|
|
export let devices: AuthDeviceResponseDto[];
|
|
let deleteDevice: AuthDeviceResponseDto | null = null;
|
|
let deleteAll = false;
|
|
|
|
const refresh = () => getAuthDevices().then((_devices) => (devices = _devices));
|
|
|
|
$: currentDevice = devices.find((device) => device.current);
|
|
$: otherDevices = devices.filter((device) => !device.current);
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteDevice) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await logoutAuthDevice({ id: deleteDevice.id });
|
|
notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
|
|
} catch (error) {
|
|
handleError(error, 'Unable to log out device');
|
|
} finally {
|
|
await refresh();
|
|
deleteDevice = null;
|
|
}
|
|
};
|
|
|
|
const handleDeleteAll = async () => {
|
|
try {
|
|
await 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
|
|
id="log-out-device-modal"
|
|
prompt="Are you sure you want to log out this device?"
|
|
onConfirm={() => handleDelete()}
|
|
onClose={() => (deleteDevice = null)}
|
|
/>
|
|
{/if}
|
|
|
|
{#if deleteAll}
|
|
<ConfirmDialogue
|
|
id="log-out-all-modal"
|
|
prompt="Are you sure you want to log out all devices?"
|
|
onConfirm={() => handleDeleteAll()}
|
|
onClose={() => (deleteAll = false)}
|
|
/>
|
|
{/if}
|
|
|
|
<section class="my-4">
|
|
{#if currentDevice}
|
|
<div class="mb-6">
|
|
<h3 class="mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">CURRENT DEVICE</h3>
|
|
<DeviceCard device={currentDevice} />
|
|
</div>
|
|
{/if}
|
|
{#if otherDevices.length > 0}
|
|
<div class="mb-6">
|
|
<h3 class="mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">OTHER DEVICES</h3>
|
|
{#each otherDevices as device, index}
|
|
<DeviceCard {device} on:delete={() => (deleteDevice = device)} />
|
|
{#if index !== otherDevices.length - 1}
|
|
<hr class="my-3" />
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
<h3 class="mb-2 text-xs font-medium 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>
|