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
- Navigate to
login.htmlin your browser - Click "Register here" to create a new account
- Fill in username and password (email is optional)
- Click "Register"
2. Login
- Go to
login.html - Enter your username and password
- Click "Login"
- 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 handlingsave.php: Enhanced with user isolation and file managementuser-manager.php: Complete user authentication systemeditor.php: Integration with user system and file loadingeditor.html: Added file selector and user interface improvementslogin.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-filesanduser-datadirectories - 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-datadirectory exists and is writable - Check that PHP sessions are working on your server
File Save Issues:
- Verify
user-filesdirectory 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