Spaces:

CatPtain
/

VvvebJs

Paused

App Files Files Community

CatPtain commited on Jun 12, 2025

Commit

85bc0da

verified ·

1 Parent(s): 7a57f48

Upload 9 files

Browse files

Files changed (9) hide show

README-USER-ISOLATION.md +108 -0
dashboard.html +440 -0
editor.html +66 -2
editor.php +61 -0
login.html +202 -0
save.php +63 -4
storage.php +147 -7
upload.php +39 -12
user-manager.php +149 -0

README-USER-ISOLATION.md ADDED Viewed

	@@ -0,0 +1,108 @@

+# User Isolation System for VvvebJs
+This implementation adds user isolation to VvvebJs, allowing multiple users to work with their own separate files and projects.
+## Features
+- **User Registration & Login**: Users can create accounts and log in securely
+- **File Isolation**: Each user has their own directory for HTML files
+- **Session Management**: Secure session handling with automatic logout
+- **Demo Files Access**: Users can view demo files but cannot edit them
+- **File Management**: Load, save, and manage user-specific files
+## File Structure
+```
+user-files/
+├── username1/
+│   ├── project1.html
+│   └── project2.html
+├── username2/
+│   ├── mysite.html
+│   └── portfolio.html
+└── ...
+user-data/
+└── users.json (user credentials)
+```
+## How to Use
+### 1. First Time Setup
+1. Navigate to `login.html` in your browser
+2. Click "Register here" to create a new account
+3. Fill in username and password (email is optional)
+4. Click "Register"
+### 2. Login
+1. Go to `login.html`
+2. Enter your username and password
+3. Click "Login"
+4. You'll be redirected to the editor
+### 3. Working with Files
+- **New Files**: Create new files using the editor - they'll be automatically saved to your user directory
+- **Load Files**: Use the file selector dropdown in the editor to load your existing files
+- **Save Files**: All saves are automatically isolated to your user directory
+- **Demo Files**: View demo files for reference (marked as "Demo" and read-only)
+### 4. Logout
+- Close the browser or navigate away from the editor
+- Sessions automatically expire for security
+## Technical Implementation
+### Modified Files:
+- `storage.php`: Added user-specific path handling
+- `save.php`: Enhanced with user isolation and file management
+- `user-manager.php`: Complete user authentication system
+- `editor.php`: Integration with user system and file loading
+- `editor.html`: Added file selector and user interface improvements
+- `login.html`: New login/registration interface
+### Security Features:
+- Password hashing using PHP's `password_hash()`
+- Session-based authentication
+- Path validation to prevent directory traversal
+- User input sanitization
+- Automatic session cleanup
+### File Permissions:
+- Users can only access files in their own directory
+- Demo files are read-only for all users
+- No cross-user file access possible
+## Configuration
+The system works out of the box with no additional configuration needed. User data is stored in JSON format for simplicity, but can be easily adapted to use a database.
+## Development Notes
+- User directories are created automatically on first save
+- The system maintains backward compatibility with existing VvvebJs functionality
+- All user data is stored locally in the `user-files` and `user-data` directories
+- Sessions are managed via PHP's native session handling
+## Future Enhancements
+Possible improvements could include:
+- Database integration for user management
+- File sharing between users
+- Project templates
+- File versioning
+- Export/import functionality
+- Admin panel for user management
+## Troubleshooting
+**Login Issues:**
+- Ensure `user-data` directory exists and is writable
+- Check that PHP sessions are working on your server
+**File Save Issues:**
+- Verify `user-files` directory exists and is writable
+- Check file permissions on the server
+**Access Denied:**
+- Make sure you're logged in (visit `login.html`)
+- Clear browser cookies if experiencing session issues

dashboard.html ADDED Viewed

	@@ -0,0 +1,440 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VvvebJs - User Dashboard</title>
+    <link href="css/editor.css" rel="stylesheet">
+    <style>
+        .user-dashboard {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .user-info {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        .file-manager {
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .file-manager-header {
+            background: #007bff;
+            color: white;
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .file-list {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .file-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 15px;
+            border-bottom: 1px solid #eee;
+            transition: background-color 0.2s;
+        }
+        .file-item:hover {
+            background-color: #f8f9fa;
+        }
+        .file-name {
+            font-weight: 500;
+            color: #333;
+        }
+        .file-meta {
+            font-size: 0.85em;
+            color: #666;
+        }
+        .file-actions {
+            display: flex;
+            gap: 10px;
+        }
+        .btn {
+            padding: 5px 10px;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 0.85em;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .btn-primary {
+            background: #007bff;
+            color: white;
+        }
+        .btn-warning {
+            background: #ffc107;
+            color: #333;
+        }
+        .btn-danger {
+            background: #dc3545;
+            color: white;
+        }
+        .btn-success {
+            background: #28a745;
+            color: white;
+        }
+        .empty-state {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+        }
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+        .error {
+            background: #f8d7da;
+            color: #721c24;
+            padding: 10px;
+            border-radius: 3px;
+            margin: 10px 0;
+        }
+        .success {
+            background: #d4edda;
+            color: #155724;
+            padding: 10px;
+            border-radius: 3px;
+            margin: 10px 0;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.4);
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            border-radius: 5px;
+            width: 300px;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .close {
+            color: #aaa;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .close:hover {
+            color: black;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+    <div class="user-dashboard">
+        <div class="user-info">
+            <h2>Welcome to VvvebJs</h2>
+            <p><strong>User:</strong> <span id="current-user">Loading...</span></p>
+            <p><strong>Storage Path:</strong> <span id="user-path">Loading...</span></p>
+        </div>
+        <div class="file-manager">
+            <div class="file-manager-header">
+                <h3>My Files</h3>
+                <div>
+                    <button class="btn btn-success" onclick="createNewFile()">New Page</button>
+                    <button class="btn btn-primary" onclick="refreshFileList()">Refresh</button>
+                    <a href="editor.html" class="btn btn-primary">Open Editor</a>
+                </div>
+            </div>
+            <div id="file-list-container">
+                <div class="loading">Loading files...</div>
+            </div>
+        </div>
+    </div>
+    <!-- Rename Modal -->
+    <div id="renameModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4>Rename File</h4>
+                <span class="close" onclick="closeModal('renameModal')">&times;</span>
+            </div>
+            <div class="form-group">
+                <label for="newFileName">New filename:</label>
+                <input type="text" id="newFileName" placeholder="Enter new filename">
+            </div>
+            <div>
+                <button class="btn btn-primary" onclick="confirmRename()">Rename</button>
+                <button class="btn" onclick="closeModal('renameModal')">Cancel</button>
+            </div>
+        </div>
+    </div>
+    <!-- Delete Confirmation Modal -->
+    <div id="deleteModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4>Delete File</h4>
+                <span class="close" onclick="closeModal('deleteModal')">&times;</span>
+            </div>
+            <p>Are you sure you want to delete <strong id="deleteFileName"></strong>?</p>
+            <div>
+                <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
+                <button class="btn" onclick="closeModal('deleteModal')">Cancel</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        let currentFiles = [];
+        let selectedFile = '';
+        // Load user info and files on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            loadUserInfo();
+            loadFileList();
+        });
+        async function loadUserInfo() {
+            try {
+                const response = await fetch('save.php?action=checkAuth');
+                const data = await response.json();
+                if (data.success) {
+                    document.getElementById('current-user').textContent = data.user;
+                    document.getElementById('user-path').textContent = data.userPath || 'Default';
+                }
+            } catch (error) {
+                console.error('Error loading user info:', error);
+            }
+        }
+        async function loadFileList() {
+            const container = document.getElementById('file-list-container');
+            container.innerHTML = '<div class="loading">Loading files...</div>';
+            try {
+                const response = await fetch('save.php?action=listFiles');
+                const data = await response.json();
+                if (data.success) {
+                    currentFiles = data.files;
+                    renderFileList(data.files);
+                } else {
+                    container.innerHTML = '<div class="error">Error loading files: ' + (data.message || 'Unknown error') + '</div>';
+                }
+            } catch (error) {
+                console.error('Error loading files:', error);
+                container.innerHTML = '<div class="error">Error loading files: ' + error.message + '</div>';
+            }
+        }
+        function renderFileList(files) {
+            const container = document.getElementById('file-list-container');
+            if (files.length === 0) {
+                container.innerHTML = `
+                    <div class="empty-state">
+                        <p>No files found. <a href="editor.html" class="btn btn-success">Create your first page</a></p>
+                    </div>
+                `;
+                return;
+            }
+            const fileListHTML = files.map(file => `
+                <div class="file-item">
+                    <div>
+                        <div class="file-name">${file.name}</div>
+                        <div class="file-meta">
+                            ${file.size ? `Size: ${formatFileSize(file.size)} • ` : ''}
+                            Path: ${file.path || file.name}
+                        </div>
+                    </div>
+                    <div class="file-actions">
+                        <a href="editor.html?file=${encodeURIComponent(file.path || file.name)}"
+                           class="btn btn-primary">Edit</a>
+                        ${file.url ? `<a href="${file.url}" target="_blank" class="btn btn-success">View</a>` : ''}
+                        <button class="btn btn-warning" onclick="renameFile('${file.name}')">Rename</button>
+                        <button class="btn btn-danger" onclick="deleteFile('${file.name}')">Delete</button>
+                    </div>
+                </div>
+            `).join('');
+            container.innerHTML = '<div class="file-list">' + fileListHTML + '</div>';
+        }
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        function refreshFileList() {
+            loadFileList();
+        }
+        function createNewFile() {
+            const fileName = prompt('Enter filename (without .html extension):');
+            if (fileName) {
+                const safeFileName = fileName.replace(/[^a-zA-Z0-9_-]/g, '_') + '.html';
+                window.location.href = `editor.html?file=${encodeURIComponent(safeFileName)}`;
+            }
+        }
+        function renameFile(fileName) {
+            selectedFile = fileName;
+            document.getElementById('newFileName').value = fileName.replace('.html', '');
+            openModal('renameModal');
+        }
+        async function confirmRename() {
+            const newFileName = document.getElementById('newFileName').value.trim();
+            if (!newFileName) {
+                alert('Please enter a valid filename');
+                return;
+            }
+            const safeNewFileName = newFileName.replace(/[^a-zA-Z0-9_-]/g, '_') + '.html';
+            try {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+                formData.append('newfile', safeNewFileName);
+                const response = await fetch('save.php?action=rename', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.text();
+                if (response.ok) {
+                    showMessage('File renamed successfully', 'success');
+                    closeModal('renameModal');
+                    loadFileList();
+                } else {
+                    showMessage('Error renaming file: ' + result, 'error');
+                }
+            } catch (error) {
+                showMessage('Error renaming file: ' + error.message, 'error');
+            }
+        }
+        function deleteFile(fileName) {
+            selectedFile = fileName;
+            document.getElementById('deleteFileName').textContent = fileName;
+            openModal('deleteModal');
+        }
+        async function confirmDelete() {
+            try {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+                const response = await fetch('save.php?action=delete', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.text();
+                if (response.ok) {
+                    showMessage('File deleted successfully', 'success');
+                    closeModal('deleteModal');
+                    loadFileList();
+                } else {
+                    showMessage('Error deleting file: ' + result, 'error');
+                }
+            } catch (error) {
+                showMessage('Error deleting file: ' + error.message, 'error');
+            }
+        }
+        function openModal(modalId) {
+            document.getElementById(modalId).style.display = 'block';
+        }
+        function closeModal(modalId) {
+            document.getElementById(modalId).style.display = 'none';
+        }
+        function showMessage(message, type) {
+            const container = document.querySelector('.user-dashboard');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = type;
+            messageDiv.textContent = message;
+            container.insertBefore(messageDiv, container.firstChild);
+            setTimeout(() => {
+                messageDiv.remove();
+            }, 5000);
+        }
+        // Close modals when clicking outside
+        window.onclick = function(event) {
+            const modals = document.querySelectorAll('.modal');
+            modals.forEach(modal => {
+                if (event.target === modal) {
+                    modal.style.display = 'none';
+                }
+            });
+        }
+    </script>
+</body>
+</html>

editor.html CHANGED Viewed

@@ -36,6 +36,61 @@
         }).catch(err => {
             console.log('Auth check failed, continuing anyway');
         });
     });
     </script>
   </head>
@@ -68,7 +123,16 @@
               <i class="la la-undo la-flip-horizontal"></i>
 					  </button>
 					</div>
 					<div class="btn-group me-3" role="group">
 					  <button class="btn btn-light" title="Designer Mode (Free dragging)" id="designer-mode-btn" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
@@ -416,7 +480,7 @@
 													<div class="tab-content" data-offset="20">
 														 <div class="tab-pane show active" id="content-left-panel-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
-															<div class="alert alert-dismissible fade show alert-light m-3" role="alert" style="">
 																<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 																<strong>No selected element!</strong><br> Click on an element to edit.
 															</div>

         }).catch(err => {
             console.log('Auth check failed, continuing anyway');
         });
+        // File loading functionality
+        function loadFileList() {
+            fetch('save.php?action=list')
+                .then(response => response.json())
+                .then(data => {
+                    const selector = document.getElementById('file-selector');
+                    selector.innerHTML = '<option value="">Select a file...</option>';
+                    if (data.success && data.files) {
+                        data.files.forEach(file => {
+                            const option = document.createElement('option');
+                            option.value = file.filename;
+                            option.textContent = file.title || file.filename;
+                            selector.appendChild(option);
+                        });
+                    }
+                })
+                .catch(error => console.error('Error loading file list:', error));
+        }
+        // Load file when selected
+        document.getElementById('load-file-btn').addEventListener('click', function() {
+            const selector = document.getElementById('file-selector');
+            const filename = selector.value;
+            if (!filename) {
+                alert('Please select a file to load');
+                return;
+            }
+            fetch(`save.php?action=load&filename=${encodeURIComponent(filename)}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Load the HTML content into the editor
+                        Vvveb.Builder.loadHtml(data.html);
+                        // Update the page title input if it exists
+                        const titleInput = document.getElementById('page-title');
+                        if (titleInput && data.title) {
+                            titleInput.value = data.title;
+                        }
+                        console.log('File loaded successfully');
+                    } else {
+                        alert('Error loading file: ' + (data.message || 'Unknown error'));
+                    }
+                })
+                .catch(error => {
+                    console.error('Error loading file:', error);
+                    alert('Error loading file');
+                });
+        });
+        // Load file list on page load
+        loadFileList();
     });
     </script>
   </head>
               <i class="la la-undo la-flip-horizontal"></i>
 					  </button>
 					</div>
+					<!-- File loading dropdown -->
+					<div class="btn-group me-3" role="group">
+						<select class="form-select" id="file-selector" title="Select file to load">
+							<option value="">Select a file...</option>
+						</select>
+						<button class="btn btn-light" title="Load selected file" id="load-file-btn">
+							<i class="la la-folder-open"></i>
+						</button>
+					</div>
 					<div class="btn-group me-3" role="group">
 					  <button class="btn btn-light" title="Designer Mode (Free dragging)" id="designer-mode-btn" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
 													<div class="tab-content" data-offset="20">
 														 <div class="tab-pane show active" id="content-left-panel-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
+															<div class="alert alert-dismissible fade show alert-light m-3" role="alert">
 																<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 																<strong>No selected element!</strong><br> Click on an element to edit.
 															</div>

editor.php ADDED Viewed

	@@ -0,0 +1,61 @@

+<?php
+require_once 'user-manager.php';
+// Initialize user manager and require login
+$userManager = new UserManager();
+$userManager->requireLogin();
+$currentUser = $userManager->getCurrentUser();
+// Get the editor HTML
+$html = file_get_contents('editor.html');
+// Search for HTML files in user's directory and demo folder
+$userDir = "user-files/$currentUser";
+$userFiles = [];
+if (is_dir($userDir)) {
+    $userFiles = glob("$userDir/*.html");
+}
+// Also include demo files for reference
+$demoFiles = array_merge(glob('demo/*/*.html'), glob('demo/*.html'));
+$files = '';
+// Add user files first
+foreach ($userFiles as $file) {
+    if (in_array(basename($file), array('new-page-blank-template.html', 'editor.html'))) continue;
+    $pathInfo = pathinfo($file);
+    $filename = $pathInfo['filename'];
+    $folder = 'My Files';
+    $url = $file;
+    $name = $filename;
+    $title = ucfirst($name);
+    $files .= "{name:'$name', file:'$file', title:'$title', url: '$url', folder:'$folder', editable: true},";
+}
+// Add demo files (read-only)
+foreach ($demoFiles as $file) {
+    if (in_array($file, array('new-page-blank-template.html', 'editor.html'))) continue;
+    $pathInfo = pathinfo($file);
+    $filename = $pathInfo['filename'];
+    $folder = preg_replace('@/.+?$@', '', $pathInfo['dirname']);
+    $subfolder = preg_replace('@^.+?/@', '', $pathInfo['dirname']);
+    if ($filename == 'index' && $subfolder) {
+        $filename = $subfolder;
+    }
+    $url = $pathInfo['dirname'] . '/' . $pathInfo['basename'];
+    $name = $filename;
+    $title = ucfirst($name) . ' (Demo)';
+    $files .= "{name:'$name', file:'$file', title:'$title', url: '$url', folder:'$folder', editable: false},";
+}
+// Replace files list from html with the dynamic list
+$html = str_replace('= defaultPages;', " = [$files];", $html);
+// Add user info to the page
+$userInfo = "<script>window.currentUser = '$currentUser';</script>";
+$html = str_replace('</head>', "$userInfo</head>", $html);
+echo $html;
+?>

	@@ -0,0 +1,202 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VvvebJs - Login</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+        }
+        .login-container {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .login-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 2rem;
+            text-align: center;
+        }
+        .login-form {
+            padding: 2rem;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-lg-4">
+                <div class="login-container">
+                    <div class="login-header">
+                        <h2>VvvebJs Editor</h2>
+                        <p class="mb-0">Please login to continue</p>
+                    </div>
+                    <div class="login-form">
+                        <div id="loginForm">
+                            <form id="loginFormElement">
+                                <div class="mb-3">
+                                    <label for="username" class="form-label">Username</label>
+                                    <input type="text" class="form-control" id="username" name="username" required>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="password" class="form-label">Password</label>
+                                    <input type="password" class="form-control" id="password" name="password" required>
+                                </div>
+                                <button type="submit" class="btn btn-primary w-100 mb-3">Login</button>
+                            </form>
+                            <div class="text-center">
+                                <small>Don't have an account? <a href="#" id="showRegister">Register here</a></small>
+                            </div>
+                        </div>
+                        <div id="registerForm" style="display: none;">
+                            <form id="registerFormElement">
+                                <div class="mb-3">
+                                    <label for="regUsername" class="form-label">Username</label>
+                                    <input type="text" class="form-control" id="regUsername" name="username" required>
+                                    <small class="form-text text-muted">At least 3 characters, letters, numbers, underscore, and dash only</small>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="regEmail" class="form-label">Email (optional)</label>
+                                    <input type="email" class="form-control" id="regEmail" name="email">
+                                </div>
+                                <div class="mb-3">
+                                    <label for="regPassword" class="form-label">Password</label>
+                                    <input type="password" class="form-control" id="regPassword" name="password" required>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="regPasswordConfirm" class="form-label">Confirm Password</label>
+                                    <input type="password" class="form-control" id="regPasswordConfirm" required>
+                                </div>
+                                <button type="submit" class="btn btn-primary w-100 mb-3">Register</button>
+                            </form>
+                            <div class="text-center">
+                                <small>Already have an account? <a href="#" id="showLogin">Login here</a></small>
+                            </div>
+                        </div>
+                        <div id="message" class="alert" style="display: none;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const loginForm = document.getElementById('loginForm');
+            const registerForm = document.getElementById('registerForm');
+            const showRegister = document.getElementById('showRegister');
+            const showLogin = document.getElementById('showLogin');
+            const messageDiv = document.getElementById('message');
+            showRegister.addEventListener('click', function(e) {
+                e.preventDefault();
+                loginForm.style.display = 'none';
+                registerForm.style.display = 'block';
+                hideMessage();
+            });
+            showLogin.addEventListener('click', function(e) {
+                e.preventDefault();
+                registerForm.style.display = 'none';
+                loginForm.style.display = 'block';
+                hideMessage();
+            });
+            document.getElementById('loginFormElement').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const formData = new FormData(this);
+                formData.append('action', 'login');
+                fetch('user-manager.php', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    showMessage(data.message, data.success ? 'success' : 'danger');
+                    if (data.success) {
+                        setTimeout(() => {
+                            window.location.href = 'editor.html';
+                        }, 1000);
+                    }
+                })
+                .catch(error => {
+                    showMessage('An error occurred. Please try again.', 'danger');
+                });
+            });
+            document.getElementById('registerFormElement').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const password = document.getElementById('regPassword').value;
+                const confirmPassword = document.getElementById('regPasswordConfirm').value;
+                if (password !== confirmPassword) {
+                    showMessage('Passwords do not match.', 'danger');
+                    return;
+                }
+                const formData = new FormData(this);
+                formData.append('action', 'register');
+                fetch('user-manager.php', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    showMessage(data.message, data.success ? 'success' : 'danger');
+                    if (data.success) {
+                        setTimeout(() => {
+                            registerForm.style.display = 'none';
+                            loginForm.style.display = 'block';
+                            document.getElementById('registerFormElement').reset();
+                        }, 1500);
+                    }
+                })
+                .catch(error => {
+                    showMessage('An error occurred. Please try again.', 'danger');
+                });
+            });
+            function showMessage(message, type) {
+                messageDiv.textContent = message;
+                messageDiv.className = `alert alert-${type}`;
+                messageDiv.style.display = 'block';
+            }
+            function hideMessage() {
+                messageDiv.style.display = 'none';
+            }
+            // Check if already logged in
+            fetch('user-manager.php', {
+                method: 'POST',
+                body: new URLSearchParams({action: 'check_login'})
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.logged_in) {
+                    window.location.href = 'editor.html';
+                }
+            });
+        });
+    </script>
+</body>
+</html>

save.php CHANGED Viewed

@@ -126,25 +126,84 @@ if (isset($_GET['action'])) {
 if ($action) {
 	//file manager actions, delete and rename
 	switch ($action) {
 		case 'rename':
 			$newfile = sanitizeFileName($_POST['newfile']);
 			if ($file && $newfile) {
-				if (rename($file, $newfile)) {
-					echo "File '$file' renamed to '$newfile'";
 				} else {
-					showError("Error renaming file '$file' renamed to '$newfile'");
 				}
 			}
 		break;
 		case 'delete':
 			if ($file) {
-				if (unlink($file)) {
 					echo "File '$file' deleted";
 				} else {
 					showError("Error deleting file '$file'");
 				}
 			}
 		break;
 		case 'saveReusable':
 		    //block or section
 			$type = $_POST['type'] ?? false;

 if ($action) {
 	//file manager actions, delete and rename
 	switch ($action) {
+		case 'listFiles':
+			// List files for current user
+			$files = $storageManager->listFiles();
+			header('Content-Type: application/json');
+			echo json_encode([
+				'success' => true,
+				'files' => $files,
+				'user' => $storageManager->getCurrentUser(),
+				'userPath' => $storageManager->getUserPath()
+			]);
+			exit;
+		case 'loadFile':
+			// Load a specific file for current user
+			$filename = sanitizeFileName($_GET['file'] ?? '');
+			if ($filename) {
+				$content = $storageManager->getFile($filename);
+				if ($content !== false) {
+					header('Content-Type: application/json');
+					echo json_encode([
+						'success' => true,
+						'content' => $content,
+						'filename' => $filename
+					]);
+				} else {
+					header('Content-Type: application/json');
+					echo json_encode([
+						'success' => false,
+						'message' => 'File not found or access denied'
+					]);
+				}
+			} else {
+				header('Content-Type: application/json');
+				echo json_encode([
+					'success' => false,
+					'message' => 'Invalid filename'
+				]);
+			}
+			exit;
+		case 'checkAuth':
+			// Check if user is authenticated
+			header('Content-Type: application/json');
+			echo json_encode([
+				'success' => true,
+				'user' => $storageManager->getCurrentUser(),
+				'authenticated' => true
+			]);
+			exit;
 		case 'rename':
 			$newfile = sanitizeFileName($_POST['newfile']);
 			if ($file && $newfile) {
+				// For user isolation, we need to handle this through storage manager
+				$content = $storageManager->getFile($file);
+				if ($content !== false) {
+					if ($storageManager->saveFile($newfile, $content)) {
+						$storageManager->deleteFile($file);
+						echo "File '$file' renamed to '$newfile'";
+					} else {
+						showError("Error renaming file '$file' to '$newfile'");
+					}
 				} else {
+					showError("File '$file' not found");
 				}
 			}
 		break;
 		case 'delete':
 			if ($file) {
+				if ($storageManager->deleteFile($file)) {
 					echo "File '$file' deleted";
 				} else {
 					showError("Error deleting file '$file'");
 				}
 			}
 		break;
 		case 'saveReusable':
 		    //block or section
 			$type = $_POST['type'] ?? false;

storage.php CHANGED Viewed

@@ -42,6 +42,19 @@ class StorageConfig {
         ];
     }
     private static function makeGitHubRequest($url, $method = 'GET', $data = null) {
         $config = self::getGitHubConfig();
@@ -291,21 +304,26 @@ class StorageConfig {
 // External storage handlers
 class KVStorage {
     private $config;
     public function __construct($config) {
         $this->config = $config;
     }
     public function save($key, $content) {
         if (empty($this->config['api_key'])) return false;
         $url = $this->config['endpoint'] . '/';
         $params = [
             'Action' => 'ModifyApplicationProxyRule',
             'Version' => '2022-09-01',
             'Region' => 'ap-beijing',
             'ZoneId' => $this->config['zone_id'],
-            'Key' => $key,
             'Value' => base64_encode($content)
         ];
@@ -315,19 +333,28 @@ class KVStorage {
     public function get($key) {
         if (empty($this->config['api_key'])) return false;
         $url = $this->config['endpoint'] . '/';
         $params = [
             'Action' => 'DescribeApplicationProxyDetail',
             'Version' => '2022-09-01',
             'Region' => 'ap-beijing',
             'ZoneId' => $this->config['zone_id'],
-            'Key' => $key
         ];
         $result = $this->makeRequest($url, $params);
         return $result ? base64_decode($result) : false;
     }
     private function makeRequest($url, $params) {
         $ch = curl_init();
         curl_setopt($ch, CURLOPT_URL, $url);
@@ -348,9 +375,11 @@ class KVStorage {
 class GitHubStorage {
     private $config;
     private $actualBranch = null;
     public function __construct($config) {
         $this->config = $config;
         // Auto-detect the actual default branch
         $this->detectDefaultBranch();
     }
@@ -402,16 +431,18 @@ class GitHubStorage {
             return false;
         }
-        $path = $this->config['path'] . $filename;
         $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
-        error_log("GitHub Save Debug: Attempting to save to $url on branch '{$this->config['branch']}'");
         // Get current file SHA if exists
         $sha = $this->getFileSHA($path);
         $data = [
-            'message' => 'Update ' . $filename . ' via VvvebJs',
             'content' => base64_encode($content),
             'branch' => $this->config['branch']
         ];
@@ -437,7 +468,9 @@ class GitHubStorage {
     public function get($filename) {
         if (empty($this->config['token'])) return false;
-        $path = $this->config['path'] . $filename;
         $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
         $result = $this->makeRequest($url, 'GET');
@@ -447,6 +480,55 @@ class GitHubStorage {
         return false;
     }
     private function getFileSHA($path) {
         $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
         $result = $this->makeRequest($url, 'GET');
@@ -517,14 +599,16 @@ class GitHubStorage {
     }
 }
-// Storage manager
 class StorageManager {
     private $kvStorage;
     private $githubStorage;
     private $storageType;
     public function __construct() {
         $this->storageType = StorageConfig::getStorageType();
         if (in_array($this->storageType, ['kv', 'both'])) {
             $this->kvStorage = new KVStorage(StorageConfig::getKVConfig());
@@ -536,6 +620,9 @@ class StorageManager {
     }
     public function saveFile($filename, $content) {
         $success = false;
         if ($this->githubStorage) {
@@ -550,6 +637,9 @@ class StorageManager {
     }
     public function getFile($filename) {
         if ($this->githubStorage) {
             $content = $this->githubStorage->get($filename);
             if ($content !== false) return $content;
@@ -562,4 +652,54 @@ class StorageManager {
         return false;
     }
 }

         ];
     }
+    public static function getCurrentUser() {
+        return $_SERVER['PHP_AUTH_USER'] ?? 'anonymous';
+    }
+    public static function getUserPath($username = null) {
+        if ($username === null) {
+            $username = self::getCurrentUser();
+        }
+        // Sanitize username for safe path usage
+        $safeUsername = preg_replace('/[^a-zA-Z0-9_-]/', '_', $username);
+        return "users/{$safeUsername}/";
+    }
     private static function makeGitHubRequest($url, $method = 'GET', $data = null) {
         $config = self::getGitHubConfig();
 // External storage handlers
 class KVStorage {
     private $config;
+    private $userPath;
     public function __construct($config) {
         $this->config = $config;
+        $this->userPath = StorageConfig::getUserPath();
     }
     public function save($key, $content) {
         if (empty($this->config['api_key'])) return false;
+        // Add user path to key
+        $userKey = $this->userPath . $key;
         $url = $this->config['endpoint'] . '/';
         $params = [
             'Action' => 'ModifyApplicationProxyRule',
             'Version' => '2022-09-01',
             'Region' => 'ap-beijing',
             'ZoneId' => $this->config['zone_id'],
+            'Key' => $userKey,
             'Value' => base64_encode($content)
         ];
     public function get($key) {
         if (empty($this->config['api_key'])) return false;
+        // Add user path to key
+        $userKey = $this->userPath . $key;
         $url = $this->config['endpoint'] . '/';
         $params = [
             'Action' => 'DescribeApplicationProxyDetail',
             'Version' => '2022-09-01',
             'Region' => 'ap-beijing',
             'ZoneId' => $this->config['zone_id'],
+            'Key' => $userKey
         ];
         $result = $this->makeRequest($url, $params);
         return $result ? base64_decode($result) : false;
     }
+    public function listUserFiles() {
+        // This would require additional API endpoints to list files
+        // Implementation depends on the KV storage provider's capabilities
+        return [];
+    }
     private function makeRequest($url, $params) {
         $ch = curl_init();
         curl_setopt($ch, CURLOPT_URL, $url);
 class GitHubStorage {
     private $config;
     private $actualBranch = null;
+    private $userPath;
     public function __construct($config) {
         $this->config = $config;
+        $this->userPath = StorageConfig::getUserPath();
         // Auto-detect the actual default branch
         $this->detectDefaultBranch();
     }
             return false;
         }
+        // Add user path to filename
+        $userFilename = $this->userPath . $filename;
+        $path = $this->config['path'] . $userFilename;
         $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
+        error_log("GitHub Save Debug: Attempting to save to $url on branch '{$this->config['branch']}' for user '{$this->userPath}'");
         // Get current file SHA if exists
         $sha = $this->getFileSHA($path);
         $data = [
+            'message' => "Update {$userFilename} via VvvebJs",
             'content' => base64_encode($content),
             'branch' => $this->config['branch']
         ];
     public function get($filename) {
         if (empty($this->config['token'])) return false;
+        // Add user path to filename
+        $userFilename = $this->userPath . $filename;
+        $path = $this->config['path'] . $userFilename;
         $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
         $result = $this->makeRequest($url, 'GET');
         return false;
     }
+    public function listUserFiles() {
+        if (empty($this->config['token'])) return [];
+        $userDir = $this->config['path'] . $this->userPath;
+        $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$userDir}";
+        $result = $this->makeRequest($url, 'GET');
+        if ($result && is_array($result)) {
+            $files = [];
+            foreach ($result as $item) {
+                if ($item['type'] === 'file') {
+                    // Remove user path prefix from filename
+                    $relativePath = str_replace($this->userPath, '', $item['path']);
+                    $relativePath = str_replace($this->config['path'], '', $relativePath);
+                    $files[] = [
+                        'name' => $item['name'],
+                        'path' => $relativePath,
+                        'size' => $item['size'],
+                        'url' => $item['download_url']
+                    ];
+                }
+            }
+            return $files;
+        }
+        return [];
+    }
+    public function delete($filename) {
+        if (empty($this->config['token'])) return false;
+        // Add user path to filename
+        $userFilename = $this->userPath . $filename;
+        $path = $this->config['path'] . $userFilename;
+        $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
+        // Get current file SHA
+        $sha = $this->getFileSHA($path);
+        if (!$sha) return false;
+        $data = [
+            'message' => "Delete {$userFilename} via VvvebJs",
+            'sha' => $sha,
+            'branch' => $this->config['branch']
+        ];
+        $result = $this->makeRequest($url, 'DELETE', $data);
+        return $result !== false;
+    }
     private function getFileSHA($path) {
         $url = "https://api.github.com/repos/{$this->config['owner']}/{$this->config['repo']}/contents/{$path}";
         $result = $this->makeRequest($url, 'GET');
     }
 }
+// Storage manager with user isolation
 class StorageManager {
     private $kvStorage;
     private $githubStorage;
     private $storageType;
+    private $currentUser;
     public function __construct() {
         $this->storageType = StorageConfig::getStorageType();
+        $this->currentUser = StorageConfig::getCurrentUser();
         if (in_array($this->storageType, ['kv', 'both'])) {
             $this->kvStorage = new KVStorage(StorageConfig::getKVConfig());
     }
     public function saveFile($filename, $content) {
+        // Ensure filename is safe and doesn't contain path traversal
+        $filename = $this->sanitizeFilename($filename);
         $success = false;
         if ($this->githubStorage) {
     }
     public function getFile($filename) {
+        // Ensure filename is safe and doesn't contain path traversal
+        $filename = $this->sanitizeFilename($filename);
         if ($this->githubStorage) {
             $content = $this->githubStorage->get($filename);
             if ($content !== false) return $content;
         return false;
     }
+    public function listFiles() {
+        $files = [];
+        if ($this->githubStorage) {
+            $githubFiles = $this->githubStorage->listUserFiles();
+            $files = array_merge($files, $githubFiles);
+        }
+        if ($this->kvStorage) {
+            $kvFiles = $this->kvStorage->listUserFiles();
+            $files = array_merge($files, $kvFiles);
+        }
+        return $files;
+    }
+    public function deleteFile($filename) {
+        // Ensure filename is safe and doesn't contain path traversal
+        $filename = $this->sanitizeFilename($filename);
+        $success = false;
+        if ($this->githubStorage) {
+            $success = $this->githubStorage->delete($filename) || $success;
+        }
+        // KV storage delete would need to be implemented based on provider
+        return $success;
+    }
+    public function getCurrentUser() {
+        return $this->currentUser;
+    }
+    public function getUserPath() {
+        return StorageConfig::getUserPath();
+    }
+    private function sanitizeFilename($filename) {
+        // Remove any path traversal attempts
+        $filename = str_replace(['../', '..\\', '../', '..\\'], '', $filename);
+        // Remove leading slashes
+        $filename = ltrim($filename, '/\\');
+        // Ensure safe characters only
+        $filename = preg_replace('/[^a-zA-Z0-9_\-\.\/]/', '_', $filename);
+        return $filename;
+    }
 }

upload.php CHANGED Viewed

@@ -24,42 +24,69 @@ This script is used by image upload input to save the image on the server and re
 // Include authentication and storage
 require_once __DIR__ . '/save.php';
 if ($_FILES && $_FILES['file']) {
     $file = $_FILES['file'];
     // Validate file
-    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
     if (!in_array($file['type'], $allowedTypes)) {
         http_response_code(400);
-        die('Invalid file type');
     }
     $maxSize = 5 * 1024 * 1024; // 5MB
     if ($file['size'] > $maxSize) {
         http_response_code(400);
-        die('File too large');
     }
-    // Generate unique filename
     $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
-    $filename = 'uploads/' . uniqid() . '.' . $extension;
-    // Save to local uploads directory
-    $uploadDir = __DIR__ . '/uploads/';
-    if (!is_dir($uploadDir)) {
-        mkdir($uploadDir, 0777, true);
     }
-    $localPath = $uploadDir . basename($filename);
     if (move_uploaded_file($file['tmp_name'], $localPath)) {
-        // Try to save to external storage as well
         $fileContent = file_get_contents($localPath);
         $storageManager->saveFile($filename, $fileContent);
         echo json_encode([
             'success' => true,
-            'url' => $filename,
             'message' => 'File uploaded successfully'
         ]);
     } else {

 // Include authentication and storage
 require_once __DIR__ . '/save.php';
+// Check if user is authenticated
+if (!isset($_SESSION['user_id'])) {
+    http_response_code(401);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Authentication required'
+    ]);
+    exit;
+}
+$userId = $_SESSION['user_id'];
 if ($_FILES && $_FILES['file']) {
     $file = $_FILES['file'];
     // Validate file
+    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
     if (!in_array($file['type'], $allowedTypes)) {
         http_response_code(400);
+        echo json_encode([
+            'success' => false,
+            'message' => 'Invalid file type. Allowed: JPEG, PNG, GIF, WebP, SVG'
+        ]);
+        exit;
     }
     $maxSize = 5 * 1024 * 1024; // 5MB
     if ($file['size'] > $maxSize) {
         http_response_code(400);
+        echo json_encode([
+            'success' => false,
+            'message' => 'File too large. Maximum size: 5MB'
+        ]);
+        exit;
     }
+    // Generate unique filename with user prefix
     $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
+    $timestamp = date('Y-m-d_H-i-s');
+    $filename = 'media/' . $userId . '_' . $timestamp . '_' . uniqid() . '.' . $extension;
+    // Create user-specific media directory
+    $userMediaDir = __DIR__ . '/user-files/' . $userId . '/media/';
+    if (!is_dir($userMediaDir)) {
+        mkdir($userMediaDir, 0777, true);
     }
+    $localPath = $userMediaDir . basename($filename);
     if (move_uploaded_file($file['tmp_name'], $localPath)) {
+        // Save to user's storage as well
         $fileContent = file_get_contents($localPath);
         $storageManager->saveFile($filename, $fileContent);
+        // Return relative path for use in editor
+        $relativePath = 'user-files/' . $userId . '/media/' . basename($filename);
         echo json_encode([
             'success' => true,
+            'url' => $relativePath,
+            'filename' => basename($filename),
+            'size' => $file['size'],
+            'type' => $file['type'],
             'message' => 'File uploaded successfully'
         ]);
     } else {

user-manager.php ADDED Viewed

	@@ -0,0 +1,149 @@

+<?php
+session_start();
+class UserManager {
+    private $usersFile = 'users.json';
+    public function __construct() {
+        if (!file_exists($this->usersFile)) {
+            file_put_contents($this->usersFile, json_encode([]));
+        }
+    }
+    public function registerUser($username, $password, $email = '') {
+        $users = $this->getUsers();
+        // Check if user already exists
+        if (isset($users[$username])) {
+            return ['success' => false, 'message' => 'User already exists'];
+        }
+        // Validate username
+        if (!preg_match('/^[a-zA-Z0-9_-]+$/', $username) || strlen($username) < 3) {
+            return ['success' => false, 'message' => 'Username must be at least 3 characters and contain only letters, numbers, underscore, and dash'];
+        }
+        // Hash password
+        $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
+        // Add user
+        $users[$username] = [
+            'password' => $hashedPassword,
+            'email' => $email,
+            'created' => date('Y-m-d H:i:s'),
+            'last_login' => null
+        ];
+        if ($this->saveUsers($users)) {
+            return ['success' => true, 'message' => 'User registered successfully'];
+        } else {
+            return ['success' => false, 'message' => 'Failed to save user data'];
+        }
+    }
+    public function loginUser($username, $password) {
+        $users = $this->getUsers();
+        if (!isset($users[$username])) {
+            return ['success' => false, 'message' => 'User not found'];
+        }
+        if (password_verify($password, $users[$username]['password'])) {
+            $_SESSION['username'] = $username;
+            $_SESSION['logged_in'] = true;
+            // Update last login
+            $users[$username]['last_login'] = date('Y-m-d H:i:s');
+            $this->saveUsers($users);
+            return ['success' => true, 'message' => 'Login successful'];
+        } else {
+            return ['success' => false, 'message' => 'Invalid password'];
+        }
+    }
+    public function logoutUser() {
+        session_destroy();
+        return ['success' => true, 'message' => 'Logged out successfully'];
+    }
+    public function isLoggedIn() {
+        return isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true;
+    }
+    public function getCurrentUser() {
+        if ($this->isLoggedIn()) {
+            return $_SESSION['username'];
+        }
+        return null;
+    }
+    public function requireLogin() {
+        if (!$this->isLoggedIn()) {
+            header('Location: login.html');
+            exit;
+        }
+    }
+    private function getUsers() {
+        $content = file_get_contents($this->usersFile);
+        return json_decode($content, true) ?: [];
+    }
+    private function saveUsers($users) {
+        return file_put_contents($this->usersFile, json_encode($users, JSON_PRETTY_PRINT)) !== false;
+    }
+    public function getUserList() {
+        $users = $this->getUsers();
+        $userList = [];
+        foreach ($users as $username => $data) {
+            $userList[] = [
+                'username' => $username,
+                'email' => $data['email'],
+                'created' => $data['created'],
+                'last_login' => $data['last_login']
+            ];
+        }
+        return $userList;
+    }
+}
+// Handle AJAX requests
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    header('Content-Type: application/json');
+    $userManager = new UserManager();
+    $action = $_POST['action'] ?? '';
+    switch ($action) {
+        case 'register':
+            $username = $_POST['username'] ?? '';
+            $password = $_POST['password'] ?? '';
+            $email = $_POST['email'] ?? '';
+            echo json_encode($userManager->registerUser($username, $password, $email));
+            break;
+        case 'login':
+            $username = $_POST['username'] ?? '';
+            $password = $_POST['password'] ?? '';
+            echo json_encode($userManager->loginUser($username, $password));
+            break;
+        case 'logout':
+            echo json_encode($userManager->logoutUser());
+            break;
+        case 'check_login':
+            echo json_encode([
+                'logged_in' => $userManager->isLoggedIn(),
+                'username' => $userManager->getCurrentUser()
+            ]);
+            break;
+        default:
+            echo json_encode(['success' => false, 'message' => 'Invalid action']);
+    }
+    exit;
+}
+?>