74 lines
3.4 KiB
TypeScript
74 lines
3.4 KiB
TypeScript
import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
|
|
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
|
|
import { KeyImage } from "@/app/components/KeyImage/KeyImage";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Button, Flex, Text, Tooltip, useMantineTheme } from "@mantine/core";
|
|
import { IconChevronLeft, IconLock } from "@tabler/icons-react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
export function GroupEncryption() {
|
|
const params = useParams();
|
|
const encryptKey = params.key!;
|
|
const theme = useMantineTheme();
|
|
const colors = useRosettaColors();
|
|
const navigate = useNavigate();
|
|
|
|
const translateStringToHex = (str: string) => {
|
|
return str.split('').map(c => {
|
|
/*
|
|
XOR for prevent share keys
|
|
*/
|
|
const hex = (c.charCodeAt(0) ^ 27).toString(16);
|
|
return hex.length === 1 ? '0' + hex : hex;
|
|
}).join(' ');
|
|
}
|
|
|
|
return (<>
|
|
<Breadcrumbs text={"Encryption key"}></Breadcrumbs>
|
|
<InternalScreen>
|
|
<Flex align={'center'} justify={'center'}>
|
|
<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={180} keyRender={encryptKey}></KeyImage>
|
|
</Flex>
|
|
<Flex align={'center'} style={{
|
|
userSelect: 'none'
|
|
}} direction={'column'} mt={'sm'} justify={'center'}>
|
|
<Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
|
|
translateStringToHex(encryptKey.substring(0, 16))
|
|
}</Text>
|
|
<Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
|
|
translateStringToHex(encryptKey.substring(16, 32))
|
|
}</Text>
|
|
<Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
|
|
translateStringToHex(encryptKey.substring(32, 48))
|
|
}</Text>
|
|
<Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
|
|
translateStringToHex(encryptKey.substring(48, 64))
|
|
}</Text>
|
|
</Flex>
|
|
<Flex align={'center'} direction={'column'} mt={'sm'}>
|
|
<Flex direction={'row'} gap={5} align={'center'}>
|
|
<Text fw={500} fz={'sm'}>
|
|
Your messages is secure
|
|
</Text>
|
|
<Tooltip withArrow label="Secure and store only on your device.">
|
|
<IconLock size={16} color={colors.success}></IconLock>
|
|
</Tooltip>
|
|
</Flex>
|
|
<Text ta="center" maw={350} mt={'sm'} c={'dimmed'} fz={'xs'}>
|
|
This key is used to encrypt and decrypt messages. Your messages is secure and not stored on our servers.
|
|
</Text>
|
|
</Flex>
|
|
<Flex>
|
|
<Button onClick={() => navigate(-1)} leftSection={
|
|
<IconChevronLeft size={16}></IconChevronLeft>
|
|
} fullWidth mt={'md'} variant={'subtle'} color="blue">Back</Button>
|
|
</Flex>
|
|
</InternalScreen>
|
|
</>)
|
|
} |