@verdocs/web-sdk 1.5.5 → 1.6.2

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-589f3be8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-2c7ecda8.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-4b97517d.js');
 
 /**
  * Authenticate to Verdocs via user/password authentication
@@ -28,10 +28,6 @@ const VerdocsAuth = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.authenticated = index.createEvent(this, "authenticated", 7);
-    /**
-     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
-     */
-    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     /**
      * 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
@@ -57,13 +53,24 @@ const VerdocsAuth = class {
     this.loggingIn = false;
     this.activeSession = null;
     this.loginError = null;
+    this._endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+  }
+  componentWillLoad() {
+    if (this.endpoint) {
+      console.log('Using user-supplied endpoint', this.endpoint);
+      this._endpoint = this.endpoint;
+    }
+    else {
+      console.log('Using default endpoint', this._endpoint);
+    }
   }
   componentDidLoad() {
-    this.endpoint.loadSession();
-    if (this.endpoint.session !== null) {
+    console.log('loaded', this);
+    this._endpoint.loadSession();
+    if (this._endpoint.session) {
       this.isAuthenticated = true;
-      this.activeSession = this.endpoint.session;
-      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
+      this.activeSession = this._endpoint.session;
+      this.authenticated.emit({ authenticated: true, session: this._endpoint.session });
     }
     else {
       this.authenticated.emit({ authenticated: false, session: null });
@@ -75,13 +82,13 @@ const VerdocsAuth = class {
   // }
   handleLogin() {
     this.loggingIn = true;
-    authenticateUser(this.endpoint, { username: this.username, password: this.password })
+    authenticateUser(this._endpoint, { username: this.username, password: this.password })
       .then(r => {
       this.loggingIn = false;
-      this.endpoint.setToken(r.accessToken);
-      this.activeSession = this.endpoint.session;
+      this._endpoint.setToken(r.accessToken);
+      this.activeSession = this._endpoint.session;
       this.isAuthenticated = true;
-      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
+      this.authenticated.emit({ authenticated: true, session: this._endpoint.session });
     })
       .catch(e => {
       var _a;
@@ -95,7 +102,7 @@ const VerdocsAuth = class {
     });
   }
   handleLogout() {
-    this.endpoint.clearSession();
+    this._endpoint.clearSession();
     this.isAuthenticated = false;
     this.authenticated.emit({ authenticated: false, session: null });
   }
@@ -121,3 +128,5 @@ const VerdocsAuth = class {
 VerdocsAuth.style = verdocsAuthCss;
 
 exports.verdocs_auth = VerdocsAuth;
+
+//# sourceMappingURL=verdocs-auth.cjs.entry.js.map

package/dist/cjs/verdocs-auth.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-auth.entry.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAI,gBAAgB,GAAG,UAAU,QAAQ,EAAE,MAAM,EAAE;AAC1D,IAAI,OAAO,QAAQ,CAAC,GAAG;AACvB,SAAS,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC;AAC9C,SAAS,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,CAAC;;ACfD,MAAM,cAAc,GAAG,+lCAA+lC;;MCyCzmC,WAAW;EAJxB;;;;;;;;IAeU,YAAO,GAAY,IAAI,CAAC;;;;;;IAOxB,SAAI,GAAW,0CAA0C,CAAC;;;;;;IAO1D,UAAK,GAAY,KAAK,CAAC;IAOtB,oBAAe,GAAY,KAAK,CAAC;IACjC,gBAAW,GAAW,OAAO,CAAC;IAC9B,aAAQ,GAAW,EAAE,CAAC;IACtB,aAAQ,GAAW,EAAE,CAAC;IACtB,cAAS,GAAY,KAAK,CAAC;IAC3B,kBAAa,GAAa,IAAI,CAAC;IAC/B,eAAU,GAAkB,IAAI,CAAC;IACjC,cAAS,GAAGA,+BAAe,CAAC,UAAU,EAAE,CAAC;GAkJnD;EAhJC,iBAAiB;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC3D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;KAChC;SAAM;MACL,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACvD;GACF;EAED,gBAAgB;IACd,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;IAC7B,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;MAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;MAC5C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAC,CAAC,CAAC;KACjF;SAAM;MACL,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;KAChE;GACF;;;;;EAOD,WAAW;IACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtBC,gBAAqB,CAAC,IAAI,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC;OACtF,IAAI,CAAC,CAAC;MACL,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;MACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;MACvC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;MAC5C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAC,CAAC,CAAC;KACjF,CAAC;OACD,KAAK,CAAC,CAAC;;MACN,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;MACpE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;MACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;MAE/D,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,QAAQ,0CAAE,MAAM,MAAK,GAAG,EAAE;QAC/B,IAAI,CAAC,UAAU,GAAG,wDAAwD,CAAC;OAC5E;KACF,CAAC,CAAC;GACN;EAED,YAAY;IACV,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;IAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;GAChE;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAOC,iBAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,+BAAgC,CAAC;KACtE;IAED,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,IAAI,CAAC,KAAK,EAAE;QACd,QACEA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,4BAAgB,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,CAC3F,EACN;OACH;MAED,OAAOA,iBAAK,KAAK,EAAC,eAAe,oBAAoB,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE;MACjC,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,GAAG,EAEvDA,6CAA+B,EAC/BA,gDAEEA,4BAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAI,CACpH,EAELA,kBAAM,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACtCA,gCAAoB,KAAK,EAAC,OAAO,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAI,EAC3JA,gCACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,kBAAkB,EAC/B,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,EAC7C,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,EAEFA,4BACE,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAC,GACzE,CACG,CACH,EACN;KACH;IAED,QACEA,iBAAK,KAAK,EAAC,YAAY,IACrBA,iBAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,GAAG,EAEvDA,6CAA+B,EAC/BA,8CAEEA,4BAAgB,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAI,CACtH,EAELA,kBAAM,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACtCA,gCAAoB,KAAK,EAAC,OAAO,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAI,EAC3JA,gCACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,kBAAkB,EAC/B,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,EAC7C,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,EAEFA,4BACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,EAC5C,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAC,GAC5E,EAEFA,4BAAgB,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAC,GAAI,CACnK,EAEN,IAAI,CAAC,UAAU,GAAGA,+BAAmB,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAI,GAAGA,oBAAO,CACnJ,EACN;GACH;;;;;;","names":["VerdocsEndpoint","Auth.authenticateUser","h"],"sources":["./node_modules/@verdocs/js-sdk/Users/Auth.js","./src/components/embeds/verdocs-auth/verdocs-auth.scss?tag=verdocs-auth","./src/components/embeds/verdocs-auth/verdocs-auth.tsx"],"sourcesContent":["/**\n * Authenticate to Verdocs via user/password authentication\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n *\n * const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });\n * Transport.setAuthToken(accessToken);\n * ```\n */\nexport var authenticateUser = function (endpoint, params) {\n    return endpoint.api //\n        .post('/authentication/login', params)\n        .then(function (r) { return r.data; });\n};\n/**\n * Authenticate to Verdocs via client ID / Secret authentication. **NOTE: This is only suitable for\n * NodeJS server-side applications. Never expose your Client Secret in a Web or Mobile app!** Also note\n * that access tokens may be cached by server-side apps (and this is recommended) but do expire after 2\n * hours. This expiration may change based on future security needs. Application developers are encouraged\n * to check the `exp` expiration field in the response accessToken and renew tokens after they expire.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n *\n * const {accessToken} = await Auth.authenticateApp({ client_id: 'CLIENTID', client_secret: 'SECRET' });\n * Transport.setAuthToken(accessToken);\n * ```\n */\nexport var authenticateApp = function (endpoint, params) {\n    return endpoint.api //\n        .post('/authentication/login_client', {}, { headers: params })\n        .then(function (r) { return r.data; });\n};\n/**\n * Validate a token. Only Verdocs tokens will be accepted. Most applications can decode tokens locally,\n * because tokens will be validated when API calls are made anyway. However, high-security applications\n * may use this endpoint to check if a token has been revoked.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n *\n * const {valid} = await Auth.validateToken({ token });\n * if (!valid) {\n *   window.alert('Session invalid or expired. Please re-authenticate.');\n * }\n * ```\n */\nexport var validateToken = function (endpoint, params) {\n    return endpoint.api //\n        .post('/token/isValid', params)\n        .then(function (r) { return r.data; });\n};\n/**\n * If called before the session expires, this will refresh the caller's session and tokens.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n *\n * const {accessToken} = await Auth.refreshTokens();\n * Transport.setAuthToken(accessToken);\n * ```\n */\nexport var refreshTokens = function (endpoint) {\n    return endpoint.api //\n        .get('/token')\n        .then(function (r) { return r.data; });\n};\n/**\n * Update the caller's password. To help prevent CSRF attack vectors, the user's old password and email address are required.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n *\n * const {status, message} = await Auth.updatePassword({ email, oldPassword, newPassword });\n * if (status !== 'OK') {\n *   window.alert(`Password reset error: ${message}`);\n * }\n * ```\n */\nexport var updatePassword = function (endpoint, params) {\n    return endpoint.api //\n        .put('/user/update_password', params)\n        .then(function (r) { return r.data; });\n};\n/**\n * Update the caller's email address.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n *\n * const {profiles} = await Auth.updateEmail({ email: newEmail });\n * ```\n */\nexport var updateEmail = function (endpoint, params) {\n    return endpoint.api //\n        .put('/user/update_email', params)\n        .then(function (r) { return r.data; });\n};\n","@import '../../../theme.scss';\n\nverdocs-auth {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  .login-form,\n  .signup-form {\n    background: $verdocs-grey-4;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    display: flex;\n    padding: 20px;\n    width: 300px;\n    max-width: 100%;\n  }\n\n  .logo {\n    margin: 20px 0 30px;\n    width: 128px;\n    max-width: 100%;\n  }\n\n  h3 {\n    text-align: center;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 1.75;\n    margin: 0;\n  }\n\n  h4 {\n    text-align: center;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 1.43;\n    margin: 0;\n  }\n\n  .status-result {\n    display: none;\n\n    &.debug {\n      white-space: pre-wrap;\n      font-size: 14px;\n      background: #fff;\n      padding: 10px;\n      display: block;\n      flex-direction: row;\n      justify-content: center;\n    }\n  }\n\n  form {\n    width: 100%;\n  }\n\n  verdocs-text-input {\n    margin-bottom: 10px;\n  }\n}\n","import {Auth} from '@verdocs/js-sdk/Users';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {VerdocsEndpoint, TSession} from '@verdocs/js-sdk';\n\nexport interface IAuthStatus {\n  authenticated: boolean;\n  session: TSession;\n}\n\n/**\n * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\n * occur during the process (especially successful completion). The success callback will be fired immediately if the\n * user is already authenticated with a valid session, so this component may not always display visibly.\n *\n * To simplify some types of authentication flows, a visibility flag can force this component to never display. This\n * allows you to susbcribe to notifications from the\n *\n * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\n * container to allow sufficient space for the required forms.\n *\n * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\n * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\n * cancels) authentication steps.\n *\n * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n *\n * ```typescript\n * interface IAuthStatus {\n *   // If true, the user is authenticated with a valid session\n *   authenticated: boolean;\n *\n *   // Details for the user's session\n *   session: IActiveSession | null;\n * }\n * ```\n */\n@Component({\n  tag: 'verdocs-auth',\n  styleUrl: 'verdocs-auth.scss',\n})\nexport class VerdocsAuth {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint;\n\n  /**\n   * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\n   * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\n   * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\n   * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\n   * in SVG format for best results.\n   */\n  @Prop() logo: string = 'https://verdocs.com/assets/blue-logo.svg';\n\n  /**\n   * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\n   * if the user's session details will be displayed instead. This may be useful while debugging authentication\n   * flows in new applications.\n   */\n  @Prop() debug: boolean = false;\n\n  /**\n   * Event fired when session authentication process has completed. Check the event contents for completion status.\n   */\n  @Event({composed: true}) authenticated: EventEmitter<IAuthStatus>;\n\n  @State() isAuthenticated: boolean = false;\n  @State() displayMode: string = 'login';\n  @State() username: string = '';\n  @State() password: string = '';\n  @State() loggingIn: boolean = false;\n  @State() activeSession: TSession = null;\n  @State() loginError: string | null = null;\n  @State() _endpoint = VerdocsEndpoint.getDefault();\n\n  componentWillLoad() {\n    if (this.endpoint) {\n      console.log('Using user-supplied endpoint', this.endpoint);\n      this._endpoint = this.endpoint;\n    } else {\n      console.log('Using default endpoint', this._endpoint);\n    }\n  }\n\n  componentDidLoad() {\n    console.log('loaded', this);\n    this._endpoint.loadSession();\n    if (this._endpoint.session) {\n      this.isAuthenticated = true;\n      this.activeSession = this._endpoint.session;\n      this.authenticated.emit({authenticated: true, session: this._endpoint.session});\n    } else {\n      this.authenticated.emit({authenticated: false, session: null});\n    }\n  }\n\n  // handleSelectOption(option: IMenuOption) {\n  //   this.isAuthenticated = false;\n  //   this.authenticated.emit(option);\n  // }\n\n  handleLogin() {\n    this.loggingIn = true;\n    Auth.authenticateUser(this._endpoint, {username: this.username, password: this.password})\n      .then(r => {\n        this.loggingIn = false;\n        this._endpoint.setToken(r.accessToken);\n        this.activeSession = this._endpoint.session;\n        this.isAuthenticated = true;\n        this.authenticated.emit({authenticated: true, session: this._endpoint.session});\n      })\n      .catch(e => {\n        console.log('[VERDOCS] Login error', e.response, JSON.stringify(e));\n        this.loggingIn = false;\n        this.activeSession = null;\n        this.authenticated.emit({authenticated: false, session: null});\n\n        if (e?.response?.status === 403) {\n          this.loginError = 'Please check your username and password and try again.';\n        }\n      });\n  }\n\n  handleLogout() {\n    this._endpoint.clearSession();\n    this.isAuthenticated = false;\n    this.authenticated.emit({authenticated: false, session: null});\n  }\n\n  handleClearError() {\n    this.loginError = null;\n  }\n\n  render() {\n    if (!this.visible) {\n      return <div style={{display: 'none'}}>Verdocs Auth Placeholder</div>;\n    }\n\n    if (this.isAuthenticated) {\n      if (this.debug) {\n        return (\n          <div class=\"status-result debug\">\n            <verdocs-button label=\"Logout\" disabled={this.loggingIn} onPress={() => this.handleLogout()} />\n          </div>\n        );\n      }\n\n      return <div class=\"status-result\">Authenticated</div>;\n    }\n\n    if (this.displayMode === 'signup') {\n      return (\n        <div class=\"signup-form\">\n          <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n          <h3>Sign up for an account</h3>\n          <h4>\n            Already have an account?\n            <verdocs-button label=\"Log In\" variant=\"text\" onClick={() => (this.displayMode = 'login')} disabled={this.loggingIn} />\n          </h4>\n\n          <form onSubmit={() => this.handleLogin()}>\n            <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onFieldInput={e => (this.username = e.detail)} disabled={this.loggingIn} />\n            <verdocs-text-input\n              label=\"Password\"\n              type=\"password\"\n              autocomplete=\"current-password\"\n              value={this.password}\n              onFieldInput={e => (this.password = e.detail)}\n              disabled={this.loggingIn}\n            />\n\n            <verdocs-button\n              label=\"Signup\"\n              disabled={this.loggingIn}\n              onPress={() => this.handleLogin()}\n              style={{display: 'flex', justifyContent: 'center', margin: '30px auto 0'}}\n            />\n          </form>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"login-form\">\n        <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n        <h3>Log in to your account</h3>\n        <h4>\n          Don't have an account?\n          <verdocs-button label=\"Sign Up\" variant=\"text\" onClick={() => (this.displayMode = 'signup')} disabled={this.loggingIn} />\n        </h4>\n\n        <form onSubmit={() => this.handleLogin()}>\n          <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onFieldInput={e => (this.username = e.detail)} disabled={this.loggingIn} />\n          <verdocs-text-input\n            label=\"Password\"\n            type=\"password\"\n            autocomplete=\"current-password\"\n            value={this.password}\n            onFieldInput={e => (this.password = e.detail)}\n            disabled={this.loggingIn}\n          />\n\n          <verdocs-button\n            label=\"Forgot Your Password?\"\n            variant=\"text\"\n            onClick={() => (this.displayMode = 'signup')}\n            disabled={this.loggingIn}\n            style={{display: 'flex', justifyContent: 'center', margin: '10px auto 20px'}}\n          />\n\n          <verdocs-button label=\"Login\" disabled={this.loggingIn} onPress={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n        </form>\n\n        {this.loginError ? <verdocs-ok-dialog open={true} heading=\"Login Error\" message={this.loginError} onClosed={() => this.handleClearError()} /> : <div />}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -102,3 +102,5 @@ VerdocsTextInput.style = verdocsTextInputCss;
 
 exports.verdocs_button = VerdocsButton;
 exports.verdocs_text_input = VerdocsTextInput;
+
+//# sourceMappingURL=verdocs-button_2.cjs.entry.js.map

package/dist/cjs/verdocs-button_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-button.verdocs-text-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,6gFAA6gF;;MCqBzhF,aAAa;EAJ1B;;;;;;IAaU,cAAS,GAAkB,IAAI,CAAC;;;;IAKhC,YAAO,GAAkB,IAAI,CAAC;;;;IAK9B,SAAI,GAA4C,QAAQ,CAAC;;;;IAKzD,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAoC,UAAU,CAAC;;;;IAKtD,aAAQ,GAAY,KAAK,CAAC;GAqBnC;EAdC,WAAW,CAAC,CAAM;IAChB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACnB;EAED,MAAM;IACJ,QACEA,oBAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,IACpI,IAAI,CAAC,SAAS,GAAGA,kBAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/EA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,OAAO,GAAGA,kBAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,GAAG,IAAI,CAClE,EACT;GACH;;;;AC3EH,MAAM,mBAAmB,GAAG,m1BAAm1B;;MCal2B,gBAAgB;EAJ7B;;;;;;;;IAQU,UAAK,GAAW,EAAE,CAAC;;;;IAKnB,UAAK,GAAW,EAAE,CAAC;;;;IAKnB,gBAAW,GAAW,EAAE,CAAC;;;;IAKzB,iBAAY,GAAW,EAAE,CAAC;;;;;IAM1B,SAAI,GAAwE,MAAM,CAAC;;;;IAKnF,aAAQ,GAAY,KAAK,CAAC;IAEzB,WAAM,GAAW,EAAE,CAAC;GAwD9B;EAvCC,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;GAC1B;EAED,gBAAgB,MAAK;EAErB,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC7B;EAED,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAC,aAAa,IACvBD,uBACG,IAAI,CAAC,KAAK,GAAGA,iBAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAGA,oBAAO,EACzEA,mBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACzC,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GACvC,CACI,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","./src/components/controls/verdocs-button/verdocs-button.tsx","./src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","./src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .label {\n      padding: 0 12px;\n    }\n\n    &:disabled {\n      cursor: none;\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n        cursor: none;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        cursor: none;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Display a simple button.\n *\n * Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n * (Auth uses text buttons for the Forgot Password and Sign Up options.)\n *\n * Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\n * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\n * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n *\n * Icons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\n * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\n * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event fired when the button is pressed.\n   */\n  @Event({composed: true}) press!: EventEmitter;\n\n  handleClick(e: any) {\n    e.preventDefault();\n    this.press.emit();\n  }\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} onClick={e => this.handleClick(e)} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 20px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $medium-bg;\n    font-weight: 400;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n}\n","import {Component, Prop, State, Event, Host, h, EventEmitter} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Bear in mind Stencil does not currently support emitting events\n * with the same names as native DOM events, so rather than `input` or `blur` we have `tinput`, `tblur`,\n * etc. We used a temporary prefix here to mark this as a temporary API, because we hope this will change\n * in a future Stencil release. See https://github.com/ionic-team/stencil/issues/2822.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  /**\n   * Event fired when the input value changes.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired when the field receives focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter;\n\n  /**\n   * Event fired when the field loses focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter;\n\n  componentWillLoad() {\n    this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  handleInput(event) {\n    this._value = event.target.value;\n    this.fieldInput.emit(this._value);\n  }\n\n  handleFocus(event) {\n    this.fieldFocus.emit(event);\n  }\n\n  handleBlur(event) {\n    this.fieldBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            disabled={this.disabled}\n            value={this._value}\n            class=\"input-element\"\n            onInput={event => this.handleInput(event)}\n            onFocus={event => this.handleFocus(event)}\n            onBlur={event => this.handleBlur(event)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}