diff --git a/src/Router.tsx b/src/Router.tsx index 5b737d8..fcdd099 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -5,8 +5,10 @@ import { Route, } from 'react-router-dom'; +import Intro from './screens/Intro'; import Encrypt from './screens/Encrypt'; import Decrypt from './screens/Decrypt'; +import SetupKey from './screens/SetupKey'; import Welcome from './screens/Welcome'; import Debug from './screens/Debug'; @@ -19,12 +21,18 @@ const AppRouter: React.FC = () => ( - + + + + - + + + + ); diff --git a/src/components/File.tsx b/src/components/File.tsx index 1a20192..94a3f1c 100644 --- a/src/components/File.tsx +++ b/src/components/File.tsx @@ -19,15 +19,22 @@ interface Props { file: FileType; } +const iconStyle = { + style: { + fontSize: 18, + }, +}; + const icons: {[name: string]: any} = { - processing: , - failed: , - success: , + processing: , + failed: , + success: , }; const IconText = ({ icon, text, ...props }) => ( {Object.keys(files).length > 0 && ( <> diff --git a/src/screens/Encrypt.tsx b/src/screens/Encrypt.tsx index 5d12dac..c132a60 100644 --- a/src/screens/Encrypt.tsx +++ b/src/screens/Encrypt.tsx @@ -1,18 +1,11 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useContext } from 'react'; import { Divider } from 'antd'; -import { useHistory } from 'react-router'; import Add from '../components/encrypt/Add'; import FileList from '../components/FileList'; import EncryptionContext from '../contexts/Encryption'; const Encrypt: React.FC = () => { - const history = useHistory(); const { files, deleteFile } = useContext(EncryptionContext); - useEffect(() => { - if (localStorage.getItem('welcome') !== 'seen') { - history.replace('/welcome'); - } - }, []); return ( <> diff --git a/src/screens/Intro.tsx b/src/screens/Intro.tsx new file mode 100644 index 0000000..7e4d196 --- /dev/null +++ b/src/screens/Intro.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { useHistory } from 'react-router'; +import Welcome from './Welcome'; +import { + Button, + Space, +} from 'antd'; +import { + UploadOutlined, + DownloadOutlined, + KeyOutlined, +} from '@ant-design/icons'; + + +const Thumb: React.FC = ({ + title, + Icon, + link, +}) => { + const history = useHistory(); + return ( + + ); +}; + +const Intro = () => { + return ( + <> + + + What do you want to do? + + + + + + ); +}; + +export default Intro; diff --git a/src/screens/SetupKey.tsx b/src/screens/SetupKey.tsx new file mode 100644 index 0000000..041d8c2 --- /dev/null +++ b/src/screens/SetupKey.tsx @@ -0,0 +1,101 @@ +import React, { useContext, useState, useCallback } from 'react'; +import { Space, Typography, Input, Button, Form } from 'antd'; +import DecryptionContext from '../contexts/Decryption'; +import { downloadLink } from '../helpers/files'; +import { + RocketTwoTone, + LockTwoTone, + UserOutlined, + MailOutlined, +} from '@ant-design/icons'; + +const SetupKey: React.FC = () => { + const { + createKey, + publicKey, + } = useContext(DecryptionContext); + + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + + const downloadPublicKey = useCallback(() => { + const publicKeyBlob = new Blob([publicKey!]); + downloadLink('public-key.asc', publicKeyBlob); + }, []); + + const setupKey = useCallback(() => { + createKey(name, email); + }, [name, email]); + + if (!publicKey) { + return ( + <> + + + Create your sharing key +

+ Before I can send protected information to you I need a "sharing" key, which is a key that gets stored this device, allowing this device (and this device only) to read the informations I am sending. +

+

+ After creating it you need to send it to me +

+ +
+ + } + value={name} + onChange={evt => setName(evt.target.value)} + /> + + + } + value={email} + onChange={evt => setEmail(evt.target.value)} + /> + + + + +
+ + ); + } else { + return ( +
+ + Okay, you are all set. +

+ Just send me your sharing key, and I will send files using it. +

+

+ Remember that you need to go to this website on this device to decrypt the files after receiving them +

+ + +
+ ); + } +}; + +export default SetupKey; diff --git a/src/screens/Welcome.tsx b/src/screens/Welcome.tsx index 6804259..c5a31c3 100644 --- a/src/screens/Welcome.tsx +++ b/src/screens/Welcome.tsx @@ -1,51 +1,23 @@ -import React, { useEffect } from 'react'; -import { Space, Layout, Button, Typography, notification } from 'antd'; -import { AlignLeftOutlined, EyeInvisibleTwoTone, ArrowRightOutlined } from '@ant-design/icons'; -import { useHistory } from 'react-router'; - -const openNotification = () => { - notification.warn({ - message: 'Slow down!', - description: 'I am still working on this, but thanks for the interrest.' - }); -}; +import React from 'react'; +import { Space, Layout, Typography } from 'antd'; +import { EyeInvisibleTwoTone } from '@ant-design/icons'; const Welcome: React.FC = () => { - const history = useHistory(); - useEffect(() => { - localStorage.setItem('welcome', 'seen'); - }); - return ( Protect before sending

- The internet can seem like a scary place, especially if you want to send sensitiv information across it. + The internet can seem like a scary place...

- The truth is that a lot of systems, including e-mails, was not build for the internet that we have today. + Especially because a lot of the tools we use everyday (such as e-mail) wasn't build for the internet that we have today. + This is why it is important to have an additional layer of security when sending sensitive information.

- This is why it is so important to make sure your documents are well protected before sharing. + This is a tool that will help you have that extra layer of security when sharing files with me.

-

- This tool can be used to protect information before sharing them with me. The documents will be encrypted so that only I can ever unlock them, so no snoppy man in the middle... -

- - );