@verdocs/web-sdk 1.0.25 → 1.1.0

package/dist/esm/verdocs-auth.entry.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, c as createEvent, h } from './index-80d1b936.js';
+import { g as getEndpoint, V as VerdocsEndpoint, s as setActiveEndpoint } from './Transport-797d3c59.js';
+import { d as decodeAccessTokenBody } from './Token-a058076d.js';
+import './index-2b1938ea.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; });
+};
+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;
+};
+
+const verdocsAuthCss = "verdocs-auth{font-family:sans-serif;font-family:var(--verdocs-font);background-color:var(--verdocs-secondary-color);padding:40px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#f2f5fa;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
+
+const BASE_URL = 'https://stage-api.verdocs.com/';
+const SOURCE = 'verdocs-stage';
+let VerdocsAuth = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.authenticated = createEvent(this, "authenticated", 7);
+    /**
+     * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display
+     * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may
+     * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.
+     */
+    this.visible = true;
+    /**
+     * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to
+     * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be
+     * in SVG format for best results.
+     */
+    this.logo = 'https://verdocs.com/assets/blue-logo.svg';
+    /**
+     * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary
+     * if the user's session details will be displayed instead. This may be useful while debugging authentication
+     * flows in new applications.
+     */
+    this.debug = false;
+    this.isAuthenticated = false;
+    this.displayMode = 'login';
+    this.username = '';
+    this.password = '';
+    this.loggingIn = false;
+    this.activeSession = null;
+    this.loginError = null;
+  }
+  componentWillLoad() {
+    const staging = new VerdocsEndpoint({ baseURL: BASE_URL });
+    setActiveEndpoint(staging);
+    console.log('Set active endpoint', getEndpoint());
+  }
+  componentDidLoad() {
+    const session = loadSession(SOURCE);
+    console.log('loaded session', session, SOURCE);
+    if (session !== null) {
+      this.isAuthenticated = true;
+      this.activeSession = session;
+      this.authenticated.emit({ authenticated: true, session });
+    }
+    else {
+      this.authenticated.emit({ authenticated: false, session: null });
+    }
+  }
+  // handleSelectOption(option: IMenuOption) {
+  //   this.isAuthenticated = false;
+  //   this.authenticated.emit(option);
+  // }
+  handleLogin() {
+    this.loggingIn = true;
+    authenticateUser({ username: this.username, password: this.password })
+      .then(r => {
+      this.loggingIn = false;
+      console.log('Login result', r.accessToken);
+      const session = setSession(SOURCE, r.accessToken, true);
+      this.activeSession = session;
+      this.isAuthenticated = true;
+      console.log('set session', session);
+      this.authenticated.emit({ authenticated: true, session });
+    })
+      .catch(e => {
+      var _a;
+      console.log('Login error', e.response, JSON.stringify(e));
+      this.loggingIn = false;
+      this.activeSession = null;
+      this.authenticated.emit({ authenticated: false, session: null });
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 403) {
+        this.loginError = 'Please check your username and password and try again.';
+      }
+    });
+  }
+  handleLogout() {
+    // endSession(SOURCE);
+    this.isAuthenticated = false;
+    this.authenticated.emit({ authenticated: false, session: null });
+  }
+  handleClearError() {
+    this.loginError = null;
+  }
+  render() {
+    if (!this.visible) {
+      return h("div", { style: { display: 'none' } }, "Verdocs Auth Placeholder");
+    }
+    if (this.isAuthenticated) {
+      if (this.debug) {
+        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onPress: () => this.handleLogout() })));
+      }
+      return h("div", { class: "status-result" }, "Authenticated");
+    }
+    if (this.displayMode === 'signup') {
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+    }
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { open: true, heading: "Login Error", message: this.loginError, onClosed: () => this.handleClearError() }) : h("div", null)));
+  }
+};
+VerdocsAuth.style = verdocsAuthCss;
+
+export { VerdocsAuth as verdocs_auth };

package/dist/esm/verdocs-button_2.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-80d1b936.js';
+
+const verdocsButtonCss = "verdocs-button button{font-family:sans-serif;font-family:var(--verdocs-font);text-transform:uppercase;cursor:pointer;font-weight:500}verdocs-button button:disabled{cursor:none}verdocs-button.standard button{background:var(--verdocs-primary-color);border-radius:4px;font-size:14px;color:white;border:none;outline:none;height:32px;margin:0;display:block;padding:0 20px}verdocs-button.standard button:disabled{background-color:#999;cursor:default}verdocs-button.standard button:active{-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button.text button{border:none;font-size:14px;color:var(--verdocs-secondary-color);font-weight:400;outline:none;background:transparent;padding:0 4px}verdocs-button.text button:disabled{color:#999;cursor:none}verdocs-button.text button:active{-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button.outline button{font-size:14px;border:1px solid var(--verdocs-secondary-color);color:var(--verdocs-secondary-color);outline:none;background:transparent;height:32px;border-radius:4px;padding:0 20px}verdocs-button.outline button:disabled{color:#999;cursor:none;border:1px solid #999}verdocs-button.outline button:active{background:var(--verdocs-secondary-color);color:white}";
+
+let VerdocsButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.press = createEvent(this, "press", 7);
+    /**
+     * The label for the  button.
+     */
+    this.label = '';
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    /**
+     * The display variant of the button.
+     */
+    this.variant = 'standard';
+    /**
+     * Whether the button should be disabled.
+     */
+    this.disabled = false;
+  }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  handleClick(e) {
+    e.preventDefault();
+    this.press.emit();
+  }
+  render() {
+    return (h(Host, { class: `${this.variant}` }, h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e) }, this.label)));
+  }
+};
+VerdocsButton.style = verdocsButtonCss;
+
+const verdocsTextInputCss = "verdocs-text-input{font-family:sans-serif;font-family:var(--verdocs-font);-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#fff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaa;opacity:1}verdocs-text-input .input-label{display:block;color:#333;font-weight:400;font-size:14px;margin:0 0 4px 0}";
+
+let VerdocsTextInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fieldInput = createEvent(this, "fieldInput", 7);
+    this.fieldFocus = createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = createEvent(this, "fieldBlur", 7);
+    /**
+     * The value for the input field.
+     */
+    this.value = '';
+    /**
+     * The label for the field.
+     */
+    this.label = '';
+    /**
+     * The placeholder for the field.
+     */
+    this.placeholder = '';
+    /**
+     * If desired, the autocomplete attribute to set.
+     */
+    this.autocomplete = '';
+    /**
+     * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types
+     * (e.g. a date picker) will be supported by other controls in the future.
+     */
+    this.type = 'text';
+    /**
+     * Should the field be disabled?
+     */
+    this.disabled = false;
+    this._value = '';
+  }
+  componentWillLoad() {
+    this._value = this.value;
+  }
+  componentDidLoad() { }
+  handleInput(event) {
+    this._value = event.target.value;
+    this.fieldInput.emit(this._value);
+  }
+  handleFocus(event) {
+    this.fieldFocus.emit(event);
+  }
+  handleBlur(event) {
+    this.fieldBlur.emit(event);
+  }
+  render() {
+    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, placeholder: this.placeholder, autoComplete: this.autocomplete, disabled: this.disabled, value: this._value, class: "input-element", onInput: event => this.handleInput(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleBlur(event) }))));
+  }
+};
+VerdocsTextInput.style = verdocsTextInputCss;
+
+export { VerdocsButton as verdocs_button, VerdocsTextInput as verdocs_text_input };

package/dist/esm/verdocs-document-status.entry.js

@@ -0,0 +1,50 @@
+import { r as registerInstance, h, H as Host } from './index-80d1b936.js';
+
+const PendingIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"/><circle cx="7" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="17" cy="12" r="1.5"/></g></g></svg>`;
+
+const CheckIcon = `<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.7367 1.10949L10.8409 19.2378L4.26524 12.5768C3.94644 12.2538 3.42951 12.2538 3.11064 12.5768L1.18637 14.5261C0.867564 14.849 0.867564 15.3726 1.18637 15.6957L10.2635 24.8907C10.5823 25.2136 11.0992 25.2136 11.4181 24.8907L31.8155 4.22835C32.1344 3.9054 32.1344 3.38177 31.8155 3.05875L29.8913 1.10949C29.5725 0.786542 29.0556 0.786542 28.7367 1.10949Z" fill="#AEB4BF"/>
+</svg>
+`;
+
+const StopIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>`;
+
+const XIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+
+const verdocsDocumentStatusCss = "verdocs-document-status{font-family:sans-serif;font-family:var(--verdocs-font);width:140px;display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:var(--verdocs-label-color)}verdocs-document-status svg{height:20px;width:20px;margin:0 8px -4px 0;fill:var(--verdocs-icon-color)}";
+
+let VerdocsDocumentStatus = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    let icon;
+    let statusMessage;
+    switch (this.status) {
+      case 'complete':
+        icon = CheckIcon;
+        statusMessage = 'Completed';
+        break;
+      case 'pending':
+        icon = PendingIcon;
+        statusMessage = 'Pending';
+        break;
+      case 'in progress':
+        icon = PendingIcon;
+        statusMessage = 'In Progress';
+        break;
+      case 'canceled':
+        icon = XIcon;
+        statusMessage = 'Cancelled';
+        break;
+      case 'declined':
+        icon = StopIcon;
+        statusMessage = 'Declined';
+        break;
+    }
+    return (h(Host, null, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage)));
+  }
+};
+VerdocsDocumentStatus.style = verdocsDocumentStatusCss;
+
+export { VerdocsDocumentStatus as verdocs_document_status };