chore(git): merge pull request 'feat(verify-page): new verify page design' (#151) from 136-verify-page-after-merges into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m12s

Reviewed-on: #151
This commit is contained in:
enes 2024-08-20 11:57:40 +00:00
commit b6e739bc14
11 changed files with 291 additions and 99 deletions

View File

@ -1,5 +1,5 @@
import { Meta } from '../../types'
import { SigitCardDisplayInfo, SigitStatus } from '../../utils'
import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
import { Link } from 'react-router-dom'
import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
@ -13,7 +13,6 @@ import {
faFile
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { UserAvatar } from '../UserAvatar'
import { UserAvatarGroup } from '../UserAvatarGroup'
import styles from './style.module.scss'
@ -34,7 +33,8 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
submittedBy,
signers,
signedStatus,
fileExtensions
fileExtensions,
isValid
} = parsedMeta
const { signersStatus } = useSigitMeta(meta)
@ -62,6 +62,7 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
const profile = profiles[submittedBy]
return (
<Tooltip
key={submittedBy}
title={
profile?.display_name ||
profile?.name ||
@ -72,7 +73,11 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
disableInteractive
>
<TooltipChild>
<UserAvatar pubkey={submittedBy} image={profile?.picture} />
<DisplaySigner
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
profile={profile}
pubkey={submittedBy}
/>
</TooltipChild>
</Tooltip>
)

View File

@ -9,7 +9,6 @@ import {
shorten,
SignStatus
} from '../../utils'
import { UserAvatar } from '../UserAvatar'
import { useSigitMeta } from '../../hooks/useSigitMeta'
import { UserAvatarGroup } from '../UserAvatarGroup'
@ -44,7 +43,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
createdAt,
completedAt,
parsedSignatureEvents,
signedStatus
signedStatus,
isValid
} = useSigitMeta(meta)
const { usersPubkey } = useSelector((state: State) => state.auth)
const profiles = useSigitProfiles([
@ -56,7 +56,7 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
typeof usersPubkey !== 'undefined' &&
signers.includes(hexToNpub(usersPubkey))
const ext = extractFileExtensions(Object.keys(fileHashes))
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
return submittedBy ? (
<div className={styles.container}>
@ -68,6 +68,7 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
const profile = profiles[submittedBy]
return (
<Tooltip
key={submittedBy}
title={
profile?.display_name ||
profile?.name ||
@ -78,7 +79,11 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
disableInteractive
>
<TooltipChild>
<UserAvatar pubkey={submittedBy} image={profile?.picture} />
<DisplaySigner
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
profile={profile}
pubkey={submittedBy}
/>
</TooltipChild>
</Tooltip>
)
@ -196,14 +201,14 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
<span className={styles.detailsItem}>
<FontAwesomeIcon icon={faEye} /> {signedStatus}
</span>
{ext.length > 0 ? (
{extensions.length > 0 ? (
<span className={styles.detailsItem}>
{ext.length > 1 ? (
{!isSame ? (
<>
<FontAwesomeIcon icon={faFile} /> Multiple File Types
</>
) : (
getExtensionIconLabel(ext[0])
getExtensionIconLabel(extensions[0])
)}
</span>
) : (

View File

@ -1,5 +1,10 @@
import { useEffect, useState } from 'react'
import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
import {
CreateSignatureEventContent,
DocSignatureEvent,
Meta,
SignedEventContent
} from '../types'
import { Mark } from '../types/mark'
import {
fromUnixTimestamp,
@ -38,7 +43,9 @@ export interface FlatMeta
encryptionKey: string | null
// Parsed Document Signatures
parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
parsedSignatureEvents: {
[signer: `npub1${string}`]: DocSignatureEvent
}
// Calculated completion time
completedAt?: number
@ -74,7 +81,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
const [zipUrl, setZipUrl] = useState<string>('')
const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
[signer: `npub1${string}`]: Event
[signer: `npub1${string}`]: DocSignatureEvent
}>({})
const [completedAt, setCompletedAt] = useState<number>()
@ -141,7 +148,10 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
}
// Temp. map to hold events and signers
const parsedSignatureEventsMap = new Map<`npub1${string}`, Event>()
const parsedSignatureEventsMap = new Map<
`npub1${string}`,
DocSignatureEvent
>()
const signerStatusMap = new Map<`npub1${string}`, SignStatus>()
const getPrevSignerSig = (npub: `npub1${string}`) => {
@ -183,9 +193,12 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
if (isValidSignature) {
// get the signature of prev signer from the content of current signers signedEvent
const prevSignersSig = getPrevSignerSig(npub)
try {
const obj: SignedEventContent = JSON.parse(event.content)
parsedSignatureEventsMap.set(npub, {
...event,
parsedContent: obj
})
if (
obj.prevSig &&
prevSignersSig &&

View File

@ -23,7 +23,11 @@
grid-gap: 15px;
}
.content {
max-width: 550px;
width: 550px;
padding: 10px;
border: 10px solid $overlay-background-color;
border-radius: 4px;
max-width: 590px;
width: 590px;
margin: 0 auto;
}

View File

@ -1,12 +1,16 @@
import { Box, Button, Tooltip, Typography, useTheme } from '@mui/material'
import { Box, Button, Divider, Tooltip, Typography } from '@mui/material'
import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input'
import { Event, verifyEvent } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { NostrController } from '../../controllers'
import { CreateSignatureEventContent, Meta } from '../../types'
import {
CreateSignatureEventContent,
DocSignatureEvent,
Meta
} from '../../types'
import {
decryptArrayBuffer,
extractMarksFromSignedMeta,
@ -16,10 +20,10 @@ import {
parseJson,
readContentOfZipEntry,
signEventForMetaFile,
shorten
shorten,
getCurrentUserFiles
} from '../../utils'
import styles from './style.module.scss'
import { Cancel, CheckCircle } from '@mui/icons-material'
import { useLocation } from 'react-router-dom'
import axios from 'axios'
import { PdfFile } from '../../types/drawing.ts'
@ -27,7 +31,8 @@ import {
addMarks,
convertToPdfBlob,
convertToPdfFile,
groupMarksByPage
groupMarksByFileNamePage,
inPx
} from '../../utils/pdf.ts'
import { State } from '../../store/rootReducer.ts'
import { useSelector } from 'react-redux'
@ -40,13 +45,101 @@ import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
import { UserAvatar } from '../../components/UserAvatar/index.tsx'
import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
import { TooltipChild } from '../../components/TooltipChild.tsx'
import FileList from '../../components/FileList'
import { CurrentUserFile } from '../../types/file.ts'
import { Mark } from '../../types/mark.ts'
interface PdfViewProps {
files: CurrentUserFile[]
currentFile: CurrentUserFile | null
parsedSignatureEvents: {
[signer: `npub1${string}`]: DocSignatureEvent
}
}
const SlimPdfView = ({
files,
currentFile,
parsedSignatureEvents
}: PdfViewProps) => {
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
pdfRefs.current[currentFile.id]?.scrollIntoView({
behavior: 'smooth',
block: 'end'
})
}
}, [currentFile])
return (
<div className={styles.view}>
{files.map((currentUserFile, i) => {
const { hash, filename, pdfFile, id } = currentUserFile
const signatureEvents = Object.keys(parsedSignatureEvents)
if (!hash) return
return (
<>
<div
id={filename}
ref={(el) => (pdfRefs.current[id] = el)}
key={filename}
className={styles.fileWrapper}
>
{pdfFile.pages.map((page, i) => {
const marks: Mark[] = []
signatureEvents.forEach((e) => {
const m = parsedSignatureEvents[
e as `npub1${string}`
].parsedContent?.marks.filter(
(m) => m.pdfFileHash == hash && m.location.page == i
)
if (m) {
marks.push(...m)
}
})
return (
<div className={styles.imageWrapper} key={i}>
<img draggable="false" src={page.image} />
{marks.map((m) => {
return (
<div
className={styles.mark}
key={m.id}
style={{
left: inPx(m.location.left),
top: inPx(m.location.top),
width: inPx(m.location.width),
height: inPx(m.location.height)
}}
>
{m.value}
</div>
)
})}
</div>
)
})}
</div>
{i < files.length - 1 && (
<Divider
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
}}
>
File Separator
</Divider>
)}
</>
)
})}
</div>
)
}
export const VerifyPage = () => {
const theme = useTheme()
const textColor = theme.palette.getContrastText(
theme.palette.background.paper
)
const location = useLocation()
/**
* uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
@ -54,8 +147,15 @@ export const VerifyPage = () => {
*/
const { uploadedZip, meta } = location.state || {}
const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
useSigitMeta(meta)
const {
submittedBy,
zipUrl,
encryptionKey,
signers,
viewers,
fileHashes,
parsedSignatureEvents
} = useSigitMeta(meta)
const profiles = useSigitProfiles([
...(submittedBy ? [submittedBy] : []),
@ -70,8 +170,23 @@ export const VerifyPage = () => {
const [currentFileHashes, setCurrentFileHashes] = useState<{
[key: string]: string | null
}>(fileHashes)
}>({})
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
const [signatureFileHashes, setSignatureFileHashes] = useState<{
[key: string]: string
}>(fileHashes)
useEffect(() => {
setSignatureFileHashes(fileHashes)
}, [fileHashes])
useEffect(() => {
if (Object.entries(files).length > 0) {
const tmp = getCurrentUserFiles(files, fileHashes, signatureFileHashes)
setCurrentFile(tmp[0])
}
}, [signatureFileHashes, fileHashes, files])
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
const nostrController = NostrController.getInstance()
@ -203,7 +318,6 @@ export const VerifyPage = () => {
}
}
console.log('fileHashes :>> ', fileHashes)
setCurrentFileHashes(fileHashes)
setLoadingSpinnerDesc('Parsing meta.json')
@ -307,10 +421,10 @@ export const VerifyPage = () => {
zip.file('meta.json', stringifiedMeta)
const marks = extractMarksFromSignedMeta(updatedMeta)
const marksByPage = groupMarksByPage(marks)
const marksByPage = groupMarksByFileNamePage(marks)
for (const [fileName, pdf] of Object.entries(files)) {
const pages = await addMarks(pdf.file, marksByPage)
const pages = await addMarks(pdf.file, marksByPage[fileName])
const blob = await convertToPdfBlob(pages)
zip.file(`files/${fileName}`, blob)
}
@ -414,51 +528,33 @@ export const VerifyPage = () => {
<StickySideColumns
left={
<>
<Box className={styles.filesWrapper}>
{Object.entries(currentFileHashes).map(
([filename, hash], index) => {
const isValidHash = fileHashes[filename] === hash
return (
<Box key={`file-${index}`} className={styles.file}>
<Typography
component="label"
sx={{
color: textColor,
flexGrow: 1
}}
>
{filename}
</Typography>
{isValidHash && (
<Tooltip title="File integrity check passed" arrow>
<CheckCircle
sx={{ color: theme.palette.success.light }}
/>
</Tooltip>
)}
{!isValidHash && (
<Tooltip title="File integrity check failed" arrow>
<Cancel
sx={{ color: theme.palette.error.main }}
/>
</Tooltip>
)}
</Box>
)
}
)}
</Box>
{currentFile !== null && (
<FileList
files={getCurrentUserFiles(
files,
currentFileHashes,
signatureFileHashes
)}
currentFile={currentFile}
setCurrentFile={setCurrentFile}
handleDownload={handleExport}
/>
)}
{displayExportedBy()}
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExport} variant="contained">
Export Sigit
</Button>
</Box>
</>
}
right={<UsersDetails meta={meta} />}
/>
>
<SlimPdfView
currentFile={currentFile}
files={getCurrentUserFiles(
files,
currentFileHashes,
signatureFileHashes
)}
parsedSignatureEvents={parsedSignatureEvents}
/>
</StickySideColumns>
)}
</Container>
</>

View File

@ -50,3 +50,36 @@
}
}
}
.view {
width: 550px;
max-width: 550px;
display: flex;
flex-direction: column;
gap: 25px;
}
.imageWrapper {
position: relative;
img {
width: 100%;
display: block;
}
}
.fileWrapper {
display: flex;
flex-direction: column;
gap: 15px;
}
.mark {
position: absolute;
border: 1px dotted black;
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -1,5 +1,6 @@
import { Mark } from './mark'
import { Keys } from '../store/auth/types'
import { Event } from 'nostr-tools'
export enum UserRole {
signer = 'Signer',
@ -44,3 +45,7 @@ export interface UserAppData {
keyPair?: Keys // this key pair is used for blossom requests authentication
blossomUrls: string[] // array for storing Urls for the files that stores all the sigits and processedGiftWraps on blossom
}
export interface DocSignatureEvent extends Event {
parsedContent?: SignedEventContent
}

View File

@ -1,6 +1,6 @@
import { Meta } from '../types'
import { extractMarksFromSignedMeta } from './mark.ts'
import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
import JSZip from 'jszip'
import { PdfFile } from '../types/drawing.ts'
@ -10,12 +10,12 @@ const getZipWithFiles = async (
): Promise<JSZip> => {
const zip = new JSZip()
const marks = extractMarksFromSignedMeta(meta)
const marksByPage = groupMarksByPage(marks)
const marksByFileNamePage = groupMarksByFileNamePage(marks)
for (const [fileName, pdf] of Object.entries(files)) {
const pages = await addMarks(pdf.file, marksByPage)
const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
const blob = await convertToPdfBlob(pages)
zip.file(`/files/${fileName}`, blob)
zip.file(`files/${fileName}`, blob)
}
return zip

View File

@ -119,7 +119,11 @@ const getUpdatedMark = (
return {
...selectedMark,
currentValue: selectedMarkValue,
isCompleted: !!selectedMarkValue
isCompleted: !!selectedMarkValue,
mark: {
...selectedMark.mark,
value: selectedMarkValue
}
}
}

View File

@ -1,6 +1,6 @@
import { CreateSignatureEventContent, Meta } from '../types'
import { fromUnixTimestamp, parseJson } from '.'
import { Event } from 'nostr-tools'
import { Event, verifyEvent } from 'nostr-tools'
import { toast } from 'react-toastify'
export enum SignStatus {
@ -75,6 +75,7 @@ export interface SigitCardDisplayInfo {
signers: `npub1${string}`[]
fileExtensions: string[]
signedStatus: SigitStatus
isValid: boolean
}
/**
@ -128,12 +129,15 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
const sigitInfo: SigitCardDisplayInfo = {
signers: [],
fileExtensions: [],
signedStatus: SigitStatus.Partial
signedStatus: SigitStatus.Partial,
isValid: false
}
try {
const createSignatureEvent = await parseNostrEvent(meta.createSignature)
sigitInfo.isValid = verifyEvent(createSignatureEvent)
// created_at in nostr events are stored in seconds
sigitInfo.createdAt = fromUnixTimestamp(createSignatureEvent.created_at)
@ -142,7 +146,7 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
)
const files = Object.keys(createSignatureContent.fileHashes)
const extensions = extractFileExtensions(files)
const { extensions } = extractFileExtensions(files)
const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
const isCompletelySigned = createSignatureContent.signers.every((signer) =>
@ -169,6 +173,10 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
}
}
/**
* @param fileNames - List of filenames to check
* @returns List of extensions and if all are same
*/
export const extractFileExtensions = (fileNames: string[]) => {
const extensions = fileNames.reduce((result: string[], file: string) => {
const extension = file.split('.').pop()
@ -178,5 +186,7 @@ export const extractFileExtensions = (fileNames: string[]) => {
return result
}, [])
return extensions
const isSame = extensions.every((ext) => ext === extensions[0])
return { extensions, isSame }
}

View File

@ -71,14 +71,19 @@ const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
/**
* Reads the pdf file binaries
*/
const readPdf = (file: File): Promise<string> => {
const readPdf = (file: File): Promise<string | ArrayBuffer> => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = (e: any) => {
const data = e.target.result
resolve(data)
reader.onload = (e) => {
const data = e.target?.result
// Make sure we only resolve for string or ArrayBuffer type
// They are accepted by PDFJS.getDocument function
if (data && typeof data !== 'undefined') {
resolve(data)
} else {
reject(new Error('File is null or undefined'))
}
}
reader.onerror = (err) => {
@ -94,7 +99,7 @@ const readPdf = (file: File): Promise<string> => {
* Converts pdf to the images
* @param data pdf file bytes
*/
const pdfToImages = async (data: any): Promise<PdfPage[]> => {
const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
const images: string[] = []
const pdf = await PDFJS.getDocument(data).promise
const canvas = document.createElement('canvas')
@ -142,7 +147,8 @@ const addMarks = async (
canvas.width = viewport.width
await page.render({ canvasContext: context!, viewport: viewport }).promise
marksPerPage[i]?.forEach((mark) => draw(mark, context!))
if (marksPerPage && Object.hasOwn(marksPerPage, i))
marksPerPage[i]?.forEach((mark) => draw(mark, context!))
images.push(canvas.toDataURL())
}
@ -230,11 +236,11 @@ const convertToPdfFile = async (
* @function scaleMark scales remaining marks in line with SCALE
* @function byPage groups remaining Marks by their page marks.location.page
*/
const groupMarksByPage = (marks: Mark[]) => {
const groupMarksByFileNamePage = (marks: Mark[]) => {
return marks
.filter(hasValue)
.map(scaleMark)
.reduce<{ [key: number]: Mark[] }>(byPage, {})
.reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
}
/**
@ -245,10 +251,21 @@ const groupMarksByPage = (marks: Mark[]) => {
* @param obj - accumulator in the reducer callback
* @param mark - current value, i.e. Mark being examined
*/
const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => {
const key = mark.location.page
const curGroup = obj[key] ?? []
return { ...obj, [key]: [...curGroup, mark] }
const byPage = (
obj: { [filename: string]: { [page: number]: Mark[] } },
mark: Mark
) => {
const filename = mark.fileName
const pageNumber = mark.location.page
const pages = obj[filename] ?? {}
const marks = pages[pageNumber] ?? []
return {
...obj,
[filename]: {
...pages,
[pageNumber]: [...marks, mark]
}
}
}
export {
@ -259,5 +276,5 @@ export {
convertToPdfFile,
addMarks,
convertToPdfBlob,
groupMarksByPage
groupMarksByFileNamePage
}