sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

refactor: signing index page

Browse Source
This commit is contained in:
eugene 2024-08-02 11:40:00 +01:00
parent a1cb6c6caf
commit e1808726aa
1 changed files with 156 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

342
src/pages/sign/index.tsx
View File

@ -16,10 +16,10 @@ import { State } from '../../store/rootReducer'
import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
import {
decryptArrayBuffer,
encryptArrayBuffer,
encryptArrayBuffer, extractMarksFromSignedMeta,
extractZipUrlAndEncryptionKey,
generateEncryptionKey,
generateKeysFile,
generateKeysFile, getFilesWithHashes,
getHash,
hexToNpub,
isOnline, loadZip,
@ -35,10 +35,15 @@ import { DisplayMeta } from './internal/displayMeta'
import styles from './style.module.scss'
import { PdfFile } from '../../types/drawing.ts'
import { convertToPdfFile } from '../../utils/pdf.ts'
import PdfView from '../../components/PDFView'
import { CurrentUserMark, Mark, MarkConfig } from '../../types/mark.ts'
import MarkFormField from './MarkFormField.tsx'
// import PdfView from '../../components/PDFView'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { getLastSignersSig } from '../../utils/sign.ts'
import {
filterMarksByPubkey,
getCurrentUserMarks,
isCurrentUserMarksComplete, updateMarks
} from '../../utils/mark.ts'
import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
enum SignedStatus {
Fully_Signed,
User_Is_Next_Signer,
@ -95,10 +100,8 @@ export const SignPage = () => {
const [authUrl, setAuthUrl] = useState<string>()
const nostrController = NostrController.getInstance()
const [currentUserMark, setCurrentUserMark] = useState<CurrentUserMark | null>(null);
const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>([]);
const [currentMarkValue, setCurrentMarkValue] = useState<string>('');
const [isMarksCompleted, setIsMarksCompleted] = useState(false);
const [isReadyToSign, setIsReadyToSign] = useState(false);
useEffect(() => {
if (signers.length > 0) {
@ -191,22 +194,13 @@ export const SignPage = () => {
setSubmittedBy(createSignatureEvent.pubkey)
setMarks(createSignatureContent.markConfig);
console.log('createSignatureContent markConfig', createSignatureContent);
if (usersPubkey) {
console.log('this runs behind users pubkey');
const curMarks = getCurrentUserMarks(createSignatureContent.markConfig, usersPubkey)
if (curMarks.length === 0) {
setIsMarksCompleted(true)
} else {
const nextMark = findNextIncompleteMark(curMarks)
if (!nextMark) {
setIsMarksCompleted(true)
} else {
setCurrentUserMark(nextMark)
setIsMarksCompleted(false)
}
setCurrentUserMarks(curMarks)
}
const metaMarks = filterMarksByPubkey(createSignatureContent.markConfig, usersPubkey!)
const signedMarks = extractMarksFromSignedMeta(meta)
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks);
setCurrentUserMarks(currentUserMarks);
// setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
}
setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
@ -218,6 +212,7 @@ export const SignPage = () => {
}, [meta])
useEffect(() => {
// online mode - from create and home page views
if (metaInNavState) {
const processSigit = async () => {
setIsLoading(true)
@ -239,7 +234,7 @@ export const SignPage = () => {
.then((res) => {
handleArrayBufferFromBlossom(res.data, encryptionKey)
setMeta(metaInNavState)
console.log('meta in nav state: ', metaInNavState)
console.log('meta in nav state runs.')
})
.catch((err) => {
console.error(`error occurred in getting file from ${zipUrl}`, err)
@ -330,6 +325,11 @@ export const SignPage = () => {
setCurrentFileHashes(fileHashes)
}
const setUpdatedMarks = (markToUpdate: Mark) => {
const updatedMarks = updateMarks(marks, markToUpdate)
setMarks(updatedMarks)
}
const parseKeysJson = async (zip: JSZip) => {
const keysFileContent = await readContentOfZipEntry(
zip,
@ -540,56 +540,41 @@ export const SignPage = () => {
return currentUserMarks.map(( { mark }: CurrentUserMark) => mark);
}
const handleMarkClick = (id: number) => {
const nextMark = currentUserMarks.find(mark => mark.mark.id === id)
setCurrentUserMark(nextMark!)
setCurrentMarkValue(nextMark?.mark.value || "")
}
// const handleMarkClick = (id: number) => {
// const nextMark = currentUserMarks.find(mark => mark.mark.id === id)
// setCurrentUserMark(nextMark!)
// setCurrentMarkValue(nextMark?.mark.value || "")
// }
const getMarkConfigPerUser = (markConfig: MarkConfig) => {
if (!usersPubkey) return;
return markConfig[hexToNpub(usersPubkey)];
}
// const getMarkConfigPerUser = (markConfig: MarkConfig) => {
// if (!usersPubkey) return;
// return markConfig[hexToNpub(usersPubkey)];
// }
const handleChange = (event: any) => setCurrentMarkValue(event.target.value);
const handleSubmit = (event: any) => {
event.preventDefault();
if (!currentMarkValue || !currentUserMark) return;
const curMark = {
...currentUserMark.mark,
value: currentMarkValue
};
const indexToUpdate = marks.findIndex(mark => mark.id === curMark.id);
const updatedMarks: Mark[] = [
...marks.slice(0, indexToUpdate),
curMark,
...marks.slice(indexToUpdate + 1)
];
setMarks(updatedMarks)
setCurrentMarkValue("")
const updatedCurUserMarks = getCurrentUserMarks(updatedMarks, usersPubkey!)
console.log('updatedCurUserMarks: ', updatedCurUserMarks)
setCurrentUserMarks(updatedCurUserMarks)
const nextMark = findNextIncompleteMark(updatedCurUserMarks)
console.log('next mark: ', nextMark)
if (!nextMark) {
setCurrentUserMark(null)
setIsMarksCompleted(true)
} else {
setCurrentUserMark(nextMark)
setIsMarksCompleted(false)
}
}
const findNextIncompleteMark = (usersMarks: CurrentUserMark[]): CurrentUserMark | undefined => {
return usersMarks.find(mark => !mark.isCompleted);
}
// const handleChange = (event: any) => setCurrentMarkValue(event.target.value);
//
// const handleSubmit = (event: any) => {
// event.preventDefault();
// if (!currentMarkValue || !currentUserMark) return;
//
// const curMark: Mark = {
// ...currentUserMark.mark,
// value: currentMarkValue
// };
//
// const updatedMarks: Mark[] = updateMarks(marks, curMark)
//
// setMarks(updatedMarks)
// setCurrentMarkValue("")
//
// // do the similar thing to the thing above
// const metaMarks = filterMarksByPubkey(updatedMarks, usersPubkey!)
// const signedMarks = extractMarksFromSignedMeta(meta!)
// const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
// setCurrentUserMarks(currentUserMarks)
// setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
// setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
// }
// Update the meta signatures
const updateMetaSignatures = (meta: Meta, signedEvent: SignedEvent): Meta => {
@ -599,7 +584,6 @@ export const SignPage = () => {
[hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
}
metaCopy.modifiedAt = now()
console.log('meta copy: ', metaCopy);
return metaCopy
}
@ -724,7 +708,6 @@ export const SignPage = () => {
await Promise.all(promises)
.then(() => {
toast.success('Notifications sent successfully')
console.log('meta: ', meta);
setMeta(meta)
})
.catch(() => {
@ -816,25 +799,6 @@ export const SignPage = () => {
navigate(appPublicRoutes.verify)
}
const getCurrentUserMarks = (marks: Mark[], pubkey: string): CurrentUserMark[] => {
console.log('marks: ', marks);
const filteredMarks = marks
.filter(mark => mark.npub === hexToNpub(pubkey))
const currentMarks = filteredMarks
.map((mark, index, arr) => {
return {
mark,
isLast: isLast(index, arr),
isCompleted: !!mark.value
}
})
console.log('current marks: ', currentMarks)
return currentMarks;
}
const isLast = (index: number, arr: any[]) => (index === (arr.length -1))
const handleExportSigit = async () => {
if (Object.entries(files).length === 0 || !meta) return
@ -925,105 +889,111 @@ export const SignPage = () => {
return <LoadingSpinner desc={loadingSpinnerDesc} />
}
if (!isMarksCompleted) {
if (isReadyToSign) {
return (
<>
<Box className={styles.container}>
{
marks.length > 0 && (
<PdfView
files={files}
marks={marks}
fileHashes={currentFileHashes}
handleMarkClick={handleMarkClick}
currentMarkValue={currentMarkValue}
currentUserMark={currentUserMark}
/>)}
{
currentUserMark !== null && (
<MarkFormField
handleSubmit={handleSubmit}
handleChange={handleChange}
currentMark={currentUserMark}
currentMarkValue={currentMarkValue}
/>
{displayInput && (
<>
<Typography component="label" variant="h6">
Select sigit file
</Typography>
<Box className={styles.inputBlock}>
<MuiFileInput
placeholder="Select file"
inputProps={{ accept: '.sigit.zip' }}
value={selectedFile}
onChange={(value) => setSelectedFile(value)}
/>
</Box>
{selectedFile && (
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleDecrypt} variant="contained">
Decrypt
</Button>
</Box>
)}
</>
)}
{submittedBy && Object.entries(files).length > 0 && meta && (
<>
<DisplayMeta
meta={meta}
files={files}
submittedBy={submittedBy}
signers={signers}
viewers={viewers}
creatorFileHashes={creatorFileHashes}
currentFileHashes={currentFileHashes}
signedBy={signedBy}
nextSigner={nextSinger}
getPrevSignersSig={getPrevSignersSig}
/>
{signedStatus === SignedStatus.Fully_Signed && (
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExport} variant="contained">
Export
</Button>
</Box>
)}
{signedStatus === SignedStatus.User_Is_Next_Signer && (
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleSign} variant="contained">
Sign
</Button>
</Box>
)}
{isSignerOrCreator && (
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExportSigit} variant="contained">
Export Sigit
</Button>
</Box>
)}
</>
)}
</Box>
</>
)
}
)}
return <PdfMarking
files={getFilesWithHashes(files, currentFileHashes)}
currentUserMarks={currentUserMarks}
setIsReadyToSign={setIsReadyToSign}
setCurrentUserMarks={setCurrentUserMarks}
setUpdatedMarks={setUpdatedMarks}
/>
return (
<>
<Box className={styles.container}>
{displayInput && (
<>
<Typography component="label" variant="h6">
Select sigit file
</Typography>
<Box className={styles.inputBlock}>
<MuiFileInput
placeholder="Select file"
inputProps={{ accept: '.sigit.zip' }}
value={selectedFile}
onChange={(value) => setSelectedFile(value)}
/>
</Box>
{selectedFile && (
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleDecrypt} variant="contained">
Decrypt
</Button>
</Box>
)}
</>
)}
{submittedBy && Object.entries(files).length > 0 && meta && (
<>
<DisplayMeta
meta={meta}
files={files}
submittedBy={submittedBy}
signers={signers}
viewers={viewers}
creatorFileHashes={creatorFileHashes}
currentFileHashes={currentFileHashes}
signedBy={signedBy}
nextSigner={nextSinger}
getPrevSignersSig={getPrevSignersSig}
/>
{signedStatus === SignedStatus.Fully_Signed && (
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExport} variant="contained">
Export
</Button>
</Box>
)}
{signedStatus === SignedStatus.User_Is_Next_Signer && (
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleSign} variant="contained">
Sign
</Button>
</Box>
)}
{isSignerOrCreator && (
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExportSigit} variant="contained">
Export Sigit
</Button>
</Box>
)}
</>
)}
</Box>
</>
)
// return (
// <>
// <Box className={styles.container}>
// {
// marks.length > 0 && (
// <PdfView
// files={files}
// marks={marks}
// fileHashes={currentFileHashes}
// handleMarkClick={handleMarkClick}
// currentMarkValue={currentMarkValue}
// currentUserMark={currentUserMark}
// />)}
// {
// currentUserMark !== null && (
// <MarkFormField
// handleSubmit={handleSubmit}
// handleChange={handleChange}
// currentMark={currentUserMark}
// currentMarkValue={currentMarkValue}
// />
// )}
// </Box>
// </>
// )
}