@verdocs/web-sdk 4.2.12 → 4.2.24

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

@@ -1,8 +1,7 @@
-import { VerdocsEndpoint, createProfile, authenticate, decodeAccessTokenBody, resendVerification, resetPassword } from "@verdocs/js-sdk";
+import { VerdocsEndpoint, createProfile, authenticate, resendVerification, resetPassword, verifyEmail, getMyUser } from "@verdocs/js-sdk";
 import { h } from "@stencil/core";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
-const RECHECK_INTERVAL = 5000;
 /**
  * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
  * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
@@ -20,9 +19,11 @@ const RECHECK_INTERVAL = 5000;
  */
 export class VerdocsAuth {
     constructor() {
-        this.recheckTimer = null;
         this.resendDisabledTimer = null;
-        this.accessTokenForVerification = null;
+        // We can't instantly log in on the default endpoint because other listeners might see
+        // its events and incorrectly trigger before we're done. So we manage our own temp
+        // endpoint and pass the final tokens to the default once we're ready.
+        this.tempAuthEndpoint = new VerdocsEndpoint();
         this.endpoint = VerdocsEndpoint.getDefault();
         this.visible = true;
         this.logo = 'https://app.verdocs.com/assets/blue-logo.svg';
@@ -31,14 +32,12 @@ export class VerdocsAuth {
         this.org_name = '';
         this.first_name = '';
         this.last_name = '';
-        this.username = '';
+        this.email = '';
+        this.verificationCode = '';
         this.password = '';
         this.submitting = false;
         this.activeSession = null;
-        this.accountType = 'org';
-        this.signupStep = 1;
         this.resendDisabled = false;
-        this.checkingOrg = false;
     }
     componentWillLoad() {
         var _a, _b;
@@ -54,29 +53,6 @@ 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;
-        }
-    }
     isPasswordComplex(password) {
         const isUppercase = (ch) => /[A-Z]/.test(ch);
         const isLowercase = (ch) => /[a-z]/.test(ch);
@@ -95,13 +71,13 @@ export class VerdocsAuth {
     }
     handleSignup() {
         this.submitting = true;
-        this.accessTokenForVerification = null;
+        this.tempAuthEndpoint.clearSession();
         if (!this.isPasswordComplex(this.password)) {
             window.alert('Password must be at least 8 characters long and contain at least one uppercase, one lowercase, and one special character.');
             return;
         }
-        createProfile(this.endpoint, {
-            email: this.username,
+        createProfile(this.tempAuthEndpoint, {
+            email: this.email,
             password: this.password,
             first_name: this.first_name,
             last_name: this.last_name,
@@ -109,7 +85,8 @@ export class VerdocsAuth {
         })
             .then(r => {
             console.log('Profile creation result', r);
-            this.loginAndCheckVerification();
+            this.tempAuthEndpoint.setToken(r.access_token);
+            this.displayMode = 'verify';
         })
             .catch(e => {
             var _a, _b, _c, _d, _e, _f;
@@ -121,49 +98,55 @@ export class VerdocsAuth {
             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() {
+    async handleVerification() {
         this.submitting = true;
-        this.accessTokenForVerification = null;
-        authenticate(this.endpoint, { username: this.username, password: this.password, grant_type: 'password' })
-            .then(r => {
-            var _a;
-            this.cancelRecheckTimer();
+        try {
             this.submitting = false;
-            const body = decodeAccessTokenBody(r.access_token);
-            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.access_token);
-                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 {
+            const verificationResult = await verifyEmail(this.endpoint, { email: this.email, token: this.verificationCode });
+            console.log('Verification result', verificationResult);
+            this.completeLogin(verificationResult);
+        }
+        catch (e) {
+            this.submitting = false;
+            console.log('Verification error', e);
+            VerdocsToast('Verification error, please check the code and try again.');
+        }
+    }
+    completeLogin(result) {
+        var _a;
+        this.endpoint.setToken(result.access_token);
+        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 });
+    }
+    async loginAndCheckVerification() {
+        this.submitting = true;
+        this.tempAuthEndpoint.clearSession();
+        try {
+            this.submitting = false;
+            const authResult = await authenticate(this.endpoint, { username: this.email, password: this.password, grant_type: 'password' });
+            console.log('[AUTH] Authenticated', authResult.access_token);
+            this.tempAuthEndpoint.setToken(authResult.access_token);
+            const user = await getMyUser(this.tempAuthEndpoint);
+            console.log('Got user', user);
+            if (!user.email_verified) {
                 console.log('[AUTH] Logged in, pending email address verification');
                 this.displayMode = 'verify';
-                this.accessTokenForVerification = r.access_token;
-                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';
+            else {
+                console.log('[AUTH] Email address is verified, completing login');
+                this.completeLogin(authResult);
+            }
+        }
+        catch (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' });
-        });
+        }
     }
     handleLogout() {
         var _a;
         this.endpoint.clearSession();
+        this.tempAuthEndpoint.clearSession();
         this.isAuthenticated = false;
-        this.accessTokenForVerification = null;
         (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
     }
     handleResend() {
@@ -174,7 +157,7 @@ export class VerdocsAuth {
             this.resendDisabled = false;
             this.resendDisabledTimer = null;
         }, 30000);
-        resendVerification(this.endpoint, this.accessTokenForVerification)
+        resendVerification(this.tempAuthEndpoint)
             .then(r => {
             console.log('[AUTH] Verification request resent', r);
             VerdocsToast('Please check your email for a message with verification instructions.', { style: 'info' });
@@ -183,19 +166,20 @@ export class VerdocsAuth {
             console.log('[AUTH] Unable to resend verification', e);
         });
     }
-    handleReset() {
+    async handleReset() {
         this.submitting = true;
-        resetPassword(this.endpoint, { email: this.username })
-            .then(r => {
-            console.log('[AUTH] Reset sent', r);
+        try {
+            const result = await resetPassword(this.endpoint, { email: this.email });
+            console.log('[AUTH] Reset sent', result);
             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) => {
+        }
+        catch (e) {
             console.log('[AUTH] Unable to reset password', e);
             this.submitting = false;
-        });
+            VerdocsToast('Unable to reset password. Please check your email address and try again.', { style: 'error' });
+        }
     }
     render() {
         if (!this.visible) {
@@ -205,26 +189,21 @@ export class VerdocsAuth {
             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_name || !this.last_name || !this.username || !this.password || !this.org_name;
-            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 free 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_name, onInput: (e) => (this.first_name = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last_name, onInput: (e) => (this.last_name = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = 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.org_name, onInput: (e) => (this.org_name = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: step1Invalid, 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() })))));
+            const invalid = this.submitting || !this.first_name || !this.last_name || !this.email || !this.password || !this.org_name;
+            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 free account"), h("h5", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), 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_name, onInput: (e) => (this.first_name = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last_name, onInput: (e) => (this.last_name = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.email, onInput: (e) => (this.email = 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.org_name, onInput: (e) => (this.org_name = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: invalid, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
         }
         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 = '';
+            return (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("verdocs-text-input", { label: "Verification Code", required: true, value: this.verificationCode, onInput: (e) => (this.verificationCode = e.target.value), disabled: this.submitting }), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Verify", disabled: this.submitting, onClick: () => this.handleVerification(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }), h("verdocs-button", { variant: "outline", label: "Resend Code", disabled: this.resendDisabled, onClick: () => this.handleResend() }), h("verdocs-button", { label: "Sign Out", variant: "text", disabled: this.submitting, onClick: () => {
+                    this.tempAuthEndpoint.clearSession();
+                    this.email = '';
                     this.password = '';
-                    this.cancelRecheckTimer();
                     this.displayMode = 'login';
-                } }), h("verdocs-button", { label: "Resend Email", disabled: this.resendDisabled, onClick: () => this.handleResend() }))));
+                } }))));
+        }
+        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. Please allow up to 15 minutes to arrive. Check your spam folder if you do not receive the message."), h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.email, onInput: (e) => (this.email = 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() })))));
         }
-        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'), disabled: this.submitting })), h("form", { onSubmit: () => this.loginAndCheckVerification() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.email, onInput: (e) => (this.email = 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() {
@@ -306,14 +285,12 @@ export class VerdocsAuth {
             "org_name": {},
             "first_name": {},
             "last_name": {},
-            "username": {},
+            "email": {},
+            "verificationCode": {},
             "password": {},
             "submitting": {},
             "activeSession": {},
-            "accountType": {},
-            "signupStep": {},
-            "resendDisabled": {},
-            "checkingOrg": {}
+            "resendDisabled": {}
         };
     }
     static get events() {

package/dist/components/verdocs-auth.js

@@ -1,24 +1,25 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { VerdocsEndpoint, createProfile, authenticate, decodeAccessTokenBody, resendVerification, resetPassword } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, createProfile, verifyEmail, authenticate, getMyUser, resendVerification, resetPassword } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-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 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:320px;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 h6{text-align:center;font-weight:500;font-size:16px;line-height:1.75;margin:0 0 20px 0}verdocs-auth em{font-size:14px;margin:15px 0}verdocs-auth .buttons{gap:20px;margin:20px 0 0 0;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{margin:1em 0 0}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 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;
+        // We can't instantly log in on the default endpoint because other listeners might see
+        // its events and incorrectly trigger before we're done. So we manage our own temp
+        // endpoint and pass the final tokens to the default once we're ready.
+        this.tempAuthEndpoint = new VerdocsEndpoint();
         this.endpoint = VerdocsEndpoint.getDefault();
         this.visible = true;
         this.logo = 'https://app.verdocs.com/assets/blue-logo.svg';
@@ -27,14 +28,12 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
         this.org_name = '';
         this.first_name = '';
         this.last_name = '';
-        this.username = '';
+        this.email = '';
+        this.verificationCode = '';
         this.password = '';
         this.submitting = false;
         this.activeSession = null;
-        this.accountType = 'org';
-        this.signupStep = 1;
         this.resendDisabled = false;
-        this.checkingOrg = false;
     }
     componentWillLoad() {
         var _a, _b;
@@ -50,29 +49,6 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
             (_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;
-        }
-    }
     isPasswordComplex(password) {
         const isUppercase = (ch) => /[A-Z]/.test(ch);
         const isLowercase = (ch) => /[a-z]/.test(ch);
@@ -91,13 +67,13 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
     }
     handleSignup() {
         this.submitting = true;
-        this.accessTokenForVerification = null;
+        this.tempAuthEndpoint.clearSession();
         if (!this.isPasswordComplex(this.password)) {
             window.alert('Password must be at least 8 characters long and contain at least one uppercase, one lowercase, and one special character.');
             return;
         }
-        createProfile(this.endpoint, {
-            email: this.username,
+        createProfile(this.tempAuthEndpoint, {
+            email: this.email,
             password: this.password,
             first_name: this.first_name,
             last_name: this.last_name,
@@ -105,7 +81,8 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
         })
             .then(r => {
             console.log('Profile creation result', r);
-            this.loginAndCheckVerification();
+            this.tempAuthEndpoint.setToken(r.access_token);
+            this.displayMode = 'verify';
         })
             .catch(e => {
             var _a, _b, _c, _d, _e, _f;
@@ -117,49 +94,55 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
             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() {
+    async handleVerification() {
         this.submitting = true;
-        this.accessTokenForVerification = null;
-        authenticate(this.endpoint, { username: this.username, password: this.password, grant_type: 'password' })
-            .then(r => {
-            var _a;
-            this.cancelRecheckTimer();
+        try {
             this.submitting = false;
-            const body = decodeAccessTokenBody(r.access_token);
-            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.access_token);
-                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 {
+            const verificationResult = await verifyEmail(this.endpoint, { email: this.email, token: this.verificationCode });
+            console.log('Verification result', verificationResult);
+            this.completeLogin(verificationResult);
+        }
+        catch (e) {
+            this.submitting = false;
+            console.log('Verification error', e);
+            VerdocsToast('Verification error, please check the code and try again.');
+        }
+    }
+    completeLogin(result) {
+        var _a;
+        this.endpoint.setToken(result.access_token);
+        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 });
+    }
+    async loginAndCheckVerification() {
+        this.submitting = true;
+        this.tempAuthEndpoint.clearSession();
+        try {
+            this.submitting = false;
+            const authResult = await authenticate(this.endpoint, { username: this.email, password: this.password, grant_type: 'password' });
+            console.log('[AUTH] Authenticated', authResult.access_token);
+            this.tempAuthEndpoint.setToken(authResult.access_token);
+            const user = await getMyUser(this.tempAuthEndpoint);
+            console.log('Got user', user);
+            if (!user.email_verified) {
                 console.log('[AUTH] Logged in, pending email address verification');
                 this.displayMode = 'verify';
-                this.accessTokenForVerification = r.access_token;
-                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';
+            else {
+                console.log('[AUTH] Email address is verified, completing login');
+                this.completeLogin(authResult);
+            }
+        }
+        catch (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' });
-        });
+        }
     }
     handleLogout() {
         var _a;
         this.endpoint.clearSession();
+        this.tempAuthEndpoint.clearSession();
         this.isAuthenticated = false;
-        this.accessTokenForVerification = null;
         (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
     }
     handleResend() {
@@ -170,7 +153,7 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
             this.resendDisabled = false;
             this.resendDisabledTimer = null;
         }, 30000);
-        resendVerification(this.endpoint, this.accessTokenForVerification)
+        resendVerification(this.tempAuthEndpoint)
             .then(r => {
             console.log('[AUTH] Verification request resent', r);
             VerdocsToast('Please check your email for a message with verification instructions.', { style: 'info' });
@@ -179,19 +162,20 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
             console.log('[AUTH] Unable to resend verification', e);
         });
     }
-    handleReset() {
+    async handleReset() {
         this.submitting = true;
-        resetPassword(this.endpoint, { email: this.username })
-            .then(r => {
-            console.log('[AUTH] Reset sent', r);
+        try {
+            const result = await resetPassword(this.endpoint, { email: this.email });
+            console.log('[AUTH] Reset sent', result);
             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) => {
+        }
+        catch (e) {
             console.log('[AUTH] Unable to reset password', e);
             this.submitting = false;
-        });
+            VerdocsToast('Unable to reset password. Please check your email address and try again.', { style: 'error' });
+        }
     }
     render() {
         if (!this.visible) {
@@ -201,26 +185,21 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
             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_name || !this.last_name || !this.username || !this.password || !this.org_name;
-            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 free 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_name, onInput: (e) => (this.first_name = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last_name, onInput: (e) => (this.last_name = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = 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.org_name, onInput: (e) => (this.org_name = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: step1Invalid, 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() })))));
+            const invalid = this.submitting || !this.first_name || !this.last_name || !this.email || !this.password || !this.org_name;
+            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 free account"), h("h5", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), 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_name, onInput: (e) => (this.first_name = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last_name, onInput: (e) => (this.last_name = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.email, onInput: (e) => (this.email = 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.org_name, onInput: (e) => (this.org_name = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: invalid, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
         }
         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 = '';
+            return (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("verdocs-text-input", { label: "Verification Code", required: true, value: this.verificationCode, onInput: (e) => (this.verificationCode = e.target.value), disabled: this.submitting }), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Verify", disabled: this.submitting, onClick: () => this.handleVerification(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }), h("verdocs-button", { variant: "outline", label: "Resend Code", disabled: this.resendDisabled, onClick: () => this.handleResend() }), h("verdocs-button", { label: "Sign Out", variant: "text", disabled: this.submitting, onClick: () => {
+                    this.tempAuthEndpoint.clearSession();
+                    this.email = '';
                     this.password = '';
-                    this.cancelRecheckTimer();
                     this.displayMode = 'login';
-                } }), h("verdocs-button", { label: "Resend Email", disabled: this.resendDisabled, onClick: () => this.handleResend() }))));
+                } }))));
+        }
+        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. Please allow up to 15 minutes to arrive. Check your spam folder if you do not receive the message."), h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.email, onInput: (e) => (this.email = 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() })))));
         }
-        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'), disabled: this.submitting })), h("form", { onSubmit: () => this.loginAndCheckVerification() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.email, onInput: (e) => (this.email = 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 VerdocsAuthStyle0; }
 }, [0, "verdocs-auth", {
@@ -232,14 +211,12 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsAuth extends
         "org_name": [32],
         "first_name": [32],
         "last_name": [32],
-        "username": [32],
+        "email": [32],
+        "verificationCode": [32],
         "password": [32],
         "submitting": [32],
         "activeSession": [32],
-        "accountType": [32],
-        "signupStep": [32],
-        "resendDisabled": [32],
-        "checkingOrg": [32]
+        "resendDisabled": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {