@contentgrowth/content-auth 0.4.9 → 0.5.0

package/dist/frontend/components/astro/astro/Organization.astro

@@ -0,0 +1,254 @@
+---
+// CreateOrganizationForm Component
+export interface CreateOrganizationFormProps {
+    baseUrl?: string;
+    className?: string;
+}
+
+// OrganizationSwitcher Component
+export interface OrganizationSwitcherProps {
+    baseUrl?: string;
+    currentOrgId?: string;
+    className?: string;
+}
+
+// InviteMemberForm Component
+export interface InviteMemberFormProps {
+    baseUrl?: string;
+    className?: string;
+}
+
+export type Props = 
+    | { component: 'create'; props?: CreateOrganizationFormProps }
+    | { component: 'switcher'; props?: OrganizationSwitcherProps }
+    | { component: 'invite'; props?: InviteMemberFormProps };
+
+const { component, props = {} } = Astro.props;
+const baseUrl = (props as any).baseUrl || '';
+const className = (props as any).className || '';
+const currentOrgId = (props as any).currentOrgId || '';
+---
+
+{component === 'create' && (
+    <form class={`ca-form ${className}`} data-create-org-form data-base-url={baseUrl}>
+        <h3 class="ca-subtitle">Create Organization</h3>
+        <div class="ca-input-group">
+            <label class="ca-label">Organization Name</label>
+            <input
+                type="text"
+                class="ca-input"
+                name="name"
+                required
+                placeholder="Acme Corp"
+                data-name-input
+            />
+        </div>
+        <div class="ca-input-group">
+            <label class="ca-label">Slug</label>
+            <input
+                type="text"
+                class="ca-input"
+                name="slug"
+                required
+                placeholder="acme-corp"
+                data-slug-input
+            />
+        </div>
+        <div class="ca-error" data-error-message style="display: none;"></div>
+        <div class="ca-success-message" data-success-message style="display: none; padding: 0.75rem; background: #d1fae5; border-radius: 6px; color: #065f46; text-align: center;">
+            Organization created!
+        </div>
+        <button type="submit" class="ca-button" data-submit-button>
+            Create Organization
+        </button>
+    </form>
+)}
+
+{component === 'switcher' && (
+    <div class={`ca-org-switcher ${className}`} data-org-switcher data-base-url={baseUrl} data-current-org-id={currentOrgId}>
+        <label class="ca-label">Select Organization</label>
+        <select class="ca-select" data-org-select disabled>
+            <option value="">Loading...</option>
+        </select>
+    </div>
+)}
+
+{component === 'invite' && (
+    <form class={`ca-form ${className}`} data-invite-member-form data-base-url={baseUrl}>
+        <h3 class="ca-subtitle">Invite Member</h3>
+        <div class="ca-input-group">
+            <label class="ca-label">Email Address</label>
+            <input
+                type="email"
+                class="ca-input"
+                name="email"
+                required
+                placeholder="colleague@example.com"
+            />
+        </div>
+        <div class="ca-input-group">
+            <label class="ca-label">Role</label>
+            <select class="ca-select" name="role">
+                <option value="member">Member</option>
+                <option value="admin">Admin</option>
+                <option value="owner">Owner</option>
+            </select>
+        </div>
+        <div class="ca-error" data-error-message style="display: none;"></div>
+        <div class="ca-success-message" data-success-message style="display: none; padding: 0.75rem; background: #d1fae5; border-radius: 6px; color: #065f46; text-align: center;">
+            Invitation sent!
+        </div>
+        <button type="submit" class="ca-button" data-submit-button>
+            Send Invite
+        </button>
+    </form>
+)}
+
+<script>
+import { createClient } from '../../clients/astro-client';
+
+// Create Organization Form
+document.querySelectorAll('[data-create-org-form]').forEach((form) => {
+    const baseUrl = form.getAttribute('data-base-url') || undefined;
+    const client = createClient(baseUrl);
+    
+    const nameInput = form.querySelector('[data-name-input]') as HTMLInputElement;
+    const slugInput = form.querySelector('[data-slug-input]') as HTMLInputElement;
+    const submitBtn = form.querySelector('[data-submit-button]') as HTMLButtonElement;
+    const errorDiv = form.querySelector('[data-error-message]') as HTMLDivElement;
+    const successDiv = form.querySelector('[data-success-message]') as HTMLDivElement;
+
+    // Auto-slugify
+    nameInput?.addEventListener('input', () => {
+        if (!slugInput.value || slugInput.dataset.autoSlug !== 'false') {
+            slugInput.value = nameInput.value.toLowerCase().replace(/\s+/g, '-');
+            slugInput.dataset.autoSlug = 'true';
+        }
+    });
+
+    slugInput?.addEventListener('input', () => {
+        slugInput.dataset.autoSlug = 'false';
+    });
+
+    const showError = (message: string) => {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+        successDiv.style.display = 'none';
+    };
+
+    const showSuccess = () => {
+        successDiv.style.display = 'block';
+        errorDiv.style.display = 'none';
+    };
+
+    const setLoading = (loading: boolean) => {
+        submitBtn.disabled = loading;
+        submitBtn.textContent = loading ? 'Creating...' : 'Create Organization';
+    };
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const formData = new FormData(form as HTMLFormElement);
+        const name = formData.get('name') as string;
+        const slug = formData.get('slug') as string;
+
+        setLoading(true);
+
+        try {
+            const result = await client.organization.create({ name, slug });
+            if (result.error) throw result.error;
+            (form as HTMLFormElement).reset();
+            showSuccess();
+        } catch (err: any) {
+            showError(err.message || 'Failed to create organization');
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+
+// Organization Switcher
+document.querySelectorAll('[data-org-switcher]').forEach(async (container) => {
+    const baseUrl = container.getAttribute('data-base-url') || undefined;
+    const currentOrgId = container.getAttribute('data-current-org-id') || '';
+    const client = createClient(baseUrl);
+    const select = container.querySelector('[data-org-select]') as HTMLSelectElement;
+
+    try {
+        const { data } = await client.organization.list({});
+        if (data && data.length > 0) {
+            select.innerHTML = '<option value="" disabled>Select an organization</option>';
+            data.forEach((org: any) => {
+                const option = document.createElement('option');
+                option.value = org.id;
+                option.textContent = org.name;
+                if (org.id === currentOrgId) option.selected = true;
+                select.appendChild(option);
+            });
+            select.disabled = false;
+        } else {
+            select.innerHTML = '<option value="" disabled>No organizations</option>';
+        }
+    } catch (err) {
+        select.innerHTML = '<option value="" disabled>Failed to load</option>';
+    }
+
+    select?.addEventListener('change', async () => {
+        const orgId = select.value;
+        if (!orgId) return;
+        await client.organization.setActive({ organizationId: orgId });
+        window.dispatchEvent(new CustomEvent('org-switched', { detail: { orgId } }));
+    });
+});
+
+// Invite Member Form
+document.querySelectorAll('[data-invite-member-form]').forEach((form) => {
+    const baseUrl = form.getAttribute('data-base-url') || undefined;
+    const client = createClient(baseUrl);
+    
+    const submitBtn = form.querySelector('[data-submit-button]') as HTMLButtonElement;
+    const errorDiv = form.querySelector('[data-error-message]') as HTMLDivElement;
+    const successDiv = form.querySelector('[data-success-message]') as HTMLDivElement;
+
+    const showError = (message: string) => {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+        successDiv.style.display = 'none';
+    };
+
+    const showSuccess = () => {
+        successDiv.style.display = 'block';
+        errorDiv.style.display = 'none';
+    };
+
+    const setLoading = (loading: boolean) => {
+        submitBtn.disabled = loading;
+        submitBtn.textContent = loading ? 'Sending Invite...' : 'Send Invite';
+    };
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const formData = new FormData(form as HTMLFormElement);
+        const email = formData.get('email') as string;
+        const role = formData.get('role') as string;
+
+        setLoading(true);
+
+        try {
+            const result = await client.organization.inviteMember({
+                email,
+                role: role as any
+            });
+            if (result.error) throw result.error;
+            (form as HTMLFormElement).reset();
+            showSuccess();
+        } catch (err: any) {
+            showError(err.message || 'Invitation failed');
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+</script>

package/dist/frontend/components/astro/astro/PasswordChanger.astro

@@ -0,0 +1,128 @@
+---
+export interface Props {
+    baseUrl?: string;
+    className?: string;
+}
+
+const { baseUrl, className = '' } = Astro.props;
+---
+
+<form class={`ca-form ${className}`} data-password-changer data-base-url={baseUrl}>
+    <div class="ca-input-group">
+        <label class="ca-label" for="current-password">Current Password</label>
+        <input
+            id="current-password"
+            type="password"
+            class="ca-input"
+            name="currentPassword"
+            required
+        />
+    </div>
+
+    <div class="ca-input-group">
+        <label class="ca-label" for="new-password">New Password</label>
+        <input
+            id="new-password"
+            type="password"
+            class="ca-input"
+            name="newPassword"
+            minlength={8}
+            required
+        />
+    </div>
+
+    <div class="ca-input-group">
+        <label class="ca-label" for="confirm-password">Confirm New Password</label>
+        <input
+            id="confirm-password"
+            type="password"
+            class="ca-input"
+            name="confirmPassword"
+            minlength={8}
+            required
+        />
+    </div>
+
+    <div class="ca-error" data-error-message style="display: none;"></div>
+    <div class="ca-success-message" data-success-message style="display: none; padding: 0.75rem; background: #d1fae5; border-radius: 6px; color: #065f46; text-align: center;">
+        Password updated successfully!
+    </div>
+
+    <button type="submit" class="ca-button" data-submit-button>
+        Update Password
+    </button>
+</form>
+
+<script>
+import { createClient } from '../../clients/astro-client';
+
+document.querySelectorAll('[data-password-changer]').forEach((form) => {
+    const baseUrl = form.getAttribute('data-base-url') || undefined;
+    const client = createClient(baseUrl);
+    
+    const submitBtn = form.querySelector('[data-submit-button]') as HTMLButtonElement;
+    const errorDiv = form.querySelector('[data-error-message]') as HTMLDivElement;
+    const successDiv = form.querySelector('[data-success-message]') as HTMLDivElement;
+
+    const showError = (message: string) => {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+        successDiv.style.display = 'none';
+    };
+
+    const showSuccess = () => {
+        successDiv.style.display = 'block';
+        errorDiv.style.display = 'none';
+    };
+
+    const hideMessages = () => {
+        errorDiv.style.display = 'none';
+        successDiv.style.display = 'none';
+    };
+
+    const setLoading = (loading: boolean) => {
+        submitBtn.disabled = loading;
+        submitBtn.textContent = loading ? 'Updating...' : 'Update Password';
+    };
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        hideMessages();
+        
+        const formData = new FormData(form as HTMLFormElement);
+        const currentPassword = formData.get('currentPassword') as string;
+        const newPassword = formData.get('newPassword') as string;
+        const confirmPassword = formData.get('confirmPassword') as string;
+
+        if (newPassword !== confirmPassword) {
+            showError("New passwords don't match");
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            const res = await client.changePassword({
+                currentPassword,
+                newPassword
+            });
+
+            if (res?.error) {
+                throw new Error(res.error.message);
+            }
+
+            // Clear form on success
+            (form as HTMLFormElement).reset();
+            showSuccess();
+        } catch (err: any) {
+            if (err?.code === 'CREDENTIAL_ACCOUNT_NOT_FOUND' || err?.message?.includes('Credential account not found')) {
+                showError("You are logged in via a social provider (e.g. GitHub, Google) and do not have a password set.");
+            } else {
+                showError(err.message || 'Failed to change password');
+            }
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+</script>

package/dist/frontend/components/astro/astro/ProfileEditor.astro

@@ -0,0 +1,133 @@
+---
+export interface Props {
+    baseUrl?: string;
+    defaultName?: string;
+    defaultImage?: string;
+    className?: string;
+}
+
+const { 
+    baseUrl, 
+    defaultName = '', 
+    defaultImage = '',
+    className = '' 
+} = Astro.props;
+---
+
+<form class={`ca-form ${className}`} data-profile-editor data-base-url={baseUrl}>
+    <div class="ca-input-group">
+        <label class="ca-label" for="profile-name">Name</label>
+        <input
+            id="profile-name"
+            type="text"
+            class="ca-input"
+            name="name"
+            placeholder="Your Name"
+            value={defaultName}
+        />
+    </div>
+
+    <div class="ca-input-group">
+        <label class="ca-label" for="profile-image">Avatar URL</label>
+        <div style="display: flex; gap: 10px; align-items: center;">
+            <input
+                id="profile-image"
+                type="url"
+                class="ca-input"
+                name="image"
+                placeholder="https://example.com/avatar.jpg"
+                value={defaultImage}
+                style="flex: 1;"
+            />
+            <div 
+                data-avatar-preview
+                style={`width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid #eee; display: ${defaultImage ? 'block' : 'none'};`}
+            >
+                <img
+                    src={defaultImage}
+                    alt="Preview"
+                    style="width: 100%; height: 100%; object-fit: cover;"
+                    data-avatar-img
+                />
+            </div>
+        </div>
+    </div>
+
+    <div class="ca-error" data-error-message style="display: none;"></div>
+    <div class="ca-success-message" data-success-message style="display: none; padding: 0.75rem; background: #d1fae5; border-radius: 6px; color: #065f46; text-align: center;">
+        Profile updated successfully!
+    </div>
+
+    <button type="submit" class="ca-button" data-submit-button>
+        Save Profile
+    </button>
+</form>
+
+<script>
+import { createClient } from '../../clients/astro-client';
+
+document.querySelectorAll('[data-profile-editor]').forEach((form) => {
+    const baseUrl = form.getAttribute('data-base-url') || undefined;
+    const client = createClient(baseUrl);
+    
+    const submitBtn = form.querySelector('[data-submit-button]') as HTMLButtonElement;
+    const errorDiv = form.querySelector('[data-error-message]') as HTMLDivElement;
+    const successDiv = form.querySelector('[data-success-message]') as HTMLDivElement;
+    const imageInput = form.querySelector('#profile-image') as HTMLInputElement;
+    const avatarPreview = form.querySelector('[data-avatar-preview]') as HTMLDivElement;
+    const avatarImg = form.querySelector('[data-avatar-img]') as HTMLImageElement;
+
+    // Update avatar preview on input change
+    imageInput?.addEventListener('input', () => {
+        const url = imageInput.value;
+        if (url) {
+            avatarImg.src = url;
+            avatarPreview.style.display = 'block';
+            avatarImg.onerror = () => { avatarPreview.style.display = 'none'; };
+        } else {
+            avatarPreview.style.display = 'none';
+        }
+    });
+
+    const showError = (message: string) => {
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+        successDiv.style.display = 'none';
+    };
+
+    const showSuccess = () => {
+        successDiv.style.display = 'block';
+        errorDiv.style.display = 'none';
+    };
+
+    const hideMessages = () => {
+        errorDiv.style.display = 'none';
+        successDiv.style.display = 'none';
+    };
+
+    const setLoading = (loading: boolean) => {
+        submitBtn.disabled = loading;
+        submitBtn.textContent = loading ? 'Saving...' : 'Save Profile';
+    };
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        hideMessages();
+        
+        const formData = new FormData(form as HTMLFormElement);
+        const name = formData.get('name') as string;
+        const image = formData.get('image') as string;
+
+        setLoading(true);
+
+        try {
+            await client.updateUser({ name, image });
+            showSuccess();
+        } catch (err: any) {
+            showError(err.message || 'Failed to update profile');
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+</script>

package/dist/frontend/components/astro/astro/ResetPasswordForm.astro

@@ -0,0 +1,172 @@
+---
+export interface Props {
+    token?: string | null;
+    baseUrl?: string;
+    backToLoginUrl?: string;
+    title?: string;
+    width?: 'default' | 'compact' | 'wide';
+}
+
+const { 
+    token,
+    baseUrl,
+    backToLoginUrl,
+    title = 'Set New Password',
+    width = 'default'
+} = Astro.props;
+
+const widthClass = width === 'compact' ? 'ca-width-compact' : width === 'wide' ? 'ca-width-wide' : 'ca-width-default';
+const hasToken = !!token;
+---
+
+<div class={`ca-container ${widthClass}`} data-reset-password-form data-base-url={baseUrl} data-token={token || ''}>
+    <h2 class="ca-title">{title}</h2>
+
+    {!hasToken ? (
+        <!-- Missing/Invalid Token State -->
+        <div class="ca-error-message">
+            <svg class="ca-error-icon" viewBox="0 0 24 24" width="48" height="48">
+                <circle cx="12" cy="12" r="10" fill="#EF4444" />
+                <path d="M12 8v4M12 16h.01" stroke="white" stroke-width="2" stroke-linecap="round" />
+            </svg>
+            <h3 class="ca-error-title">Invalid or Missing Token</h3>
+            <p class="ca-error-text">
+                The password reset link is invalid or has expired.
+                Please request a new password reset.
+            </p>
+        </div>
+    ) : (
+        <>
+            <p class="ca-subtitle">Enter your new password below.</p>
+            
+            <form class="ca-form" data-form-element>
+                <div class="ca-input-group">
+                    <label class="ca-label" for="password">New Password</label>
+                    <input
+                        id="password"
+                        type="password"
+                        class="ca-input"
+                        name="password"
+                        placeholder="At least 8 characters"
+                        minlength={8}
+                        required
+                    />
+                </div>
+
+                <div class="ca-input-group">
+                    <label class="ca-label" for="confirmPassword">Confirm Password</label>
+                    <input
+                        id="confirmPassword"
+                        type="password"
+                        class="ca-input"
+                        name="confirmPassword"
+                        placeholder="Confirm your password"
+                        required
+                    />
+                </div>
+
+                <div class="ca-error" data-error-message style="display: none;"></div>
+
+                <button type="submit" class="ca-button" data-submit-button>
+                    Reset Password
+                </button>
+            </form>
+        </>
+    )}
+
+    {backToLoginUrl && (
+        <div class="ca-footer" data-footer>
+            <a href={backToLoginUrl} class="ca-link">{hasToken ? 'Back to Sign In' : '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">Password Reset Successful</h3>
+            <p class="ca-success-text">
+                Your password has been successfully reset. You can now sign in with your new password.
+            </p>
+        </div>
+        {backToLoginUrl && (
+            <div class="ca-footer">
+                <a href={backToLoginUrl} class="ca-link">Sign In</a>
+            </div>
+        )}
+    </div>
+</div>
+
+<script>
+import { createClient } from '../../clients/astro-client';
+
+document.querySelectorAll('[data-reset-password-form]').forEach((container) => {
+    const baseUrl = container.getAttribute('data-base-url') || undefined;
+    const token = container.getAttribute('data-token');
+    const client = createClient(baseUrl);
+    
+    if (!token) return; // No token, form is not shown
+    
+    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 formElements = container.querySelectorAll('.ca-form, .ca-subtitle');
+    const footer = container.querySelector('[data-footer]') as HTMLDivElement;
+
+    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 ? 'Resetting...' : 'Reset Password';
+    };
+
+    form?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        hideError();
+        
+        const formData = new FormData(form);
+        const password = formData.get('password') as string;
+        const confirmPassword = formData.get('confirmPassword') as string;
+
+        if (password !== confirmPassword) {
+            showError('Passwords do not match');
+            return;
+        }
+
+        if (password.length < 8) {
+            showError('Password must be at least 8 characters');
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            const { error } = await client.resetPassword({
+                token,
+                newPassword: password
+            });
+            if (error) throw error;
+            
+            // Show success state
+            formElements.forEach(el => (el as HTMLElement).style.display = 'none');
+            if (footer) footer.style.display = 'none';
+            successState.style.display = 'block';
+        } catch (err: any) {
+            showError(err.message || 'Failed to reset password');
+        } finally {
+            setLoading(false);
+        }
+    });
+});
+</script>