@verdocs/web-sdk 1.0.25 → 1.4.0

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -0,0 +1,297 @@
+import pdf from 'pdfjs-dist';
+import { VerbosityLevel, version as PDFJSversion } from 'pdfjs-dist';
+import { Component, h, Element, Event, Prop, Watch, State } from '@stencil/core';
+import { integerSequence } from '../../../utils/utils';
+const CANVAS_MARGIN = 15;
+const PDF_WORKER_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJSversion}/pdf.worker.min.js`;
+const CMAPS_URL = `https://unpkg.com/pdfjs-dist@${PDFJSversion}/cmaps/`;
+// https://unpkg.com/pdfjs-dist@2.0.550/cmaps/78-EUC-H.bcmap
+console.log('[VIEW] Loading PDF-JS', { PDF_WORKER_URL, CMAPS_URL });
+// pdf.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
+pdf.GlobalWorkerOptions.workerSrc = PDF_WORKER_URL;
+export class VerdocsView {
+  constructor() {
+    this.numPages = 1;
+    this.fingerprint = null;
+    /**
+     * Rotate the PDF in degrees
+     */
+    this.rotation = 0;
+    /**
+     * Access token to use. This component is a wrapper for PDF.js which does not use a VerdocsEndpoint, so the token must be supplied
+     * directly.
+     */
+    this.token = null;
+    this.loadProgress = 0;
+    this.pagesRendered = [];
+  }
+  /**
+   * Listen for changes to src
+   */
+  doSrc(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    this.loadAndRender(newValue);
+  }
+  isRotated(rotation) {
+    return rotation !== 0 && rotation % 180 !== 0;
+  }
+  async renderPages() {
+    const pageNumbersToRender = integerSequence(1, this.numPages);
+    for await (let pageNumber of pageNumbersToRender) {
+      const index = pageNumber - 1;
+      console.log('[VIEW] Rendering page', pageNumber);
+      const page = await this.pdfDocument.getPage(pageNumber);
+      const [pageX0, pageY0, pageX1, pageY1] = page.view;
+      const rotation = page.rotate;
+      const viewport = page.getViewport({ scale: 1 / 0.75 });
+      // const viewport = page.getViewport({scale: 1.5});
+      const canvas = document.createElement('canvas');
+      const canvasContext = canvas.getContext('2d');
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      await page.render({ canvasContext, viewport });
+      this.pdfContainer.appendChild(canvas);
+      const canvasWidth = canvas.width;
+      const canvasHeight = canvas.height;
+      const pageWidth = pageX1 - pageX0;
+      const pageHeight = pageY1 - pageY0;
+      this.pagesRendered.sort((a, b) => a.pageNumber - b.pageNumber);
+      const previousSibling = this.pagesRendered.filter(page => page.pageNumber < pageNumber).pop();
+      const canvasTop = ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.canvasBottom) || 0) + CANVAS_MARGIN;
+      const pageDetails = {
+        pageNumber,
+        width: canvasWidth,
+        height: canvasHeight,
+        originalWidth: this.isRotated(rotation) ? pageHeight : pageWidth,
+        originalHeight: this.isRotated(rotation) ? pageWidth : pageHeight,
+        xRatio: canvasWidth / pageWidth,
+        yRatio: canvasHeight / pageHeight,
+        canvasTop: canvasTop,
+        canvasLeft: CANVAS_MARGIN,
+        canvasRight: CANVAS_MARGIN + canvasWidth,
+        canvasBottom: canvasTop + canvasHeight,
+      };
+      if (this.pagesRendered[index]) {
+        this.pagesRendered[index] = pageDetails;
+      }
+      else {
+        this.pagesRendered.push(pageDetails);
+      }
+      const eventData = { pages: this.pagesRendered, numPages: this.numPages, numRendered: this.pagesRendered.length, canvasContainer: this.pdfContainer };
+      this.pageRendered.emit(eventData);
+      if (pageNumber >= this.numPages) {
+        console.log('[VIEW] Done rendering');
+        this.pagesRendered.sort((a, b) => a.pageNumber - b.pageNumber);
+        this.documentRendered.emit(eventData);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.pdfContainer = document.getElementById('verdocs-pdf-viewer-container');
+    if (this.source) {
+      this.loadAndRender(this.source);
+    }
+  }
+  onProgress(progress) {
+    this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  }
+  loadAndRender(src) {
+    console.log('[VIEW] Loading', src);
+    const httpHeaders = this.token ? { Authorization: `Bearer ${this.token}` } : {};
+    const source = {
+      url: src,
+      withCredentials: true,
+      cMapUrl: CMAPS_URL,
+      cMapPacked: true,
+      verbosity: VerbosityLevel.WARNINGS,
+      httpHeaders,
+    };
+    // @ts-ignore
+    const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+    loadingTask.onProgress = this.onProgress;
+    loadingTask.promise.then((pdfDocument) => {
+      this.loadProgress = 100;
+      this.numPages = pdfDocument.numPages;
+      this.fingerprint = pdfDocument.fingerprints[0];
+      console.log(`[VIEW] Got PDF document fingerprint "${this.fingerprint}, ${this.numPages} pages`, pdfDocument);
+      this.pdfDocument = pdfDocument;
+      this.renderPages().catch(e => console.log('Rendering error', e));
+    });
+  }
+  render() {
+    return (h("div", { class: "container" },
+      this.loadProgress < 100 ? h("verdocs-loader", null) : h("div", { style: { display: 'none' } }),
+      h("div", { id: "verdocs-pdf-viewer-container" })));
+  }
+  static get is() { return "verdocs-view"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-view.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-view.css"]
+  }; }
+  static get properties() { return {
+    "rotation": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 90 | 180 | 270",
+        "resolved": "0 | 180 | 270 | 90",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Rotate the PDF in degrees"
+      },
+      "attribute": "rotation",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "source": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Src of the PDF to load and render"
+      },
+      "attribute": "source",
+      "reflect": false
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Access token to use. This component is a wrapper for PDF.js which does not use a VerdocsEndpoint, so the token must be supplied\ndirectly."
+      },
+      "attribute": "token",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "loadProgress": {}
+  }; }
+  static get events() { return [{
+      "method": "pageRendered",
+      "name": "pageRendered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been rendered"
+      },
+      "complexType": {
+        "original": "IPDFRenderEvent",
+        "resolved": "IPDFRenderEvent",
+        "references": {
+          "IPDFRenderEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "pageLoaded",
+      "name": "pageLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been changed"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "pageChange",
+      "name": "pageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been changed"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "pageInit",
+      "name": "pageInit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been initialized"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "scaleChange",
+      "name": "scaleChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been scaled"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "documentRendered",
+      "name": "documentRendered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when the document has completed rendered. The event will include the rendered page count."
+      },
+      "complexType": {
+        "original": "IPDFRenderEvent",
+        "resolved": "IPDFRenderEvent",
+        "references": {
+          "IPDFRenderEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "component"; }
+  static get watchers() { return [{
+      "propName": "source",
+      "methodName": "doSrc"
+    }]; }
+}

package/dist/collection/components/embeds/verdocs-view/verdocs-view.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit-html';
+// import {action} from '@storybook/addon-actions';
+// const templateId = "c3fc6310-bf9d-47a1-b0ad-daf2bbf657c2";
+// const documentId = "ed117472-4d4e-4c62-9386-af047a3373a2";
+// const pdfurl = `https://api.verdocs.com/templates/${templateId}/documents/${documentId}?file=true`;
+const source = '/i-9-paper-version.pdf';
+export default {
+  title: 'Embeds/View',
+  component: 'verdocs-view',
+  args: {
+    source,
+  },
+  argTypes: {},
+};
+// const listener = {
+//   handleEvent(e) {
+//     action('selected', e);
+//   },
+//   capture: true,
+// };
+export const View = ({ source }) => html `<verdocs-view .source=${source} />`;

package/dist/components/Auth.js

@@ -0,0 +1,157 @@
+import { g as getEndpoint, d as decodeAccessTokenBody } from './Token.js';
+
+/**
+ * Authenticate to Verdocs via user/password authentication
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ * import {Transport} from '@verdocs/js-sdk/HTTP';
+ *
+ * const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });
+ * Transport.setAuthToken(accessToken);
+ * ```
+ */
+var authenticateUser = function (params) {
+    return getEndpoint()
+        .api.post('/authentication/login', params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Authenticate to Verdocs via client ID / Secret authentication. **NOTE: This is only suitable for
+ * NodeJS server-side applications. Never expose your Client Secret in a Web or Mobile app!** Also note
+ * that access tokens may be cached by server-side apps (and this is recommended) but do expire after 2
+ * hours. This expiration may change based on future security needs. Application developers are encouraged
+ * to check the `exp` expiration field in the response accessToken and renew tokens after they expire.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ * import {Transport} from '@verdocs/js-sdk/HTTP';
+ *
+ * const {accessToken} = await Auth.authenticateApp({ client_id: 'CLIENTID', client_secret: 'SECRET' });
+ * Transport.setAuthToken(accessToken);
+ * ```
+ */
+var authenticateApp = function (params) {
+    return getEndpoint()
+        .api.post('/authentication/login_client', {}, { headers: params })
+        .then(function (r) { return r.data; });
+};
+/**
+ * Validate a token. Only Verdocs tokens will be accepted. Most applications can decode tokens locally,
+ * because tokens will be validated when API calls are made anyway. However, high-security applications
+ * may use this endpoint to check if a token has been revoked.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ *
+ * const {valid} = await Auth.validateToken({ token });
+ * if (!valid) {
+ *   window.alert('Session invalid or expired. Please re-authenticate.');
+ * }
+ * ```
+ */
+var validateToken = function (params) {
+    return getEndpoint()
+        .api.post('/token/isValid', params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * If called before the session expires, this will refresh the caller's session and tokens.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ * import {Transport} from '@verdocs/js-sdk/HTTP';
+ *
+ * const {accessToken} = await Auth.refreshTokens();
+ * Transport.setAuthToken(accessToken);
+ * ```
+ */
+var refreshTokens = function () {
+    return getEndpoint()
+        .api.get('/token')
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update the caller's password. To help prevent CSRF attack vectors, the user's old password and email address are required.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ *
+ * const {status, message} = await Auth.updatePassword({ email, oldPassword, newPassword });
+ * if (status !== 'OK') {
+ *   window.alert(`Password reset error: ${message}`);
+ * }
+ * ```
+ */
+var updatePassword = function (params) {
+    return getEndpoint()
+        .api.put('/user/update_password', params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update the caller's email address.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ *
+ * const {profiles} = await Auth.updateEmail({ email: newEmail });
+ * ```
+ */
+var updateEmail = function (params) {
+    return getEndpoint()
+        .api.put('/user/update_email', params)
+        .then(function (r) { return r.data; });
+};
+var clearSession = function (source, persist) {
+    getEndpoint().setAuthorization(null);
+    if (persist) {
+        localStorage.removeItem(source);
+    }
+    return null;
+};
+/**
+ * Parses and sets the active session, optionally persisting (brower-only, persists to localStorage).
+ */
+var setSession = function (source, token, persist) {
+    if (persist === void 0) { persist = false; }
+    if (token === null) {
+        return clearSession(source, persist);
+    }
+    var session = decodeAccessTokenBody(token || '');
+    if (session === null || (session.exp && session.exp * 1000 < new Date().getTime())) {
+        return clearSession(source, persist);
+    }
+    if (persist) {
+        localStorage.setItem(source, token);
+    }
+    getEndpoint().setAuthorization(token);
+    return session;
+};
+/**
+ * Load a session from localStorage
+ */
+var loadSession = function (source) {
+    var token = localStorage.getItem(source);
+    if (!token) {
+        return null;
+    }
+    var session = decodeAccessTokenBody(token);
+    if (!session) {
+        return null;
+    }
+    if (session.exp && session.exp * 1000 < new Date().getTime()) {
+        localStorage.removeItem(source);
+        return null;
+    }
+    getEndpoint().setAuthorization(token);
+    return session;
+};
+/**
+ * End the active session.
+ */
+var endSession = function (source, persist) {
+    if (persist === void 0) { persist = false; }
+    return clearSession(source, persist);
+};
+
+export { authenticateUser as a, loadSession as l, setSession as s };