@verdocs/web-sdk 2.3.88 → 4.0.6

package/dist/components/verdocs-auth.js

@@ -1,7 +1,5 @@
 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 { c as createBusinessAccount } from './Profiles.js';
+import { VerdocsEndpoint, createBusinessAccount, authenticateUser, decodeAccessTokenBody, resendVerification, resetPassword } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$5 } from './verdocs-button2.js';
@@ -9,360 +7,309 @@ import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-/**
- * Authenticate to Verdocs via user/password authentication
- *
- * ```typescript
- * import {Auth} from '@verdocs/js-sdk/Auth';
- * import {Transport} from '@verdocs/js-sdk/HTTP';
- *
- * const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });
- * Transport.setAuthToken(accessToken);
- * ```
- */
-var authenticateUser = function (endpoint, params) {
-    return endpoint.api //
-        .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; });
-};
-
 const verdocsAuthCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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}verdocs-auth verdocs-help-icon{margin-top:18px;display:-ms-flexbox;display:flex;width:32px;height:32px;-ms-flex:0 0 32px;flex:0 0 32px}";
+const VerdocsAuthStyle0 = verdocsAuthCss;
 
 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+' },
 ];
-const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    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';
-    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 });
+const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends HTMLElement {
+    constructor() {
+        super();
+        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';
+        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 });
+        }
+        else {
+            console.log('[AUTH] Anonymous');
+            (_b = this.authenticated) === null || _b === void 0 ? void 0 : _b.emit({ authenticated: false, session: null });
+        }
     }
-    else {
-      console.log('[AUTH] Anonymous');
-      (_b = this.authenticated) === null || _b === void 0 ? void 0 : _b.emit({ authenticated: false, session: null });
+    disconnectedCallback() {
+        this.cancelRecheckTimer();
     }
-  }
-  disconnectedCallback() {
-    this.cancelRecheckTimer();
-  }
-  cancelRecheckTimer() {
-    if (this.recheckTimer) {
-      try {
-        clearTimeout(this.recheckTimer);
-      }
-      catch (e) {
-        // NOP
-      }
-      this.recheckTimer = 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;
+        }
     }
-    if (this.resendDisabledTimer) {
-      try {
-        clearTimeout(this.resendDisabledTimer);
-      }
-      catch (e) {
-        // NOP
-      }
-      this.resendDisabledTimer = null;
+    handleSignup() {
+        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,
+            // 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' });
+        });
     }
-  }
-  handleSignup() {
-    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,
-      // 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;
-    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
+    loginAndCheckVerification() {
+        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);
-    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;
-    });
-  }
-  render() {
-    if (!this.visible) {
-      return h("div", { style: { display: 'none' } }, "Authenticated");
+        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.isAuthenticated) {
-      return (h("verdocs-button", { label: "Sign Out", disabled: this.submitting, onClick: () => this.handleLogout(), 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 === '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' } }))))));
+    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 === '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() })))));
+    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;
+        });
     }
-    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() }))));
+    render() {
+        if (!this.visible) {
+            return h("div", { style: { display: 'none' } }, "Authenticated");
+        }
+        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' } }))));
     }
-    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 style() { return verdocsAuthCss; }
+    static get style() { return VerdocsAuthStyle0; }
 }, [0, "verdocs-auth", {
-    "endpoint": [16],
-    "visible": [4],
-    "logo": [1],
-    "isAuthenticated": [32],
-    "displayMode": [32],
-    "orgname": [32],
-    "first": [32],
-    "last": [32],
-    "username": [32],
-    "phone": [32],
-    "password": [32],
-    "submitting": [32],
-    "activeSession": [32],
-    "accountType": [32],
-    "howHear": [32],
-    "industry": [32],
-    "companySize": [32],
-    "reason": [32],
-    "signupStep": [32],
-    "resendDisabled": [32],
-    "checkingOrg": [32]
-  }]);
+        "endpoint": [16],
+        "visible": [4],
+        "logo": [1],
+        "isAuthenticated": [32],
+        "displayMode": [32],
+        "orgname": [32],
+        "first": [32],
+        "last": [32],
+        "username": [32],
+        "phone": [32],
+        "password": [32],
+        "submitting": [32],
+        "activeSession": [32],
+        "accountType": [32],
+        "howHear": [32],
+        "industry": [32],
+        "companySize": [32],
+        "reason": [32],
+        "signupStep": [32],
+        "resendDisabled": [32],
+        "checkingOrg": [32]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-select-input", "verdocs-text-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-auth":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsAuth$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-text-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-select-input", "verdocs-text-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-auth":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsAuth$1);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();