sitepaige-mcp-server 0.7.14 → 1.0.2

package/dist/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/dist/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>
         )}
 

package/dist/components/menu.tsx

@@ -26,8 +26,10 @@ interface MenuItem {
   page: string | null;
   menu: string | null;
   untouchable: boolean;
-  link_type?: 'page' | 'external';
+  link_type?: 'page' | 'external' | 'file';
   external_url?: string | null;
+  file_id?: string | null;
+  file_name?: string | null;
   hiddenOnDesktop?: boolean; // New field to hide item on desktop (shows in icon bar instead)
 }
 
@@ -57,6 +59,8 @@ export default function Menu({ menu, onClick, pages = [] }: MenuProps) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
+  const [selectedPage, setSelectedPage] = useState<string | null>(null);
+  const [isPaigeLoading, setIsPaigeLoading] = useState(false);
 
   // Handle case where menu is undefined/null
   if (!menu) {
@@ -88,7 +92,8 @@ export default function Menu({ menu, onClick, pages = [] }: MenuProps) {
     return () => window.removeEventListener('resize', checkMobile);
   }, []);
 
-  const direction = menu.direction === 'vertical' ? 'vertical' : 'horizontal';
+  const direction = menu.direction === 'vertical' ? 'vertical' : 
+                   menu.direction === 'tiled' ? 'tiled' : 'horizontal';
 
   const renderMenuItem = (item: MenuItem, index: number) => {
     const handleClick = () => {
@@ -187,8 +192,128 @@ export default function Menu({ menu, onClick, pages = [] }: MenuProps) {
     );
   };
 
+  // Render a tiled menu item
+  const renderTiledMenuItem = (item: MenuItem, index: number) => {
+    const isSelected = item.page === selectedPage;
+    
+    // Helper function to get font size value
+    const getFontSizeValue = (sizeClass: string) => {
+      const sizeMap: Record<string, string> = {
+        'text-xs': '0.75rem',
+        'text-sm': '0.875rem',
+        'text-base': '1rem',
+        'text-lg': '1.125rem',
+        'text-xl': '1.25rem',
+        'text-2xl': '1.5rem',
+        'text-3xl': '1.875rem',
+      };
+      return sizeMap[sizeClass] || '1.25rem';
+    };
+    
+    const tileContent = (
+      <div className={`
+        p-6 
+        bg-white 
+        border-2 
+        border-gray-300 
+        rounded-lg 
+        shadow-md 
+        hover:shadow-lg 
+        hover:border-blue-500 
+        transition-all 
+        duration-200 
+        cursor-pointer
+        text-center
+        h-full
+        flex
+        flex-col
+        items-center
+        justify-center
+        ${isSelected ? 'border-blue-600 bg-blue-50' : ''}
+        ${isPaigeLoading ? 'opacity-50 cursor-not-allowed' : ''}
+      `}>
+        <h3 
+          className={`${isSelected ? 'font-bold' : 'font-medium'} text-gray-800`}
+          style={{ fontFamily: menu.font, fontSize: getFontSizeValue(menu.fontSize || 'text-xl') }}
+        >
+          {item.name}
+        </h3>
+      </div>
+    );
+
+    if (item.link_type === 'external' && item.external_url) {
+      return (
+        <a
+          key={item.name}
+          href={item.external_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block h-full"
+        >
+          {tileContent}
+        </a>
+      );
+    } else if (item.link_type === 'file' && item.file_name) {
+      return (
+        <a
+          key={item.name}
+          href={`/library/files/${item.file_name}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block h-full"
+        >
+          {tileContent}
+        </a>
+      );
+    } else if (item.page) {
+      const page = pages.find(p => p.id === item.page);
+      let linkUrl = '#';
+      
+      if (page) {
+        let urlPath = page.name
+          .replace(/[^a-zA-Z0-9\s]/g, '')
+          .trim()
+          .replace(/\s+/g, '_')
+          .toLowerCase();
+        linkUrl = urlPath === 'home' || urlPath === 'index' ? '/' : `/${urlPath}`;
+      }
+      
+      return (
+        <Link
+          key={item.name}
+          href={linkUrl}
+          onClick={(e) => {
+            e.preventDefault();
+            if (isPaigeLoading) {
+              console.log('Navigation blocked: Paige is currently processing a request');
+              return;
+            }
+            setSelectedPage(item.page);
+            onClick?.();
+          }}
+          className="block h-full"
+        >
+          {tileContent}
+        </Link>
+      );
+    } else {
+      return (
+        <div key={item.name} className="block h-full">
+          {tileContent}
+        </div>
+      );
+    }
+  };
+
   return (
     <>
+      {/* Tiled menu layout */}
+      {direction === 'tiled' && (
+        <div className={`grid gap-4 ${isMobile ? 'grid-cols-1' : 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4'}`}>
+          {menu.items?.map((item, index) => renderTiledMenuItem(item, index)) || []}
+        </div>
+      )}
+      
       {/* Hamburger menu for mobile horizontal menus */}
       {isMobile && direction === 'horizontal' && (
         <div className="relative">
@@ -211,7 +336,7 @@ export default function Menu({ menu, onClick, pages = [] }: MenuProps) {
       )}
       
       {/* Regular menu for desktop or vertical menus */}
-      {(!isMobile || direction === 'vertical') && (
+      {(!isMobile || direction === 'vertical') && direction !== 'tiled' && (
         <nav className={`${direction === 'horizontal' ? 'space-x-4' : 'flex flex-col'} ${menu.align === 'Left' ? 'justify-start' : menu.align === 'Center' ? 'justify-center' : menu.align === 'Right' ? 'justify-end' : ''}`}>
           {menu.items?.filter(item => !item.hiddenOnDesktop).map((item, index) => renderMenuItem(item, index)) || []}
         </nav>

package/dist/components/testimonial.tsx

@@ -112,7 +112,7 @@ export default function RTestimonial({ name, custom_view_description, design }:
               <div className="flex items-center">
                 {testimonial.photoId && (
                   <img
-                    src={`/api/image?imageid=${testimonial.photoId}`}
+                    src={`/images/${testimonial.photoId}.jpg`}
                     alt={testimonial.attribution}
                     className="w-12 h-12 rounded-full object-cover mr-4"
                     onError={(e) => {