@verdocs/web-sdk 2.3.87 → 4.0.5

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

@@ -1,49 +1,47 @@
-import { Token } from '@verdocs/js-sdk/Utils';
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { Auth, Profiles } from '@verdocs/js-sdk/Users';
-import { h } from '@stencil/core';
-import { VerdocsToast } from '../../../utils/Toast';
-import { SDKError } from '../../../utils/errors';
+import { VerdocsEndpoint, createBusinessAccount, authenticateUser, decodeAccessTokenBody, resendVerification, resetPassword } from "@verdocs/js-sdk";
+import { h } from "@stencil/core";
+import { VerdocsToast } from "../../../utils/Toast";
+import { SDKError } from "../../../utils/errors";
 const RECHECK_INTERVAL = 5000;
 const Industries = [
-  { value: '', label: '' },
-  { value: 'Accounting & Tax', label: 'Accounting & Tax' },
-  { value: 'Business Services / Consulting', label: 'Business Services / Consulting' },
-  { value: 'Construction', label: 'Construction' },
-  { value: 'Education', label: 'Education' },
-  { value: 'Financial Services', label: 'Financial Services' },
-  { value: 'Government', label: 'Government' },
-  { value: 'Healthcare - Health Plans & Payers', label: 'Healthcare - Health Plans & Payers' },
-  { value: 'Healthcare - Providers', label: 'Healthcare - Providers' },
-  { value: 'Insurance', label: 'Insurance' },
-  { value: 'Legal', label: 'Legal' },
-  { value: 'Life Sciences', label: 'Life Sciences' },
-  { value: 'Manufacturing', label: 'Manufacturing' },
-  { value: 'Mortgage', label: 'Mortgage' },
-  { value: 'Not For Profit', label: 'Not For Profit' },
-  { value: 'Real Estate - Commercial', label: 'Real Estate - Commercial' },
-  { value: 'Real Estate - Residential', label: 'Real Estate - Residential' },
-  { value: 'Retail', label: 'Retail' },
-  { value: 'Technology', label: 'Technology' },
-  { value: 'Other', label: 'Other' },
+    { value: '', label: '' },
+    { value: 'Accounting & Tax', label: 'Accounting & Tax' },
+    { value: 'Business Services / Consulting', label: 'Business Services / Consulting' },
+    { value: 'Construction', label: 'Construction' },
+    { value: 'Education', label: 'Education' },
+    { value: 'Financial Services', label: 'Financial Services' },
+    { value: 'Government', label: 'Government' },
+    { value: 'Healthcare - Health Plans & Payers', label: 'Healthcare - Health Plans & Payers' },
+    { value: 'Healthcare - Providers', label: 'Healthcare - Providers' },
+    { value: 'Insurance', label: 'Insurance' },
+    { value: 'Legal', label: 'Legal' },
+    { value: 'Life Sciences', label: 'Life Sciences' },
+    { value: 'Manufacturing', label: 'Manufacturing' },
+    { value: 'Mortgage', label: 'Mortgage' },
+    { value: 'Not For Profit', label: 'Not For Profit' },
+    { value: 'Real Estate - Commercial', label: 'Real Estate - Commercial' },
+    { value: 'Real Estate - Residential', label: 'Real Estate - Residential' },
+    { value: 'Retail', label: 'Retail' },
+    { value: 'Technology', label: 'Technology' },
+    { value: 'Other', label: 'Other' },
 ];
 const Reasons = [
-  { value: '', label: '' },
-  { value: 'I want to send a document for signature.', label: 'I want to send a document for signature.' },
-  { value: 'I just need to sign a document today.', label: 'I just need to sign a document today.' },
-  { value: "I'm evaluating it for my business.", label: "I'm evaluating it for my business." },
-  { value: "I'm evaluating it for my personal use.", label: "I'm evaluating it for my personal use." },
-  { value: "I'm a developer building an integration.", label: "I'm a developer building an integration." },
+    { value: '', label: '' },
+    { value: 'I want to send a document for signature.', label: 'I want to send a document for signature.' },
+    { value: 'I just need to sign a document today.', label: 'I just need to sign a document today.' },
+    { value: "I'm evaluating it for my business.", label: "I'm evaluating it for my business." },
+    { value: "I'm evaluating it for my personal use.", label: "I'm evaluating it for my personal use." },
+    { value: "I'm a developer building an integration.", label: "I'm a developer building an integration." },
 ];
 const CompanySizes = [
-  { value: '', label: '' },
-  { value: 'Solo', label: 'Solo' },
-  { value: '2-10', label: '2-10' },
-  { value: '11-50', label: '11-50' },
-  { value: '51-200', label: '51-200' },
-  { value: '201-500', label: '201-500' },
-  { value: '501-1000', label: '501-1000' },
-  { value: '1000+', label: '1000+' },
+    { value: '', label: '' },
+    { value: 'Solo', label: 'Solo' },
+    { value: '2-10', label: '2-10' },
+    { value: '11-50', label: '11-50' },
+    { value: '51-200', label: '51-200' },
+    { value: '201-500', label: '201-500' },
+    { value: '501-1000', label: '501-1000' },
+    { value: '1000+', label: '1000+' },
 ];
 /**
  * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
@@ -75,338 +73,342 @@ const CompanySizes = [
  * ```
  */
 export class VerdocsAuth {
-  constructor() {
-    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';
-    this.isAuthenticated = false;
-    this.displayMode = 'login';
-    this.orgname = '';
-    this.first = '';
-    this.last = '';
-    this.username = '';
-    this.phone = '';
-    this.password = '';
-    this.submitting = false;
-    this.activeSession = null;
-    this.accountType = 'org';
-    this.howHear = '';
-    this.industry = '';
-    this.companySize = '';
-    this.reason = '';
-    this.signupStep = 1;
-    this.resendDisabled = false;
-    this.checkingOrg = false;
-  }
-  componentWillLoad() {
-    var _a, _b;
-    this.endpoint.loadSession();
-    if (this.endpoint.session) {
-      console.log('[AUTH] Authenticated');
-      this.isAuthenticated = true;
-      this.activeSession = this.endpoint.session;
-      (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
+    constructor() {
+        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';
+        this.isAuthenticated = false;
+        this.displayMode = 'login';
+        this.orgname = '';
+        this.first = '';
+        this.last = '';
+        this.username = '';
+        this.phone = '';
+        this.password = '';
+        this.submitting = false;
+        this.activeSession = null;
+        this.accountType = 'org';
+        this.howHear = '';
+        this.industry = '';
+        this.companySize = '';
+        this.reason = '';
+        this.signupStep = 1;
+        this.resendDisabled = false;
+        this.checkingOrg = false;
     }
-    else {
-      console.log('[AUTH] Anonymous');
-      (_b = this.authenticated) === null || _b === void 0 ? void 0 : _b.emit({ authenticated: false, session: null });
+    componentWillLoad() {
+        var _a, _b;
+        this.endpoint.loadSession();
+        if (this.endpoint.session) {
+            console.log('[AUTH] Authenticated');
+            this.isAuthenticated = true;
+            this.activeSession = this.endpoint.session;
+            (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
+        }
+        else {
+            console.log('[AUTH] Anonymous');
+            (_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;
+    disconnectedCallback() {
+        this.cancelRecheckTimer();
     }
-    if (this.resendDisabledTimer) {
-      try {
-        clearTimeout(this.resendDisabledTimer);
-      }
-      catch (e) {
-        // NOP
-      }
-      this.resendDisabledTimer = null;
+    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.submitting = true;
-    this.accessTokenForVerification = null;
-    Profiles.createBusinessAccount(this.endpoint, {
-      email: this.username,
-      password: this.password,
-      firstName: this.first,
-      lastName: this.last,
-      orgName: this.orgname,
-      // industry: this.industry,
-      // size: this.companySize,
-      // reason: this.reason,
-      // hearabout: this.howHear,
-    })
-      .then(r => {
-      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, _e, _f;
-      console.log('[AUTH] Signup error', e.response);
-      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('Signup failed: ' + ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.message) || 'Unknown Error', { style: 'error' });
-    });
-  }
-  loginAndCheckVerification() {
-    this.submitting = true;
-    this.accessTokenForVerification = null;
-    Auth.authenticateUser(this.endpoint, { username: this.username, password: this.password })
-      .then(r => {
-      var _a;
-      this.cancelRecheckTimer();
-      this.submitting = false;
-      const body = Token.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
+    handleSignup() {
+        this.submitting = true;
         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.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));
-      VerdocsToast('Login failed. Please check your username and password and try again.', { style: 'error' });
-    });
-  }
-  handleLogout() {
-    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);
-    Auth.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;
-    Auth.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;
-    });
-  }
-  render() {
-    if (!this.visible) {
-      return h("div", { style: { display: 'none' } }, "Authenticated");
+        createBusinessAccount(this.endpoint, {
+            email: this.username,
+            password: this.password,
+            firstName: this.first,
+            lastName: this.last,
+            orgName: this.orgname,
+            // industry: this.industry,
+            // size: this.companySize,
+            // reason: this.reason,
+            // hearabout: this.howHear,
+        })
+            .then(r => {
+            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, _e, _f;
+            console.log('[AUTH] Signup error', e.response);
+            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('Signup failed: ' + ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.message) || 'Unknown Error', { style: 'error' });
+        });
     }
-    if (this.isAuthenticated) {
-      return (h("verdocs-button", { label: "Sign Out", disabled: this.submitting, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
+    loginAndCheckVerification() {
+        this.submitting = true;
+        this.accessTokenForVerification = null;
+        authenticateUser(this.endpoint, { username: this.username, password: this.password })
+            .then(r => {
+            var _a;
+            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.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));
+            VerdocsToast('Login failed. Please check your username and password and try again.', { style: 'error' });
+        });
     }
-    if (this.displayMode === 'signup') {
-      const step1Invalid = this.submitting || !this.first || !this.last || !this.username || !this.password || !this.orgname;
-      return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, 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.orgname = e.target.value), disabled: this.submitting, style: { flex: '1' } }), 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' } }))))));
+    handleLogout() {
+        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 });
     }
-    if (this.displayMode === 'forgot') {
-      return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, 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() })))));
+    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);
+        });
     }
-    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() }))));
+    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;
+        });
     }
-    return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, 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.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 is() { return "verdocs-auth"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-auth.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-auth.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "endpoint": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "VerdocsEndpoint",
-          "resolved": "VerdocsEndpoint",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
-        },
-        "defaultValue": "VerdocsEndpoint.getDefault()"
-      },
-      "visible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\nlogin / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\nuse this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK."
-        },
-        "attribute": "visible",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "logo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\noverride its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\nin SVG format for best results."
-        },
-        "attribute": "logo",
-        "reflect": false,
-        "defaultValue": "'https://app.verdocs.com/assets/blue-logo.svg'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isAuthenticated": {},
-      "displayMode": {},
-      "orgname": {},
-      "first": {},
-      "last": {},
-      "username": {},
-      "phone": {},
-      "password": {},
-      "submitting": {},
-      "activeSession": {},
-      "accountType": {},
-      "howHear": {},
-      "industry": {},
-      "companySize": {},
-      "reason": {},
-      "signupStep": {},
-      "resendDisabled": {},
-      "checkingOrg": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "authenticated",
-        "name": "authenticated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when session authentication process has completed. Check the event contents for completion status."
-        },
-        "complexType": {
-          "original": "IAuthStatus",
-          "resolved": "IAuthStatus",
-          "references": {
-            "IAuthStatus": {
-              "location": "local"
-            }
-          }
+    render() {
+        if (!this.visible) {
+            return h("div", { style: { display: 'none' } }, "Authenticated");
         }
-      }, {
-        "method": "sdkError",
-        "name": "sdkError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
-        },
-        "complexType": {
-          "original": "SDKError",
-          "resolved": "SDKError",
-          "references": {
-            "SDKError": {
-              "location": "import",
-              "path": "../../../utils/errors"
-            }
-          }
+        if (this.isAuthenticated) {
+            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 step1Invalid = this.submitting || !this.first || !this.last || !this.username || !this.password || !this.orgname;
+            return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, 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.orgname = e.target.value), disabled: this.submitting, style: { flex: '1' } }), 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' } }))))));
+        }
+        if (this.displayMode === 'forgot') {
+            return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, 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("a", { href: "https://verdocs.com/en/" }, 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.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 is() { return "verdocs-auth"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-auth.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-auth.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerdocsEndpoint",
+                    "resolved": "VerdocsEndpoint",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+                },
+                "defaultValue": "VerdocsEndpoint.getDefault()"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\nlogin / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\nuse this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK."
+                },
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\noverride its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\nin SVG format for best results."
+                },
+                "attribute": "logo",
+                "reflect": false,
+                "defaultValue": "'https://app.verdocs.com/assets/blue-logo.svg'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAuthenticated": {},
+            "displayMode": {},
+            "orgname": {},
+            "first": {},
+            "last": {},
+            "username": {},
+            "phone": {},
+            "password": {},
+            "submitting": {},
+            "activeSession": {},
+            "accountType": {},
+            "howHear": {},
+            "industry": {},
+            "companySize": {},
+            "reason": {},
+            "signupStep": {},
+            "resendDisabled": {},
+            "checkingOrg": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "authenticated",
+                "name": "authenticated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when session authentication process has completed. Check the event contents for completion status."
+                },
+                "complexType": {
+                    "original": "IAuthStatus",
+                    "resolved": "IAuthStatus",
+                    "references": {
+                        "IAuthStatus": {
+                            "location": "local",
+                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/embeds/verdocs-auth/verdocs-auth.tsx",
+                            "id": "src/components/embeds/verdocs-auth/verdocs-auth.tsx::IAuthStatus"
+                        }
+                    }
+                }
+            }, {
+                "method": "sdkError",
+                "name": "sdkError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+                },
+                "complexType": {
+                    "original": "SDKError",
+                    "resolved": "SDKError",
+                    "references": {
+                        "SDKError": {
+                            "location": "import",
+                            "path": "../../../utils/errors",
+                            "id": "src/utils/errors.ts::SDKError"
+                        }
+                    }
+                }
+            }];
+    }
 }