@contentgrowth/content-auth 0.4.9 → 0.5.1

package/dist/frontend/clients/vue-client.js

@@ -0,0 +1,9 @@
+import {
+  authClient,
+  createClient
+} from "../../chunk-F2G7XJIZ.js";
+import "../../chunk-R5U7XKVJ.js";
+export {
+  authClient,
+  createClient
+};

package/dist/frontend/components/astro/AuthForm.astro

@@ -0,0 +1,389 @@
+---
+
+export interface Props {
+    view?: 'signin' | 'signup';
+    baseUrl?: string;
+    socialProviders?: string[];
+    socialLayout?: 'row' | 'column';
+    title?: string;
+    width?: 'default' | 'compact' | 'wide';
+    layout?: 'default' | 'split';
+    socialPosition?: 'top' | 'bottom';
+    defaultEmail?: string;
+    lockEmail?: boolean;
+    forgotPasswordUrl?: string;
+    turnstileSiteKey?: string;
+    redirectUrl?: string;
+}
+
+const { 
+    view = 'signin',
+    baseUrl,
+    socialProviders = [],
+    socialLayout = 'row',
+    title,
+    width = 'default',
+    layout = 'default',
+    socialPosition = 'top',
+    defaultEmail = '',
+    lockEmail = false,
+    forgotPasswordUrl,
+    turnstileSiteKey,
+    redirectUrl
+} = Astro.props;
+
+const isLogin = view !== 'signup';
+const widthClass = width === 'compact' ? 'ca-width-compact' : width === 'wide' ? 'ca-width-wide' : 'ca-width-default';
+const containerClass = `ca-container ${layout === 'split' ? 'ca-layout-split' : ''} ${widthClass}`;
+const socialClass = socialLayout === 'column' ? 'ca-social-column' : 'ca-social-grid';
+const defaultTitle = isLogin ? 'Welcome Back' : 'Create Account';
+
+const googleSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"><path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z" /><path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z" /><path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.734 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z" /><path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.424 44.599 -10.174 45.789 L -6.744 42.359 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z" /></g></svg>`;
+const githubSvg = `<svg class="ca-icon" viewBox="0 0 24 24" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12c0-5.523-4.477-10-10-10z" fill="currentColor" /></svg>`;
+---
+
+<div class={containerClass} data-auth-form data-base-url={baseUrl} data-view={view} data-redirect-url={redirectUrl} data-lock-email={lockEmail} data-turnstile-site-key={turnstileSiteKey}>
+    <h2 class="ca-title" data-title>{title || defaultTitle}</h2>
+
+    {layout === 'split' ? (
+        <div class="ca-split-body">
+            <div class="ca-split-main">
+                <form class="ca-form" data-auth-form-element>
+                    {!isLogin && (
+                        <div class="ca-input-group" data-name-group>
+                            <label class="ca-label" for="name">Name</label>
+                            <input id="name" type="text" class="ca-input" name="name" required />
+                        </div>
+                    )}
+
+                    <div class="ca-input-group">
+                        <label class="ca-label" for="email">Email</label>
+                        <input 
+                            id="email" 
+                            type="email" 
+                            class={`ca-input ${lockEmail ? 'ca-input-locked' : ''}`}
+                            name="email"
+                            value={defaultEmail}
+                            readonly={lockEmail}
+                            required 
+                        />
+                    </div>
+
+                    <div class="ca-input-group">
+                        <div class="ca-label-row">
+                            <label class="ca-label" for="password">Password</label>
+                            {isLogin && forgotPasswordUrl && (
+                                <a href={forgotPasswordUrl} class="ca-forgot-link">Forgot password?</a>
+                            )}
+                        </div>
+                        <input id="password" type="password" class="ca-input" name="password" required />
+                    </div>
+
+                    {turnstileSiteKey && !isLogin && (
+                        <div class="ca-turnstile" data-turnstile-container>
+                            <p class="ca-turnstile-hint">Please complete the security check above</p>
+                        </div>
+                    )}
+
+                    <div class="ca-error" data-error-message style="display: none;"></div>
+
+                    <button type="submit" class="ca-button" data-submit-button>
+                        {isLogin ? 'Sign In' : 'Sign Up'}
+                    </button>
+                </form>
+
+                <div class="ca-footer">
+                    <span data-mode-text>{isLogin ? "Don't have an account? " : "Already have an account? "}</span>
+                    <button class="ca-link" type="button" data-switch-mode>
+                        {isLogin ? 'Sign up' : 'Sign in'}
+                    </button>
+                </div>
+            </div>
+            {socialProviders.length > 0 && !lockEmail && (
+                <>
+                    <div class="ca-split-divider">
+                        <span class="ca-split-divider-text">Or</span>
+                    </div>
+                    <div class="ca-split-social">
+                        <h3 class="ca-social-header" data-social-header>
+                            {isLogin ? 'Sign In With' : 'Sign Up With'}
+                        </h3>
+                        <div class={socialClass}>
+                            {socialProviders.map(provider => (
+                                <button
+                                    type="button"
+                                    class={`ca-button ca-button-social ca-button-${provider}`}
+                                    data-social-provider={provider}
+                                >
+                                    <Fragment set:html={provider === 'google' ? googleSvg : githubSvg} />
+                                    <span class="ca-btn-text">{provider === 'github' ? 'GitHub' : 'Google'}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    ) : (
+        <>
+            {socialPosition === 'top' && socialProviders.length > 0 && !lockEmail && (
+                <>
+                    <div class={socialClass}>
+                        {socialProviders.map(provider => (
+                            <button
+                                type="button"
+                                class={`ca-button ca-button-social ca-button-${provider}`}
+                                data-social-provider={provider}
+                            >
+                                <Fragment set:html={provider === 'google' ? googleSvg : githubSvg} />
+                                <span class="ca-btn-text">{provider === 'github' ? 'GitHub' : 'Google'}</span>
+                            </button>
+                        ))}
+                    </div>
+                    <div class="ca-divider">
+                        <span class="ca-divider-text">Or continue with</span>
+                    </div>
+                </>
+            )}
+
+            <form class="ca-form" data-auth-form-element>
+                {!isLogin && (
+                    <div class="ca-input-group" data-name-group>
+                        <label class="ca-label" for="name">Name</label>
+                        <input id="name" type="text" class="ca-input" name="name" required />
+                    </div>
+                )}
+
+                <div class="ca-input-group">
+                    <label class="ca-label" for="email">Email</label>
+                    <input 
+                        id="email" 
+                        type="email" 
+                        class={`ca-input ${lockEmail ? 'ca-input-locked' : ''}`}
+                        name="email"
+                        value={defaultEmail}
+                        readonly={lockEmail}
+                        required 
+                    />
+                </div>
+
+                <div class="ca-input-group">
+                    <div class="ca-label-row">
+                        <label class="ca-label" for="password">Password</label>
+                        {isLogin && forgotPasswordUrl && (
+                            <a href={forgotPasswordUrl} class="ca-forgot-link">Forgot password?</a>
+                        )}
+                    </div>
+                    <input id="password" type="password" class="ca-input" name="password" required />
+                </div>
+
+                {turnstileSiteKey && !isLogin && (
+                    <div class="ca-turnstile" data-turnstile-container>
+                        <p class="ca-turnstile-hint">Please complete the security check above</p>
+                    </div>
+                )}
+
+                <div class="ca-error" data-error-message style="display: none;"></div>
+
+                <button type="submit" class="ca-button" data-submit-button>
+                    {isLogin ? 'Sign In' : 'Sign Up'}
+                </button>
+            </form>
+
+            {socialPosition === 'bottom' && socialProviders.length > 0 && !lockEmail && (
+                <>
+                    <div class="ca-divider">
+                        <span class="ca-divider-text">Or continue with</span>
+                    </div>
+                    <div class={socialClass}>
+                        {socialProviders.map(provider => (
+                            <button
+                                type="button"
+                                class={`ca-button ca-button-social ca-button-${provider}`}
+                                data-social-provider={provider}
+                            >
+                                <Fragment set:html={provider === 'google' ? googleSvg : githubSvg} />
+                                <span class="ca-btn-text">{provider === 'github' ? 'GitHub' : 'Google'}</span>
+                            </button>
+                        ))}
+                    </div>
+                </>
+            )}
+
+            <div class="ca-footer">
+                <span data-mode-text>{isLogin ? "Don't have an account? " : "Already have an account? "}</span>
+                <button class="ca-link" type="button" data-switch-mode>
+                    {isLogin ? 'Sign up' : 'Sign in'}
+                </button>
+            </div>
+        </>
+    )}
+</div>
+
+<script>
+import { createClient } from '../../clients/astro-client';
+
+document.querySelectorAll('[data-auth-form]').forEach((container) => {
+    const baseUrl = container.getAttribute('data-base-url') || undefined;
+    const client = createClient(baseUrl);
+    let isLogin = container.getAttribute('data-view') !== 'signup';
+    const redirectUrl = container.getAttribute('data-redirect-url');
+    const lockEmail = container.getAttribute('data-lock-email') === 'true';
+    const turnstileSiteKey = container.getAttribute('data-turnstile-site-key');
+    
+    const form = container.querySelector('[data-auth-form-element]') as HTMLFormElement;
+    const submitBtn = container.querySelector('[data-submit-button]') as HTMLButtonElement;
+    const errorDiv = container.querySelector('[data-error-message]') as HTMLDivElement;
+    const switchBtn = container.querySelector('[data-switch-mode]') as HTMLButtonElement;
+    const modeText = container.querySelector('[data-mode-text]') as HTMLSpanElement;
+    const titleEl = container.querySelector('[data-title]') as HTMLHeadingElement;
+    const nameGroup = container.querySelector('[data-name-group]') as HTMLDivElement | null;
+    const socialHeader = container.querySelector('[data-social-header]') as HTMLHeadingElement | null;
+    const socialButtons = container.querySelectorAll('[data-social-provider]');
+    const turnstileContainer = container.querySelector('[data-turnstile-container]') as HTMLDivElement | null;
+    
+    let turnstileToken: string | null = null;
+    let turnstileWidget: any = null;
+
+    // Load Turnstile if needed
+    if (turnstileSiteKey && turnstileContainer) {
+        const script = document.createElement('script');
+        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback';
+        script.async = true;
+        script.defer = true;
+        document.head.appendChild(script);
+        
+        (window as any).onloadTurnstileCallback = () => {
+            if (!isLogin && turnstileContainer) {
+                turnstileWidget = (window as any).turnstile.render(turnstileContainer, {
+                    sitekey: turnstileSiteKey,
+                    callback: (token: string) => { turnstileToken = token; },
+                    'error-callback': () => { turnstileToken = null; },
+                    'expired-callback': () => { 
+                        turnstileToken = null;
+                        if (turnstileWidget) (window as any).turnstile.reset(turnstileWidget);
+                    }
+                });
+            }
+        };
+    }
+
+    const showError = (message: string) => {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+    };
+
+    const hideError = () => {
+        errorDiv.style.display = 'none';
+    };
+
+    const setLoading = (loading: boolean) => {
+        submitBtn.disabled = loading;
+        submitBtn.textContent = loading ? 'Loading...' : (isLogin ? 'Sign In' : 'Sign Up');
+    };
+
+    const updateMode = () => {
+        if (titleEl) titleEl.textContent = isLogin ? 'Welcome Back' : 'Create Account';
+        if (modeText) modeText.textContent = isLogin ? "Don't have an account? " : "Already have an account? ";
+        if (switchBtn) switchBtn.textContent = isLogin ? 'Sign up' : 'Sign in';
+        if (submitBtn) submitBtn.textContent = isLogin ? 'Sign In' : 'Sign Up';
+        if (nameGroup) nameGroup.style.display = isLogin ? 'none' : 'flex';
+        if (socialHeader) socialHeader.textContent = isLogin ? 'Sign In With' : 'Sign Up With';
+        if (turnstileContainer) {
+            turnstileContainer.style.display = isLogin ? 'none' : 'flex';
+            if (!isLogin && turnstileWidget) {
+                (window as any).turnstile?.reset(turnstileWidget);
+                turnstileToken = null;
+            }
+        }
+    };
+
+    // Handle mode switch
+    switchBtn?.addEventListener('click', () => {
+        isLogin = !isLogin;
+        updateMode();
+        hideError();
+    });
+
+    // Handle social login
+    socialButtons.forEach(btn => {
+        btn.addEventListener('click', async () => {
+            const provider = btn.getAttribute('data-social-provider');
+            if (!provider) return;
+            
+            setLoading(true);
+            try {
+                await client.signIn.social({
+                    provider: provider as any,
+                    callbackURL: redirectUrl || window.location.href
+                });
+            } catch (err: any) {
+                showError(err.message || `Failed to sign in with ${provider}`);
+                setLoading(false);
+            }
+        });
+    });
+
+    // Handle form submit
+    form?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        hideError();
+        
+        const formData = new FormData(form);
+        const email = formData.get('email') as string;
+        const password = formData.get('password') as string;
+        const name = formData.get('name') as string;
+
+        if (!isLogin && turnstileSiteKey && !turnstileToken) {
+            showError('Please complete the security challenge');
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            let response: any;
+            if (isLogin) {
+                response = await client.signIn.email({ email, password });
+                if (response.error) throw response.error;
+            } else {
+                const signupData: any = { email, password, name };
+                if (turnstileToken) signupData.turnstileToken = turnstileToken;
+                response = await client.signUp.email(signupData);
+                if (response.error) throw response.error;
+            }
+            
+            if (redirectUrl) {
+                window.location.href = redirectUrl;
+            }
+        } catch (err: any) {
+            const errorMessage = err.message || '';
+            let friendlyMessage = 'An error occurred. Please try again.';
+
+            if (errorMessage.includes('TURNSTILE') || errorMessage.includes('security challenge')) {
+                friendlyMessage = 'Security verification failed. Please complete the challenge and try again.';
+            } else if (errorMessage.includes('EMAIL_EXISTS') || errorMessage.includes('already exists')) {
+                friendlyMessage = 'An account with this email already exists. Try signing in instead.';
+            } else if (errorMessage.includes('Invalid email') || errorMessage.includes('invalid email')) {
+                friendlyMessage = 'Please enter a valid email address.';
+            } else if (errorMessage.includes('Invalid password') || errorMessage.includes('incorrect')) {
+                friendlyMessage = 'Invalid email or password. Please check your credentials.';
+            } else if (errorMessage.includes('User not found')) {
+                friendlyMessage = 'No account found with this email. Try signing up instead.';
+            } else if (errorMessage.includes('too short') || errorMessage.includes('password')) {
+                friendlyMessage = 'Password must be at least 8 characters long.';
+            } else if (err.message) {
+                friendlyMessage = err.message;
+            }
+
+            showError(friendlyMessage);
+            if (turnstileWidget) {
+                (window as any).turnstile?.reset(turnstileWidget);
+                turnstileToken = null;
+            }
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+</script>

package/dist/frontend/components/astro/ForgotPasswordForm.astro

@@ -0,0 +1,127 @@
+---
+export interface Props {
+    baseUrl?: string;
+    backToLoginUrl?: string;
+    title?: string;
+    width?: 'default' | 'compact' | 'wide';
+}
+
+const { 
+    baseUrl,
+    backToLoginUrl,
+    title = 'Reset Password',
+    width = 'default'
+} = Astro.props;
+
+const widthClass = width === 'compact' ? 'ca-width-compact' : width === 'wide' ? 'ca-width-wide' : 'ca-width-default';
+---
+
+<div class={`ca-container ${widthClass}`} data-forgot-password-form data-base-url={baseUrl}>
+    <h2 class="ca-title">{title}</h2>
+    <p class="ca-subtitle">
+        Enter your email address and we'll send you a link to reset your password.
+    </p>
+    
+    <form class="ca-form" data-form-element>
+        <div class="ca-input-group">
+            <label class="ca-label" for="email">Email</label>
+            <input
+                id="email"
+                type="email"
+                class="ca-input"
+                name="email"
+                placeholder="you@example.com"
+                required
+            />
+        </div>
+
+        <div class="ca-error" data-error-message style="display: none;"></div>
+
+        <button type="submit" class="ca-button" data-submit-button>
+            Send Reset Link
+        </button>
+    </form>
+
+    {backToLoginUrl && (
+        <div class="ca-footer">
+            <a href={backToLoginUrl} class="ca-link">Back to Sign In</a>
+        </div>
+    )}
+
+    <!-- Success state (hidden initially) -->
+    <div data-success-state style="display: none;">
+        <div class="ca-success-message">
+            <svg class="ca-success-icon" viewBox="0 0 24 24" width="48" height="48">
+                <circle cx="12" cy="12" r="10" fill="#10B981" />
+                <path d="M8 12l2.5 2.5L16 9" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <h3 class="ca-success-title">Check your email</h3>
+            <p class="ca-success-text">
+                We've sent a password reset link to <strong data-email-display></strong>.
+                Please check your inbox and click the link to reset your password.
+            </p>
+        </div>
+        {backToLoginUrl && (
+            <div class="ca-footer">
+                <a href={backToLoginUrl} class="ca-link">Back to Sign In</a>
+            </div>
+        )}
+    </div>
+</div>
+
+<script>
+import { createClient } from '../../clients/astro-client';
+
+document.querySelectorAll('[data-forgot-password-form]').forEach((container) => {
+    const baseUrl = container.getAttribute('data-base-url') || undefined;
+    const client = createClient(baseUrl);
+    
+    const form = container.querySelector('[data-form-element]') as HTMLFormElement;
+    const submitBtn = container.querySelector('[data-submit-button]') as HTMLButtonElement;
+    const errorDiv = container.querySelector('[data-error-message]') as HTMLDivElement;
+    const successState = container.querySelector('[data-success-state]') as HTMLDivElement;
+    const emailDisplay = container.querySelector('[data-email-display]') as HTMLElement;
+    const formElements = container.querySelectorAll('.ca-form, .ca-subtitle, .ca-title');
+
+    const showError = (message: string) => {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+    };
+
+    const hideError = () => {
+        errorDiv.style.display = 'none';
+    };
+
+    const setLoading = (loading: boolean) => {
+        submitBtn.disabled = loading;
+        submitBtn.textContent = loading ? 'Sending...' : 'Send Reset Link';
+    };
+
+    form?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        hideError();
+        
+        const formData = new FormData(form);
+        const email = formData.get('email') as string;
+
+        setLoading(true);
+
+        try {
+            const { error } = await client.requestPasswordReset({
+                email,
+                redirectTo: window.location.origin + '/auth/reset-password'
+            });
+            if (error) throw error;
+            
+            // Show success state
+            emailDisplay.textContent = email;
+            formElements.forEach(el => (el as HTMLElement).style.display = 'none');
+            successState.style.display = 'block';
+        } catch (err: any) {
+            showError(err.message || 'Failed to send reset email');
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+</script>