46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { useDeviceResolve } from "@/app/providers/DeviceProvider/useDeviceResolve";
|
|
import { DeviceEntry } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.list";
|
|
import { Box, Button, Divider, Flex, Text } from "@mantine/core";
|
|
import { modals } from "@mantine/modals";
|
|
|
|
export interface DeviceVerifyProps {
|
|
device: DeviceEntry;
|
|
}
|
|
|
|
export function DeviceVerify(props: DeviceVerifyProps) {
|
|
const colors = useRosettaColors();
|
|
const { accept, decline } = useDeviceResolve();
|
|
|
|
const acceptConfirmModal = () => {
|
|
modals.openConfirmModal({
|
|
title: 'Accept new device',
|
|
children: (
|
|
<Text size="sm">
|
|
Are you sure you want to accept this device? This will allow it to access your account.
|
|
</Text>
|
|
),
|
|
centered: true,
|
|
labels: { confirm: 'Accept', cancel: 'Cancel' },
|
|
cancelProps: { color: 'gray', style: {
|
|
outline: 'none'
|
|
} },
|
|
onConfirm: () => accept(props.device.deviceId),
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Box bg={colors.mainColor} h={65}>
|
|
<Divider orientation={'horizontal'} color={colors.borderColor}></Divider>
|
|
<Flex mt={'xs'} mb={'xs'} align={'center'} direction={'column'}>
|
|
<Text size={'xs'} fw={500} c={'dimmed'}>
|
|
New login from {props.device.deviceName} ({props.device.deviceOs})
|
|
</Text>
|
|
<Flex direction={'row'} mt={'xs'} gap={'md'}>
|
|
<Button p={0} h={18} onClick={acceptConfirmModal} variant={'transparent'} size={'xs'}>Accept</Button>
|
|
<Button p={0} h={18} onClick={() => decline(props.device.deviceId)} variant={'transparent'} size={'xs'} color={'red'}>Decline</Button>
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
} |