UI Package | improve steps in docs (#1189)

* WIP: Removed the exstra line for encoding base24. * Update the path in the web_component.md. * Fix comments. * Return a hint message if the user provided a pdf url with disabled cores
threefoldtech · Oct 9, 2023 · cf18c54 · cf18c54
1 parent 03836df
commit cf18c54
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ This repo contains the typescript clients and projects for Threefold grid.
 - [rmb peer client](./packages/rmb_peer_client/README.md)
 - [rmb peer server](./packages/rmb_peer_server/README.md)
 - [Playground](./packages/playground/README.md)
+- [UI](./packages/UI/README.md)
 
 ## Requirements
 

diff --git a/packages/UI/docs/pdf_viewer.md b/packages/UI/docs/pdf_viewer.md
@@ -28,11 +28,13 @@ To use the PDF Signer Web Component, follow these steps:
 
 2. Navigate to the `repository/packages/UI` directory.
 
-3. Run `yarn build` to generate the required distribution files.
+3. Choose which provider you are going to use [see providers section](#using-providers-and-extensions)
 
-4. Locate the `dist` folder created in the previous step.
+4. Run `yarn build` to generate the required distribution files.
 
-5. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
+5. Locate the `dist` folder created in the previous step.
+
+6. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
 
 ```html
 <body>
@@ -101,6 +103,8 @@ Here's an example of how to use the PDF Signer Web Component in your HTML file:
 
 In the example above, replace `<pdf-url>` and `<endpoint-url>` with the actual URLs for your PDF document and the destination where signed documents should be sent. Also, for the `<network>`, use one of the following network options: `[main, test, qa, dev]`.
 
+PS: Please make sure that you have a `PDF URL` with `CORS-ORIGIN` enabled.
+
 Feel free to customize the HTML structure and styles to match your application's design and requirements.
 
 **Now you can serve your HTML file on any live-server plugin.**

diff --git a/packages/UI/docs/script_editor.md b/packages/UI/docs/script_editor.md
@@ -27,11 +27,13 @@ To create an instance of the Script Editor, follow these steps:
 
 2. Navigate to the `repository/packages/UI` directory.
 
-3. Run `yarn build` to generate the required distribution files.
+3. Choose which provider you are going to use [see providers section](#using-providers-and-extensions)
 
-4. Locate the `dist` folder created in the previous step.
+4. Run `yarn build` to generate the required distribution files.
 
-5. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
+5. Locate the `dist` folder created in the previous step.
+
+6. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
 
 ```html
 <body>

diff --git a/packages/UI/src/components/PDFSignerViewComponent.vue b/packages/UI/src/components/PDFSignerViewComponent.vue
@@ -111,7 +111,10 @@ export default {
         pdfData.value = data.toString();
         numOfPages.value = pdf.numPages;
       } catch (error: any) {
-        showError({ isError: true, errorMessage: error.message });
+        showError({
+          isError: true,
+          errorMessage: "Please make sure that you have provided a PDF URL with CORS enabled.",
+        });
       } finally {
         loadingPdf.value = false;
       }