sitepaige-mcp-server 1.1.0 → 1.2.1

package/components/headerlogin.tsx

@@ -45,7 +45,6 @@ const LoginSection: React.FC<LoginSectionProps> = ({ websiteLanguage = 'English'
   const [userData, setUserData] = useState<UserData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [profileMenuItems, setProfileMenuItems] = useState<MenuItem[]>([]);
   const userMenuRef = useRef<HTMLDivElement>(null);
 
   // Hardcoded values
@@ -53,33 +52,16 @@ const LoginSection: React.FC<LoginSectionProps> = ({ websiteLanguage = 'English'
   const align = 'Right' as "Left" | "Center" | "Right";
   const mobileViewMode = 'desktop' as 'desktop' | 'phone' | 'sm-tablet' | 'lg-tablet';
 
-  // Load profile menu items from localStorage
-  useEffect(() => {
-    const loadProfileMenuItems = () => {
-      try {
-        const storedMenuData = localStorage.getItem('blueprint_profile_menu');
-        if (storedMenuData) {
-          const menuData = JSON.parse(storedMenuData);
-          setProfileMenuItems(menuData);
-        } else {
-          // Default fallback menu items
-          setProfileMenuItems([
-            { label: 'Profile', link: '/profile' },
-            { label: 'Settings', link: '/settings' }
-          ]);
-        }
-      } catch (error) {
-        console.error('Failed to load profile menu from localStorage:', error);
-        // Default fallback menu items
-        setProfileMenuItems([
-          { label: 'Profile', link: '/profile' },
-          { label: 'Settings', link: '/settings' }
-        ]);
-      }
-    };
-
-    loadProfileMenuItems();
-  }, []);
+  // Build menu items based on user level
+  const profileMenuItems: MenuItem[] = [
+    { label: 'Dashboard', link: '/dashboard' },
+    { label: 'Profile', link: '/profile' }
+  ];
+  
+  // Add Admin Dashboard only if user is an admin (userlevel == 2)
+  if (userData?.userlevel === 2) {
+    profileMenuItems.push({ label: 'Admin Dashboard', link: '/admin_dashboard' });
+  }
 
   // Fetch user authentication status and data
   useEffect(() => {

package/components/profile.tsx

@@ -1,86 +1,342 @@
-/* 
-Sitepaige Components v1.0.0
-Sitepaige components are automatically added to your project the first time it is built, and are only added again if the "Build Components" button is 
-checked in the system build settings. It is safe to modify this file without it being overwritten unless that setting is selected. 
-*/
-
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+// import { useCsrfToken } from './csrf-provider'; // Disabled for now
 
-interface UserProfile {
-  id: string;
+interface UserData {
+  userid: string;
   username: string;
-  avatarurl: string | null;
+  avatarurl?: string;
+  email?: string;
+  userlevel: number;
+  source: string;
 }
 
 export default function Profile() {
-  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const router = useRouter();
+  // const csrfToken = useCsrfToken(); // Disabled for now
+  const [userData, setUserData] = useState<UserData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  
+  // Password change state
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  
+  // Account deletion state
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteConfirmText, setDeleteConfirmText] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
 
   useEffect(() => {
-    const fetchProfile = async () => {
+    fetchUserData();
+  }, []);
+
+  const fetchUserData = async () => {
       try {
+      setLoading(true);
         const response = await fetch('/api/Auth', {
-          method: 'GET',
           credentials: 'include'
         });
 
         if (!response.ok) {
-          throw new Error('Failed to fetch profile');
+        throw new Error('Failed to fetch user data');
         }
 
         const data = await response.json();
-        
-        if (!data.user) {
-          throw new Error('User not authenticated');
-        }
-        
-        // Use the user object from the response
-        const userData = data.user;
-        setProfile({
-          id: userData.userid,
-          username: userData.username,
-          avatarurl: userData.avatarurl
-        });
+      if (data.user) {
+        setUserData(data.user);
+      } else {
+        // Not authenticated, redirect to login
+        router.push('/login');
+      }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'An error occurred');
+      setError(err instanceof Error ? err.message : 'Failed to load profile');
       } finally {
         setLoading(false);
       }
     };
 
-    fetchProfile();
-  }, []);
+  const handlePasswordChange = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    
+    // Validate passwords
+    if (newPassword !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    
+    if (newPassword.length < 8) {
+      setError('Password must be at least 8 characters long');
+      return;
+    }
+    
+    setIsChangingPassword(true);
+    
+    try {
+      const response = await fetch('/api/profile', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+          // 'X-CSRF-Token': csrfToken || '' // Disabled for now
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          currentPassword,
+          newPassword
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to update password');
+      }
+      
+      setSuccess('Password updated successfully');
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update password');
+    } finally {
+      setIsChangingPassword(false);
+    }
+  };
 
-  if (loading) {
-    return <div className="flex justify-center items-center min-h-[200px]">Loading...</div>;
-  }
+  const handleDeleteAccount = async () => {
+    if (deleteConfirmText !== 'DELETE') {
+      setError('Please type DELETE to confirm account deletion');
+      return;
+    }
+    
+    setIsDeleting(true);
+    setError(null);
+    
+    try {
+      const response = await fetch('/api/profile', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json'
+          // 'X-CSRF-Token': csrfToken || '' // Disabled for now
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          confirmDelete: true
+        })
+      });
+      
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to delete account');
+      }
+      
+      // Redirect to home page after successful deletion
+      window.location.href = '/';
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete account');
+      setIsDeleting(false);
+    }
+  };
+
+  const getUserLevelName = (level: number) => {
+    switch (level) {
+      case 0: return 'Guest';
+      case 1: return 'Registered User';
+      case 2: return 'Admin';
+      default: return 'Unknown';
+    }
+  };
+
+  const getAuthMethodName = (source: string) => {
+    switch (source) {
+      case 'userpass': return 'Email/Password';
+      case 'google': return 'Google';
+      case 'facebook': return 'Facebook';
+      case 'apple': return 'Apple';
+      case 'github': return 'GitHub';
+      default: return source;
+    }
+  };
 
-  if (error) {
-    return <div className="text-red-500 text-center">{error}</div>;
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
+      </div>
+    );
   }
 
-  if (!profile) {
-    return <div className="text-center">No profile found</div>;
+  if (!userData) {
+    return null; // Will redirect to login
   }
 
   return (
-    <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
-      <div className="flex flex-col items-center">
-        {profile.avatarurl && (
-          <img 
-            src={profile.avatarurl}
-            alt="Profile avatar"
-            className="w-32 h-32 rounded-full mb-4"
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <h1 className="text-3xl font-bold mb-8">Profile Settings</h1>
+      
+      {/* User Information */}
+      <div className="bg-white rounded-lg shadow p-6 mb-8">
+        <h2 className="text-xl font-semibold mb-4">User Information</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="flex items-center space-x-4">
+            {userData.avatarurl ? (
+              <img
+                src={userData.avatarurl}
+                alt={userData.username}
+                className="w-16 h-16 rounded-full"
             referrerPolicy="no-referrer"
             crossOrigin="anonymous"
           />
-        )}
-        <h2 className="text-2xl font-semibold text-gray-800">{profile.username}</h2>
-        <p className="text-gray-500 mt-2">User ID: {profile.id}</p>
+            ) : (
+              <div className="w-16 h-16 rounded-full bg-gray-300 flex items-center justify-center">
+                <span className="text-2xl text-gray-600">
+                  {userData.username.charAt(0).toUpperCase()}
+                </span>
+              </div>
+            )}
+            <div>
+              <p className="font-semibold">{userData.username}</p>
+              {userData.email && (
+                <p className="text-sm text-gray-600">{userData.email}</p>
+              )}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <p><span className="font-semibold">User Level:</span> {getUserLevelName(userData.userlevel)}</p>
+            <p><span className="font-semibold">Auth Method:</span> {getAuthMethodName(userData.source)}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Error and Success Messages */}
+      {error && (
+        <div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+      {success && (
+        <div className="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded">
+          {success}
+        </div>
+      )}
+
+      {/* Password Change Section - Only for email/password users */}
+      {userData.source === 'userpass' && (
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">Change Password</h2>
+          <form onSubmit={handlePasswordChange} className="space-y-4">
+            <div>
+              <label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                Current Password
+              </label>
+              <input
+                type="password"
+                id="currentPassword"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                New Password
+              </label>
+              <input
+                type="password"
+                id="newPassword"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+                minLength={8}
+              />
+              <p className="text-xs text-gray-500 mt-1">Must be at least 8 characters long</p>
+            </div>
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                Confirm New Password
+              </label>
+              <input
+                type="password"
+                id="confirmPassword"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={isChangingPassword}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isChangingPassword ? 'Updating...' : 'Update Password'}
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Delete Account Section */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold mb-4 text-red-600">Danger Zone</h2>
+        <div className="border border-red-200 rounded-md p-4">
+          <h3 className="font-semibold mb-2">Delete Account</h3>
+          <p className="text-sm text-gray-600 mb-4">
+            Once you delete your account, there is no going back. Please be certain.
+          </p>
+          
+          {!showDeleteConfirm ? (
+            <button
+              onClick={() => setShowDeleteConfirm(true)}
+              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+            >
+              Delete Account
+            </button>
+          ) : (
+            <div className="space-y-4">
+              <p className="text-sm font-semibold">
+                To confirm deletion, please type <span className="font-mono bg-gray-100 px-1">DELETE</span> below:
+              </p>
+              <input
+                type="text"
+                value={deleteConfirmText}
+                onChange={(e) => setDeleteConfirmText(e.target.value)}
+                placeholder="Type DELETE to confirm"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
+              />
+              <div className="flex space-x-4">
+                <button
+                  onClick={handleDeleteAccount}
+                  disabled={isDeleting || deleteConfirmText !== 'DELETE'}
+                  className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isDeleting ? 'Deleting...' : 'Confirm Delete'}
+                </button>
+                <button
+                  onClick={() => {
+                    setShowDeleteConfirm(false);
+                    setDeleteConfirmText('');
+                    setError(null);
+                  }}
+                  disabled={isDeleting}
+                  className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
-}
+}

package/components/slideshow.tsx

@@ -80,10 +80,6 @@ export default function Slideshow({
     return (
       <div 
         className="relative w-full flex items-center justify-center bg-black rounded-lg"
-        style={{ 
-          height: height || 400,
-          maxHeight: '1000px'
-        }}
       >
         <p className="text-gray-400">No images in slideshow</p>
       </div>
@@ -102,15 +98,11 @@ export default function Slideshow({
   return (
     <div 
       className="relative w-full overflow-hidden rounded-lg bg-black"
-      style={{ 
-        height: height || 600,
-        maxHeight: '1000px'
-      }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       {/* Main image display */}
-      <div className="absolute inset-0 flex items-center justify-center">
+      <div className="flex items-center justify-center">
         {animationType === 'fade' ? (
           // Fade animation - render all images with opacity transitions
           images.map((imageId, index) => (

package/defaultapp/api/Auth/resend-verification/route.ts

@@ -4,8 +4,8 @@
  */
 
 import { NextResponse } from 'next/server';
-import { regenerateVerificationToken } from '../../../db-password-auth';
-import { send_email } from '../../../storage/email';
+import { regenerateVerificationToken } from '../../db-password-auth';
+import { send_email } from '../../storage/email';
 
 // Email validation regex
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -36,7 +36,7 @@ export async function POST(request: Request) {
     const { verificationToken } = result;
 
     // Get site domain from environment or default
-    const siteDomain = process.env.SITE_DOMAIN || 'https://sitepaige.com';
+    const siteDomain = process.env.NODE_ENV === 'production' ? process.env.DOMAIN : process.env.LOCAL_DOMAIN;
     const verificationUrl = `${siteDomain}/api/Auth/verify-email?token=${verificationToken}`;
 
     // Send verification email

package/defaultapp/api/Auth/route.ts

@@ -8,8 +8,8 @@ import { cookies } from 'next/headers';
 import { NextResponse } from 'next/server';
 import * as crypto from 'node:crypto';
 
-import { db_init, db_query } from '../../db';
-import { upsertUser, storeOAuthToken, validateSession, rotateSession } from '../../db-users';
+import { db_init, db_query } from '../db';
+import { upsertUser, storeOAuthToken, validateSession, rotateSession } from '../db-users';
 
 type OAuthProvider = 'google' | 'facebook' | 'apple'  | 'github';
 

package/defaultapp/api/Auth/signup/route.ts

@@ -4,8 +4,8 @@
  */
 
 import { NextResponse } from 'next/server';
-import { createPasswordAuth } from '../../../db-password-auth';
-import { send_email } from '../../../storage/email';
+import { createPasswordAuth } from '../../db-password-auth';
+import { send_email } from '../../storage/email';
 
 // Email validation regex
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -37,7 +37,7 @@ export async function POST(request: Request) {
     const { passwordAuth, verificationToken } = await createPasswordAuth(email, password);
 
     // Get site domain from environment or default
-    const siteDomain = process.env.SITE_DOMAIN || 'https://sitepaige.com';
+    const siteDomain = process.env.NODE_ENV === 'production' ? process.env.DOMAIN : process.env.LOCAL_DOMAIN;
     const verificationUrl = `${siteDomain}/api/Auth/verify-email?token=${verificationToken}`;
 
     // Send verification email

package/defaultapp/api/Auth/verify-email/route.ts

@@ -4,9 +4,9 @@
  */
 
 import { NextResponse } from 'next/server';
-import { verifyEmailWithToken } from '../../../db-password-auth';
-import { upsertUser } from '../../../db-users';
-import { db_init, db_query } from '../../../db';
+import { verifyEmailWithToken } from '../../db-password-auth';
+import { upsertUser } from '../../db-users';
+import { db_init, db_query } from '../../db';
 import { cookies } from 'next/headers';
 import * as crypto from 'node:crypto';
 
@@ -86,7 +86,7 @@ export async function GET(request: Request) {
     });
 
     // Redirect to home page or dashboard with success message
-    const siteDomain = process.env.SITE_DOMAIN || 'https://sitepaige.com';
+    const siteDomain = process.env.NODE_ENV === 'production' ? process.env.DOMAIN : process.env.LOCAL_DOMAIN;
     const redirectUrl = new URL('/', siteDomain);
     redirectUrl.searchParams.set('verified', 'true');
     
@@ -96,7 +96,7 @@ export async function GET(request: Request) {
     console.error('Email verification error:', error);
     
     // Redirect to home with error
-    const siteDomain = process.env.SITE_DOMAIN || 'https://sitepaige.com';
+    const siteDomain = process.env.NODE_ENV === 'production' ? process.env.DOMAIN : process.env.LOCAL_DOMAIN;
     const redirectUrl = new URL('/', siteDomain);
     redirectUrl.searchParams.set('error', 'verification_failed');
     

package/defaultapp/api/admin/users/route.ts

@@ -5,15 +5,15 @@
 
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
-import { db_init, db_query } from '../../../db';
+import { db_init, db_query } from '../../db';
 import { 
   getAllUsers, 
   updateUserPermission, 
   deleteUser, 
   getUserStats,
   getUserByID
-} from '../../../db-users';
-import { validateCsrfToken } from '../../../csrf';
+} from '../../db-users';
+import { validateCsrfToken } from '../../csrf';
 
 // Helper function to check if the current user is an admin
 async function checkAdminAuth(): Promise<{ isAdmin: boolean; userId?: string }> {

package/defaultapp/{db-users.ts → api/db-users.ts}

@@ -111,7 +111,7 @@ export async function upsertUser(
   } else {
     // Check if this is the first user (should be admin)
     const allUsers = await db_query(client, "SELECT COUNT(*) as count FROM users");
-    const isFirstUser = allUsers[0].count === 0;
+    const isFirstUser = Number(allUsers[0].count) === 0;
     
     // Create new user
     const userId = crypto.randomUUID();