@verdocs/web-sdk 6.10.6 → 6.12.1

package/dist/esm/verdocs-auth.entry.js

@@ -1,10 +1,53 @@
-import { r as registerInstance, c as createEvent, h } from './index-CjTHbolG.js';
-import { VerdocsEndpoint, convertToE164, createProfile, verifyEmail, authenticate, getMyUser, resendVerification, resetPassword } from '@verdocs/js-sdk';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CjTHbolG.js';
+import { VerdocsEndpoint, getSocialProviders, convertToE164, createProfile, verifyEmail, getMyUser, authenticate, isMFARequired, createCodeVerifier, createCodeChallenge, getSocialLoginUrl, resendVerification, resetPassword } from '@verdocs/js-sdk';
+import { M as MicrosoftIcon, G as GoogleIcon } from './Icons-DobS6Y7w.js';
 import { V as VerdocsToast } from './Toast-D97GxsI-.js';
 import { S as SDKError } from './errors-C1sRVZWv.js';
 
-const verdocsAuthCss = () => `verdocs-auth{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-auth .form{width:350px;display:-ms-flexbox;display:flex;padding:20px;max-width:90%;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;background:#ffffff}verdocs-auth .logo{width:128px;max-width:100%;margin:20px 0 30px}verdocs-auth h3{color:#092c4c;text-align:center;font-weight:400;font-size:18px;line-height:1.75;margin: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{color:#092c4c;margin:1em 0;font-size:14px}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}verdocs-auth .already-have{color:#092c4c;margin:0.5em 0;font-size:14px;text-align:center}verdocs-auth .service-agreement{font-size:12px;color:#777}verdocs-auth .service-agreement a{color:#092c4c}`;
+const verdocsAuthCss = () => `verdocs-auth{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-auth .form{width:350px;display:-ms-flexbox;display:flex;padding:20px;max-width:90%;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;background:#ffffff}verdocs-auth .logo{width:128px;max-width:100%;margin:20px 0 30px}verdocs-auth h3{color:#092c4c;text-align:center;font-weight:400;font-size:18px;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{color:#092c4c;margin:1em 0;font-size:14px}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}verdocs-auth .already-have{color:#092c4c;margin:0.5em 0;font-size:14px;text-align:center}verdocs-auth .service-agreement{font-size:12px;color:#777}verdocs-auth .service-agreement a{color:#092c4c}verdocs-auth .providers{width:100%}verdocs-auth .providers verdocs-button{display:block;margin-bottom:10px}verdocs-auth .providers verdocs-button button.outline{position:relative;border-color:#aeb4bf}verdocs-auth .providers verdocs-button button.outline:disabled{border-color:#aeb4bf}verdocs-auth .providers verdocs-button .icon.start{position:absolute;left:16px;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}verdocs-auth .providers verdocs-button .icon.start svg{width:18px;height:18px}verdocs-auth .divider{gap:8px;color:#777;display:-ms-flexbox;display:flex;font-size:12px;margin:28px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-auth .divider .divider-line{-ms-flex:1;flex:1;height:1px;background:#aeb4bf}verdocs-auth .mfa-error{color:#cc0000;font-size:14px;margin:0 0 8px}`;
 
+const MFA_CODE_ERROR = 'Invalid code. Please try again.';
+const SOCIAL_START_ERROR = 'Unable to start sign-in sequence. Please try again.';
+const SOCIAL_LOGIN_KEY = 'vdocs-social-login';
+const SOCIAL_ERROR_MESSAGES = {
+    email_unverified: 'That account does not have a verified email address.',
+    corporate_email_required: 'Please use your corporate email address to create an account.',
+    account_locked: 'That account is locked. Please contact support@verdocs.com.',
+    provider_error: 'That provider could not sign you in. Please try again.',
+    access_denied: 'Sign-in was canceled.',
+};
+const socialErrorMessage = (code) => SOCIAL_ERROR_MESSAGES[code] || 'Unable to sign in. Please try again.';
+const readSocialLoginAttempt = () => {
+    try {
+        const stored = window.sessionStorage.getItem(SOCIAL_LOGIN_KEY);
+        return stored ? JSON.parse(stored) : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const clearSocialLoginAttempt = () => {
+    try {
+        window.sessionStorage.removeItem(SOCIAL_LOGIN_KEY);
+    }
+    catch (_a) {
+        // Third-party embeds may block sessionStorage. It's OK.
+    }
+};
+// Prevent replays on a reload
+const cleanSocialLoginParams = (names) => {
+    const url = new URL(window.location.href);
+    names.forEach(name => url.searchParams.delete(name));
+    window.history.replaceState({}, '', `${url.pathname}${url.search}${url.hash}`);
+};
+const currentReturnUri = () => `${window.location.origin}${window.location.pathname}`;
+const formatRecoveryCode = (value) => {
+    const cleaned = value
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, '')
+        .slice(0, 8);
+    return cleaned.length > 4 ? `${cleaned.slice(0, 4)}-${cleaned.slice(4)}` : cleaned;
+};
 const VerdocsAuth = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -30,6 +73,12 @@ const VerdocsAuth = class {
          * The display mode to start in.
          */
         this.displayMode = 'login';
+        /**
+         * Social auth is disabled by default because these are redirect flows that require allowable redirect_uri
+         * destinations be pre-registered. These will only work on Verdocs sites/apps, so third-party developers
+         * should not turn this on unless instructed to by Verdocs Support.
+         */
+        this.showSocialLogins = false;
         this.org_name = '';
         this.first_name = '';
         this.last_name = '';
@@ -43,7 +92,14 @@ const VerdocsAuth = class {
         this.resendDisabled = false;
         this.session = null;
         this.profile = null;
+        this.providers = { google: false, microsoft: false };
+        this.mfaToken = '';
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
         this.resendDisabledTimer = null;
+        this.mfaFocusPending = false;
         // 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.
@@ -73,6 +129,33 @@ const VerdocsAuth = class {
                 (_b = this.authenticated) === null || _b === void 0 ? void 0 : _b.emit({ authenticated: false, session, profile });
             }
         });
+        if (this.showSocialLogins) {
+            getSocialProviders(this.endpoint)
+                .then(providers => {
+                this.providers = providers;
+            })
+                .catch(() => undefined);
+        }
+        this.handleSocialLoginReturn();
+    }
+    componentDidRender() {
+        if (this.displayMode !== 'mfa') {
+            return;
+        }
+        const input = this.el.querySelector('.mfa-input input');
+        if (!input) {
+            return;
+        }
+        if (!this.useRecoveryCode) {
+            input.setAttribute('inputmode', 'numeric');
+        }
+        else {
+            input.removeAttribute('inputmode');
+        }
+        if (this.mfaFocusPending) {
+            this.mfaFocusPending = false;
+            input.focus();
+        }
     }
     disconnectedCallback() {
         if (typeof window !== 'undefined') {
@@ -164,9 +247,24 @@ const VerdocsAuth = class {
     }
     completeLogin(result) {
         this.clearForms();
+        this.displayMode = 'login';
         this.tempAuthEndpoint.clearSession();
         this.endpoint.setToken(result.access_token);
     }
+    async finishLogin(authResult) {
+        console.log('[AUTH] Authenticated, checking email verification');
+        this.tempAuthEndpoint.setToken(authResult.access_token);
+        const user = await getMyUser(this.tempAuthEndpoint);
+        this.submitting = false;
+        if (!user.email_verified) {
+            console.log('[AUTH] Logged in, pending email address verification');
+            this.displayMode = 'verify';
+        }
+        else {
+            console.log('[AUTH] Email address is verified, completing login');
+            this.completeLogin(authResult);
+        }
+    }
     async loginAndCheckVerification() {
         var _a;
         if (this.submitting) {
@@ -175,29 +273,170 @@ const VerdocsAuth = class {
         this.submitting = true;
         this.tempAuthEndpoint.clearSession();
         try {
-            this.submitting = false;
             const authResult = await authenticate(this.tempAuthEndpoint, { username: this.email.trim(), password: this.password, grant_type: 'password' });
-            console.log('[AUTH] Authenticated, checking email verification');
-            this.tempAuthEndpoint.setToken(authResult.access_token);
-            const user = await getMyUser(this.tempAuthEndpoint);
-            if (!user.email_verified) {
-                console.log('[AUTH] Logged in, pending email address verification');
-                this.displayMode = 'verify';
-            }
-            else {
-                console.log('[AUTH] Email address is verified, completing login');
-                this.completeLogin(authResult);
-            }
+            await this.finishLogin(authResult);
         }
         catch (e) {
+            if (isMFARequired(e)) {
+                this.startMFA(e.response.data.mfa_token);
+                return;
+            }
             this.submitting = false;
             console.log('[AUTH] Auth failure', ((_a = e.response) === null || _a === void 0 ? void 0 : _a.data) || e);
             VerdocsToast('Login failed. Please check your credentials and try again.', { style: 'error' });
         }
     }
+    startMFA(token) {
+        this.mfaToken = token;
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
+        this.submitting = false;
+        this.mfaFocusPending = true;
+        this.displayMode = 'mfa';
+    }
+    returnToLogin() {
+        this.mfaToken = '';
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
+        this.password = '';
+        this.submitting = false;
+        this.displayMode = 'login';
+    }
+    handleMFAFailure(e) {
+        var _a;
+        this.submitting = false;
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        // Failed attempts require a fresh token
+        if (isMFARequired(e)) {
+            this.mfaToken = e.response.data.mfa_token;
+            this.mfaError = MFA_CODE_ERROR;
+            return;
+        }
+        if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
+            this.returnToLogin();
+            VerdocsToast('Your sign-in timed out. Enter your password again.', { style: 'error' });
+            return;
+        }
+        this.mfaError = MFA_CODE_ERROR;
+    }
+    async submitMFA(code, isRecoveryCode) {
+        if (this.submitting || !code) {
+            return;
+        }
+        this.submitting = true;
+        this.mfaError = '';
+        this.tempAuthEndpoint.clearSession();
+        try {
+            const authResult = await authenticate(this.tempAuthEndpoint, isRecoveryCode
+                ? { grant_type: 'urn:verdocs:params:oauth:grant-type:mfa-recovery-code', mfa_token: this.mfaToken, recovery_code: code }
+                : { grant_type: 'urn:verdocs:params:oauth:grant-type:mfa-otp', mfa_token: this.mfaToken, otp: code });
+            await this.finishLogin(authResult);
+        }
+        catch (e) {
+            this.handleMFAFailure(e);
+        }
+    }
+    handleVerifyMFA() {
+        this.submitMFA(this.useRecoveryCode ? this.recoveryCode : this.mfaCode, this.useRecoveryCode).catch(() => undefined);
+    }
+    handleMFACodeInput(target) {
+        const digits = (target.value || '').replace(/\D/g, '').slice(0, 6);
+        if (target.value !== digits) {
+            target.value = digits;
+        }
+        this.mfaCode = digits;
+        // Auto-submit once 6 digits are entered
+        if (digits.length === 6) {
+            this.submitMFA(digits, false).catch(() => undefined);
+        }
+    }
+    handleRecoveryCodeInput(target) {
+        const formatted = formatRecoveryCode(target.value || '');
+        if (target.value !== formatted) {
+            target.value = formatted;
+        }
+        this.recoveryCode = formatted;
+    }
+    toggleRecoveryCode() {
+        this.useRecoveryCode = !this.useRecoveryCode;
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.mfaError = '';
+        this.mfaFocusPending = true;
+    }
+    handleSocialLogin(provider) {
+        try {
+            const verifier = createCodeVerifier();
+            const state = createCodeVerifier();
+            createCodeChallenge(verifier)
+                .then(codeChallenge => {
+                const attempt = { verifier, state, provider };
+                window.sessionStorage.setItem(SOCIAL_LOGIN_KEY, JSON.stringify(attempt));
+                window.location.assign(getSocialLoginUrl(this.endpoint, provider, { returnUri: currentReturnUri(), codeChallenge, state }));
+            })
+                .catch(() => VerdocsToast(SOCIAL_START_ERROR, { style: 'error' }));
+        }
+        catch (_a) {
+            VerdocsToast(SOCIAL_START_ERROR, { style: 'error' });
+        }
+    }
+    handleSocialLoginReturn() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const params = new URLSearchParams(window.location.search);
+        const loginCode = params.get('login_code');
+        const state = params.get('state');
+        const error = params.get('error');
+        if (!loginCode && !error) {
+            return;
+        }
+        const attempt = readSocialLoginAttempt();
+        // `error` doesn't give us the whole picture
+        if (!loginCode && !attempt) {
+            return;
+        }
+        clearSocialLoginAttempt();
+        cleanSocialLoginParams(loginCode ? ['login_code', 'state'] : ['error']);
+        if (error) {
+            VerdocsToast(socialErrorMessage(error), { style: 'error' });
+            return;
+        }
+        if (!attempt || attempt.state !== state) {
+            VerdocsToast('Sign-in could not be verified. Try again.', { style: 'error' });
+            return;
+        }
+        this.exchangeLoginCode(loginCode, attempt.verifier);
+    }
+    exchangeLoginCode(loginCode, codeVerifier) {
+        this.submitting = true;
+        this.tempAuthEndpoint.clearSession();
+        authenticate(this.tempAuthEndpoint, { grant_type: 'urn:verdocs:params:oauth:grant-type:login-code', login_code: loginCode, code_verifier: codeVerifier })
+            .then(authResult => this.finishLogin(authResult))
+            .catch(e => {
+            var _a;
+            if (isMFARequired(e)) {
+                this.startMFA(e.response.data.mfa_token);
+                return;
+            }
+            this.submitting = false;
+            console.log('[AUTH] Social login failure', ((_a = e.response) === null || _a === void 0 ? void 0 : _a.data) || e);
+            VerdocsToast('Sign-in failed. Please try again.', { style: 'error' });
+        });
+    }
     clearForms() {
         this.submitting = false;
         this.resendDisabled = false;
+        this.mfaToken = '';
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
         this.email = '';
         this.phone = '';
         this.password = '';
@@ -313,6 +552,12 @@ const VerdocsAuth = class {
             VerdocsToast('Unable to reset password. Please check your email address and try again.', { style: 'error' });
         }
     }
+    renderProviderButtons() {
+        if (!this.showSocialLogins || (!this.providers.google && !this.providers.microsoft)) {
+            return null;
+        }
+        return (h("div", { class: "providers" }, this.providers.google && (h("verdocs-button", { label: "Continue with Google", variant: "outline", class: "provider-google", startIcon: GoogleIcon, disabled: this.submitting, onClick: () => this.handleSocialLogin('google') })), this.providers.microsoft && (h("verdocs-button", { label: "Continue with Microsoft", variant: "outline", class: "provider-microsoft", startIcon: MicrosoftIcon, disabled: this.submitting, onClick: () => this.handleSocialLogin('microsoft') })), h("div", { class: "divider" }, h("div", { class: "divider-line" }), "or", h("div", { class: "divider-line" }))));
+    }
     render() {
         if (!this.visible) {
             return h("div", { style: { display: 'none' } }, "Authenticated");
@@ -320,9 +565,19 @@ const VerdocsAuth = class {
         if (this.session) {
             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 === 'mfa') {
+            const enteredCode = this.useRecoveryCode ? this.recoveryCode : this.mfaCode;
+            const codeComplete = this.useRecoveryCode ? this.recoveryCode.replace('-', '').length === 8 : this.mfaCode.length === 6;
+            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, "Two-factor authentication"), h("p", null, this.useRecoveryCode
+                ? 'Enter one of the backup codes you saved when you turned on multi-factor authentication.'
+                : 'Enter the six-digit code from your authenticator app.'), h("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    this.handleVerifyMFA();
+                } }, this.useRecoveryCode ? (h("verdocs-text-input", { class: "mfa-input", label: "Backup code", placeholder: "xxxx-xxxx", autocomplete: "one-time-code", value: this.recoveryCode, onInput: (e) => this.handleRecoveryCodeInput(e.target), disabled: this.submitting })) : (h("verdocs-text-input", { class: "mfa-input", label: "Authentication code", autocomplete: "one-time-code", value: this.mfaCode, onInput: (e) => this.handleMFACodeInput(e.target), disabled: this.submitting })), this.mfaError && (h("div", { role: "alert", class: "mfa-error" }, this.mfaError)), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", disabled: this.submitting, onClick: () => this.returnToLogin() }), h("verdocs-button", { label: "Verify", disabled: this.submitting || !codeComplete || !enteredCode, onClick: () => this.handleVerifyMFA() })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "text", size: "small", label: this.useRecoveryCode ? 'Use your authenticator app instead' : 'Use a backup code instead', disabled: this.submitting, onClick: () => this.toggleRecoveryCode() })))));
+        }
         if (this.displayMode === 'signup') {
             const invalid = this.submitting || !this.first_name || !this.last_name || !this.email || !this.password || !this.confirmpass || !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("div", { class: "already-have" }, "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: "new-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Confirm Password", type: "password", required: true, autocomplete: "off", value: this.confirmpass, onInput: (e) => (this.confirmpass = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone Number", type: "tel", required: true, autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = 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", { class: "service-agreement" }, "By clicking the Create Account button, you agree to the", ' ', h("a", { href: "https://verdocs.com/eula", target: "_blank" }, "End User License Agreement"), ". Learn about how we use and protect your data and how you can opt-out in our", ' ', h("a", { href: "https://verdocs.com/privacy-policy", target: "_blank" }, "Privacy Policy"), "."), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: invalid, onClick: invalid ? () => { } : () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px 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, "Sign up for a free account"), h("div", { class: "already-have" }, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), this.renderProviderButtons(), 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: "new-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Confirm Password", type: "password", required: true, autocomplete: "off", value: this.confirmpass, onInput: (e) => (this.confirmpass = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone Number", type: "tel", required: true, autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = 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", { class: "service-agreement" }, "By clicking the Create Account button, you agree to the", ' ', h("a", { href: "https://verdocs.com/eula", target: "_blank" }, "End User License Agreement"), ". Learn about how we use and protect your data and how you can opt-out in our", ' ', h("a", { href: "https://verdocs.com/privacy-policy", target: "_blank" }, "Privacy Policy"), "."), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: invalid, onClick: invalid ? () => { } : () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
         }
         if (this.displayMode === 'verify') {
             return (h("div", { class: "form" }, h("form", { onSubmit: () => this.handleVerification() }, h("p", null, "Please check your e-mail inbox for a verification code and enter it below."), h("verdocs-text-input", { label: "Verification Code", required: true, value: this.verificationCode, onInput: (e) => (this.verificationCode = e.target.value), disabled: this.submitting }), h("div", { class: "buttons" }, h("verdocs-button", { label: "Sign Out", variant: "outline", disabled: this.submitting, onClick: () => this.handleLogout() }), h("verdocs-button", { label: "Verify", disabled: this.submitting || !this.verificationCode || this.verificationCode.length !== 6, onClick: () => this.handleVerification() })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "text", label: "Resend Code", disabled: this.resendDisabled || this.submitting, onClick: () => this.handleResendVerification() })))));
@@ -333,8 +588,9 @@ const VerdocsAuth = class {
         if (this.displayMode === 'reset') {
             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.handleResetPassword() }, h("verdocs-text-input", { label: "Verification Code", required: true, value: this.verificationCode, onInput: (e) => (this.verificationCode = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "off", value: this.newPassword, onInput: (e) => (this.newPassword = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Confirm Password", type: "password", required: true, autocomplete: "off", value: this.confirmpass, onInput: (e) => (this.confirmpass = 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.handleResetPassword() })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "text", label: "Resend Code", disabled: this.resendDisabled || this.submitting, onClick: () => this.handleResendReset() })))));
         }
-        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("div", { class: "already-have" }, "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' } }))));
+        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"), this.renderProviderButtons(), 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: '0 auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.submitting, onClick: () => this.loginAndCheckVerification(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }), h("verdocs-button", { label: "Sign Up", variant: "outline", disabled: this.submitting, onClick: () => (this.displayMode = 'signup'), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
     }
+    get el() { return getElement(this); }
 };
 VerdocsAuth.style = verdocsAuthCss();