ayezee-astro-cms 1.1.0 → 1.2.0

package/dist/components/AyezeeForm.astro

@@ -0,0 +1,175 @@
+---
+/**
+ * AyezeeForm Component
+ *
+ * A flexible form component for AyeZee CMS that handles form submission,
+ * Turnstile integration, and validation. Fully customizable via slots and props.
+ *
+ * @example
+ * ```astro
+ * <AyezeeForm label="Contact Form" formClass="my-form" submitButtonClass="btn-primary">
+ *   <input type="text" name="name" required />
+ *   <input type="email" name="email" required />
+ *   <textarea name="message" required></textarea>
+ * </AyezeeForm>
+ * ```
+ */
+
+import { getFormConfig } from '../cms-helper.js';
+
+export interface Props {
+  /** Module label, slug, or instance key to identify the form */
+  label?: string;
+  /** Instance key (alternative to label) */
+  instanceKey?: string;
+  /** Text for the submit button */
+  submitButtonText?: string;
+  /** CSS classes for the submit button */
+  submitButtonClass?: string;
+  /** CSS classes for the form element */
+  formClass?: string;
+  /** Success message to display */
+  successMessage?: string;
+  /** Error message to display */
+  errorMessage?: string;
+  /** CSS classes for the message container */
+  messageClass?: string;
+  /** CSS classes for the Turnstile container */
+  turnstileClass?: string;
+  /** Whether to show the default submit button (set to false if using custom button in slot) */
+  showSubmitButton?: boolean;
+  /** Whether to show the default message div (set to false if handling messages externally) */
+  showMessageDiv?: boolean;
+  /** Additional data attributes to add to the form */
+  dataAttributes?: Record<string, string>;
+}
+
+const {
+  label,
+  instanceKey,
+  submitButtonText = 'Submit',
+  submitButtonClass = '',
+  formClass = '',
+  successMessage = 'Form submitted successfully!',
+  errorMessage = 'Failed to submit form. Please try again.',
+  messageClass = '',
+  turnstileClass = '',
+  showSubmitButton = true,
+  showMessageDiv = true,
+  dataAttributes = {},
+} = Astro.props;
+
+// Get form configuration (includes Turnstile settings)
+const moduleIdentifier = instanceKey || label;
+if (!moduleIdentifier) {
+  throw new Error('AyezeeForm requires either "label" or "instanceKey" prop');
+}
+
+const formConfig = getFormConfig(moduleIdentifier);
+
+if (!formConfig.module) {
+  throw new Error(`Form module "${moduleIdentifier}" not found`);
+}
+
+// Generate unique form ID
+const formId = `ayezee-form-${formConfig.module.instanceKey}`;
+
+// Pass config to client
+const clientConfig = {
+  formId,
+  apiUrl: formConfig.apiUrl,
+  apiKey: formConfig.apiKey,
+  turnstile: formConfig.turnstile,
+  successMessage,
+  errorMessage,
+};
+
+// Build data attributes
+const dataAttrs = {
+  'data-ayezee-form': '',
+  ...dataAttributes,
+};
+---
+
+<form id={formId} class={formClass} {...dataAttrs}>
+  <!-- Honeypot field (hidden from users, catches bots) -->
+  <input
+    type="text"
+    name="website"
+    class="absolute -left-[9999px] opacity-0 pointer-events-none"
+    tabindex="-1"
+    autocomplete="off"
+    aria-hidden="true"
+  />
+
+  <!-- Form fields from slot -->
+  <slot />
+
+  <!-- Turnstile container (only rendered if enabled) -->
+  {
+    formConfig.turnstile.enabled && (
+      <div id={`${formId}-turnstile`} class={turnstileClass || 'turnstile-container my-4'} />
+    )
+  }
+
+  <!-- Message container -->
+  {
+    showMessageDiv && (
+      <div
+        id={`${formId}-message`}
+        class={messageClass || 'hidden mt-2 p-3 border rounded text-sm'}
+        role="alert"
+        aria-live="polite"
+      />
+    )
+  }
+
+  <!-- Submit button -->
+  {
+    showSubmitButton && (
+      <button
+        type="submit"
+        id={`${formId}-submit`}
+        class={
+          submitButtonClass ||
+          'bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed'
+        }
+      >
+        <span class="button-text">{submitButtonText}</span>
+        <span class="button-loading hidden">Submitting...</span>
+      </button>
+    )
+  }
+
+  <!-- Slot for custom submit button or additional form elements -->
+  <slot name="after-form" />
+</form>
+
+<!-- Load Turnstile script if enabled -->
+{
+  formConfig.turnstile.enabled && (
+    <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
+  )
+}
+
+<!-- Pass config to client-side script -->
+<script is:inline define:vars={{ clientConfig }}>
+  window[`FORM_CONFIG_${clientConfig.formId}`] = clientConfig;
+</script>
+
+<!-- Form handler script -->
+<script>
+  import { AyezeeFormHandler, initAyezeeForms } from '../form-handler.js';
+
+  // Initialize all forms on the page
+  function initForms() {
+    initAyezeeForms();
+  }
+
+  // Init when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initForms);
+  } else {
+    initForms();
+  }
+</script>

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * AyeZee CMS Components
+ *
+ * Export Astro components for use in projects
+ */
+export { AyezeeFormHandler, initAyezeeForms, submitToAyezeeCms } from '../form-handler.js';
+export type { FormHandlerConfig, FormSubmissionResult } from '../form-handler.js';

package/dist/components/index.js

@@ -0,0 +1,8 @@
+/**
+ * AyeZee CMS Components
+ *
+ * Export Astro components for use in projects
+ */
+// Note: Astro components are exported individually, not through this index
+// Import them directly like: import AyezeeForm from 'ayezee-astro-cms/components/AyezeeForm.astro'
+export { AyezeeFormHandler, initAyezeeForms, submitToAyezeeCms } from '../form-handler.js';

package/dist/form-handler.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Form Handler Utilities for AyeZee CMS Forms
+ *
+ * Provides core form submission logic, Turnstile integration, and error handling
+ * that can be used in custom form implementations or with the default AyezeeForm component
+ */
+export interface FormHandlerConfig {
+    formId: string;
+    apiUrl: string;
+    apiKey: string;
+    turnstile: {
+        enabled: boolean;
+        siteKey: string | null;
+    };
+    successMessage?: string;
+    errorMessage?: string;
+    onSuccess?: (data: any) => void;
+    onError?: (error: string) => void;
+    onSubmitStart?: () => void;
+    onSubmitEnd?: () => void;
+}
+export interface FormSubmissionResult {
+    success: boolean;
+    message: string;
+    data?: any;
+    errors?: string[];
+}
+/**
+ * Core form handler class that manages form submission, validation, and Turnstile integration
+ */
+export declare class AyezeeFormHandler {
+    private form;
+    private submitButton;
+    private messageDiv;
+    private turnstileContainer;
+    private turnstileWidgetId;
+    private config;
+    constructor(config: FormHandlerConfig);
+    private init;
+    private initTurnstile;
+    private handleSubmit;
+    /**
+     * Show a message in the message div
+     */
+    showMessage(message: string, isSuccess: boolean): void;
+    /**
+     * Hide the message div
+     */
+    hideMessage(): void;
+    /**
+     * Set the loading state of the form
+     */
+    setLoading(isLoading: boolean): void;
+    /**
+     * Manually submit the form (useful for custom implementations)
+     */
+    submit(customData?: Record<string, any>): Promise<FormSubmissionResult>;
+    /**
+     * Reset the form
+     */
+    reset(): void;
+    /**
+     * Get form data as an object
+     */
+    getFormData(): Record<string, any>;
+}
+/**
+ * Initialize all AyeZee forms on the page
+ * This automatically finds and initializes all forms with [data-ayezee-form] attribute
+ */
+export declare function initAyezeeForms(): void;
+/**
+ * Standalone function to submit form data to AyeZee CMS API
+ * Useful for custom form implementations that don't use the default form handler
+ */
+export declare function submitToAyezeeCms(data: Record<string, any>, config: {
+    apiUrl: string;
+    apiKey: string;
+    turnstileToken?: string;
+}): Promise<FormSubmissionResult>;

package/dist/form-handler.js

@@ -0,0 +1,289 @@
+/**
+ * Form Handler Utilities for AyeZee CMS Forms
+ *
+ * Provides core form submission logic, Turnstile integration, and error handling
+ * that can be used in custom form implementations or with the default AyezeeForm component
+ */
+/**
+ * Core form handler class that manages form submission, validation, and Turnstile integration
+ */
+export class AyezeeFormHandler {
+    form;
+    submitButton;
+    messageDiv;
+    turnstileContainer;
+    turnstileWidgetId = null;
+    config;
+    constructor(config) {
+        this.config = config;
+        this.form = document.getElementById(config.formId);
+        this.submitButton = document.getElementById(`${config.formId}-submit`);
+        this.messageDiv = document.getElementById(`${config.formId}-message`);
+        this.turnstileContainer = document.getElementById(`${config.formId}-turnstile`);
+        if (!this.form) {
+            console.error('Form not found:', config.formId);
+            return;
+        }
+        this.init();
+    }
+    init() {
+        // Initialize Turnstile if enabled
+        if (this.config.turnstile.enabled && this.turnstileContainer) {
+            this.initTurnstile();
+        }
+        // Attach submit handler
+        this.form.addEventListener('submit', (e) => this.handleSubmit(e));
+    }
+    initTurnstile() {
+        if (!window.turnstile) {
+            console.warn('Turnstile script not loaded yet, waiting...');
+            setTimeout(() => this.initTurnstile(), 100);
+            return;
+        }
+        this.turnstileWidgetId = window.turnstile.render(this.turnstileContainer, {
+            sitekey: this.config.turnstile.siteKey,
+            theme: 'light',
+            size: 'normal',
+        });
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        this.hideMessage();
+        this.setLoading(true);
+        this.config.onSubmitStart?.();
+        try {
+            const formData = new FormData(this.form);
+            const data = {};
+            formData.forEach((value, key) => {
+                data[key] = value;
+            });
+            // Honeypot check
+            if (data.website) {
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+                this.showMessage(this.config.successMessage || 'Form submitted successfully!', true);
+                this.form.reset();
+                this.config.onSuccess?.(data);
+                return;
+            }
+            // Remove honeypot field before sending to API
+            delete data.website;
+            // Get Turnstile token if enabled
+            if (this.config.turnstile.enabled) {
+                const token = window.turnstile?.getResponse(this.turnstileWidgetId);
+                if (!token) {
+                    this.showMessage('Please complete the security challenge.', false);
+                    this.config.onError?.('Turnstile validation failed');
+                    return;
+                }
+                data['cf-turnstile-response'] = token;
+            }
+            // Submit to API
+            console.log('Submitting to:', this.config.apiUrl);
+            console.log('Data being sent:', data);
+            const response = await fetch(this.config.apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${this.config.apiKey}`,
+                },
+                body: JSON.stringify(data),
+            });
+            const result = await response.json();
+            console.log('API Response:', result);
+            if (response.ok && result.success) {
+                this.showMessage(this.config.successMessage || 'Form submitted successfully!', true);
+                this.form.reset();
+                // Reset Turnstile
+                if (this.turnstileWidgetId !== null) {
+                    window.turnstile?.reset(this.turnstileWidgetId);
+                }
+                this.config.onSuccess?.(result);
+            }
+            else {
+                console.error('Submission failed:', result);
+                // Parse validation errors
+                let errorMessage = this.config.errorMessage || 'Failed to submit form. Please try again.';
+                if (result.details) {
+                    try {
+                        const details = typeof result.details === 'string' ? JSON.parse(result.details) : result.details;
+                        if (details.validationErrors && Array.isArray(details.validationErrors)) {
+                            errorMessage = details.validationErrors.join('. ');
+                        }
+                    }
+                    catch (e) {
+                        console.error('Error parsing validation details:', e);
+                    }
+                }
+                if (!errorMessage || errorMessage === this.config.errorMessage) {
+                    errorMessage = result.error || result.message || this.config.errorMessage || 'An error occurred';
+                }
+                this.showMessage(errorMessage, false);
+                this.config.onError?.(errorMessage);
+            }
+        }
+        catch (error) {
+            console.error('Form submission error:', error);
+            const errorMsg = 'Network error. Please try again.';
+            this.showMessage(errorMsg, false);
+            this.config.onError?.(errorMsg);
+        }
+        finally {
+            this.setLoading(false);
+            this.config.onSubmitEnd?.();
+        }
+    }
+    /**
+     * Show a message in the message div
+     */
+    showMessage(message, isSuccess) {
+        if (!this.messageDiv)
+            return;
+        this.messageDiv.textContent = message;
+        this.messageDiv.classList.remove('hidden');
+        if (isSuccess) {
+            this.messageDiv.classList.remove('border-red-300', 'bg-red-50', 'text-red-700');
+            this.messageDiv.classList.add('border-green-300', 'bg-green-50', 'text-green-700');
+        }
+        else {
+            this.messageDiv.classList.remove('border-green-300', 'bg-green-50', 'text-green-700');
+            this.messageDiv.classList.add('border-red-300', 'bg-red-50', 'text-red-700');
+        }
+    }
+    /**
+     * Hide the message div
+     */
+    hideMessage() {
+        if (!this.messageDiv)
+            return;
+        this.messageDiv.classList.add('hidden');
+    }
+    /**
+     * Set the loading state of the form
+     */
+    setLoading(isLoading) {
+        if (!this.submitButton)
+            return;
+        this.submitButton.disabled = isLoading;
+        const textSpan = this.submitButton.querySelector('.button-text');
+        const loadingSpan = this.submitButton.querySelector('.button-loading');
+        if (isLoading) {
+            textSpan?.classList.add('hidden');
+            loadingSpan?.classList.remove('hidden');
+        }
+        else {
+            textSpan?.classList.remove('hidden');
+            loadingSpan?.classList.add('hidden');
+        }
+    }
+    /**
+     * Manually submit the form (useful for custom implementations)
+     */
+    async submit(customData) {
+        // If custom data provided, temporarily populate form
+        if (customData) {
+            Object.entries(customData).forEach(([key, value]) => {
+                const input = this.form.querySelector(`[name="${key}"]`);
+                if (input) {
+                    input.value = String(value);
+                }
+            });
+        }
+        // Trigger form submission
+        const event = new Event('submit', { cancelable: true });
+        this.form.dispatchEvent(event);
+        return {
+            success: true,
+            message: 'Form submitted',
+        };
+    }
+    /**
+     * Reset the form
+     */
+    reset() {
+        this.form.reset();
+        this.hideMessage();
+        if (this.turnstileWidgetId !== null) {
+            window.turnstile?.reset(this.turnstileWidgetId);
+        }
+    }
+    /**
+     * Get form data as an object
+     */
+    getFormData() {
+        const formData = new FormData(this.form);
+        const data = {};
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+        return data;
+    }
+}
+/**
+ * Initialize all AyeZee forms on the page
+ * This automatically finds and initializes all forms with [data-ayezee-form] attribute
+ */
+export function initAyezeeForms() {
+    const forms = document.querySelectorAll('[data-ayezee-form]');
+    forms.forEach((form) => {
+        const formId = form.id;
+        const config = window[`FORM_CONFIG_${formId}`];
+        if (config) {
+            new AyezeeFormHandler(config);
+        }
+    });
+}
+/**
+ * Standalone function to submit form data to AyeZee CMS API
+ * Useful for custom form implementations that don't use the default form handler
+ */
+export async function submitToAyezeeCms(data, config) {
+    try {
+        const payload = { ...data };
+        if (config.turnstileToken) {
+            payload['cf-turnstile-response'] = config.turnstileToken;
+        }
+        const response = await fetch(config.apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${config.apiKey}`,
+            },
+            body: JSON.stringify(payload),
+        });
+        const result = await response.json();
+        if (response.ok && result.success) {
+            return {
+                success: true,
+                message: result.message || 'Form submitted successfully!',
+                data: result.data,
+            };
+        }
+        else {
+            // Parse validation errors
+            let errors = [];
+            if (result.details) {
+                try {
+                    const details = typeof result.details === 'string' ? JSON.parse(result.details) : result.details;
+                    if (details.validationErrors && Array.isArray(details.validationErrors)) {
+                        errors = details.validationErrors;
+                    }
+                }
+                catch (e) {
+                    console.error('Error parsing validation details:', e);
+                }
+            }
+            return {
+                success: false,
+                message: result.error || result.message || 'Failed to submit form',
+                errors: errors.length > 0 ? errors : undefined,
+            };
+        }
+    }
+    catch (error) {
+        console.error('Form submission error:', error);
+        return {
+            success: false,
+            message: 'Network error. Please try again.',
+        };
+    }
+}

package/dist/index.d.ts

@@ -7,5 +7,6 @@
  */
 export * from './cms-helper.js';
 export * from './cloudinary-utils.js';
+export * from './form-handler.js';
 export { ayezeeCms, type AyezeeCmsOptions } from './integration.js';
 export { ayezeeCms as default } from './integration.js';

package/dist/index.js

@@ -9,6 +9,8 @@
 export * from './cms-helper.js';
 // Export Cloudinary utilities
 export * from './cloudinary-utils.js';
+// Export form handler utilities
+export * from './form-handler.js';
 // Export integration
 export { ayezeeCms } from './integration.js';
 // Default export

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ayezee-astro-cms",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "AyeZee CMS integration for Astro with automatic data fetching, form handling, and validation",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,6 +17,11 @@
     "./components": {
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
+    },
+    "./components/AyezeeForm.astro": "./dist/components/AyezeeForm.astro",
+    "./form-handler": {
+      "types": "./dist/form-handler.d.ts",
+      "import": "./dist/form-handler.js"
     }
   },
   "files": [
@@ -24,7 +29,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run copy-astro",
+    "copy-astro": "cp src/components/*.astro dist/components/ 2>/dev/null || true",
     "dev": "tsc --watch",
     "prepublishOnly": "npm run build"
   },