Обмен ключами шифрования DH

This commit is contained in:
RoyceDa
2026-02-28 17:33:23 +02:00
parent 461ccbfa94
commit 9eac2fae6f
6 changed files with 271 additions and 8 deletions

View File

@@ -3,8 +3,9 @@ import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
import { CallContextValue, CallState } from "@/app/providers/CallProvider/CallProvider";
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
import { Avatar, Box, Flex, Text } from "@mantine/core";
import { Avatar, Box, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
import { IconChevronLeft, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneX, IconQrcode, IconVolume, IconVolumeOff, IconX } from "@tabler/icons-react";
import { KeyImage } from "../KeyImage/KeyImage";
export interface CallProps {
context: CallContextValue;
@@ -20,10 +21,14 @@ export function Call(props: CallProps) {
setSound,
setMuted,
setShowCallView,
muted} = props.context;
muted,
getKeyCast,
accept
} = props.context;
const [userInfo] = useUserInformation(activeCall);
const avatars = useAvatars(activeCall);
const colors = useRosettaColors();
const theme = useMantineTheme();
return (
<Box pos={'absolute'} top={0} left={0} w={'100%'} h={'100vh'} style={{
@@ -39,7 +44,25 @@ export function Call(props: CallProps) {
<Text fw={500}>Back</Text>
</Flex>
<Flex>
<IconQrcode size={24}></IconQrcode>
<Popover width={300} withArrow>
<Popover.Target>
<IconQrcode size={24}></IconQrcode>
</Popover.Target>
<Popover.Dropdown p={'xs'}>
<Flex direction={'row'} align={'center'} gap={'xs'}>
<Text maw={300} c={'dimmed'} fz={'xs'}>
This call is secured by 256 bit end-to-end encryption. Only you and the recipient can read or listen to the content of this call.
</Text>
<KeyImage radius={0} colors={[
theme.colors.blue[1],
theme.colors.blue[2],
theme.colors.blue[3],
theme.colors.blue[4],
theme.colors.blue[5]
]} size={80} keyRender={getKeyCast()}></KeyImage>
</Flex>
</Popover.Dropdown>
</Popover>
</Flex>
</Flex>
<Flex direction={'column'} mt={'xl'} style={{
@@ -50,8 +73,9 @@ export function Call(props: CallProps) {
{callState == CallState.ACTIVE && (<Text fz={14} c={'#FFF'}>{translateDurationToTime(duration)}</Text>)}
{callState == CallState.CONNECTING && (<Text fz={14} c={'#FFF'}>Connecting...</Text>)}
{callState == CallState.INCOMING && (<Text fz={14} c={'#FFF'}>Incoming call...</Text>)}
{callState == CallState.KEY_EXCHANGE && (<Text fz={14} c={'#FFF'}>Exchanging encryption keys...</Text>)}
<Flex gap={'xl'} align={'center'} justify={'center'} mt={'xl'}>
{callState == CallState.ACTIVE || callState == CallState.CONNECTING && (
{callState == CallState.ACTIVE || callState == CallState.CONNECTING || callState == CallState.KEY_EXCHANGE && (
<>
<Box w={50} onClick={() => setSound(!sound)} style={{
borderRadius: 25,
@@ -93,7 +117,7 @@ export function Call(props: CallProps) {
</Flex>
</Box>
)}
<Box w={userInfo.title != "Rosetta" ? 50 : 100} onClick={close} style={{
<Box w={userInfo.title != "Rosetta" ? 50 : 100} onClick={accept} style={{
borderRadius: '50%',
cursor: 'pointer'
}} h={userInfo.title != "Rosetta" ? 50 : 100} bg={colors.success}>