pdfSigner component

[AhmedHanafy725]

parent issue: threefoldtech/home#1461

should be in a new package called threefold/ui

[Mahmoud-Emad]

WIP:

• Implemented the PDF viewer with two buttons to Accept or Decline the PDF
• installed the tailwind ui
• Created component for the form of the PDF Link
• Added an error message if the PDF not loaded
• Added a Spiner for loading the PDF file

[Mahmoud-Emad]

WIP:

• Finished the PDF viewer style using Tailwind
• Updated the Accept button to be enabled when the scroll reaches the end of the page
• Build and implement the vue3-web-component | PS: I have an issue with including the tailwind style in the web component

[Mahmoud-Emad]

Work in Progress (WIP):

• Currently, I am working on extracting the build to function as a web component. However, I am still investigating how to integrate Tailwind CSS into this setup.

Note (PS):
The web component generates the element within the shadow-root, which is hidden from the DOM. Consequently, users cannot directly manipulate it in other projects, similar to the behavior of the iframe tag. When we add or do not add the style file, nothing changes. Ideally, we should only need to include the JavaScript file and reference it in the HTML file without worrying about the styles, as they should be part of the build. However, the actual behavior observed is that the styles are not included.

I conducted research online to check if there was a known issue related to this, and I came across the following [Issue]:(vuejs/vue-web-component-wrapper#12 (comment)).

After trying various scenarios, I found that the only successful solution was to add the styles as inline-style. What are your thoughts on this matter?

[Mahmoud-Emad]

There is an open issue for letting the user enable/disable the shdowRoot
and The contributor said in a comment that we can work around it, so m going to do his solution and will update the issue if it works for me

[Mahmoud-Emad]

it worked when I added the script file and made some changes mentioned in the above comment

[Mahmoud-Emad]

WIP:

• fixed the web-component style issue
• implemented the signing method to sign the PDF data

[despiegk]

sounds super cool, can we try it somewhere, how to use?

[Mahmoud-Emad]

WIP:

• Resolved the styling issue and completely removed the CDN for tailwind, replacing it with the styles generated from the build process.
• Successfully integrated the request mechanism using the newly added Threefold Connector functionality, allowing for data to be posted to a specified location.
• Modified the usage of the web component by making the pdfurl prop dynamic, enabling end-users to specify the PDF source URL. Additionally, introduced a new prop called dest, which indicates the destination endpoint for data submission.

[Mahmoud-Emad]

@despiegk
Thank you!

You can find an example of usage in this document. It will guide you through a simple example.

If you haven't installed the tf-connector extension yet (which is okay since the package hasn't been published yet), you can make the following change in the PDFSignerViewComponent.vue file:

Replace this line:

const data = await sign(pdfData.value, account?.mnemonic ?? "", KeypairType.ed25519);

with:

const mnemonic = "<your_mnemonic>"
const data = await sign(pdfData.value, mnemonic, KeypairType.ed25519);

Additionally, please comment out any lines that access the ThreefoldWalletConnectorApi to prevent errors.

[despiegk]

please make sure following happens

• in the return info (the result of signing) we need to see
  • twinid (if relevant)
  • public key
  • md5 of the document signed
  • url of the document signed
• explain how to use this info and check the signature on server, so we can make sure signature was ok

[Mahmoud-Emad]

WIP:
Refactored the code by adding documentation for each function. Created three functions: two for checking the installation and activation of the Threefold Connector Extension, and the last one for displaying error messages in the browser. Also, working on setting up a simple Node.js server that includes a 'verify' endpoint as an example, as used in the code.

[Mahmoud-Emad]

@despiegk
The requested changes were added in this commit, and now I'm working on implementing a small nodeJs server with a verify endpoint to verify the data.

[Mahmoud-Emad]

WIP:

Implemented an interface called IThreefoldProvider that includes the following methods:

1. use: This method is used to select and configure the chosen provider.

   • When the default provider is selected, which reads the mnemonic provided by the user in the .env file, this function validates the mnemonic, reads it, and stores it in the request body, saving the necessary properties.
   • When the ThreefoldConnector is selected, the use method initializes the connector and saves the properties accordingly.

2. acceptAndSign: This method is utilized for accepting PDF content, signing it, and then making a request to the destination endpoint provided by the user.

3. syncErrors: All methods call this function to synchronize and handle errors, returning them to the PDFSignerViewComponent.vue.

4. __request: This private method is used to send requests and process responses from the destination endpoint.

Example of Usage:

• Created a Node.js server to serve as an example.
• Included a verify endpoint within this server to ensure the smooth functioning of the signature verification process.

Please note that the server is still under development, and it is expected to be ready, possibly by tomorrow. Once completed, it will be pushed to a directory named example within the same repository. The README will also be updated with further details.

[Mahmoud-Emad]

WIP:

• Fixed the validateMnemonic issue
• Added the verify-server example can be found here
• Added the web-component example can be found here https://github.com/threefoldtech/tfgrid-sdk-ts/tree/development_312_UI/packages/UI/src/examples/html-tag-example
• Updated the PDF-Signer-document of the project to sync the new changes
• Made some refactor into the code, and now everything working well

[Mahmoud-Emad]

Issue update:

• Fix some comments review
• Enhance the script editor documentation
• Enhance the pdf signer documentation

[A-Harby]

Verified,

PDF Signer is working with mentioned steps in the docs.

With threefold connector extension.

Or threefold Signer Provider