sitepaige-mcp-server 0.7.14 → 1.0.2

package/README.md

@@ -8,11 +8,12 @@ Quickly transform your ideas into web applications with Sitepaige. Generate site
 - **Seamless authentication system** powered by OAuth - your users can sign in with one click
 - **All frontend components, pages, and views** ready to use
 
-## Step 2: Backend Completion (50 credits - optional)
-- **Production-ready database architecture** (SQLite, PostgreSQL, or MySQL) - no setup headaches
+## Step 2: Backend Completion (FREE)
+- **Production-ready database architecture** (PostgreSQL, SQLite, or MySQL) - simple environment configuration
 - **RESTful API endpoints** with complete input/output schemas and step-by-step implementation guidance
 - **Comprehensive [ARCHITECTURE.md](EXAMPLE_ARCHITECTURE.md) documentation** that maps out your entire codebase for your coding agent to finish the site - no guesswork required
 - **SQL models and migrations** ready for production
+- **Environment configuration template** (`.env.example`) with all database options pre-configured
 
 ## Prerequisites
 
@@ -140,73 +141,117 @@ Generate the frontend of a web application from natural language prompts:
 
 The tool will:
 - Return immediately with a job ID and project ID
-- Generate the frontend asynchronously (typically takes 2-3 minutes)
-- Automatically write frontend files when generation is complete
-- **Cost**: FREE for your first project, then 12 credits
+- Generate the complete site asynchronously (typically takes 8-10 minutes)
+- Automatically write all files when generation is complete
+- **Cost**: FREE for your first project, then credits based on your plan
+- **Duration**: Takes approximately 8-10 minutes to complete
 
-**Note**: This generates only the frontend (pages, components, views, styles). To add backend functionality, use `complete_backend`. Frontend will
-require further generation after backend is completed
+**Note**: This generates the complete web application including both frontend (pages, components, views, styles) and backend (models, APIs, database migrations)
 
-### 2. Complete Backend (Optional)
+### 2. Check Status
 
-Add backend functionality to your generated site:
+Monitor the progress of site generation using the job ID or project ID.
+If a job has been completed but the files are not written, this function will write the files to disk. 
+If you are stalled out, use 'check the status of sitepaige' to get the latest status
 
-```
-"Complete the backend for the project using the project ID from generate_site"
-```
+## Database Configuration
 
-The tool will:
-- Add database models and SQL migrations
-- Generate API routes with full implementation
-- Create comprehensive ARCHITECTURE.md documentation
-- Preserve all frontend files (no overwrites)
-- **Cost**: 50 credits
+The generated sites support PostgreSQL, MySQL, and SQLite databases. Here's how to configure PostgreSQL for your generated application:
 
-### 3. Check Status
+### Setting Up PostgreSQL Environment Variables
 
-Monitor the progress of site generation using the job ID or project ID.
-If a job has been completed but the files are not written, this function will write the files to disk. 
-If you are stalled out, use 'check the status of sitepaige' to get the latest status
+After your site is generated, you'll need to configure the database connection. The generated site includes a `.env.example` file with all available options.
+
+1. **Copy the environment file**:
+   ```bash
+   cd /path/to/your/generated/site
+   cp .env.example .env
+   ```
+
+2. **Configure PostgreSQL**:
+   ```env
+   DATABASE_TYPE=postgres
+   DB_HOST=localhost      # Default: localhost
+   DB_PORT=5432           # Default: 5432
+   DB_USER=postgres       # Default: postgres
+   DB_PASSWORD=yourpassword  # Required - no default
+   DB_NAME=app            # Default: app
+   ```
+   
+   **Important Notes**: 
+   - The implementation uses only the generic `DB_*` variables
+   - `DB_PASSWORD` is required and has no default value
+   - Do not use `POSTGRES_*` or `DATABASE_URL` variables - they are not used by the implementation
+
+3. **SSL Configuration**:
+   - PostgreSQL: SSL is always enabled with `rejectUnauthorized: false` (accepts self-signed certificates)
+   - MySQL: No SSL configuration by default
+
+4. **Run database migrations**:
+   ```bash
+   npm run migrate
+   ```
 
-## Cost
+### Alternative Database Options
 
-### Frontend Generation (generate_site)
-- **First project**: FREE
-- **Additional projects**: 12 credits each
+**MySQL Configuration**:
+```env
+DATABASE_TYPE=mysql
+DB_HOST=localhost      # Default: localhost
+DB_PORT=3306          # Default: 3306
+DB_USER=root          # Default: root
+DB_PASSWORD=yourpassword  # Required - no default
+DB_NAME=app           # Default: app
+```
+**Note**: MySQL uses only the generic `DB_*` variables. Do not use `MYSQL_*` or `DATABASE_URL` variables.
+
+**SQLite Configuration** (Default - No setup required):
+```env
+DATABASE_TYPE=sqlite
+DATABASE_URL=./data/app.db
+# Or use SQLITE_DIR to specify the directory:
+# SQLITE_DIR=./data
+# SQLite creates the database file automatically
+```
 
-### Backend Completion (complete_backend)
-- **All projects**: 50 credits each
+### Database Setup Requirements
 
-### Total for a Complete Site
-- **First complete site**: 50 credits (free frontend + 50 credit backend)
-- **Additional complete sites**: 62 credits (12 credit frontend + 50 credit backend)
+Before running your generated site with PostgreSQL:
 
-Purchase credits at https://sitepaige.com
+1. **Install PostgreSQL** if not already installed
+2. **Create a database** for your application:
+   ```sql
+   CREATE DATABASE your_app_name;
+   ```
+3. **Create a user** (optional, if not using default postgres user):
+   ```sql
+   CREATE USER your_username WITH PASSWORD 'your_password';
+   GRANT ALL PRIVILEGES ON DATABASE your_app_name TO your_username;
+   ```
 
 ## Example Workflow
 
 Here's a typical workflow for generating a complete site:
 
-1. **Generate the frontend**:
+1. **Generate the complete site**:
    ```
    "Use sitepaige to create a task management app with user authentication in /Users/me/projects/taskapp"
    ```
-   This returns a project ID (e.g., `proj_abc123`) and starts frontend generation.
+   This returns a job ID and project ID, and starts the complete site generation (frontend + backend).
 
 2. **Check status** (optional):
    ```
    "Check the status of the sitepaige generation"
    ```
    
-3. **Complete the backend** (after frontend is done):
-   ```
-   "Complete the backend for project proj_abc123"
-   ```
-   This adds database models, API routes, and full documentation.
-
+3. **Configure the database**:
+   - Navigate to the generated site directory
+   - Copy `.env.example` to `.env`
+   - Configure your database settings (see Database Configuration section above)
+   
 4. **Start developing**:
-   - Frontend is ready immediately after step 1
-   - Full backend functionality available after step 3
+   - Complete site (frontend + backend) is ready after generation completes (8-10 minutes)
+   - Run `npm run migrate` to set up the database
    - Use the generated ARCHITECTURE.md as a guide
 
 ## Troubleshooting
@@ -216,6 +261,7 @@ Here's a typical workflow for generating a complete site:
 1. **"Insufficient credits" error**
    - Sign up for a SitePaige API key at https://sitepaige.com
    - Add the API key to your environment configuration
+   - Purchase credits, if needed
 
 2. **API "401 Unauthorized Error" Error**
    - Verify your API key is correctly set in the environment
@@ -226,6 +272,12 @@ Here's a typical workflow for generating a complete site:
    - Ensure the target directory is within `SITEPAIGE_ALLOWED_ROOTS`
    - Check that the directory exists and you have write permissions
 
+4. **Database connection errors**
+   - For PostgreSQL: Ensure the database service is running (`pg_ctl status` or `systemctl status postgresql`)
+   - Verify the connection details (default PostgreSQL port is 5432)
+   - Check that the database and user exist with proper permissions
+   - For cloud databases, ensure SSL settings are configured correctly
+
 
 ## License
 

package/components/form.tsx

@@ -9,6 +9,133 @@ interface RFormProps {
   design: Design;
 }
 
+// Translation function for form submit text
+const getFormTranslation = (key: string, websiteLanguage: string) => {
+  const translations: Record<string, Record<string, string>> = {
+    'Submit': {
+      'English': 'Submit',
+      'Spanish': 'Enviar',
+      'French': 'Soumettre',
+      'German': 'Absenden',
+      'Portuguese': 'Enviar',
+      'Italian': 'Invia',
+      'Dutch': 'Versturen',
+      'Chinese': '提交',
+      'Japanese': '送信',
+      'Korean': '제출',
+      'Russian': 'Отправить',
+      'Arabic': 'إرسال',
+      'Hindi': 'सबमिट करें'
+    },
+    'Submitting...': {
+      'English': 'Submitting...',
+      'Spanish': 'Enviando...',
+      'French': 'Envoi en cours...',
+      'German': 'Wird gesendet...',
+      'Portuguese': 'Enviando...',
+      'Italian': 'Invio in corso...',
+      'Dutch': 'Bezig met versturen...',
+      'Chinese': '提交中...',
+      'Japanese': '送信中...',
+      'Korean': '제출 중...',
+      'Russian': 'Отправка...',
+      'Arabic': 'جاري الإرسال...',
+      'Hindi': 'सबमिट हो रहा है...'
+    },
+    'Submit Another Response': {
+      'English': 'Submit Another Response',
+      'Spanish': 'Enviar otra respuesta',
+      'French': 'Soumettre une autre réponse',
+      'German': 'Weitere Antwort senden',
+      'Portuguese': 'Enviar outra resposta',
+      'Italian': 'Invia un\'altra risposta',
+      'Dutch': 'Nog een reactie versturen',
+      'Chinese': '提交另一个回复',
+      'Japanese': '別の回答を送信',
+      'Korean': '다른 응답 제출',
+      'Russian': 'Отправить еще один ответ',
+      'Arabic': 'إرسال رد آخر',
+      'Hindi': 'एक और प्रतिक्रिया सबमिट करें'
+    },
+    'Thank You!': {
+      'English': 'Thank You!',
+      'Spanish': '¡Gracias!',
+      'French': 'Merci!',
+      'German': 'Vielen Dank!',
+      'Portuguese': 'Obrigado!',
+      'Italian': 'Grazie!',
+      'Dutch': 'Bedankt!',
+      'Chinese': '谢谢！',
+      'Japanese': 'ありがとうございます！',
+      'Korean': '감사합니다!',
+      'Russian': 'Спасибо!',
+      'Arabic': 'شكراً لك!',
+      'Hindi': 'धन्यवाद!'
+    },
+    'Your form has been submitted successfully. We\'ll get back to you soon.': {
+      'English': 'Your form has been submitted successfully. We\'ll get back to you soon.',
+      'Spanish': 'Tu formulario ha sido enviado exitosamente. Nos pondremos en contacto contigo pronto.',
+      'French': 'Votre formulaire a été soumis avec succès. Nous vous contacterons bientôt.',
+      'German': 'Ihr Formular wurde erfolgreich gesendet. Wir werden uns bald bei Ihnen melden.',
+      'Portuguese': 'Seu formulário foi enviado com sucesso. Entraremos em contato em breve.',
+      'Italian': 'Il tuo modulo è stato inviato con successo. Ti contatteremo presto.',
+      'Dutch': 'Uw formulier is succesvol verzonden. We nemen binnenkort contact met u op.',
+      'Chinese': '您的表单已成功提交。我们会尽快与您联系。',
+      'Japanese': 'フォームが正常に送信されました。近日中にご連絡いたします。',
+      'Korean': '양식이 성공적으로 제출되었습니다. 곧 연락드리겠습니다.',
+      'Russian': 'Ваша форма успешно отправлена. Мы свяжемся с вами в ближайшее время.',
+      'Arabic': 'تم إرسال النموذج بنجاح. سنتواصل معك قريباً.',
+      'Hindi': 'आपका फॉर्म सफलतापूर्वक सबमिट किया गया है। हम जल्द ही आपसे संपर्क करेंगे।'
+    },
+    'Form secured by FormSubmit': {
+      'English': 'Form secured by FormSubmit',
+      'Spanish': 'Formulario protegido por FormSubmit',
+      'French': 'Formulaire sécurisé par FormSubmit',
+      'German': 'Formular gesichert durch FormSubmit',
+      'Portuguese': 'Formulário protegido por FormSubmit',
+      'Italian': 'Modulo protetto da FormSubmit',
+      'Dutch': 'Formulier beveiligd door FormSubmit',
+      'Chinese': '表单由FormSubmit保护',
+      'Japanese': 'FormSubmitによって保護されたフォーム',
+      'Korean': 'FormSubmit로 보호된 양식',
+      'Russian': 'Форма защищена FormSubmit',
+      'Arabic': 'النموذج محمي بواسطة FormSubmit',
+      'Hindi': 'फॉर्म FormSubmit द्वारा सुरक्षित'
+    }
+  };
+
+  // Determine which language to use
+  let language = 'English'; // Default
+  if (websiteLanguage) {
+    // Extract the main language from the input
+    const langMap: Record<string, string> = {
+      'English': 'English',
+      'Spanish': 'Spanish',
+      'French': 'French',
+      'German': 'German',
+      'Portuguese': 'Portuguese',
+      'Italian': 'Italian',
+      'Dutch': 'Dutch',
+      'Chinese': 'Chinese',
+      'Japanese': 'Japanese',
+      'Korean': 'Korean',
+      'Russian': 'Russian',
+      'Arabic': 'Arabic',
+      'Hindi': 'Hindi'
+    };
+    
+    // Find the matching language
+    for (const [langKey, langValue] of Object.entries(langMap)) {
+      if (websiteLanguage.includes(langKey)) {
+        language = langValue;
+        break;
+      }
+    }
+  }
+
+  return translations[key]?.[language] || key;
+};
+
 interface FormField {
   id: string;
   name: string;
@@ -85,9 +212,9 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
               d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
             />
           </svg>
-          <h3 className="text-2xl font-bold text-green-800 mb-2">Thank You!</h3>
+          <h3 className="text-2xl font-bold text-green-800 mb-2">{getFormTranslation('Thank You!', design.websiteLanguage)}</h3>
           <p className="text-green-700">
-            Your form has been submitted successfully. We'll get back to you soon.
+            {getFormTranslation('Your form has been submitted successfully. We\'ll get back to you soon.', design.websiteLanguage)}
           </p>
           <button
             onClick={() => {
@@ -97,7 +224,7 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
             }}
             className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
           >
-            Submit Another Response
+            {getFormTranslation('Submit Another Response', design.websiteLanguage)}
           </button>
         </div>
       </div>
@@ -249,10 +376,10 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
                     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                   />
                 </svg>
-                Submitting...
+                {getFormTranslation('Submitting...', design.websiteLanguage)}
               </span>
             ) : (
-              'Submit'
+              getFormTranslation('Submit', design.websiteLanguage)
             )}
           </button>
         </div>
@@ -260,7 +387,7 @@ export default function RForm({ name, custom_view_description, design }: RFormPr
       
       {/* FormSubmit.co attribution (optional but nice to have) */}
       <div className="mt-6 text-center text-xs text-gray-400">
-        <p>Form secured by FormSubmit</p>
+        <p>{getFormTranslation('Form secured by FormSubmit', design.websiteLanguage)}</p>
       </div>
     </div>
   );

package/components/login.tsx

@@ -9,11 +9,17 @@ checked in the system build settings. It is safe to modify this file without it
 import React, { useState } from 'react';
 
 interface LoginProps {
-  providers: ('apple' | 'facebook' | 'github' | 'google')[];
+  providers: ('apple' | 'facebook' | 'github' | 'google' | 'username')[];
 }
 
 export default function Login({ providers }: LoginProps) {
   const [error, setError] = useState<string | null>(null);
+  const [isSignup, setIsSignup] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
 
 
   const handleProviderLogin = async (provider: string) => {
@@ -43,37 +49,183 @@ export default function Login({ providers }: LoginProps) {
     
   };
 
+  const handleUsernamePasswordAuth = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setMessage(null);
+    setIsLoading(true);
+
+    try {
+      if (isSignup) {
+        // Handle signup
+        if (password !== confirmPassword) {
+          setError('Passwords do not match');
+          setIsLoading(false);
+          return;
+        }
+
+        const response = await fetch('/api/Auth/signup', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          setMessage({ type: 'success', text: 'Verification email sent! Please check your inbox.' });
+          setIsSignup(false);
+          setPassword('');
+          setConfirmPassword('');
+        } else {
+          setError(data.error || 'Signup failed');
+        }
+      } else {
+        // Handle login
+        const response = await fetch('/api/Auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password, provider: 'username' })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          // Redirect to home or dashboard
+          window.location.href = '/';
+        } else {
+          setError(data.error || 'Login failed');
+        }
+      }
+    } catch (err) {
+      setError('An unexpected error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const showUsernamePasswordForm = providers?.includes('username');
+  const oauthProviders = providers?.filter(p => p !== 'username') || [];
+
   return (
     <div className="flex flex-col items-center justify-center min-h-[500px] p-4">
       <div className="w-full max-w-md space-y-8">
         <div className="text-center">
-          <h2 className="text-3xl font-bold">Sign in to your account</h2>
+          <h2 className="text-3xl font-bold">{isSignup ? 'Create an account' : 'Sign in to your account'}</h2>
         </div>
 
-        {(
-          <div className="mt-6">
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t"></div>
+        {showUsernamePasswordForm && (
+          <form onSubmit={handleUsernamePasswordAuth} className="mt-8 space-y-6">
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  Email address
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                />
               </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-white text-gray-500">Continue with</span>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete={isSignup ? 'new-password' : 'current-password'}
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                />
               </div>
-            </div>
 
-            <div className="mt-6 grid grid-cols-2 gap-3">
-              {providers?.map(provider => 
-                 (
-                  <button
-                    key={provider}
-                    onClick={() => handleProviderLogin(provider)}
-                    className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 classButtonRounding classButtonBackground classButtonFontType  classButtonFontSize"
-                  >
-                    {provider}
-                  </button>
-                )
+              {isSignup && (
+                <div>
+                  <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
+                    Confirm Password
+                  </label>
+                  <input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    autoComplete="new-password"
+                    required
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                  />
+                </div>
               )}
             </div>
+
+            <div>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+              >
+                {isLoading ? 'Processing...' : (isSignup ? 'Sign up' : 'Sign in')}
+              </button>
+            </div>
+
+            <div className="text-center">
+              <button
+                type="button"
+                onClick={() => {
+                  setIsSignup(!isSignup);
+                  setError(null);
+                  setMessage(null);
+                }}
+                className="text-sm text-indigo-600 hover:text-indigo-500"
+              >
+                {isSignup ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {oauthProviders.length > 0 && (
+          <div className="mt-6">
+            {showUsernamePasswordForm && (
+              <>
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t"></div>
+                  </div>
+                  <div className="relative flex justify-center text-sm">
+                    <span className="px-2 bg-white text-gray-500">Or continue with</span>
+                  </div>
+                </div>
+              </>
+            )}
+
+            <div className={`mt-6 grid grid-cols-${Math.min(oauthProviders.length, 2)} gap-3`}>
+              {oauthProviders.map(provider => (
+                <button
+                  key={provider}
+                  onClick={() => handleProviderLogin(provider)}
+                  className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 classButtonRounding classButtonBackground classButtonFontType classButtonFontSize"
+                >
+                  {provider}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {message && (
+          <div className={`mt-4 text-center ${message.type === 'success' ? 'text-green-600' : 'text-red-600'}`}>
+            {message.text}
           </div>
         )}