VvvebJs / README-USER-ISOLATION.md
CatPtain's picture
Upload 9 files
85bc0da verified

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