sitepaige-mcp-server 1.2.3 → 1.2.5

package/components/form.tsx

@@ -155,6 +155,7 @@ interface FormData {
 export default function RForm({ name, custom_view_description, design }: RFormProps) {
   const [submitted, setSubmitted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   // Parse form configuration
   let formData: FormData = {
@@ -171,26 +172,60 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
     console.error('Error parsing form data:', e);
   }
 
-  // Don't render if no submission email
-  if (!formData.submissionEmail) {
-    return (
-      <div className="p-8 text-center text-gray-500">
-        <h1>{name}</h1>
-        <p>Form configuration error: No submission email specified.</p>
-      </div>
-    );
-  }
-
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsSubmitting(true);
+    setError(null);
+    
+    // Get form data
+    const form = e.currentTarget;
+    const formDataObj: Record<string, any> = {};
+    
+    // Collect all form fields
+    formData.fields.forEach((field) => {
+      const element = form.elements.namedItem(field.name) as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+      if (element) {
+        formDataObj[field.name] = element.value;
+      }
+    });
+    
+    // Add metadata
+    formDataObj._formName = name;
+    if (formData.submissionEmail) {
+      formDataObj._notificationEmail = formData.submissionEmail;
+    }
     
-    // FormSubmit.co will handle the actual submission
-    // We just need to show the success message after a delay
-    setTimeout(() => {
-      setSubmitted(true);
+    try {
+      // Get CSRF token if available
+      const csrfMeta = document.querySelector('meta[name="csrf-token"]');
+      const csrfToken = csrfMeta?.getAttribute('content');
+      
+      const response = await fetch('/api/form', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(csrfToken && { 'X-CSRF-Token': csrfToken })
+        },
+        body: JSON.stringify({
+          formName: name,
+          data: formDataObj
+        })
+      });
+      
+      const result = await response.json();
+      
+      if (response.ok) {
+        setSubmitted(true);
+        setIsSubmitting(false);
+      } else {
+        setError(result.error || 'Failed to submit form. Please try again.');
+        setIsSubmitting(false);
+      }
+    } catch (err) {
+      console.error('Form submission error:', err);
+      setError('Network error. Please check your connection and try again.');
       setIsSubmitting(false);
-    }, 1000);
+    }
   };
 
   if (submitted) {
@@ -219,8 +254,7 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
           <button
             onClick={() => {
               setSubmitted(false);
-              // Reset form by reloading (formsubmit.co doesn't provide a JS API)
-              window.location.reload();
+              setError(null);
             }}
             className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
           >
@@ -252,19 +286,17 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
     <div className="w-full max-w-2xl mx-auto p-6" style={formStyles}>
       <h1>{name}</h1>
       <form 
-        action={`https://formsubmit.co/${formData.submissionEmail}`} 
-        method="POST"
         onSubmit={handleSubmit}
         className="space-y-6"
       >
-        {/* Hidden fields for FormSubmit.co configuration */}
-        {!formData.useCaptcha && (
-          <input type="hidden" name="_captcha" value="false" />
+        {/* Display error message if any */}
+        {error && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
+            <p className="font-medium">Error</p>
+            <p className="text-sm mt-1">{error}</p>
+          </div>
         )}
         
-        {/* Thank you page - redirect back to same page with submitted state */}
-        <input type="hidden" name="_next" value={typeof window !== 'undefined' ? window.location.href : ''} />
-        
         {/* Render form fields */}
         {formData.fields.map((field, index) => (
           <div key={field.id || index} className="form-field">
@@ -384,11 +416,6 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
           </button>
         </div>
       </form>
-      
-      {/* FormSubmit.co attribution (optional but nice to have) */}
-      <div className="mt-6 text-center text-xs text-gray-400">
-        <p>{getFormTranslation('Form secured by FormSubmit', design.websiteLanguage)}</p>
-      </div>
     </div>
   );
 }

package/components/menu.tsx

@@ -281,7 +281,6 @@ export default function Menu({ menu, onClick, pages = [] }: MenuProps) {
           key={item.name}
           href={linkUrl}
           onClick={(e) => {
-            e.preventDefault();
             setSelectedPage(item.page);
             onClick?.();
           }}

package/defaultapp/api/db-forms.ts

@@ -0,0 +1,203 @@
+/*
+Form submission database functions
+Handles storing form data in the database
+*/
+
+import { db_init, db_query, DatabaseClient } from './db';
+import * as crypto from 'crypto';
+
+/**
+ * Insert a form submission into the database
+ * @param formName - Name/identifier of the form
+ * @param formData - JSON data from the form
+ * @returns The ID of the inserted submission
+ */
+export async function insertFormSubmission(
+  formName: string,
+  formData: Record<string, any>
+): Promise<number> {
+  const client = await db_init();
+  
+  const dbType = (process.env.DATABASE_TYPE || process.env.DB_TYPE || 'postgres').toLowerCase();
+  
+  let query: string;
+  let params: any[];
+  
+  switch (dbType) {
+    case 'postgres':
+      query = `
+        INSERT INTO form_submissions (form_name, form_data)
+        VALUES ($1, $2)
+        RETURNING id
+      `;
+      params = [formName, JSON.stringify(formData)];
+      break;
+      
+    case 'mysql':
+      query = `
+        INSERT INTO form_submissions (form_name, form_data)
+        VALUES (?, ?)
+      `;
+      params = [formName, JSON.stringify(formData)];
+      break;
+      
+    default: // sqlite
+      query = `
+        INSERT INTO form_submissions (form_name, form_data)
+        VALUES (?, ?)
+      `;
+      params = [formName, JSON.stringify(formData)];
+      break;
+  }
+  
+  const result = await db_query(client, query, params);
+  
+  if (dbType === 'postgres') {
+    return result[0].id;
+  } else if (dbType === 'mysql') {
+    return (result as any).insertId;
+  } else {
+    // SQLite - get the last inserted row id
+    const lastIdResult = await db_query(client, 'SELECT last_insert_rowid() as id', []);
+    return lastIdResult[0].id;
+  }
+}
+
+/**
+ * Get form submissions by form name with pagination
+ * @param formName - Name of the form (optional, returns all if not provided)
+ * @param limit - Number of records to return
+ * @param offset - Number of records to skip
+ * @returns Array of form submissions
+ */
+export async function getFormSubmissions(
+  formName?: string,
+  limit: number = 50,
+  offset: number = 0
+): Promise<Array<{
+  id: number;
+  timestamp: string;
+  form_name: string;
+  form_data: any;
+}>> {
+  const client = await db_init();
+  
+  let query: string;
+  let params: any[];
+  
+  if (formName) {
+    query = `
+      SELECT id, timestamp, form_name, form_data
+      FROM form_submissions
+      WHERE form_name = ?
+      ORDER BY timestamp DESC
+      LIMIT ? OFFSET ?
+    `;
+    params = [formName, limit, offset];
+  } else {
+    query = `
+      SELECT id, timestamp, form_name, form_data
+      FROM form_submissions
+      ORDER BY timestamp DESC
+      LIMIT ? OFFSET ?
+    `;
+    params = [limit, offset];
+  }
+  
+  const result = await db_query(client, query, params);
+  
+  // Parse JSON data for each submission
+  return result.map(row => ({
+    ...row,
+    form_data: typeof row.form_data === 'string' ? JSON.parse(row.form_data) : row.form_data
+  }));
+}
+
+/**
+ * Get a single form submission by ID
+ * @param id - ID of the submission
+ * @returns Form submission or null if not found
+ */
+export async function getFormSubmissionById(
+  id: number
+): Promise<{
+  id: number;
+  timestamp: string;
+  form_name: string;
+  form_data: any;
+} | null> {
+  const client = await db_init();
+  
+  const query = `
+    SELECT id, timestamp, form_name, form_data
+    FROM form_submissions
+    WHERE id = ?
+  `;
+  
+  const result = await db_query(client, query, [id]);
+  
+  if (result.length === 0) {
+    return null;
+  }
+  
+  const row = result[0];
+  return {
+    ...row,
+    form_data: typeof row.form_data === 'string' ? JSON.parse(row.form_data) : row.form_data
+  };
+}
+
+/**
+ * Delete a form submission by ID
+ * @param id - ID of the submission to delete
+ * @returns true if deleted, false if not found
+ */
+export async function deleteFormSubmission(id: number): Promise<boolean> {
+  const client = await db_init();
+  
+  const query = `
+    DELETE FROM form_submissions
+    WHERE id = ?
+  `;
+  
+  const result = await db_query(client, query, [id]);
+  
+  // Check if a row was deleted
+  if ((result as any).affectedRows !== undefined) {
+    return (result as any).affectedRows > 0;
+  } else if ((result as any).changes !== undefined) {
+    return (result as any).changes > 0;
+  }
+  
+  return false;
+}
+
+/**
+ * Get count of form submissions by form name
+ * @param formName - Name of the form (optional, returns total if not provided)
+ * @returns Count of submissions
+ */
+export async function getFormSubmissionCount(formName?: string): Promise<number> {
+  const client = await db_init();
+  
+  let query: string;
+  let params: any[];
+  
+  if (formName) {
+    query = `
+      SELECT COUNT(*) as count
+      FROM form_submissions
+      WHERE form_name = ?
+    `;
+    params = [formName];
+  } else {
+    query = `
+      SELECT COUNT(*) as count
+      FROM form_submissions
+    `;
+    params = [];
+  }
+  
+  const result = await db_query(client, query, params);
+  return parseInt(result[0].count, 10);
+}

package/defaultapp/api/form/route.ts

@@ -0,0 +1,244 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getFormSubmissions, getFormSubmissionById } from '../db-forms';
+import { validateSession } from '../db-users';
+import { cookies } from 'next/headers';
+import { send_email } from '../storage/email';
+
+/**
+ * POST /api/form
+ * Submit a form with data
+ * 
+ * Request body:
+ * {
+ *   formName: string,    // Required: Name/identifier of the form
+ *   data: object        // Required: Form data as key-value pairs
+ * }
+ * 
+ * Response:
+ * {
+ *   success: boolean,
+ *   message: string
+ * }
+ */
+export async function POST(request: NextRequest) {
+  try {
+
+    
+    const body = await request.json();
+    const { formName, data } = body;
+    
+    // Validate required fields
+    if (!formName || typeof formName !== 'string') {
+      return NextResponse.json(
+        { error: 'Form name is required' },
+        { status: 400 }
+      );
+    }
+    
+    if (!data || typeof data !== 'object') {
+      return NextResponse.json(
+        { error: 'Form data is required and must be an object' },
+        { status: 400 }
+      );
+    }
+    
+    // Add metadata to the form data
+    const enrichedData = {
+      ...data,
+      _metadata: {
+        submittedAt: new Date().toISOString(),
+        userAgent: request.headers.get('user-agent') || 'Unknown',
+        ip: request.headers.get('x-forwarded-for') || 
+            request.headers.get('x-real-ip') || 
+            'Unknown',
+        referer: request.headers.get('referer') || 'Direct'
+      }
+    };
+    
+    // Check if user is authenticated (optional - forms can work for anonymous users too)
+    let userId: string | null = null;
+    try {
+      const sessionCookie = await cookies();
+      const sessionToken = sessionCookie.get('session_id')?.value;
+      if (sessionToken) {
+        const sessionData = await validateSession(sessionToken);
+        if (sessionData.valid && sessionData.user) {
+          userId = sessionData.user.userid;
+          enrichedData._metadata.userId = userId;
+          enrichedData._metadata.userEmail = sessionData.user.email;
+        }
+      }
+    } catch (err) {
+      // Authentication is optional, continue without user data
+    }
+    
+    // Send email using Resend
+    const siteDomain = process.env.NODE_ENV === 'production' ? process.env.DOMAIN : process.env.LOCAL_DOMAIN;
+    
+    // Determine hostname for email addresses
+    let hostname = 'sitepaige.com'; // Fallback
+    try {
+      if (siteDomain) {
+        // Handle potential missing protocol
+        const urlStr = siteDomain.startsWith('http') ? siteDomain : `https://${siteDomain}`;
+        hostname = new URL(urlStr).hostname;
+      }
+    } catch (e) {
+      console.warn('Could not parse siteDomain for hostname', siteDomain);
+    }
+
+    const toAddress = `admin@${hostname}`;
+    const fromAddress = process.env.EMAIL_FROM || `noreply@sitepaige.com`;
+    
+    // Construct email content
+    const dataRows = Object.entries(enrichedData)
+      .filter(([key]) => key !== '_metadata')
+      .map(([key, value]) => `
+        <tr>
+          <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>${key}</strong></td>
+          <td style="padding: 8px; border-bottom: 1px solid #ddd;">${typeof value === 'object' ? JSON.stringify(value) : String(value)}</td>
+        </tr>
+      `).join('');
+
+    const emailHtml = `
+      <h2>New Form Submission: ${formName}</h2>
+      <table style="width: 100%; border-collapse: collapse;">
+        <tbody>
+          ${dataRows}
+        </tbody>
+      </table>
+      <br>
+      <h3>Metadata</h3>
+      <pre>${JSON.stringify(enrichedData._metadata, null, 2)}</pre>
+    `;
+    
+    const emailText = `
+New Form Submission: ${formName}
+--------------------------------
+${Object.entries(enrichedData)
+    .filter(([key]) => key !== '_metadata')
+    .map(([key, value]) => `${key}: ${typeof value === 'object' ? JSON.stringify(value) : String(value)}`)
+    .join('\n')}
+
+Metadata:
+${JSON.stringify(enrichedData._metadata, null, 2)}
+    `;
+
+    await send_email({
+      to: toAddress,
+      from: fromAddress,
+      subject: `New Form Submission: ${formName}`,
+      html: emailHtml,
+      text: emailText
+    });
+    
+    return NextResponse.json({
+      success: true,
+      message: 'Form submitted successfully'
+    }, { status: 201 });
+    
+  } catch (error) {
+    console.error('Form submission error:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to submit form' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * GET /api/form
+ * Retrieve form submissions (requires admin authentication)
+ * 
+ * Query parameters:
+ * - formName: string (optional) - Filter by form name
+ * - limit: number (optional, default 50) - Number of records to return
+ * - offset: number (optional, default 0) - Number of records to skip
+ * - id: number (optional) - Get a specific submission by ID
+ * 
+ * Response:
+ * {
+ *   submissions: Array<{
+ *     id: number,
+ *     timestamp: string,
+ *     form_name: string,
+ *     form_data: object
+ *   }>,
+ *   total: number
+ * }
+ */
+export async function GET(request: NextRequest) {
+  try {
+    // Check authentication - only admins can view form submissions
+    const sessionCookie = await cookies();
+    const sessionToken = sessionCookie.get('session_id')?.value;
+    
+    if (!sessionToken) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+    
+    const sessionData = await validateSession(sessionToken);
+    if (!sessionData.valid || !sessionData.user) {
+      return NextResponse.json(
+        { error: 'Invalid session' },
+        { status: 401 }
+      );
+    }
+    
+    // Check if user is admin (userlevel 2)
+    if (sessionData.user.userlevel !== 2) {
+      return NextResponse.json(
+        { error: 'Admin access required' },
+        { status: 403 }
+      );
+    }
+    
+    // Parse query parameters
+    const { searchParams } = new URL(request.url);
+    const formName = searchParams.get('formName') || undefined;
+    const limit = parseInt(searchParams.get('limit') || '50', 10);
+    const offset = parseInt(searchParams.get('offset') || '0', 10);
+    const id = searchParams.get('id');
+    
+    // If ID is provided, get a specific submission
+    if (id) {
+      const submission = await getFormSubmissionById(parseInt(id, 10));
+      if (!submission) {
+        return NextResponse.json(
+          { error: 'Submission not found' },
+          { status: 404 }
+        );
+      }
+      return NextResponse.json({ submission });
+    }
+    
+    // Get form submissions with pagination
+    const [submissions, total] = await Promise.all([
+      getFormSubmissions(formName, limit, offset),
+      getFormSubmissionCount(formName)
+    ]);
+    
+    return NextResponse.json({
+      submissions,
+      total,
+      pagination: {
+        limit,
+        offset,
+        hasMore: offset + submissions.length < total
+      }
+    });
+    
+  } catch (error) {
+    console.error('Form retrieval error:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to retrieve forms' },
+      { status: 500 }
+    );
+  }
+}
+
+// Import the missing function
+import { getFormSubmissionCount } from '../db-forms';

package/defaultapp/api/profile/route.ts

@@ -1,8 +1,8 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
-import { validateSession } from '../../db-users';
-import { updatePassword, getPasswordAuthByEmail } from '../../db-password-auth';
-import { deleteUser } from '../../db-users';
+import { validateSession } from '../db-users';
+import { updatePassword } from '../db-password-auth';
+import { deleteUser } from '../db-users';
 
 // Handle password change
 export async function PUT(request: NextRequest) {