Skip to content

Commit

Permalink
editor frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
alextusinean committed Jul 2, 2024
1 parent 8a94855 commit 4b37b8a
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 7 deletions.
10 changes: 9 additions & 1 deletion components/cryptForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@ import {
} from '@chakra-ui/react';
import { FaDownload, FaEdit } from 'react-icons/fa';
import { useRef, useState } from 'react';
import dynamic from 'next/dynamic';
import crypto from 'crypto';

const Editor = dynamic(() => import('./editor'), { ssr: false });

function isGzip(data) {
return data[0] == 0x1F && data[1] == 0x8B;
}
Expand Down Expand Up @@ -45,6 +48,7 @@ export default function CryptForm({ isEncryption, isLoading, setIsLoading, passw
const [shouldGzip, setShouldGzip] = useState(false);
const [isEncryptionWarning, setIsEncryptionWarning] = useState(false);
const { isOpen, onOpen: _onOpen, onClose: _onClose } = useDisclosure();
const { isOpen: isEditorOpen, onOpen: onEditorOpen, onClose: onEditorClose } = useDisclosure();

const onOpen = (encryption) => {
if (encryption)
Expand Down Expand Up @@ -113,7 +117,7 @@ export default function CryptForm({ isEncryption, isLoading, setIsLoading, passw
<div width='100%'></div>

{!isEncryption && (
<Button leftIcon={<FaEdit />} colorScheme='teal' width='100%' mt='2' display='block' isDisabled>(SOON!) Open editor</Button>
<Button leftIcon={<FaEdit />} colorScheme='teal' width='100%' mt='2' display='block' onClick={onEditorOpen}>Open editor</Button>
)}

<Button
Expand Down Expand Up @@ -241,6 +245,10 @@ export default function CryptForm({ isEncryption, isLoading, setIsLoading, passw
</ModalFooter>
</ModalContent>
</Modal>

{!isEncryption && (
<Editor isOpen={isEditorOpen} onClose={onEditorClose} />
)}
</>
);
}
58 changes: 58 additions & 0 deletions components/editor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import {
Box,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton
} from '@chakra-ui/react';
import JSONEditor from 'jsoneditor';
import { useRef, useEffect, useCallback, useState } from 'react';
import 'jsoneditor/dist/jsoneditor.min.css';

import Footer from './footer';

export default function Editor({ isOpen, onClose }) {
const [editorContainer, setEditorContainer] = useState(null);

useEffect(() => {
if (!editorContainer)
return;

const editor = new JSONEditor(editorContainer, {
mode: 'tree',
onChange: () => {

}
});

editor.set({ phasmo: 1, money: { value: 2, currency: '$' }, 1: '2', 2: '3', 4: '5', 6: '7', 8: '9', 10: '11', 12: '13', 14: '15', 16: '17', 18: '19', 20: '21', 22: '23', 24: '25', 26: '27', 28: '29', 30: '31', 32: '33', 34: '35', 36: '37', 38: '39', 40: '41', 42: '43', 44: '45', 46: '47', 48: '49', 50: '51', 52: '53', 54: '55', 56: '57', 58: '59', 60: '61', 62: '63', 64: '65', 66: '67', 68: '69', 70: '71', 72: '73', 74: '75', 76: '77', 78: '79', 80: '81', 82: '83', 84: '85', 86: '87', 88: '89', 90: '91', 92: '93', 94: '95', 96: '97', 98: '99'});

return () => editor.destroy();
}, [editorContainer]);

const editorContainerRef = useCallback(node => {
if (node)
setEditorContainer(node);
}, []);

return (
<Modal isOpen={isOpen} onClose={onClose} size='full' mt='20'>
<ModalOverlay />
<ModalContent>
<ModalHeader>Editor</ModalHeader>
<ModalBody mt='5'>
<div ref={editorContainerRef}></div>
</ModalBody>
<ModalFooter>
<Footer left />
<Button colorScheme='teal'>Save</Button>
<Button ml='3' onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}
14 changes: 14 additions & 0 deletions components/footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Box, Link, Text } from '@chakra-ui/react';
import NextLink from 'next/link';

export default function Footer({ left }) {
const offset = left ? '10px' : '5px';

return (
<Box position='fixed' bottom={offset} left={left ? offset : undefined} right={left ? undefined : offset} textAlign={left ? 'left' : 'right'}>
<Link as={NextLink} href='/terms-of-service' color='blue.500' mr='6.5px'>Terms of Service</Link>
<Link as={NextLink} href='/privacy-policy' color='blue.500'>Privacy Policy</Link>
<Text>Made with <span style={{ color: 'red' }}></span> by <Link as={NextLink} href='https://alex.tusinean.ro' color='blue.500'>Alex Tușinean</Link></Text>
</Box>
);
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@emotion/styled": "11",
"crypto-browserify": "^3.12.0",
"framer-motion": "6",
"jsoneditor": "^10.1.0",
"next": "13.0.7",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
1 change: 1 addition & 0 deletions pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Link, Box } from '@chakra-ui/react';
import Head from 'next/head';
import './editor.css';

export default function App({ Component, pageProps }) {
return (
Expand Down
10 changes: 10 additions & 0 deletions pages/editor.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.jsoneditor-outer > .jsoneditor-tree {
overflow: scroll;
min-height: 70vh;
max-height: 70vh;
}

.jsoneditor-search > div > input {
background-color: #fff;
}

7 changes: 2 additions & 5 deletions pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import NextLink from 'next/link';
import Head from 'next/head';

import CryptForm from '../components/cryptForm';
import Footer from '../components/footer';
import passwords from '../passwords';

export default function Home() {
Expand Down Expand Up @@ -85,11 +86,7 @@ export default function Home() {
</Box>
</Flex>

<Box position='fixed' bottom='5px' right='5px' textAlign='right'>
<Link as={NextLink} href='/terms-of-service' color='blue.500' mr='6.5px'>Terms of Service</Link>
<Link as={NextLink} href='/privacy-policy' color='blue.500'>Privacy Policy</Link>
<Text>Made with <span style={{ color: 'red' }}></span> by <Link as={NextLink} href='https://alex.tusinean.ro' color='blue.500'>Alex Tușinean</Link></Text>
</Box>
<Footer />

<Modal
blockScrollOnMount={false}
Expand Down
64 changes: 63 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1211,6 +1211,11 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==

"@sphinxxxx/color-conversion@^2.2.2":
version "2.2.2"
resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==

"@swc/helpers@0.4.14":
version "0.4.14"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
Expand Down Expand Up @@ -1301,6 +1306,11 @@
dependencies:
"@zag-js/dom-query" "0.16.0"

ace-builds@^1.35.0:
version "1.35.2"
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.35.2.tgz#2c26d2317ed8e378927e90e5c0d4fa17be92db79"
integrity sha512-06d00u4jDZx+ieI0jLlgy/uefx8kcgz7lhI0mCIFEu8NVWirH00U5IEP7tePHy4sjPsRcJUH4VbJZacoit2Hng==

acorn-jsx@^5.3.2:
version "5.3.2"
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
Expand All @@ -1311,7 +1321,7 @@ acorn@^8.8.0:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==

ajv@^6.10.0, ajv@^6.12.4:
ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.6:
version "6.12.6"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
Expand Down Expand Up @@ -2626,6 +2636,16 @@ isexe@^2.0.0:
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==

javascript-natural-sort@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==

jmespath@^0.16.0:
version "0.16.0"
resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.16.0.tgz#b15b0a85dfd4d930d43e69ed605943c802785076"
integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==

js-sdsl@^4.1.4:
version "4.2.0"
resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
Expand Down Expand Up @@ -2653,6 +2673,11 @@ json-schema-traverse@^0.4.1:
resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==

json-source-map@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==

json-stable-stringify-without-jsonify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
Expand All @@ -2665,6 +2690,26 @@ json5@^1.0.1:
dependencies:
minimist "^1.2.0"

jsoneditor@^10.1.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/jsoneditor/-/jsoneditor-10.1.0.tgz#3530ae3b1996fb6ba75921ccb8350ce1af1e696e"
integrity sha512-s+BP/x9Rx9ukNyTjeWCvIAGTEvXwCw6l4NX4mlxXfkK87F1ZgsesHbD9SsyZDLP27dvcFgr9H/j1jy/Bzzk07Q==
dependencies:
ace-builds "^1.35.0"
ajv "^6.12.6"
javascript-natural-sort "^0.7.1"
jmespath "^0.16.0"
json-source-map "^0.6.1"
jsonrepair "^3.8.0"
mobius1-selectr "^2.4.13"
picomodal "^3.0.0"
vanilla-picker "^2.12.3"

jsonrepair@^3.8.0:
version "3.8.0"
resolved "https://registry.yarnpkg.com/jsonrepair/-/jsonrepair-3.8.0.tgz#33a1b0d3630c452e9945ef07d760469cdfad8823"
integrity sha512-89lrxpwp+IEcJ6kwglF0HH3Tl17J08JEpYfXnvvjdp4zV4rjSoGu2NdQHxBs7yTOk3ETjTn9du48pBy8iBqj1w==

"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
version "3.3.3"
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
Expand Down Expand Up @@ -2781,6 +2826,11 @@ minimist@^1.2.0, minimist@^1.2.6:
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==

mobius1-selectr@^2.4.13:
version "2.4.13"
resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==

ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
Expand Down Expand Up @@ -3007,6 +3057,11 @@ picomatch@^2.3.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

picomodal@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82"
integrity sha512-FoR3TDfuLlqUvcEeK5ifpKSVVns6B4BQvc8SDF6THVMuadya6LLtji0QgUDSStw0ZR2J7I6UGi5V2V23rnPWTw==

popmotion@11.0.3:
version "11.0.3"
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
Expand Down Expand Up @@ -3550,6 +3605,13 @@ util-deprecate@^1.0.1:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==

vanilla-picker@^2.12.3:
version "2.12.3"
resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.12.3.tgz#1cc47b641a2b9c9afc5ac3a9a02febace0f1b17a"
integrity sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==
dependencies:
"@sphinxxxx/color-conversion" "^2.2.2"

which-boxed-primitive@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
Expand Down

0 comments on commit 4b37b8a

Please sign in to comment.