chore(git): Merge branch 'main' into issue-27
This commit is contained in:
commit
3d958e809f
@ -1 +1 @@
|
|||||||
VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.bitcoiner.social wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks
|
VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks
|
@ -351,7 +351,7 @@ export const CreatePage = () => {
|
|||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
|
|
||||||
navigate(
|
navigate(
|
||||||
`${appPrivateRoutes.verify}?file=${encodeURIComponent(
|
`${appPrivateRoutes.sign}?file=${encodeURIComponent(
|
||||||
fileUrl
|
fileUrl
|
||||||
)}&key=${encodeURIComponent(encryptionKey)}`
|
)}&key=${encodeURIComponent(encryptionKey)}`
|
||||||
)
|
)
|
||||||
|
@ -1,146 +0,0 @@
|
|||||||
import { Box, Button, TextField, Typography } from '@mui/material'
|
|
||||||
import saveAs from 'file-saver'
|
|
||||||
import { MuiFileInput } from 'mui-file-input'
|
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
|
||||||
import { decryptArrayBuffer } from '../../utils'
|
|
||||||
import styles from './style.module.scss'
|
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
import { useSearchParams } from 'react-router-dom'
|
|
||||||
import axios from 'axios'
|
|
||||||
import { DecryptionError } from '../../types/errors/DecryptionError'
|
|
||||||
|
|
||||||
export const DecryptZip = () => {
|
|
||||||
const [searchParams] = useSearchParams()
|
|
||||||
|
|
||||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
|
||||||
const [encryptionKey, setEncryptionKey] = useState('')
|
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
|
||||||
const [isDraggingOver, setIsDraggingOver] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fileUrl = searchParams.get('file')
|
|
||||||
|
|
||||||
if (fileUrl) {
|
|
||||||
const decodedFileUrl = decodeURIComponent(fileUrl)
|
|
||||||
|
|
||||||
setIsLoading(true)
|
|
||||||
setLoadingSpinnerDesc('Fetching zip file')
|
|
||||||
axios
|
|
||||||
.get(decodedFileUrl, {
|
|
||||||
responseType: 'arraybuffer'
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const fileName = decodedFileUrl.split('/').pop()
|
|
||||||
const file = new File([res.data], fileName!)
|
|
||||||
setSelectedFile(file)
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(
|
|
||||||
`error occurred in getting zip file from ${decodedFileUrl}`,
|
|
||||||
err
|
|
||||||
)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsLoading(false)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const key = searchParams.get('key')
|
|
||||||
if (key) {
|
|
||||||
const decodedKey = decodeURIComponent(key)
|
|
||||||
setEncryptionKey(decodedKey)
|
|
||||||
}
|
|
||||||
}, [searchParams])
|
|
||||||
|
|
||||||
const handleDecrypt = async () => {
|
|
||||||
if (!selectedFile || !encryptionKey) return
|
|
||||||
|
|
||||||
setIsLoading(true)
|
|
||||||
setLoadingSpinnerDesc('Decrypting zip file')
|
|
||||||
|
|
||||||
const encryptedArrayBuffer = await selectedFile.arrayBuffer()
|
|
||||||
|
|
||||||
const arrayBuffer = await decryptArrayBuffer(
|
|
||||||
encryptedArrayBuffer,
|
|
||||||
encryptionKey
|
|
||||||
).catch((err: DecryptionError) => {
|
|
||||||
console.log('err in decryption:>> ', err)
|
|
||||||
|
|
||||||
toast.error(err.message)
|
|
||||||
setIsLoading(false)
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!arrayBuffer) return
|
|
||||||
|
|
||||||
const blob = new Blob([arrayBuffer])
|
|
||||||
saveAs(blob, 'decrypted.zip')
|
|
||||||
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
|
||||||
event.preventDefault()
|
|
||||||
setIsDraggingOver(false)
|
|
||||||
const file = event.dataTransfer.files[0]
|
|
||||||
if (file.type === 'application/zip') setSelectedFile(file)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
|
||||||
event.preventDefault()
|
|
||||||
setIsDraggingOver(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
|
||||||
<Box className={styles.container}>
|
|
||||||
<Typography component="label" variant="h6">
|
|
||||||
Select encrypted zip file
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
className={styles.inputBlock}
|
|
||||||
onDrop={handleDrop}
|
|
||||||
onDragOver={handleDragOver}
|
|
||||||
>
|
|
||||||
{isDraggingOver && (
|
|
||||||
<Box className={styles.fileDragOver}>
|
|
||||||
<Typography variant="body1">Drop file here</Typography>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
<MuiFileInput
|
|
||||||
placeholder="Drop file here, or click to select"
|
|
||||||
value={selectedFile}
|
|
||||||
onChange={(value) => setSelectedFile(value)}
|
|
||||||
InputProps={{
|
|
||||||
inputProps: {
|
|
||||||
accept: '.zip'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Encryption Key"
|
|
||||||
variant="outlined"
|
|
||||||
value={encryptionKey}
|
|
||||||
onChange={(e) => setEncryptionKey(e.target.value)}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
|
||||||
<Button
|
|
||||||
onClick={handleDecrypt}
|
|
||||||
variant="contained"
|
|
||||||
disabled={!selectedFile || !encryptionKey}
|
|
||||||
>
|
|
||||||
Decrypt
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,27 +0,0 @@
|
|||||||
@import '../../colors.scss';
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: $text-color;
|
|
||||||
|
|
||||||
.inputBlock {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileDragOver {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
@ -14,6 +14,12 @@ export const HomePage = () => {
|
|||||||
>
|
>
|
||||||
Create
|
Create
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => navigate(appPrivateRoutes.sign)}
|
||||||
|
variant="contained"
|
||||||
|
>
|
||||||
|
Sign
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate(appPrivateRoutes.verify)}
|
onClick={() => navigate(appPrivateRoutes.verify)}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
|
@ -59,7 +59,7 @@ export const LandingPage = () => {
|
|||||||
}}
|
}}
|
||||||
variant="h4"
|
variant="h4"
|
||||||
>
|
>
|
||||||
What is Nostr?
|
What is SIGit?
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
@ -69,24 +69,26 @@ export const LandingPage = () => {
|
|||||||
}}
|
}}
|
||||||
variant="body1"
|
variant="body1"
|
||||||
>
|
>
|
||||||
Nostr is a decentralised messaging protocol where YOU own your
|
SIGit is an open-source and self-hostable solution for secure
|
||||||
identity. To get started, you must have an existing{' '}
|
document signing and verification. Code is MIT licenced and
|
||||||
|
available at{' '}
|
||||||
<a
|
<a
|
||||||
className="bold-link"
|
className="bold-link"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://nostr.com/"
|
href="https://git.sigit.io/sig/it"
|
||||||
>
|
>
|
||||||
Nostr account
|
https://git.sigit.io/sig/it
|
||||||
</a>
|
</a>
|
||||||
.
|
.
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
No email required - all notifications are made using the nQuiz
|
SIGit lets you Create, Sign and Verify signature packs from any
|
||||||
relay.
|
device with a browser.
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
If you no longer wish to hear from us, simply remove
|
Unlike other solutions, SIGit is totally private - files are
|
||||||
relay.nquiz.io from your list of relays.
|
encrypted locally, and valid packs can only be exported by named
|
||||||
|
recipients.
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -303,7 +303,7 @@ export const Login = () => {
|
|||||||
<div className={styles.loginPage}>
|
<div className={styles.loginPage}>
|
||||||
<Typography variant="h4">Welcome to Sigit</Typography>
|
<Typography variant="h4">Welcome to Sigit</Typography>
|
||||||
<TextField
|
<TextField
|
||||||
label="nip05 / npub / nsec / bunker connx string"
|
label="nip05 login / nip46 bunker string / nsec"
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
sx={{ width: '100%', mt: 2 }}
|
sx={{ width: '100%', mt: 2 }}
|
||||||
|
782
src/pages/sign/index.tsx
Normal file
782
src/pages/sign/index.tsx
Normal file
@ -0,0 +1,782 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListSubheader,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material'
|
||||||
|
import axios from 'axios'
|
||||||
|
import saveAs from 'file-saver'
|
||||||
|
import JSZip from 'jszip'
|
||||||
|
import _ from 'lodash'
|
||||||
|
import { MuiFileInput } from 'mui-file-input'
|
||||||
|
import { EventTemplate } from 'nostr-tools'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useSelector } from 'react-redux'
|
||||||
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
|
||||||
|
import { toast } from 'react-toastify'
|
||||||
|
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||||
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
|
import { MetadataController, NostrController } from '../../controllers'
|
||||||
|
import { appPrivateRoutes, getProfileRoute } from '../../routes'
|
||||||
|
import { State } from '../../store/rootReducer'
|
||||||
|
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
|
||||||
|
import {
|
||||||
|
decryptArrayBuffer,
|
||||||
|
encryptArrayBuffer,
|
||||||
|
generateEncryptionKey,
|
||||||
|
getHash,
|
||||||
|
hexToNpub,
|
||||||
|
parseJson,
|
||||||
|
readContentOfZipEntry,
|
||||||
|
sendDM,
|
||||||
|
shorten,
|
||||||
|
signEventForMetaFile,
|
||||||
|
uploadToFileStorage
|
||||||
|
} from '../../utils'
|
||||||
|
import styles from './style.module.scss'
|
||||||
|
|
||||||
|
enum SignedStatus {
|
||||||
|
Fully_Signed,
|
||||||
|
User_Is_Next_Signer,
|
||||||
|
User_Is_Not_Next_Signer
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SignPage = () => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams()
|
||||||
|
|
||||||
|
const [displayInput, setDisplayInput] = useState(false)
|
||||||
|
|
||||||
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||||
|
const [encryptionKey, setEncryptionKey] = useState('')
|
||||||
|
|
||||||
|
const [zip, setZip] = useState<JSZip>()
|
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
|
|
||||||
|
const [meta, setMeta] = useState<Meta | null>(null)
|
||||||
|
const [signedStatus, setSignedStatus] = useState<SignedStatus>()
|
||||||
|
|
||||||
|
const [nextSinger, setNextSinger] = useState<string>()
|
||||||
|
|
||||||
|
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||||||
|
|
||||||
|
const [authUrl, setAuthUrl] = useState<string>()
|
||||||
|
const nostrController = NostrController.getInstance()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (meta) {
|
||||||
|
setDisplayInput(false)
|
||||||
|
|
||||||
|
// get list of users who have signed
|
||||||
|
const signedBy = Object.keys(meta.signedEvents)
|
||||||
|
|
||||||
|
if (meta.signers.length > 0) {
|
||||||
|
// check if all signers have signed then its fully signed
|
||||||
|
if (meta.signers.every((signer) => signedBy.includes(signer))) {
|
||||||
|
setSignedStatus(SignedStatus.Fully_Signed)
|
||||||
|
} else {
|
||||||
|
for (const signer of meta.signers) {
|
||||||
|
if (!signedBy.includes(signer)) {
|
||||||
|
setNextSinger(signer)
|
||||||
|
|
||||||
|
if (signer === usersPubkey) {
|
||||||
|
// logged in user is the next signer
|
||||||
|
setSignedStatus(SignedStatus.User_Is_Next_Signer)
|
||||||
|
} else {
|
||||||
|
setSignedStatus(SignedStatus.User_Is_Not_Next_Signer)
|
||||||
|
}
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// there's no signer just viewers. So its fully signed
|
||||||
|
setSignedStatus(SignedStatus.Fully_Signed)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [meta, usersPubkey])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fileUrl = searchParams.get('file')
|
||||||
|
const key = searchParams.get('key')
|
||||||
|
|
||||||
|
if (fileUrl && key) {
|
||||||
|
setIsLoading(true)
|
||||||
|
setLoadingSpinnerDesc('Fetching file from file server')
|
||||||
|
|
||||||
|
axios
|
||||||
|
.get(fileUrl, {
|
||||||
|
responseType: 'arraybuffer'
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const fileName = fileUrl.split('/').pop()
|
||||||
|
const file = new File([res.data], fileName!)
|
||||||
|
|
||||||
|
decrypt(file, decodeURIComponent(key)).then((arrayBuffer) => {
|
||||||
|
if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(`error occurred in getting file from ${fileUrl}`, err)
|
||||||
|
toast.error(
|
||||||
|
err.message || `error occurred in getting file from ${fileUrl}`
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setIsLoading(false)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setIsLoading(false)
|
||||||
|
setDisplayInput(true)
|
||||||
|
}
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
const decrypt = async (file: File, key: string) => {
|
||||||
|
setLoadingSpinnerDesc('Decrypting file')
|
||||||
|
|
||||||
|
const encryptedArrayBuffer = await file.arrayBuffer()
|
||||||
|
|
||||||
|
const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err in decryption:>> ', err)
|
||||||
|
toast.error(err.message || 'An error occurred in decrypting file.')
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setIsLoading(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
return arrayBuffer
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
|
||||||
|
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
|
||||||
|
|
||||||
|
setLoadingSpinnerDesc('Parsing zip file')
|
||||||
|
|
||||||
|
const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
|
||||||
|
console.log('err in loading zip file :>> ', err)
|
||||||
|
toast.error(err.message || 'An error occurred in loading zip file.')
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!zip) return
|
||||||
|
|
||||||
|
setZip(zip)
|
||||||
|
|
||||||
|
setLoadingSpinnerDesc('Parsing meta.json')
|
||||||
|
|
||||||
|
const metaFileContent = await readContentOfZipEntry(
|
||||||
|
zip,
|
||||||
|
'meta.json',
|
||||||
|
'string'
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!metaFileContent) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedMetaJson = await parseJson<Meta>(metaFileContent).catch(
|
||||||
|
(err) => {
|
||||||
|
console.log('err in parsing the content of meta.json :>> ', err)
|
||||||
|
toast.error(
|
||||||
|
err.message || 'error occurred in parsing the content of meta.json'
|
||||||
|
)
|
||||||
|
setIsLoading(false)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
setMeta(parsedMetaJson)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDecrypt = async () => {
|
||||||
|
if (!selectedFile || !encryptionKey) return
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
const arrayBuffer = await decrypt(
|
||||||
|
selectedFile,
|
||||||
|
decodeURIComponent(encryptionKey)
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!arrayBuffer) return
|
||||||
|
|
||||||
|
handleDecryptedArrayBuffer(arrayBuffer)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSign = async () => {
|
||||||
|
if (!zip || !meta) return
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
setLoadingSpinnerDesc('parsing hashes.json file')
|
||||||
|
|
||||||
|
const hashesFileContent = await readContentOfZipEntry(
|
||||||
|
zip,
|
||||||
|
'hashes.json',
|
||||||
|
'string'
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!hashesFileContent) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let hashes = await parseJson(hashesFileContent).catch((err) => {
|
||||||
|
console.log('err in parsing the content of hashes.json :>> ', err)
|
||||||
|
toast.error(
|
||||||
|
err.message || 'error occurred in parsing the content of hashes.json'
|
||||||
|
)
|
||||||
|
setIsLoading(false)
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!hashes) return
|
||||||
|
|
||||||
|
setLoadingSpinnerDesc('Generating hashes for files')
|
||||||
|
|
||||||
|
const fileHashes: { [key: string]: string } = {}
|
||||||
|
const fileNames = Object.keys(meta.fileHashes)
|
||||||
|
|
||||||
|
// generate hashes for all entries in files folder of zipArchive
|
||||||
|
// these hashes can be used to verify the originality of files
|
||||||
|
for (const fileName of fileNames) {
|
||||||
|
const filePath = `files/${fileName}`
|
||||||
|
const arrayBuffer = await readContentOfZipEntry(
|
||||||
|
zip,
|
||||||
|
filePath,
|
||||||
|
'arraybuffer'
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!arrayBuffer) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const hash = await getHash(arrayBuffer)
|
||||||
|
if (!hash) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
fileHashes[fileName] = hash
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoadingSpinnerDesc('Signing nostr event')
|
||||||
|
const signedEvent = await signEventForMetaFile(
|
||||||
|
fileHashes,
|
||||||
|
nostrController,
|
||||||
|
setIsLoading
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!signedEvent) return
|
||||||
|
|
||||||
|
const metaCopy = _.cloneDeep(meta)
|
||||||
|
|
||||||
|
metaCopy.signedEvents = {
|
||||||
|
...metaCopy.signedEvents,
|
||||||
|
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
|
||||||
|
zip.file('meta.json', stringifiedMeta)
|
||||||
|
|
||||||
|
const metaHash = await getHash(stringifiedMeta)
|
||||||
|
if (!metaHash) return
|
||||||
|
|
||||||
|
hashes = {
|
||||||
|
...hashes,
|
||||||
|
[usersPubkey!]: metaHash
|
||||||
|
}
|
||||||
|
|
||||||
|
zip.file('hashes.json', JSON.stringify(hashes, null, 2))
|
||||||
|
|
||||||
|
const arrayBuffer = await zip
|
||||||
|
.generateAsync({
|
||||||
|
type: 'arraybuffer',
|
||||||
|
compression: 'DEFLATE',
|
||||||
|
compressionOptions: {
|
||||||
|
level: 6
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err in zip:>> ', err)
|
||||||
|
setIsLoading(false)
|
||||||
|
toast.error(err.message || 'Error occurred in generating zip file')
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!arrayBuffer) return
|
||||||
|
|
||||||
|
const encryptionKey = await generateEncryptionKey()
|
||||||
|
|
||||||
|
setLoadingSpinnerDesc('Encrypting zip file')
|
||||||
|
const encryptedArrayBuffer = await encryptArrayBuffer(
|
||||||
|
arrayBuffer,
|
||||||
|
encryptionKey
|
||||||
|
)
|
||||||
|
|
||||||
|
const blob = new Blob([encryptedArrayBuffer])
|
||||||
|
|
||||||
|
setLoadingSpinnerDesc('Uploading zip file to file storage.')
|
||||||
|
const fileUrl = await uploadToFileStorage(blob, nostrController)
|
||||||
|
.then((url) => {
|
||||||
|
toast.success('zip file uploaded to file storage')
|
||||||
|
return url
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err in upload:>> ', err)
|
||||||
|
setIsLoading(false)
|
||||||
|
toast.error(err.message || 'Error occurred in uploading zip file')
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!fileUrl) return
|
||||||
|
|
||||||
|
// check if the current user is the last signer
|
||||||
|
const lastSignerIndex = meta.signers.length - 1
|
||||||
|
const signerIndex = meta.signers.indexOf(usersPubkey!)
|
||||||
|
const isLastSigner = signerIndex === lastSignerIndex
|
||||||
|
|
||||||
|
// if current user is the last signer, then send DMs to all signers and viewers
|
||||||
|
if (isLastSigner) {
|
||||||
|
const userSet = new Set<string>()
|
||||||
|
|
||||||
|
userSet.add(meta.submittedBy)
|
||||||
|
|
||||||
|
meta.signers.forEach((signer) => {
|
||||||
|
userSet.add(signer)
|
||||||
|
})
|
||||||
|
|
||||||
|
meta.viewers.forEach((viewer) => {
|
||||||
|
userSet.add(viewer)
|
||||||
|
})
|
||||||
|
|
||||||
|
const users = Array.from(userSet)
|
||||||
|
|
||||||
|
for (const user of users) {
|
||||||
|
// todo: execute in parallel
|
||||||
|
await sendDM(
|
||||||
|
fileUrl,
|
||||||
|
encryptionKey,
|
||||||
|
user,
|
||||||
|
nostrController,
|
||||||
|
false,
|
||||||
|
setAuthUrl
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// when user is the last signer and has sent
|
||||||
|
// the final document to all the signers and viewers
|
||||||
|
// update search params with updated file url and encryption key
|
||||||
|
setSearchParams({
|
||||||
|
file: fileUrl,
|
||||||
|
key: encryptionKey
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const nextSigner = meta.signers[signerIndex + 1]
|
||||||
|
await sendDM(
|
||||||
|
fileUrl,
|
||||||
|
encryptionKey,
|
||||||
|
nextSigner,
|
||||||
|
nostrController,
|
||||||
|
false,
|
||||||
|
setAuthUrl
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExport = async () => {
|
||||||
|
if (!meta || !zip || !usersPubkey) return
|
||||||
|
|
||||||
|
if (
|
||||||
|
!meta.signers.includes(usersPubkey) &&
|
||||||
|
!meta.viewers.includes(usersPubkey) &&
|
||||||
|
meta.submittedBy !== usersPubkey
|
||||||
|
)
|
||||||
|
return
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
setLoadingSpinnerDesc('Signing nostr event')
|
||||||
|
const event: EventTemplate = {
|
||||||
|
kind: 1,
|
||||||
|
content: '',
|
||||||
|
created_at: Math.floor(Date.now() / 1000), // Current timestamp
|
||||||
|
tags: []
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sign the event
|
||||||
|
const signedEvent = await nostrController.signEvent(event).catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
toast.error(err.message || 'Error occurred in signing nostr event')
|
||||||
|
setIsLoading(false) // Set loading state to false
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!signedEvent) return
|
||||||
|
|
||||||
|
const exportSignature = JSON.stringify(signedEvent, null, 2)
|
||||||
|
|
||||||
|
const stringifiedMeta = JSON.stringify(
|
||||||
|
{
|
||||||
|
...meta,
|
||||||
|
exportSignature
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2
|
||||||
|
)
|
||||||
|
zip.file('meta.json', stringifiedMeta)
|
||||||
|
|
||||||
|
const arrayBuffer = await zip
|
||||||
|
.generateAsync({
|
||||||
|
type: 'arraybuffer',
|
||||||
|
compression: 'DEFLATE',
|
||||||
|
compressionOptions: {
|
||||||
|
level: 6
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err in zip:>> ', err)
|
||||||
|
setIsLoading(false)
|
||||||
|
toast.error(err.message || 'Error occurred in generating zip file')
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!arrayBuffer) return
|
||||||
|
|
||||||
|
const blob = new Blob([arrayBuffer])
|
||||||
|
saveAs(blob, 'exported.zip')
|
||||||
|
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
navigate(appPrivateRoutes.verify)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (authUrl) {
|
||||||
|
return (
|
||||||
|
<iframe
|
||||||
|
title="Nsecbunker auth"
|
||||||
|
src={authUrl}
|
||||||
|
width="100%"
|
||||||
|
height="500px"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||||
|
<Box className={styles.container}>
|
||||||
|
{displayInput && (
|
||||||
|
<>
|
||||||
|
<Typography component="label" variant="h6">
|
||||||
|
Select sigit file
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box className={styles.inputBlock}>
|
||||||
|
<MuiFileInput
|
||||||
|
placeholder="Select file"
|
||||||
|
value={selectedFile}
|
||||||
|
onChange={(value) => setSelectedFile(value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{selectedFile && (
|
||||||
|
<TextField
|
||||||
|
label="Encryption Key"
|
||||||
|
variant="outlined"
|
||||||
|
value={encryptionKey}
|
||||||
|
onChange={(e) => setEncryptionKey(e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{selectedFile && encryptionKey && (
|
||||||
|
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<Button onClick={handleDecrypt} variant="contained">
|
||||||
|
Decrypt
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{meta && signedStatus === SignedStatus.Fully_Signed && (
|
||||||
|
<>
|
||||||
|
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
||||||
|
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<Button onClick={handleExport} variant="contained">
|
||||||
|
Export
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && (
|
||||||
|
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{meta && signedStatus === SignedStatus.User_Is_Next_Signer && (
|
||||||
|
<>
|
||||||
|
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
||||||
|
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<Button onClick={handleSign} variant="contained">
|
||||||
|
Sign
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type DisplayMetaProps = {
|
||||||
|
meta: Meta
|
||||||
|
nextSigner?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
||||||
|
const theme = useTheme()
|
||||||
|
|
||||||
|
const textColor = theme.palette.getContrastText(
|
||||||
|
theme.palette.background.paper
|
||||||
|
)
|
||||||
|
|
||||||
|
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||||
|
{}
|
||||||
|
)
|
||||||
|
const [users, setUsers] = useState<User[]>([])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
meta.signers.forEach((signer) => {
|
||||||
|
setUsers((prev) => {
|
||||||
|
if (prev.findIndex((user) => user.pubkey === signer) !== -1) return prev
|
||||||
|
|
||||||
|
return [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
pubkey: signer,
|
||||||
|
role: UserRole.signer
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
meta.viewers.forEach((viewer) => {
|
||||||
|
setUsers((prev) => {
|
||||||
|
if (prev.findIndex((user) => user.pubkey === viewer) !== -1) return prev
|
||||||
|
|
||||||
|
return [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
pubkey: viewer,
|
||||||
|
role: UserRole.viewer
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}, [meta])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const metadataController = new MetadataController()
|
||||||
|
|
||||||
|
metadataController
|
||||||
|
.findMetadata(meta.submittedBy)
|
||||||
|
.then((metadataEvent) => {
|
||||||
|
const metadataContent =
|
||||||
|
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||||
|
if (metadataContent)
|
||||||
|
setMetadata((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[meta.submittedBy]: metadataContent
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(
|
||||||
|
`error occurred in finding metadata for: ${meta.submittedBy}`,
|
||||||
|
err
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
users.forEach((user) => {
|
||||||
|
if (!(user.pubkey in metadata)) {
|
||||||
|
metadataController
|
||||||
|
.findMetadata(user.pubkey)
|
||||||
|
.then((metadataEvent) => {
|
||||||
|
const metadataContent =
|
||||||
|
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||||
|
if (metadataContent)
|
||||||
|
setMetadata((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[user.pubkey]: metadataContent
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(
|
||||||
|
`error occurred in finding metadata for: ${user.pubkey}`,
|
||||||
|
err
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [users, meta.submittedBy])
|
||||||
|
|
||||||
|
const imageLoadError = (event: any) => {
|
||||||
|
event.target.src = placeholderAvatar
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRoboImageUrl = (pubkey: string) => {
|
||||||
|
const npub = hexToNpub(pubkey)
|
||||||
|
return `https://robohash.org/${npub}.png?set=set3`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List
|
||||||
|
sx={{
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
marginTop: 2
|
||||||
|
}}
|
||||||
|
subheader={
|
||||||
|
<ListSubheader
|
||||||
|
sx={{
|
||||||
|
borderBottom: '0.5px solid',
|
||||||
|
paddingBottom: 1,
|
||||||
|
paddingTop: 1,
|
||||||
|
fontSize: '1.5rem'
|
||||||
|
}}
|
||||||
|
className={styles.subHeader}
|
||||||
|
>
|
||||||
|
Meta Info
|
||||||
|
</ListSubheader>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
gap: '15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Submitted By
|
||||||
|
</Typography>
|
||||||
|
<Box className={styles.user}>
|
||||||
|
<img
|
||||||
|
onError={imageLoadError}
|
||||||
|
src={
|
||||||
|
metadata[meta.submittedBy]?.picture ||
|
||||||
|
getRoboImageUrl(meta.submittedBy)
|
||||||
|
}
|
||||||
|
alt="Profile Image"
|
||||||
|
className="profile-image"
|
||||||
|
style={{
|
||||||
|
borderWidth: '3px',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderColor: `#${meta.submittedBy.substring(0, 6)}`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Link to={getProfileRoute(meta.submittedBy)}>
|
||||||
|
<Typography component="label" className={styles.name}>
|
||||||
|
{metadata[meta.submittedBy]?.display_name ||
|
||||||
|
metadata[meta.submittedBy]?.name ||
|
||||||
|
shorten(hexToNpub(meta.submittedBy))}
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Files
|
||||||
|
</Typography>
|
||||||
|
<ul>
|
||||||
|
{Object.keys(meta.fileHashes).map((file, index) => (
|
||||||
|
<li key={index} style={{ color: textColor }}>
|
||||||
|
{file}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem sx={{ marginTop: 1 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell className={styles.tableCell}>User</TableCell>
|
||||||
|
<TableCell className={styles.tableCell}>Role</TableCell>
|
||||||
|
<TableCell>Signed Status</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{users.map((user, index) => {
|
||||||
|
const userMeta = metadata[user.pubkey]
|
||||||
|
const npub = hexToNpub(user.pubkey)
|
||||||
|
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
|
||||||
|
|
||||||
|
let signedStatus = '-'
|
||||||
|
|
||||||
|
if (user.role === UserRole.signer) {
|
||||||
|
// check if user has signed the document
|
||||||
|
if (user.pubkey in meta.signedEvents) {
|
||||||
|
signedStatus = 'Signed'
|
||||||
|
}
|
||||||
|
// check if user is the next signer
|
||||||
|
else if (user.pubkey === nextSigner) {
|
||||||
|
signedStatus = 'Awaiting Signature'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow key={index}>
|
||||||
|
<TableCell className={styles.tableCell}>
|
||||||
|
<Box className={styles.user}>
|
||||||
|
<img
|
||||||
|
onError={imageLoadError}
|
||||||
|
src={userMeta?.picture || roboUrl}
|
||||||
|
alt="Profile Image"
|
||||||
|
className="profile-image"
|
||||||
|
style={{
|
||||||
|
borderWidth: '3px',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderColor: `#${user.pubkey.substring(0, 6)}`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Link to={getProfileRoute(user.pubkey)}>
|
||||||
|
<Typography component="label" className={styles.name}>
|
||||||
|
{userMeta?.display_name ||
|
||||||
|
userMeta?.name ||
|
||||||
|
shorten(npub)}
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className={styles.tableCell}>
|
||||||
|
{user.role}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{signedStatus}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
)
|
||||||
|
}
|
31
src/pages/sign/style.module.scss
Normal file
31
src/pages/sign/style.module.scss
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
@import '../../colors.scss';
|
||||||
|
|
||||||
|
.container {
|
||||||
|
color: $text-color;
|
||||||
|
|
||||||
|
.inputBlock {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableCell {
|
||||||
|
border-right: 1px solid rgba(224, 224, 224, 1);
|
||||||
|
|
||||||
|
.user {
|
||||||
|
@extend .user;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -4,168 +4,79 @@ import {
|
|||||||
List,
|
List,
|
||||||
ListItem,
|
ListItem,
|
||||||
ListSubheader,
|
ListSubheader,
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableRow,
|
|
||||||
TextField,
|
|
||||||
Typography,
|
Typography,
|
||||||
useTheme
|
useTheme
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import axios from 'axios'
|
|
||||||
import saveAs from 'file-saver'
|
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import _ from 'lodash'
|
|
||||||
import { MuiFileInput } from 'mui-file-input'
|
import { MuiFileInput } from 'mui-file-input'
|
||||||
import { EventTemplate } from 'nostr-tools'
|
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
import { Link } from 'react-router-dom'
|
||||||
import { Link, useSearchParams } from 'react-router-dom'
|
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
import { MetadataController, NostrController } from '../../controllers'
|
import { MetadataController } from '../../controllers'
|
||||||
import { getProfileRoute } from '../../routes'
|
import { getProfileRoute } from '../../routes'
|
||||||
import { State } from '../../store/rootReducer'
|
import { Meta, ProfileMetadata } from '../../types'
|
||||||
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
|
|
||||||
import {
|
import {
|
||||||
decryptArrayBuffer,
|
|
||||||
encryptArrayBuffer,
|
|
||||||
generateEncryptionKey,
|
|
||||||
getHash,
|
|
||||||
getRoboHashPicture,
|
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
parseJson,
|
parseJson,
|
||||||
readContentOfZipEntry,
|
readContentOfZipEntry,
|
||||||
sendDM,
|
shorten
|
||||||
shorten,
|
|
||||||
signEventForMetaFile,
|
|
||||||
uploadToFileStorage
|
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
|
import { Event, verifyEvent } from 'nostr-tools'
|
||||||
enum SignedStatus {
|
|
||||||
Fully_Signed,
|
|
||||||
User_Is_Next_Signer,
|
|
||||||
User_Is_Not_Next_Signer
|
|
||||||
}
|
|
||||||
|
|
||||||
export const VerifyPage = () => {
|
export const VerifyPage = () => {
|
||||||
const [searchParams] = useSearchParams()
|
const theme = useTheme()
|
||||||
|
|
||||||
const [displayInput, setDisplayInput] = useState(false)
|
const textColor = theme.palette.getContrastText(
|
||||||
|
theme.palette.background.paper
|
||||||
|
)
|
||||||
|
|
||||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [encryptionKey, setEncryptionKey] = useState('')
|
|
||||||
|
|
||||||
const [zip, setZip] = useState<JSZip>()
|
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
|
|
||||||
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||||
const [meta, setMeta] = useState<Meta | null>(null)
|
const [meta, setMeta] = useState<Meta | null>(null)
|
||||||
const [signedStatus, setSignedStatus] = useState<SignedStatus>()
|
|
||||||
|
|
||||||
const [nextSinger, setNextSinger] = useState<string>()
|
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||||
|
{}
|
||||||
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
)
|
||||||
|
|
||||||
const [authUrl, setAuthUrl] = useState<string>()
|
|
||||||
const nostrController = NostrController.getInstance()
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (meta) {
|
if (meta) {
|
||||||
setDisplayInput(false)
|
const metadataController = new MetadataController()
|
||||||
|
|
||||||
// get list of users who have signed
|
const users = [meta.submittedBy, ...meta.signers, ...meta.viewers]
|
||||||
const signedBy = Object.keys(meta.signedEvents)
|
|
||||||
|
|
||||||
if (meta.signers.length > 0) {
|
users.forEach((user) => {
|
||||||
// check if all signers have signed then its fully signed
|
if (!(user in metadata)) {
|
||||||
if (meta.signers.every((signer) => signedBy.includes(signer))) {
|
metadataController
|
||||||
setSignedStatus(SignedStatus.Fully_Signed)
|
.findMetadata(user)
|
||||||
} else {
|
.then((metadataEvent) => {
|
||||||
for (const signer of meta.signers) {
|
const metadataContent =
|
||||||
if (!signedBy.includes(signer)) {
|
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||||
setNextSinger(signer)
|
if (metadataContent)
|
||||||
|
setMetadata((prev) => ({
|
||||||
if (signer === usersPubkey) {
|
...prev,
|
||||||
// logged in user is the next signer
|
[user]: metadataContent
|
||||||
setSignedStatus(SignedStatus.User_Is_Next_Signer)
|
}))
|
||||||
} else {
|
})
|
||||||
setSignedStatus(SignedStatus.User_Is_Not_Next_Signer)
|
.catch((err) => {
|
||||||
}
|
console.error(
|
||||||
|
`error occurred in finding metadata for: ${user}`,
|
||||||
break
|
err
|
||||||
}
|
)
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
// there's no signer just viewers. So its fully signed
|
|
||||||
setSignedStatus(SignedStatus.Fully_Signed)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [meta, usersPubkey])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fileUrl = searchParams.get('file')
|
|
||||||
const key = searchParams.get('key')
|
|
||||||
|
|
||||||
if (fileUrl && key) {
|
|
||||||
setIsLoading(true)
|
|
||||||
setLoadingSpinnerDesc('Fetching file from file server')
|
|
||||||
|
|
||||||
axios
|
|
||||||
.get(fileUrl, {
|
|
||||||
responseType: 'arraybuffer'
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const fileName = fileUrl.split('/').pop()
|
|
||||||
const file = new File([res.data], fileName!)
|
|
||||||
|
|
||||||
decrypt(file, key).then((arrayBuffer) => {
|
|
||||||
if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(`error occurred in getting file from ${fileUrl}`, err)
|
|
||||||
toast.error(
|
|
||||||
err.message || `error occurred in getting file from ${fileUrl}`
|
|
||||||
)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsLoading(false)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
setIsLoading(false)
|
|
||||||
setDisplayInput(true)
|
|
||||||
}
|
|
||||||
}, [searchParams])
|
|
||||||
|
|
||||||
const decrypt = async (file: File, key: string) => {
|
|
||||||
setLoadingSpinnerDesc('Decrypting file')
|
|
||||||
|
|
||||||
const encryptedArrayBuffer = await file.arrayBuffer()
|
|
||||||
|
|
||||||
const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err in decryption:>> ', err)
|
|
||||||
toast.error(err.message || 'An error occurred in decrypting file.')
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsLoading(false)
|
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
}, [meta])
|
||||||
|
|
||||||
return arrayBuffer
|
const handleVerify = async () => {
|
||||||
}
|
if (!selectedFile) return
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
|
const zip = await JSZip.loadAsync(selectedFile).catch((err) => {
|
||||||
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Parsing zip file')
|
|
||||||
|
|
||||||
const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
|
|
||||||
console.log('err in loading zip file :>> ', err)
|
console.log('err in loading zip file :>> ', err)
|
||||||
toast.error(err.message || 'An error occurred in loading zip file.')
|
toast.error(err.message || 'An error occurred in loading zip file.')
|
||||||
return null
|
return null
|
||||||
@ -173,8 +84,6 @@ export const VerifyPage = () => {
|
|||||||
|
|
||||||
if (!zip) return
|
if (!zip) return
|
||||||
|
|
||||||
setZip(zip)
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Parsing meta.json')
|
setLoadingSpinnerDesc('Parsing meta.json')
|
||||||
|
|
||||||
const metaFileContent = await readContentOfZipEntry(
|
const metaFileContent = await readContentOfZipEntry(
|
||||||
@ -200,578 +109,222 @@ export const VerifyPage = () => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
setMeta(parsedMetaJson)
|
setMeta(parsedMetaJson)
|
||||||
}
|
|
||||||
|
|
||||||
const handleDecrypt = async () => {
|
|
||||||
if (!selectedFile || !encryptionKey) return
|
|
||||||
|
|
||||||
setIsLoading(true)
|
|
||||||
const arrayBuffer = await decrypt(selectedFile, encryptionKey)
|
|
||||||
|
|
||||||
if (!arrayBuffer) return
|
|
||||||
|
|
||||||
handleDecryptedArrayBuffer(arrayBuffer)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSign = async () => {
|
|
||||||
if (!zip || !meta) return
|
|
||||||
|
|
||||||
setIsLoading(true)
|
|
||||||
setLoadingSpinnerDesc('parsing hashes.json file')
|
|
||||||
|
|
||||||
const hashesFileContent = await readContentOfZipEntry(
|
|
||||||
zip,
|
|
||||||
'hashes.json',
|
|
||||||
'string'
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!hashesFileContent) {
|
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let hashes = await parseJson(hashesFileContent).catch((err) => {
|
|
||||||
console.log('err in parsing the content of hashes.json :>> ', err)
|
|
||||||
toast.error(
|
|
||||||
err.message || 'error occurred in parsing the content of hashes.json'
|
|
||||||
)
|
|
||||||
setIsLoading(false)
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!hashes) return
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Generating hashes for files')
|
|
||||||
|
|
||||||
const fileHashes: { [key: string]: string } = {}
|
|
||||||
const fileNames = Object.keys(meta.fileHashes)
|
|
||||||
|
|
||||||
// generate hashes for all entries in files folder of zipArchive
|
|
||||||
// these hashes can be used to verify the originality of files
|
|
||||||
for (const fileName of fileNames) {
|
|
||||||
const filePath = `files/${fileName}`
|
|
||||||
const arrayBuffer = await readContentOfZipEntry(
|
|
||||||
zip,
|
|
||||||
filePath,
|
|
||||||
'arraybuffer'
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!arrayBuffer) {
|
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const hash = await getHash(arrayBuffer)
|
|
||||||
if (!hash) {
|
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
fileHashes[fileName] = hash
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Signing nostr event')
|
|
||||||
const signedEvent = await signEventForMetaFile(
|
|
||||||
fileHashes,
|
|
||||||
nostrController,
|
|
||||||
setIsLoading
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!signedEvent) return
|
|
||||||
|
|
||||||
const metaCopy = _.cloneDeep(meta)
|
|
||||||
|
|
||||||
metaCopy.signedEvents = {
|
|
||||||
...metaCopy.signedEvents,
|
|
||||||
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
|
|
||||||
}
|
|
||||||
|
|
||||||
const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
|
|
||||||
zip.file('meta.json', stringifiedMeta)
|
|
||||||
|
|
||||||
const metaHash = await getHash(stringifiedMeta)
|
|
||||||
if (!metaHash) return
|
|
||||||
|
|
||||||
hashes = {
|
|
||||||
...hashes,
|
|
||||||
[usersPubkey!]: metaHash
|
|
||||||
}
|
|
||||||
|
|
||||||
zip.file('hashes.json', JSON.stringify(hashes, null, 2))
|
|
||||||
|
|
||||||
const arrayBuffer = await zip
|
|
||||||
.generateAsync({
|
|
||||||
type: 'arraybuffer',
|
|
||||||
compression: 'DEFLATE',
|
|
||||||
compressionOptions: {
|
|
||||||
level: 6
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err in zip:>> ', err)
|
|
||||||
setIsLoading(false)
|
|
||||||
toast.error(err.message || 'Error occurred in generating zip file')
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!arrayBuffer) return
|
|
||||||
|
|
||||||
const encryptionKey = await generateEncryptionKey()
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Encrypting zip file')
|
|
||||||
const encryptedArrayBuffer = await encryptArrayBuffer(
|
|
||||||
arrayBuffer,
|
|
||||||
encryptionKey
|
|
||||||
)
|
|
||||||
|
|
||||||
const blob = new Blob([encryptedArrayBuffer])
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Uploading zip file to file storage.')
|
|
||||||
const fileUrl = await uploadToFileStorage(blob, nostrController)
|
|
||||||
.then((url) => {
|
|
||||||
toast.success('zip file uploaded to file storage')
|
|
||||||
return url
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err in upload:>> ', err)
|
|
||||||
setIsLoading(false)
|
|
||||||
toast.error(err.message || 'Error occurred in uploading zip file')
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!fileUrl) return
|
|
||||||
|
|
||||||
// check if the current user is the last signer
|
|
||||||
const lastSignerIndex = meta.signers.length - 1
|
|
||||||
const signerIndex = meta.signers.indexOf(usersPubkey!)
|
|
||||||
const isLastSigner = signerIndex === lastSignerIndex
|
|
||||||
|
|
||||||
// if current user is the last signer, then send DMs to all signers and viewers
|
|
||||||
if (isLastSigner) {
|
|
||||||
const userSet = new Set<string>()
|
|
||||||
|
|
||||||
userSet.add(meta.submittedBy)
|
|
||||||
|
|
||||||
meta.signers.forEach((signer) => {
|
|
||||||
userSet.add(signer)
|
|
||||||
})
|
|
||||||
|
|
||||||
meta.viewers.forEach((viewer) => {
|
|
||||||
userSet.add(viewer)
|
|
||||||
})
|
|
||||||
|
|
||||||
const users = Array.from(userSet)
|
|
||||||
|
|
||||||
for (const user of users) {
|
|
||||||
// todo: execute in parallel
|
|
||||||
await sendDM(
|
|
||||||
fileUrl,
|
|
||||||
encryptionKey,
|
|
||||||
user,
|
|
||||||
nostrController,
|
|
||||||
false,
|
|
||||||
setAuthUrl
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const nextSigner = meta.signers[signerIndex + 1]
|
|
||||||
await sendDM(
|
|
||||||
fileUrl,
|
|
||||||
encryptionKey,
|
|
||||||
nextSigner,
|
|
||||||
nostrController,
|
|
||||||
false,
|
|
||||||
setAuthUrl
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
const imageLoadError = (event: any) => {
|
||||||
*
|
event.target.src = placeholderAvatar
|
||||||
* @returns exported.zip including signed files and meta info (about signers and viewers)
|
|
||||||
*/
|
|
||||||
const handleExport = async () => {
|
|
||||||
if (!meta || !zip || !usersPubkey) return
|
|
||||||
|
|
||||||
if (
|
|
||||||
!meta.signers.includes(usersPubkey) &&
|
|
||||||
!meta.viewers.includes(usersPubkey) &&
|
|
||||||
meta.submittedBy !== usersPubkey
|
|
||||||
)
|
|
||||||
return
|
|
||||||
|
|
||||||
setIsLoading(true)
|
|
||||||
setLoadingSpinnerDesc('Signing nostr event')
|
|
||||||
const event: EventTemplate = {
|
|
||||||
kind: 1,
|
|
||||||
content: '',
|
|
||||||
created_at: Math.floor(Date.now() / 1000), // Current timestamp
|
|
||||||
tags: []
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sign the event
|
|
||||||
const signedEvent = await nostrController.signEvent(event).catch((err) => {
|
|
||||||
console.error(err)
|
|
||||||
toast.error(err.message || 'Error occurred in signing nostr event')
|
|
||||||
setIsLoading(false) // Set loading state to false
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!signedEvent) return
|
|
||||||
|
|
||||||
const exportSignature = JSON.stringify(signedEvent, null, 2)
|
|
||||||
|
|
||||||
const stringifiedMeta = JSON.stringify(
|
|
||||||
{
|
|
||||||
...meta,
|
|
||||||
exportSignature
|
|
||||||
},
|
|
||||||
null,
|
|
||||||
2
|
|
||||||
)
|
|
||||||
zip.file('meta.json', stringifiedMeta)
|
|
||||||
|
|
||||||
const arrayBuffer = await zip
|
|
||||||
.generateAsync({
|
|
||||||
type: 'arraybuffer',
|
|
||||||
compression: 'DEFLATE',
|
|
||||||
compressionOptions: {
|
|
||||||
level: 6
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log('err in zip:>> ', err)
|
|
||||||
setIsLoading(false)
|
|
||||||
toast.error(err.message || 'Error occurred in generating zip file')
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!arrayBuffer) return
|
|
||||||
|
|
||||||
const blob = new Blob([arrayBuffer])
|
|
||||||
saveAs(blob, 'exported.zip')
|
|
||||||
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (authUrl) {
|
|
||||||
return (
|
|
||||||
<iframe
|
|
||||||
title="Nsecbunker auth"
|
|
||||||
src={authUrl}
|
|
||||||
width="100%"
|
|
||||||
height="500px"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
|
||||||
<Box className={styles.container}>
|
|
||||||
{displayInput && (
|
|
||||||
<>
|
|
||||||
<Typography component="label" variant="h6">
|
|
||||||
Select sigit file
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box className={styles.inputBlock}>
|
|
||||||
<MuiFileInput
|
|
||||||
placeholder="Select file"
|
|
||||||
value={selectedFile}
|
|
||||||
onChange={(value) => setSelectedFile(value)}
|
|
||||||
InputProps={{
|
|
||||||
inputProps: {
|
|
||||||
accept: '.zip'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{selectedFile && (
|
|
||||||
<TextField
|
|
||||||
label="Encryption Key"
|
|
||||||
variant="outlined"
|
|
||||||
value={encryptionKey}
|
|
||||||
onChange={(e) => setEncryptionKey(e.target.value)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{selectedFile && encryptionKey && (
|
|
||||||
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
|
|
||||||
<Button onClick={handleDecrypt} variant="contained">
|
|
||||||
Decrypt
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{meta && signedStatus === SignedStatus.Fully_Signed && (
|
|
||||||
<>
|
|
||||||
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
|
||||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
|
||||||
<Button onClick={handleExport} variant="contained">
|
|
||||||
Export
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && (
|
|
||||||
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{meta && signedStatus === SignedStatus.User_Is_Next_Signer && (
|
|
||||||
<>
|
|
||||||
<DisplayMeta meta={meta} nextSigner={nextSinger} />
|
|
||||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
|
||||||
<Button onClick={handleSign} variant="contained">
|
|
||||||
Sign
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
type DisplayMetaProps = {
|
|
||||||
meta: Meta
|
|
||||||
nextSigner?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
|
||||||
const theme = useTheme()
|
|
||||||
|
|
||||||
const textColor = theme.palette.getContrastText(
|
|
||||||
theme.palette.background.paper
|
|
||||||
)
|
|
||||||
|
|
||||||
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
|
||||||
{}
|
|
||||||
)
|
|
||||||
const [users, setUsers] = useState<User[]>([])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
meta.signers.forEach((signer) => {
|
|
||||||
setUsers((prev) => {
|
|
||||||
if (prev.findIndex((user) => user.pubkey === signer) !== -1) return prev
|
|
||||||
|
|
||||||
return [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
pubkey: signer,
|
|
||||||
role: UserRole.signer
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
meta.viewers.forEach((viewer) => {
|
|
||||||
setUsers((prev) => {
|
|
||||||
if (prev.findIndex((user) => user.pubkey === viewer) !== -1) return prev
|
|
||||||
|
|
||||||
return [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
pubkey: viewer,
|
|
||||||
role: UserRole.viewer
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}, [meta])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const metadataController = new MetadataController()
|
|
||||||
|
|
||||||
metadataController
|
|
||||||
.findMetadata(meta.submittedBy)
|
|
||||||
.then((metadataEvent) => {
|
|
||||||
const metadataContent =
|
|
||||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
|
||||||
if (metadataContent)
|
|
||||||
setMetadata((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[meta.submittedBy]: metadataContent
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(
|
|
||||||
`error occurred in finding metadata for: ${meta.submittedBy}`,
|
|
||||||
err
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
users.forEach((user) => {
|
|
||||||
if (!(user.pubkey in metadata)) {
|
|
||||||
metadataController
|
|
||||||
.findMetadata(user.pubkey)
|
|
||||||
.then((metadataEvent) => {
|
|
||||||
const metadataContent =
|
|
||||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
|
||||||
if (metadataContent)
|
|
||||||
setMetadata((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[user.pubkey]: metadataContent
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(
|
|
||||||
`error occurred in finding metadata for: ${user.pubkey}`,
|
|
||||||
err
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, [users, meta.submittedBy])
|
|
||||||
|
|
||||||
const imageLoadError = (event: any, pubkey: string) => {
|
|
||||||
const npub = hexToNpub(pubkey)
|
|
||||||
event.target.src = npub
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const getRoboImageUrl = (pubkey: string) => {
|
const getRoboImageUrl = (pubkey: string) => {
|
||||||
return getRoboHashPicture(pubkey)
|
return getRoboHashPicture(pubkey)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
const displayUser = (pubkey: string, verifySignature = false) => {
|
||||||
<List
|
const profile = metadata[pubkey]
|
||||||
sx={{
|
|
||||||
bgcolor: 'background.paper',
|
let isValidSignature = false
|
||||||
marginTop: 2
|
|
||||||
}}
|
if (verifySignature) {
|
||||||
subheader={
|
const signedEventString = meta ? meta.signedEvents[pubkey] : null
|
||||||
<ListSubheader
|
if (signedEventString) {
|
||||||
sx={{
|
try {
|
||||||
borderBottom: '0.5px solid',
|
const signedEvent = JSON.parse(signedEventString)
|
||||||
paddingBottom: 1,
|
isValidSignature = verifyEvent(signedEvent)
|
||||||
paddingTop: 1,
|
} catch (error) {
|
||||||
fontSize: '1.5rem'
|
console.error(
|
||||||
}}
|
`An error occurred in parsing and verifying the signature event for ${pubkey}`,
|
||||||
className={styles.subHeader}
|
error
|
||||||
>
|
)
|
||||||
Meta Info
|
}
|
||||||
</ListSubheader>
|
|
||||||
}
|
}
|
||||||
>
|
}
|
||||||
<ListItem
|
|
||||||
sx={{
|
return (
|
||||||
marginTop: 1,
|
<Box className={styles.user}>
|
||||||
gap: '15px'
|
<img
|
||||||
}}
|
onError={imageLoadError}
|
||||||
>
|
src={profile?.picture || getRoboImageUrl(pubkey)}
|
||||||
<Typography variant="h6" sx={{ color: textColor }}>
|
alt="Profile Image"
|
||||||
Submitted By
|
className="profile-image"
|
||||||
</Typography>
|
style={{
|
||||||
<Box className={styles.user}>
|
borderWidth: '3px',
|
||||||
<img
|
borderStyle: 'solid',
|
||||||
onError={(event) => {imageLoadError(event, meta.submittedBy)}}
|
borderColor: `#${pubkey.substring(0, 6)}`
|
||||||
src={
|
}}
|
||||||
metadata[meta.submittedBy]?.picture ||
|
/>
|
||||||
getRoboImageUrl(meta.submittedBy)
|
<Link to={getProfileRoute(pubkey)}>
|
||||||
}
|
<Typography component="label" className={styles.name}>
|
||||||
alt="Profile Image"
|
{profile?.display_name ||
|
||||||
className="profile-image"
|
profile?.name ||
|
||||||
style={{
|
shorten(hexToNpub(pubkey))}
|
||||||
borderWidth: '3px',
|
</Typography>
|
||||||
borderStyle: 'solid',
|
</Link>
|
||||||
borderColor: `#${meta.submittedBy.substring(0, 6)}`
|
{verifySignature && (
|
||||||
}}
|
<Typography component="label">
|
||||||
/>
|
({isValidSignature ? 'Valid' : 'Not Valid'} Signature)
|
||||||
<Link to={getProfileRoute(meta.submittedBy)}>
|
</Typography>
|
||||||
<Typography component="label" className={styles.name}>
|
)}
|
||||||
{metadata[meta.submittedBy]?.display_name ||
|
</Box>
|
||||||
metadata[meta.submittedBy]?.name ||
|
)
|
||||||
shorten(hexToNpub(meta.submittedBy))}
|
}
|
||||||
|
|
||||||
|
const displayExportedBy = () => {
|
||||||
|
if (!meta || !meta.exportSignature) return null
|
||||||
|
|
||||||
|
const exportSignatureString = meta.exportSignature
|
||||||
|
|
||||||
|
try {
|
||||||
|
const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
|
||||||
|
|
||||||
|
if (verifyEvent(exportSignatureEvent)) {
|
||||||
|
return displayUser(exportSignatureEvent.pubkey)
|
||||||
|
} else {
|
||||||
|
toast.error(`Invalid export signature!`)
|
||||||
|
return (
|
||||||
|
<Typography component="label" sx={{ color: 'red' }}>
|
||||||
|
Invalid export signature
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`An error occurred wile parsing exportSignature`, error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||||
|
<Box className={styles.container}>
|
||||||
|
{!meta && (
|
||||||
|
<>
|
||||||
|
<Typography component="label" variant="h6">
|
||||||
|
Select exported zip file
|
||||||
</Typography>
|
</Typography>
|
||||||
</Link>
|
|
||||||
</Box>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem
|
|
||||||
sx={{
|
|
||||||
marginTop: 1,
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'flex-start'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="h6" sx={{ color: textColor }}>
|
|
||||||
Files
|
|
||||||
</Typography>
|
|
||||||
<ul>
|
|
||||||
{Object.keys(meta.fileHashes).map((file, index) => (
|
|
||||||
<li key={index} style={{ color: textColor }}>
|
|
||||||
{file}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem sx={{ marginTop: 1 }}>
|
|
||||||
<Table>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell className={styles.tableCell}>User</TableCell>
|
|
||||||
<TableCell className={styles.tableCell}>Role</TableCell>
|
|
||||||
<TableCell>Signed Status</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{users.map((user, index) => {
|
|
||||||
const userMeta = metadata[user.pubkey]
|
|
||||||
const npub = hexToNpub(user.pubkey)
|
|
||||||
const roboUrl = getRoboHashPicture(npub)
|
|
||||||
|
|
||||||
let signedStatus = '-'
|
<MuiFileInput
|
||||||
|
placeholder="Select file"
|
||||||
|
value={selectedFile}
|
||||||
|
onChange={(value) => setSelectedFile(value)}
|
||||||
|
InputProps={{
|
||||||
|
inputProps: {
|
||||||
|
accept: '.zip'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
if (user.role === UserRole.signer) {
|
{selectedFile && (
|
||||||
// check if user has signed the document
|
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
|
||||||
if (user.pubkey in meta.signedEvents) {
|
<Button onClick={handleVerify} variant="contained">
|
||||||
signedStatus = 'Signed'
|
Verify
|
||||||
}
|
</Button>
|
||||||
// check if user is the next signer
|
</Box>
|
||||||
else if (user.pubkey === nextSigner) {
|
)}
|
||||||
signedStatus = 'Awaiting Signature'
|
</>
|
||||||
}
|
)}
|
||||||
|
|
||||||
|
{meta && (
|
||||||
|
<>
|
||||||
|
<List
|
||||||
|
sx={{
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
marginTop: 2
|
||||||
|
}}
|
||||||
|
subheader={
|
||||||
|
<ListSubheader className={styles.subHeader}>
|
||||||
|
Meta Info
|
||||||
|
</ListSubheader>
|
||||||
}
|
}
|
||||||
|
>
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
gap: '15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Submitted By
|
||||||
|
</Typography>
|
||||||
|
{displayUser(meta.submittedBy)}
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
return (
|
<ListItem
|
||||||
<TableRow key={index}>
|
sx={{
|
||||||
<TableCell className={styles.tableCell}>
|
marginTop: 1,
|
||||||
<Box className={styles.user}>
|
gap: '15px'
|
||||||
<img
|
}}
|
||||||
onError={(event) => {imageLoadError(event, meta.submittedBy)}}
|
>
|
||||||
src={userMeta?.picture || roboUrl}
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
alt="Profile Image"
|
Exported By
|
||||||
className="profile-image"
|
</Typography>
|
||||||
style={{
|
{displayExportedBy()}
|
||||||
borderWidth: '3px',
|
</ListItem>
|
||||||
borderStyle: 'solid',
|
|
||||||
borderColor: `#${user.pubkey.substring(0, 6)}`
|
{meta.signers.length > 0 && (
|
||||||
}}
|
<ListItem
|
||||||
/>
|
sx={{
|
||||||
<Link to={getProfileRoute(user.pubkey)}>
|
marginTop: 1,
|
||||||
<Typography component="label" className={styles.name}>
|
flexDirection: 'column',
|
||||||
{userMeta?.display_name ||
|
alignItems: 'flex-start'
|
||||||
userMeta?.name ||
|
}}
|
||||||
shorten(npub)}
|
>
|
||||||
</Typography>
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
</Link>
|
Signers
|
||||||
</Box>
|
</Typography>
|
||||||
</TableCell>
|
<ul className={styles.usersList}>
|
||||||
<TableCell className={styles.tableCell}>
|
{meta.signers.map((signer) => (
|
||||||
{user.role}
|
<li key={signer} style={{ color: textColor }}>
|
||||||
</TableCell>
|
{displayUser(signer, true)}
|
||||||
<TableCell>{signedStatus}</TableCell>
|
</li>
|
||||||
</TableRow>
|
))}
|
||||||
)
|
</ul>
|
||||||
})}
|
</ListItem>
|
||||||
</TableBody>
|
)}
|
||||||
</Table>
|
|
||||||
</ListItem>
|
{meta.viewers.length > 0 && (
|
||||||
</List>
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Viewers
|
||||||
|
</Typography>
|
||||||
|
<ul className={styles.usersList}>
|
||||||
|
{meta.viewers.map((viewer) => (
|
||||||
|
<li key={viewer} style={{ color: textColor }}>
|
||||||
|
{displayUser(viewer)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</ListItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ListItem
|
||||||
|
sx={{
|
||||||
|
marginTop: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6" sx={{ color: textColor }}>
|
||||||
|
Files
|
||||||
|
</Typography>
|
||||||
|
<ul>
|
||||||
|
{Object.keys(meta.fileHashes).map((file, index) => (
|
||||||
|
<li key={index} style={{ color: textColor }}>
|
||||||
|
{file}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -2,12 +2,20 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.inputBlock {
|
.subHeader {
|
||||||
position: relative;
|
border-bottom: 0.5px solid;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usersList {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 25px;
|
gap: 10px;
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user {
|
.user {
|
||||||
|
@ -4,11 +4,13 @@ import { LandingPage } from '../pages/landing/LandingPage'
|
|||||||
import { Login } from '../pages/login'
|
import { Login } from '../pages/login'
|
||||||
import { ProfilePage } from '../pages/profile'
|
import { ProfilePage } from '../pages/profile'
|
||||||
import { hexToNpub } from '../utils'
|
import { hexToNpub } from '../utils'
|
||||||
|
import { SignPage } from '../pages/sign'
|
||||||
import { VerifyPage } from '../pages/verify'
|
import { VerifyPage } from '../pages/verify'
|
||||||
|
|
||||||
export const appPrivateRoutes = {
|
export const appPrivateRoutes = {
|
||||||
homePage: '/',
|
homePage: '/',
|
||||||
create: '/create',
|
create: '/create',
|
||||||
|
sign: '/sign',
|
||||||
verify: '/verify'
|
verify: '/verify'
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -48,6 +50,10 @@ export const privateRoutes = [
|
|||||||
path: appPrivateRoutes.create,
|
path: appPrivateRoutes.create,
|
||||||
element: <CreatePage />
|
element: <CreatePage />
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: appPrivateRoutes.sign,
|
||||||
|
element: <SignPage />
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: appPrivateRoutes.verify,
|
path: appPrivateRoutes.verify,
|
||||||
element: <VerifyPage />
|
element: <VerifyPage />
|
||||||
|
@ -14,4 +14,5 @@ export interface Meta {
|
|||||||
fileHashes: { [key: string]: string }
|
fileHashes: { [key: string]: string }
|
||||||
submittedBy: string
|
submittedBy: string
|
||||||
signedEvents: { [key: string]: string }
|
signedEvents: { [key: string]: string }
|
||||||
|
exportSignature?: string
|
||||||
}
|
}
|
||||||
|
@ -76,7 +76,7 @@ export const sendDM = async (
|
|||||||
: 'You have received a signed document.'
|
: 'You have received a signed document.'
|
||||||
|
|
||||||
const decryptionUrl = `${window.location.origin}/#${
|
const decryptionUrl = `${window.location.origin}/#${
|
||||||
appPrivateRoutes.verify
|
appPrivateRoutes.sign
|
||||||
}?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent(
|
}?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent(
|
||||||
encryptionKey
|
encryptionKey
|
||||||
)}`
|
)}`
|
||||||
|
@ -17,6 +17,11 @@ export const readContentOfZipEntry = async <T extends OutputType>(
|
|||||||
// Get the zip entry corresponding to the specified file path
|
// Get the zip entry corresponding to the specified file path
|
||||||
const zipEntry = zip.files[filePath]
|
const zipEntry = zip.files[filePath]
|
||||||
|
|
||||||
|
if (!zipEntry) {
|
||||||
|
toast.error(`Couldn't find file in zip archive at ${filePath}`)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
// Read the content of the zip entry asynchronously
|
// Read the content of the zip entry asynchronously
|
||||||
const fileContent = await zipEntry.async(outputType).catch((err) => {
|
const fileContent = await zipEntry.async(outputType).catch((err) => {
|
||||||
// Handle any errors that occur during the read operation
|
// Handle any errors that occur during the read operation
|
||||||
|
Loading…
Reference in New Issue
Block a user