@verdocs/web-sdk 2.0.28 → 2.1.1

package/dist/components/verdocs-auth.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as decodeAccessTokenBody } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import './Types.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$5 } from './verdocs-button2.js';
@@ -39,9 +39,72 @@ var authenticateUser = function (endpoint, params) {
         .post('/authentication/login', params)
         .then(function (r) { return r.data; });
 };
+/**
+ * Reset the caller's password.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ *
+ * const {success} = await Auth.resetPassword({ email });
+ * if (status !== 'OK') {
+ *   window.alert(`Please check your email for instructions on how to reset your password.`);
+ * }
+ * ```
+ */
+var resetPassword = function (endpoint, params) {
+    return endpoint.api //
+        .post('/user/reset_password', params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Resend the email verification request. Note that to prevent certain forms of abuse, the email address is not
+ * a parameter here. Instead, the caller must be authenticated as the (unverified) user. To simplify this process,
+ * the access token to be used may be passed directly as a parameter here. This avoids the need to set it as the
+ * active token on an endpoint, which may be inconvenient in workflows where it is preferable to keep the user in
+ * "anonymous" mode while verification is being performed.
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ *
+ * const result = await Auth.resendVerification();
+ * ```
+ */
+var resendVerification = function (endpoint, accessToken) {
+    return endpoint.api //
+        .post('/user/email_verification', {}, accessToken ? { headers: { Authorization: "Bearer ".concat(accessToken) } } : {})
+        .then(function (r) { return r.data; });
+};
+
+/**
+ * Get the user's available profiles. The current profile will be marked with `current: true`.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const profiles = await Profiles.getProfiles()
+ * ```
+ */
+/**
+ * Create a user account and parent organization. This endpoint is for creating a new organization. Users joining an
+ * existing organization should be invited, and follow their invitation links/instructions to create their accounts.
+ *
+ * ```typescript
+ * import {Profiles} from '@verdocs/js-sdk/Users';
+ *
+ * const newAccount = await Profiles.createBusinessAccount({
+ *   orgName: 'ORG', email: 'a@b.com', password: '12345678', firstName: 'FIRST', lastName: 'LAST'
+ * });
+ * ```
+ */
+var createBusinessAccount = function (endpoint, params) {
+    return endpoint.api //
+        .post('/user/business', params)
+        .then(function (r) { return r.data; });
+};
 
-const verdocsAuthCss = "verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;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:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-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 h4 verdocs-button button.normal .button-label{padding: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}verdocs-auth .account-option{gap:8px;margin:20px 0 8px 0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";
+const verdocsAuthCss = "verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;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 .form{background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-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 h4 verdocs-button button.normal .button-label{padding:0}verdocs-auth .buttons{gap:20px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}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}verdocs-auth .account-option{gap:8px;margin:20px 0 8px 0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-auth p+p{margin-top:0}";
 
+const RECHECK_INTERVAL = 5000;
 const Industries = [
   { value: '', label: '' },
   { value: 'Accounting & Tax', label: 'Accounting & Tax' },
@@ -88,6 +151,9 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.authenticated = createEvent(this, "authenticated", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.recheckTimer = null;
+    this.resendDisabledTimer = null;
+    this.accessTokenForVerification = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.visible = true;
     this.logo = 'https://app.verdocs.com/assets/blue-logo.svg';
@@ -100,14 +166,15 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.username = '';
     this.phone = '';
     this.password = '';
-    this.loggingIn = false;
+    this.submitting = false;
     this.activeSession = null;
     this.accountType = 'org';
     this.howHear = '';
     this.industry = '';
     this.companySize = '';
     this.reason = '';
-    this.step = 1;
+    this.signupStep = 1;
+    this.resendDisabled = false;
   }
   componentWillLoad() {
     var _a, _b;
@@ -123,42 +190,94 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       (_b = this.authenticated) === null || _b === void 0 ? void 0 : _b.emit({ authenticated: false, session: null });
     }
   }
+  disconnectedCallback() {
+    this.cancelRecheckTimer();
+  }
+  cancelRecheckTimer() {
+    if (this.recheckTimer) {
+      try {
+        clearTimeout(this.recheckTimer);
+      }
+      catch (e) {
+        // NOP
+      }
+      this.recheckTimer = null;
+    }
+    if (this.resendDisabledTimer) {
+      try {
+        clearTimeout(this.resendDisabledTimer);
+      }
+      catch (e) {
+        // NOP
+      }
+      this.resendDisabledTimer = null;
+    }
+  }
   handleSignup() {
-    this.loggingIn = true;
-    authenticateUser(this.endpoint, { username: this.username, password: this.password })
+    this.submitting = true;
+    this.accessTokenForVerification = null;
+    createBusinessAccount(this.endpoint, {
+      email: this.username,
+      password: this.password,
+      firstName: this.first,
+      lastName: this.last,
+      orgName: this.orgname,
+      industry: this.industry,
+      size: this.companySize,
+      // source?: string;
+      // referral?: string;
+      // coupon?: string;
+      reason: this.reason,
+      hearabout: this.howHear,
+    })
       .then(r => {
-      var _a;
-      this.loggingIn = false;
-      this.endpoint.setToken(r.accessToken);
-      this.activeSession = this.endpoint.session;
-      this.isAuthenticated = true;
-      (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
+      console.log('Result', r);
+      console.log('[AUTH] Created profile', r.profile);
+      console.log('[AUTH] Created organization', r.organization);
+      this.loginAndCheckVerification();
     })
       .catch(e => {
-      var _a, _b, _c, _d;
-      console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));
-      this.loggingIn = false;
+      var _a, _b, _c, _d, _e;
+      console.log('[AUTH] Signup error', e.response, JSON.stringify(e));
+      this.submitting = false;
       this.activeSession = null;
       (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
       (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
-      VerdocsToast('Login failed. Please check your username and password and try again.', { style: 'error' });
+      VerdocsToast('Signup failed: ' + ((_e = e.response) === null || _e === void 0 ? void 0 : _e.data), { style: 'error' });
     });
   }
-  handleLogin() {
-    this.loggingIn = true;
+  loginAndCheckVerification() {
+    this.submitting = true;
+    this.accessTokenForVerification = null;
     authenticateUser(this.endpoint, { username: this.username, password: this.password })
       .then(r => {
       var _a;
-      this.loggingIn = false;
-      this.endpoint.setToken(r.accessToken);
-      this.activeSession = this.endpoint.session;
-      this.isAuthenticated = true;
-      (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
+      this.cancelRecheckTimer();
+      this.submitting = false;
+      const body = decodeAccessTokenBody(r.accessToken);
+      console.log('[AUTH] Got access token body', body);
+      if (body === null || body === void 0 ? void 0 : body.email_verified) {
+        console.log('[AUTH] Email address is verified, completing login');
+        this.displayMode = 'login'; // After signing out, this will be the next mode
+        this.accessTokenForVerification = null;
+        this.endpoint.setToken(r.accessToken);
+        this.activeSession = this.endpoint.session;
+        this.isAuthenticated = true;
+        (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
+      }
+      else {
+        console.log('[AUTH] Logged in, pending email address verification');
+        this.displayMode = 'verify';
+        this.accessTokenForVerification = r.accessToken;
+        this.recheckTimer = setTimeout(() => this.loginAndCheckVerification(), RECHECK_INTERVAL);
+      }
     })
       .catch(e => {
       var _a, _b, _c, _d;
+      this.cancelRecheckTimer();
       console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));
-      this.loggingIn = false;
+      this.displayMode = 'login';
+      this.submitting = false;
       this.activeSession = null;
       (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
       (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
@@ -169,8 +288,40 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     var _a;
     this.endpoint.clearSession();
     this.isAuthenticated = false;
+    this.accessTokenForVerification = null;
     (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
   }
+  handleResend() {
+    // Avoid the user just click-spamming this pathway. The server rate-limits this anyway so it's not a
+    // security issue but it's a poor user experience to allow it.
+    this.resendDisabled = true;
+    this.resendDisabledTimer = setTimeout(() => {
+      this.resendDisabled = false;
+      this.resendDisabledTimer = null;
+    }, 30000);
+    resendVerification(this.endpoint, this.accessTokenForVerification)
+      .then(r => {
+      console.log('[AUTH] Verification request resent', r);
+      VerdocsToast('Please check your email for a message with verification instructions.', { style: 'info' });
+    })
+      .catch((e) => {
+      console.log('[AUTH] Unable to resend verification', e);
+    });
+  }
+  handleReset() {
+    this.submitting = true;
+    resetPassword(this.endpoint, { email: this.username })
+      .then(r => {
+      console.log('[AUTH] Reset sent', r);
+      this.submitting = false;
+      this.displayMode = 'login';
+      VerdocsToast('If your email address is registered, you will receive instructions on resetting your password shortly.', { style: 'info' });
+    })
+      .catch((e) => {
+      console.log('[AUTH] Unable to reset password', e);
+      this.submitting = false;
+    });
+  }
   async checkAvailability(name) {
     this.orgname = name;
     this.orgAvailable = '';
@@ -184,18 +335,30 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return h("div", { style: { display: 'none' } }, "Authenticated");
     }
     if (this.isAuthenticated) {
-      return (h("verdocs-button", { label: "Sign Out", disabled: this.loggingIn, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
+      return (h("verdocs-button", { label: "Sign Out", disabled: this.submitting, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
     }
     if (this.displayMode === 'signup') {
-      const step1Valid = this.loggingIn || !this.first || !this.last || !this.username || !this.password || !this.orgname || this.orgAvailable !== 'OK';
-      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for a trial account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), this.step === 1 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", required: true, value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.loggingIn })), h("verdocs-text-input", { label: "Email", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Phone #", autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", required: true, value: this.orgname, onInput: (e) => this.checkAvailability(e.target.value), disabled: this.loggingIn }), this.orgAvailable === 'TAKEN' && h("p", { style: { color: 'red' } }, "This organization name is already taken."), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: step1Valid, onClick: () => (this.step = 2), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.step === 2 && (h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "How did you hear about Verdocs?", value: this.howHear, onInput: (e) => (this.howHear = e.target.value), disabled: this.loggingIn }), h("verdocs-select-input", { label: "Your Industry", options: Industries, value: this.industry, onInput: (e) => (this.industry = e.target.value), disabled: this.loggingIn }), h("verdocs-select-input", { label: "Company Size", options: CompanySizes, value: this.companySize, onInput: (e) => (this.companySize = e.target.value), disabled: this.loggingIn }), h("verdocs-select-input", { label: "Purpose", options: Reasons, value: this.reason, onInput: (e) => (this.reason = e.target.value), disabled: this.loggingIn }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Create Account", disabled: this.loggingIn, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.step === 3 && (h("form", { onSubmit: () => this.handleSignup() }, h("p", null, "Please check your e-mail inbox for a verification code and follow the instructions provided."), h("p", null, h("em", null, "Verification messages may take up to 1 hour to arrive. If you do not receive the invitation, ", h("a", { href: "#" }, "Click Here"), " to resend it. Be sure to check your spam folder.")), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.loggingIn, onClick: () => {
-          this.step = 4;
+      const step1Invalid = this.submitting || !this.first || !this.last || !this.username || !this.password || !this.orgname || this.orgAvailable !== 'OK';
+      console.log({ step1Invalid }, this.orgAvailable);
+      return (h("div", { class: "form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for a trial account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), this.signupStep === 1 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", required: true, value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone #", autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", required: true, value: this.orgname, onInput: (e) => this.checkAvailability(e.target.value), disabled: this.submitting }), this.orgAvailable === 'TAKEN' && h("p", { style: { color: 'red' } }, "This organization name is already taken."), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: step1Invalid, onClick: () => (this.signupStep = 2), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.signupStep === 2 && (h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "How did you hear about Verdocs?", value: this.howHear, onInput: (e) => (this.howHear = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Your Industry", options: Industries, value: this.industry, onInput: (e) => (this.industry = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Company Size", options: CompanySizes, value: this.companySize, onInput: (e) => (this.companySize = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Purpose", options: Reasons, value: this.reason, onInput: (e) => (this.reason = e.target.value), disabled: this.submitting }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Create Account", disabled: this.submitting, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.signupStep === 3 && (h("form", { onSubmit: () => this.handleSignup() }, h("p", null, "Please check your e-mail inbox for a verification code and follow the instructions provided."), h("p", null, h("em", null, "Verification messages may take up to 1 hour to arrive. If you do not receive the invitation, ", h("a", { href: "#" }, "Click Here"), " to resend it. Be sure to check your spam folder.")), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.submitting, onClick: () => {
+          this.signupStep = 2;
         }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }), h("verdocs-button", { label: "Go to Dashboard", disabled: true, onClick: () => this.handleSignup(), 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: () => {
+    if (this.displayMode === 'forgot') {
+      return (h("div", { class: "form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Forgot your password?"), h("p", null, "Enter your e-mail address below, and reset instructions will be sent to your Inbox."), h("p", null, h("em", null, "Please allow up to 24 hours for delivery, and check your spam folder if you do not receive the message. ")), h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "Email", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.submitting }), h("div", { style: { marginTop: '30px' } }), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", disabled: this.submitting, onClick: () => (this.displayMode = 'login') }), h("verdocs-button", { label: "Reset", disabled: this.submitting, onClick: () => this.handleReset() })))));
+    }
+    if (this.displayMode === 'verify') {
+      return (h("div", { class: "form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Please Verify your Email Address"), h("p", null, "Check your e-mail inbox for a verification email, and follow the instructions provided."), h("p", null, h("em", null, "Please allow up to 24 hours for delivery, and check your spam folder if you do not receive the message. ")), h("div", { class: "buttons" }, h("verdocs-button", { label: "Sign Out", variant: "outline", disabled: this.submitting, onClick: () => {
+          this.username = '';
+          this.password = '';
+          this.cancelRecheckTimer();
+          this.displayMode = 'login';
+        } }), h("verdocs-button", { label: "Resend Email", disabled: this.resendDisabled, onClick: () => this.handleResend() }))));
+    }
+    return (h("div", { class: "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';
-        this.step = 1;
-      }, disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), 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, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
+        this.signupStep = 1;
+      }, disabled: this.submitting })), h("form", { onSubmit: () => this.loginAndCheckVerification() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'forgot'), disabled: this.submitting, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.submitting, onClick: () => this.loginAndCheckVerification(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
   }
   static get style() { return verdocsAuthCss; }
 }, [0, "verdocs-auth", {
@@ -211,14 +374,15 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "username": [32],
     "phone": [32],
     "password": [32],
-    "loggingIn": [32],
+    "submitting": [32],
     "activeSession": [32],
     "accountType": [32],
     "howHear": [32],
     "industry": [32],
     "companySize": [32],
     "reason": [32],
-    "step": [32]
+    "signupStep": [32],
+    "resendDisabled": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-floating-menu.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
 
-const verdocsFloatingMenuCss = "verdocs-floating-menu{display:none}#verdocs-floating-menu{position:absolute;width:56px;height:56px;display:-ms-flexbox;display:flex;-ms-flex:0 0 fit-content;flex:0 0 fit-content}#verdocs-floating-menu:not(.force-closed):hover{height:500px}#verdocs-floating-menu:not(.force-closed):hover .trigger{-webkit-box-shadow:0 10px 25px #4c56cb;box-shadow:0 10px 25px #4c56cb;-webkit-transform:translatey(2px);transform:translatey(2px);-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu:not(.force-closed):hover .options{display:-ms-flexbox;display:flex}#verdocs-floating-menu:not(.force-closed):hover .options .option{-webkit-animation:vfm-appear 0.1s forwards 0.2s;animation:vfm-appear 0.1s forwards 0.2s}#verdocs-floating-menu .trigger{position:absolute;width:56px;height:56px;background:#654dcb;bottom:0;border-radius:50%;left:0;right:0;margin:auto;color:white;line-height:52px;text-align:center;font-size:44px;z-index:100;-webkit-box-shadow:0 10px 25px -5px #4c56cb;box-shadow:0 10px 25px -5px #4c56cb;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu .options{width:56px;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 fit-content;flex:0 0 fit-content;position:absolute;bottom:70px;display:none}#verdocs-floating-menu .option{background:#654dcb;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;width:36px;height:36px;margin:5px auto;color:white;font-weight:500;text-align:center;line-height:36px;opacity:0}#verdocs-floating-menu verdocs-toolbar-icon .icon{display:-ms-flexbox;display:flex}#verdocs-floating-menu verdocs-toolbar-icon .icon svg{fill:#ffffff}@-webkit-keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}";
+const verdocsFloatingMenuCss = "verdocs-floating-menu{display:none}#verdocs-floating-menu{position:absolute;width:56px;height:56px;display:-ms-flexbox;display:flex;-ms-flex:0 0 fit-content;flex:0 0 fit-content}#verdocs-floating-menu:not(.force-closed):hover{height:500px}#verdocs-floating-menu:not(.force-closed):hover .trigger{-webkit-box-shadow:0 10px 25px #4c56cb;box-shadow:0 10px 25px #4c56cb;-webkit-transform:translatey(2px);transform:translatey(2px);-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu:not(.force-closed):hover .options{display:-ms-flexbox;display:flex}#verdocs-floating-menu:not(.force-closed):hover .options .option{-webkit-animation:vfm-appear 0.1s forwards 0.2s;animation:vfm-appear 0.1s forwards 0.2s}#verdocs-floating-menu .trigger{position:absolute;width:56px;height:56px;background:#s;bottom:0;border-radius:50%;left:0;right:0;margin:auto;color:white;line-height:52px;text-align:center;font-size:44px;z-index:100;-webkit-box-shadow:0 10px 25px -5px #4c56cb;box-shadow:0 10px 25px -5px #4c56cb;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu .options{width:56px;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 fit-content;flex:0 0 fit-content;position:absolute;bottom:70px;display:none}#verdocs-floating-menu .option{background:#s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;width:36px;height:36px;margin:5px auto;color:white;font-weight:500;text-align:center;line-height:36px;opacity:0}#verdocs-floating-menu verdocs-toolbar-icon .icon{display:-ms-flexbox;display:flex}#verdocs-floating-menu verdocs-toolbar-icon .icon svg{fill:#ffffff}@-webkit-keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}";
 
 // @see https://stackoverflow.com/a/49186677/1812436
 const getScrollParent = node => {

package/dist/components/verdocs-organization-card.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { f as format } from './index2.js';
 
-const verdocsOrganizationCardCss = "verdocs-organization-card{font-family:\"Inter\", \"Barlow\", sans-serif;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#ffffff;border-radius:8px;padding:7px 15px}verdocs-organization-card:hover>.popup{display:-ms-flexbox;display:flex;background:#ffffff;color:#33354c}verdocs-organization-card .icon{-ms-flex:0;flex:0;height:24px;width:24px;margin:0 14px 0 0}verdocs-organization-card .icon svg{fill:#aeb4bf;height:24px;width:24px}verdocs-organization-card .content{margin-top:2px}verdocs-organization-card .popup{position:absolute;top:-1px;left:-4px;display:none;border:1px solid #cccccc;border-radius:10px;width:326px;padding:20px 40px 0 40px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:sans-serif}verdocs-organization-card .popup-header{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}verdocs-organization-card .popup-header .status{margin-right:20px}verdocs-organization-card .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:14px;text-transform:uppercase}verdocs-organization-card .status{-webkit-transform:scale(1.5);transform:scale(1.5);width:24px;height:24px}verdocs-organization-card .field{margin:0 0 20px 0}verdocs-organization-card .field strong{color:#7b7b9a;display:block;margin:0 0 5px 0}verdocs-organization-card .field a{color:#654dcb;text-transform:uppercase}";
+const verdocsOrganizationCardCss = "verdocs-organization-card{font-family:\"Inter\", \"Barlow\", sans-serif;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#ffffff;border-radius:8px;padding:7px 15px}verdocs-organization-card:hover>.popup{display:-ms-flexbox;display:flex;background:#ffffff;color:#33354c}verdocs-organization-card .icon{-ms-flex:0;flex:0;height:24px;width:24px;margin:0 14px 0 0}verdocs-organization-card .icon svg{fill:#aeb4bf;height:24px;width:24px}verdocs-organization-card .content{margin-top:2px}verdocs-organization-card .popup{position:absolute;top:-1px;left:-4px;display:none;border:1px solid #cccccc;border-radius:10px;width:326px;padding:20px 40px 0 40px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:sans-serif}verdocs-organization-card .popup-header{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}verdocs-organization-card .popup-header .status{margin-right:20px}verdocs-organization-card .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:14px;text-transform:uppercase}verdocs-organization-card .status{-webkit-transform:scale(1.5);transform:scale(1.5);width:24px;height:24px}verdocs-organization-card .field{margin:0 0 20px 0}verdocs-organization-card .field strong{color:#7b7b9a;display:block;margin:0 0 5px 0}verdocs-organization-card .field a{color:#s;text-transform:uppercase}";
 
 const UserIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"/></g></svg>';
 const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';

package/dist/components/verdocs-pagination2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as integerSequence } from './Primitives.js';
 
-const verdocsPaginationCss = "verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";
+const verdocsPaginationCss = "verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #s}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#s}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";
 
 const ChevronDoubleLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
 const ChevronDoubleRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;

package/dist/components/verdocs-template-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const verdocsTemplateCardCss = "verdocs-template-card{font-family:\"Inter\", \"Barlow\", sans-serif;width:320px;height:320px;display:-ms-flexbox;display:flex;padding:25px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05)}verdocs-template-card .thumbnail{width:272px;height:158px;-o-object-fit:cover;object-fit:cover;margin-bottom:22px;-o-object-position:-20% 0;object-position:-20% 0}verdocs-template-card .name{font-size:18px;font-weight:700;margin-bottom:7px}verdocs-template-card .org-name{font-size:14px;font-weight:700;margin-bottom:6px}verdocs-template-card hr{width:100%;margin-bottom:17px;background-color:#aeb4bf}verdocs-template-card .controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:16px}verdocs-template-card .controls .control{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;margin-right:8px;-ms-flex-align:start;align-items:flex-start;border-right:1px solid #aeb4bf}verdocs-template-card .controls .control.secondary{-ms-flex-pack:center;justify-content:center}verdocs-template-card .controls .control svg{fill:#aeb4bf;height:16px;max-width:16px;margin:0 8px -2px 0}verdocs-template-card .additional-controls svg{margin-right:0;fill:#654dcb}";
+const verdocsTemplateCardCss = "verdocs-template-card{font-family:\"Inter\", \"Barlow\", sans-serif;width:320px;height:320px;display:-ms-flexbox;display:flex;padding:25px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05)}verdocs-template-card .thumbnail{width:272px;height:158px;-o-object-fit:cover;object-fit:cover;margin-bottom:22px;-o-object-position:-20% 0;object-position:-20% 0}verdocs-template-card .name{font-size:18px;font-weight:700;margin-bottom:7px}verdocs-template-card .org-name{font-size:14px;font-weight:700;margin-bottom:6px}verdocs-template-card hr{width:100%;margin-bottom:17px;background-color:#aeb4bf}verdocs-template-card .controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:16px}verdocs-template-card .controls .control{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;margin-right:8px;-ms-flex-align:start;align-items:flex-start;border-right:1px solid #aeb4bf}verdocs-template-card .controls .control.secondary{-ms-flex-pack:center;justify-content:center}verdocs-template-card .controls .control svg{fill:#aeb4bf;height:16px;max-width:16px;margin:0 8px -2px 0}verdocs-template-card .additional-controls svg{margin-right:0;fill:#s}";
 
 const ActionsIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`;
 const EmailIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>`;