70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import { PrivateView } from "@/app/components/PrivateView/PrivateView";
|
|
import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
|
|
import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
|
|
import { Flex, Text } from "@mantine/core";
|
|
import Lottie from "lottie-react";
|
|
import { useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import animationData from './inbox.json'
|
|
import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
|
|
import { useLogout } from "@/app/providers/AccountProvider/useLogout";
|
|
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
|
|
import { PacketDeviceResolve, Solution } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.resolve";
|
|
|
|
export function DeviceConfirm() {
|
|
const [protocolState] = useProtocolState();
|
|
const navigate = useNavigate();
|
|
const logout = useLogout();
|
|
|
|
useEffect(() => {
|
|
if(protocolState == ProtocolState.CONNECTED) {
|
|
navigate('/main');
|
|
}
|
|
}, [protocolState]);
|
|
|
|
usePacket(0x18, (packet : PacketDeviceResolve) => {
|
|
/**
|
|
* Если решение отклонено, то выходим из аккаунта
|
|
*/
|
|
if(packet.getSolution() == Solution.DECLINE){
|
|
logout();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<PrivateView>
|
|
<Flex h={500} justify={'space-between'} align={'center'} direction={'column'}>
|
|
<Flex maw={380} direction={'column'} align={'center'} mt={'xl'}>
|
|
<Flex>
|
|
<Lottie style={{
|
|
width: 140,
|
|
height: 140
|
|
}} animationData={animationData}></Lottie>
|
|
</Flex>
|
|
<Flex mt={'xl'}>
|
|
<Text fw={500} fz={18}>
|
|
Confirm new device
|
|
</Text>
|
|
</Flex>
|
|
<Flex mt={'sm'} px={'lg'} justify={'center'}>
|
|
<Text ta={'center'} c={'dimmed'} fz={14}>
|
|
To confirm this device, please check your first device attached to your account and approve the new device.
|
|
</Text>
|
|
</Flex>
|
|
<Flex mt={'xl'} px={'lg'} w={'100%'} justify={'center'}>
|
|
<AnimatedButton onClick={() => {
|
|
logout();
|
|
}} variant="light" color="white" radius={'xl'} fullWidth animated={['#e03131', '#ff5656']}>Exit</AnimatedButton>
|
|
</Flex>
|
|
</Flex>
|
|
<Flex justify={'center'} mt={'xl'} px={'lg'} align={'center'}>
|
|
<Flex justify={'center'} gap={'sm'} align={'center'}>
|
|
<Text ta={'center'} c={'dimmed'} fz={12}>
|
|
Confirm device <strong>{window.deviceName}</strong> on your first device to loading your chats.
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</PrivateView>
|
|
)
|
|
} |