@verdocs/web-sdk 2.0.28 → 2.1.1

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.css

@@ -27,7 +27,7 @@ verdocs-floating-menu {
   position: absolute;
   width: 56px;
   height: 56px;
-  background: #654dcb;
+  background: #s;
   bottom: 0;
   border-radius: 50%;
   left: 0;
@@ -51,7 +51,7 @@ verdocs-floating-menu {
   display: none;
 }
 #verdocs-floating-menu .option {
-  background: #654dcb;
+  background: #s;
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.css

@@ -74,6 +74,6 @@ verdocs-organization-card .field strong {
   margin: 0 0 5px 0;
 }
 verdocs-organization-card .field a {
-  color: #654dcb;
+  color: #s;
   text-transform: uppercase;
 }

package/dist/collection/components/controls/verdocs-pagination/verdocs-pagination.css

@@ -15,7 +15,7 @@ verdocs-pagination .page-button {
   align-items: center;
   justify-content: center;
   color: #33364b;
-  border: 1px solid #654dcb;
+  border: 1px solid #s;
 }
 verdocs-pagination .page-button svg {
   width: 18px;
@@ -24,7 +24,7 @@ verdocs-pagination .page-button svg {
 verdocs-pagination .page-button.selected {
   cursor: default;
   color: #ffffff;
-  background: #654dcb;
+  background: #s;
 }
 verdocs-pagination .ellipsis {
   width: 38px;

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

@@ -5,8 +5,7 @@ verdocs-auth {
   align-items: center;
   justify-content: center;
 }
-verdocs-auth .login-form,
-verdocs-auth .signup-form {
+verdocs-auth .form {
   background: #ffffff;
   align-items: center;
   justify-content: center;
@@ -38,6 +37,12 @@ verdocs-auth h4 {
 verdocs-auth h4 verdocs-button button.normal .button-label {
   padding: 0;
 }
+verdocs-auth .buttons {
+  gap: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
 verdocs-auth .status-result {
   display: none;
 }
@@ -61,4 +66,7 @@ verdocs-auth .account-option {
   margin: 20px 0 8px 0;
   display: flex;
   flex-direction: row;
+}
+verdocs-auth p + p {
+  margin-top: 0;
 }

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

@@ -1,9 +1,11 @@
-import { Auth } from '@verdocs/js-sdk/Users';
+import { Token } from '@verdocs/js-sdk/Utils';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Auth, Profiles } from '@verdocs/js-sdk/Users';
 import { Organizations } from '@verdocs/js-sdk/Organizations';
 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' },
@@ -75,6 +77,9 @@ 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';
@@ -87,14 +92,15 @@ export class VerdocsAuth {
     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;
@@ -110,42 +116,94 @@ export class VerdocsAuth {
       (_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;
-    Auth.authenticateUser(this.endpoint, { username: this.username, password: this.password })
+    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,
+      // 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;
     Auth.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 = 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
+        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));
@@ -156,8 +214,40 @@ export class VerdocsAuth {
     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;
+    });
+  }
   async checkAvailability(name) {
     this.orgname = name;
     this.orgAvailable = '';
@@ -171,18 +261,30 @@ export class VerdocsAuth {
       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 is() { return "verdocs-auth"; }
   static get originalStyleUrls() {
@@ -267,14 +369,15 @@ export class VerdocsAuth {
       "username": {},
       "phone": {},
       "password": {},
-      "loggingIn": {},
+      "submitting": {},
       "activeSession": {},
       "accountType": {},
       "howHear": {},
       "industry": {},
       "companySize": {},
       "reason": {},
-      "step": {}
+      "signupStep": {},
+      "resendDisabled": {}
     };
   }
   static get events() {

package/dist/collection/components/templates/verdocs-template-card/verdocs-template-card.css

@@ -58,5 +58,5 @@ verdocs-template-card .controls .control svg {
 }
 verdocs-template-card .additional-controls svg {
   margin-right: 0;
-  fill: #654dcb;
+  fill: #s;
 }