Spaces:

CatPtain
/

VvvebJs

Paused

App Files Files Community

CatPtain commited on Jun 12, 2025

Commit

bcc9a86

verified ·

1 Parent(s): 69c1665

Upload 10 files

Browse files

Files changed (6) hide show

.env +24 -0
editor.html +3 -3
github-test.html +231 -0
index.html +101 -145
save.php +37 -9
storage.php +50 -1

.env ADDED Viewed

	@@ -0,0 +1,24 @@

+# Storage Configuration
+STORAGE_TYPE=github
+# GitHub Configuration
+GITHUB_TOKEN=ghp_your_token_here
+GITHUB_OWNER=CaPaCaptain
+GITHUB_REPO=VvvebJs_huggingface_db_01
+GITHUB_BRANCH=main
+GITHUB_PATH=pages/
+# User Configuration
+USER_1_NAME=PS01
+USER_1_PASSWORD=password123
+USER_2_NAME=PS02
+USER_2_PASSWORD=password456
+USER_3_NAME=admin
+USER_3_PASSWORD=admin123
+# Optional: EdgeOne KV Configuration (if using KV storage)
+# EDGEONE_KV_API_KEY=your_api_key_here
+# EDGEONE_KV_SECRET_KEY=your_secret_key_here
+# EDGEONE_KV_ZONE_ID=your_zone_id_here
+# EDGEONE_KV_NAMESPACE=vvvebjs
+# EDGEONE_KV_ENDPOINT=https://edgeone.tencentcloudapi.com

editor.html CHANGED Viewed

@@ -211,16 +211,16 @@
 					<div class="btn-group me-2 float-end" role="group">
-					  <button class="btn btn-primary btn-sm btn-icon save-btn" title="Save to GitHub (Ctrl + S)" id="save-btn" data-vvveb-action="saveAjax" data-vvveb-url="save.php" data-v-vvveb-shortcut="ctrl+e">
 						<span class="loading d-none">
 						<i class="icon-save-outline"></i>
 						  <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
 						  </span>
-						  <span>Saving to GitHub</span> ... </span>
 						<span class="button-text">
-						  <i class="icon-save-outline"></i> <span>Save to GitHub</span>
 						</span>
 					  </button>

 					<div class="btn-group me-2 float-end" role="group">
+					  <button class="btn btn-primary btn-sm btn-icon save-btn" title="Save (Ctrl + S)" id="save-btn" data-vvveb-action="saveAjax" data-vvveb-url="save.php" data-v-vvveb-shortcut="ctrl+e">
 						<span class="loading d-none">
 						<i class="icon-save-outline"></i>
 						  <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
 						  </span>
+						  <span>Saving</span> ... </span>
 						<span class="button-text">
+						  <i class="icon-save-outline"></i> <span>SAVE</span>
 						</span>
 					  </button>

github-test.html ADDED Viewed

	@@ -0,0 +1,231 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub Configuration Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; }
+        .config-section { background: #f8f9fa; padding: 20px; margin: 20px 0; border-radius: 8px; }
+        .success { color: #28a745; }
+        .error { color: #dc3545; }
+        .warning { color: #ffc107; }
+        .info { color: #17a2b8; }
+        .token-input { width: 100%; padding: 8px; margin: 5px 0; font-family: monospace; }
+        .btn { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; }
+        .btn-primary { background: #007bff; color: white; }
+        .btn-success { background: #28a745; color: white; }
+        pre { background: #f1f1f1; padding: 10px; border-radius: 4px; overflow-x: auto; }
+    </style>
+</head>
+<body>
+    <h1>🔧 GitHub Configuration & Test</h1>
+    <div class="config-section">
+        <h2>1. GitHub Token Configuration</h2>
+        <p>Enter your GitHub Personal Access Token below:</p>
+        <input type="password" id="github-token" class="token-input" placeholder="ghp_your_token_here">
+        <br>
+        <button class="btn btn-primary" onclick="testGitHubConnection()">Test GitHub Connection</button>
+        <button class="btn btn-success" onclick="saveToken()">Save Token to .env</button>
+        <div id="token-result"></div>
+        <h3>How to get GitHub Token:</h3>
+        <ol>
+            <li>Go to <a href="https://github.com/settings/tokens" target="_blank">GitHub Settings → Developer settings → Personal access tokens</a></li>
+            <li>Click "Generate new token" → "Generate new token (classic)"</li>
+            <li>Give it a name like "VvvebJs"</li>
+            <li>Select scopes: <strong>repo</strong> (full repository access)</li>
+            <li>Click "Generate token"</li>
+            <li>Copy the token and paste it above</li>
+        </ol>
+    </div>
+    <div class="config-section">
+        <h2>2. Repository Configuration</h2>
+        <p><strong>Repository:</strong> CaPaCaptain/VvvebJs_huggingface_db_01</p>
+        <p><strong>Branch:</strong> main</p>
+        <p><strong>Path:</strong> pages/</p>
+        <button class="btn btn-primary" onclick="testRepoAccess()">Test Repository Access</button>
+        <div id="repo-result"></div>
+    </div>
+    <div class="config-section">
+        <h2>3. File Operations Test</h2>
+        <button class="btn btn-primary" onclick="testFileList()">Test File List</button>
+        <button class="btn btn-primary" onclick="testFileSave()">Test File Save</button>
+        <div id="file-result"></div>
+    </div>
+    <div class="config-section">
+        <h2>4. Debug Information</h2>
+        <button class="btn btn-primary" onclick="getDebugInfo()">Get Debug Info</button>
+        <div id="debug-result"></div>
+    </div>
+    <script>
+        async function testGitHubConnection() {
+            const token = document.getElementById('github-token').value;
+            const resultDiv = document.getElementById('token-result');
+            if (!token) {
+                resultDiv.innerHTML = '<p class="error">❌ Please enter a GitHub token</p>';
+                return;
+            }
+            resultDiv.innerHTML = '<p class="info">🔄 Testing GitHub connection...</p>';
+            try {
+                const response = await fetch('https://api.github.com/user', {
+                    headers: {
+                        'Authorization': `token ${token}`,
+                        'User-Agent': 'VvvebJs-Test'
+                    }
+                });
+                if (response.ok) {
+                    const user = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="success">✅ GitHub connection successful!</p>
+                        <p>User: ${user.login} (${user.name || 'No name'})</p>
+                        <p>API Rate Limit: ${response.headers.get('x-ratelimit-remaining')}/${response.headers.get('x-ratelimit-limit')}</p>
+                    `;
+                } else {
+                    const error = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="error">❌ GitHub connection failed!</p>
+                        <p>Status: ${response.status}</p>
+                        <p>Error: ${error.message || 'Unknown error'}</p>
+                    `;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ Network error: ${error.message}</p>`;
+            }
+        }
+        async function testRepoAccess() {
+            const token = document.getElementById('github-token').value;
+            const resultDiv = document.getElementById('repo-result');
+            if (!token) {
+                resultDiv.innerHTML = '<p class="error">❌ Please enter a GitHub token first</p>';
+                return;
+            }
+            resultDiv.innerHTML = '<p class="info">🔄 Testing repository access...</p>';
+            try {
+                const response = await fetch('https://api.github.com/repos/CaPaCaptain/VvvebJs_huggingface_db_01', {
+                    headers: {
+                        'Authorization': `token ${token}`,
+                        'User-Agent': 'VvvebJs-Test'
+                    }
+                });
+                if (response.ok) {
+                    const repo = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="success">✅ Repository access successful!</p>
+                        <p>Repository: ${repo.full_name}</p>
+                        <p>Default Branch: ${repo.default_branch}</p>
+                        <p>Private: ${repo.private ? 'Yes' : 'No'}</p>
+                        <p>Permissions: ${JSON.stringify(repo.permissions || {})}</p>
+                    `;
+                } else {
+                    const error = await response.json();
+                    resultDiv.innerHTML = `
+                        <p class="error">❌ Repository access failed!</p>
+                        <p>Status: ${response.status}</p>
+                        <p>Error: ${error.message || 'Unknown error'}</p>
+                    `;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ Network error: ${error.message}</p>`;
+            }
+        }
+        async function testFileList() {
+            const resultDiv = document.getElementById('file-result');
+            resultDiv.innerHTML = '<p class="info">🔄 Testing file list...</p>';
+            try {
+                const response = await fetch('save.php?action=listFiles');
+                const data = await response.json();
+                resultDiv.innerHTML = `
+                    <h3>File List Result:</h3>
+                    <pre>${JSON.stringify(data, null, 2)}</pre>
+                `;
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ Error: ${error.message}</p>`;
+            }
+        }
+        async function testFileSave() {
+            const resultDiv = document.getElementById('file-result');
+            resultDiv.innerHTML = '<p class="info">🔄 Testing file save...</p>';
+            const testHtml = `<!DOCTYPE html>
+<html>
+<head><title>Test Page</title></head>
+<body><h1>Test Page Created at ${new Date().toISOString()}</h1></body>
+</html>`;
+            try {
+                const formData = new FormData();
+                formData.append('html', testHtml);
+                formData.append('file', 'test-page.html');
+                const response = await fetch('save.php', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.text();
+                resultDiv.innerHTML = `
+                    <h3>File Save Result:</h3>
+                    <pre>${result}</pre>
+                `;
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ Error: ${error.message}</p>`;
+            }
+        }
+        async function getDebugInfo() {
+            const resultDiv = document.getElementById('debug-result');
+            resultDiv.innerHTML = '<p class="info">🔄 Getting debug info...</p>';
+            try {
+                const response = await fetch('save.php?action=checkAuth');
+                const data = await response.json();
+                resultDiv.innerHTML = `
+                    <h3>Current Status:</h3>
+                    <pre>${JSON.stringify(data, null, 2)}</pre>
+                `;
+            } catch (error) {
+                resultDiv.innerHTML = `<p class="error">❌ Error: ${error.message}</p>`;
+            }
+        }
+        async function saveToken() {
+            const token = document.getElementById('github-token').value;
+            const resultDiv = document.getElementById('token-result');
+            if (!token) {
+                resultDiv.innerHTML = '<p class="error">❌ Please enter a GitHub token</p>';
+                return;
+            }
+            // This would require a separate PHP endpoint to update the .env file
+            resultDiv.innerHTML = `
+                <p class="warning">⚠️ Manual Configuration Required</p>
+                <p>Please manually update your .env file with:</p>
+                <pre>GITHUB_TOKEN=${token}</pre>
+                <p>Or use the configuration interface in config.php</p>
+            `;
+        }
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -3,8 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VvvebJs - Visual Website Builder</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -12,212 +11,169 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         .login-container {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
             padding: 40px;
-            min-width: 400px;
-            backdrop-filter: blur(10px);
         }
-        .login-header {
             text-align: center;
             margin-bottom: 30px;
         }
-        .login-header h1 {
             color: #333;
-            font-weight: 600;
             margin-bottom: 10px;
         }
-        .login-header p {
             color: #666;
-            margin: 0;
         }
-        .form-control {
-            border-radius: 10px;
-            padding: 12px 16px;
-            border: 2px solid #e1e5e9;
             margin-bottom: 20px;
         }
         .form-control:focus {
             border-color: #667eea;
-            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
         }
         .btn-login {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: none;
-            border-radius: 10px;
             padding: 12px;
-            font-weight: 600;
             color: white;
-            width: 100%;
-            margin-top: 10px;
         }
         .btn-login:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
-            color: white;
-        }
-        .alert {
-            border-radius: 10px;
-            margin-bottom: 20px;
-        }
-        .features {
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #e1e5e9;
-        }
-        .features h6 {
-            color: #333;
-            margin-bottom: 15px;
-        }
-        .features ul {
-            color: #666;
-            font-size: 14px;
-        }
-        .features ul li {
-            margin-bottom: 8px;
         }
     </style>
 </head>
 <body>
     <div class="login-container">
-        <div class="login-header">
-            <h1>🎨 VvvebJs Editor</h1>
-            <p>请登录以继续使用可视化网站编辑器</p>
         </div>
-        <div id="alert-container"></div>
         <form id="loginForm">
             <div class="form-group">
-                <label for="username" class="form-label">用户名</label>
-                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
             </div>
             <div class="form-group">
-                <label for="password" class="form-label">密码</label>
-                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
             </div>
-            <button type="submit" class="btn btn-login">
-                <span id="loginText">登录</span>
-                <span id="loginSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
-            </button>
         </form>
-        <div class="features">
-            <h6>🚀 主要功能</h6>
-            <ul>
-                <li>🎨 可视化拖拽编辑器</li>
-                <li>📱 Bootstrap 5 响应式组件</li>
-                <li>💾 GitHub 云端存储，数据按用户隔离</li>
-                <li>🔄 实时保存，多实例同步</li>
-                <li>🔒 用户权限隔离，只能访问自己的文件</li>
-            </ul>
-        </div>
     </div>
     <script>
-        // Check if already logged in
-        window.onload = function() {
-            fetch('user-manager.php', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: 'action=check_login'
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.logged_in) {
-                    // Already logged in, redirect to editor
-                    window.location.href = 'editor.html';
-                }
-            })
-            .catch(error => {
-                console.log('Auth check failed:', error);
-            });
-        };
-        function showAlert(message, type = 'danger') {
-            const alertContainer = document.getElementById('alert-container');
-            alertContainer.innerHTML = `
-                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
-                    ${message}
-                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-                </div>
-            `;
-        }
-        function setLoading(loading) {
-            const loginText = document.getElementById('loginText');
-            const loginSpinner = document.getElementById('loginSpinner');
-            const submitBtn = document.querySelector('.btn-login');
-            if (loading) {
-                loginText.classList.add('d-none');
-                loginSpinner.classList.remove('d-none');
-                submitBtn.disabled = true;
-            } else {
-                loginText.classList.remove('d-none');
-                loginSpinner.classList.add('d-none');
-                submitBtn.disabled = false;
-            }
-        }
         document.getElementById('loginForm').addEventListener('submit', async function(e) {
             e.preventDefault();
-            const username = document.getElementById('username').value;
-            const password = document.getElementById('password').value;
-            if (!username || !password) {
-                showAlert('请填写用户名和密码');
-                return;
-            }
-            setLoading(true);
             try {
                 const response = await fetch('user-manager.php', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                    },
-                    body: `action=login&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
                 });
-                const result = await response.json();
-                if (result.success) {
-                    showAlert('登录成功！正在跳转...', 'success');
                     setTimeout(() => {
                         window.location.href = 'editor.html';
                     }, 1000);
                 } else {
-                    showAlert(result.message || '登录失败');
-                    setLoading(false);
                 }
             } catch (error) {
-                showAlert('网络错误，请重试');
-                setLoading(false);
             }
         });
-        // Auto focus on username field
-        document.getElementById('username').focus();
-        // Allow Enter key to submit
-        document.addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                document.getElementById('loginForm').dispatchEvent(new Event('submit'));
             }
         });
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VvvebJs Editor</title>
     <style>
         body {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             display: flex;
             align-items: center;
             justify-content: center;
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         }
         .login-container {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
             padding: 40px;
+            width: 400px;
+            max-width: 90vw;
         }
+        .header {
             text-align: center;
             margin-bottom: 30px;
+            padding: 20px;
+            border: 2px solid #dc3545;
+            border-radius: 8px;
         }
+        .logo {
+            font-size: 24px;
+            font-weight: bold;
             color: #333;
             margin-bottom: 10px;
         }
+        .logo::before {
+            content: "🎨 ";
+        }
+        .subtitle {
             color: #666;
+            font-size: 14px;
         }
+        .form-group {
             margin-bottom: 20px;
         }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #333;
+            font-weight: 500;
+        }
+        .form-control {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            box-sizing: border-box;
+        }
         .form-control:focus {
+            outline: none;
             border-color: #667eea;
+            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
         }
         .btn-login {
+            width: 100%;
             padding: 12px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s;
         }
         .btn-login:hover {
+            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+        .message {
+            margin-top: 15px;
+            padding: 10px;
+            border-radius: 4px;
+            display: none;
+        }
+        .message.error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        .message.success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
         }
     </style>
 </head>
 <body>
     <div class="login-container">
+        <div class="header">
+            <div class="logo">VvvebJs Editor</div>
+            <div class="subtitle">请登录以继续使用可视化网站编辑器</div>
         </div>
         <form id="loginForm">
             <div class="form-group">
+                <label for="username">用户名</label>
+                <input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名" required>
             </div>
             <div class="form-group">
+                <label for="password">密码</label>
+                <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码" required>
             </div>
+            <button type="submit" class="btn-login">登录</button>
         </form>
+        <div id="message" class="message"></div>
     </div>
     <script>
         document.getElementById('loginForm').addEventListener('submit', async function(e) {
             e.preventDefault();
+            const formData = new FormData(this);
+            formData.append('action', 'login');
+            const messageDiv = document.getElementById('message');
             try {
                 const response = await fetch('user-manager.php', {
                     method: 'POST',
+                    body: formData
                 });
+                const data = await response.json();
+                if (data.success) {
+                    messageDiv.textContent = '登录成功，正在跳转...';
+                    messageDiv.className = 'message success';
+                    messageDiv.style.display = 'block';
                     setTimeout(() => {
                         window.location.href = 'editor.html';
                     }, 1000);
                 } else {
+                    messageDiv.textContent = data.message || '登录失败';
+                    messageDiv.className = 'message error';
+                    messageDiv.style.display = 'block';
                 }
             } catch (error) {
+                messageDiv.textContent = '网络错误，请重试';
+                messageDiv.className = 'message error';
+                messageDiv.style.display = 'block';
             }
         });
+        // 检查是否已登录
+        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';
             }
+        })
+        .catch(error => {
+            console.log('登录状态检查失败:', error);
         });
     </script>
 </body>
 </html>

save.php CHANGED Viewed

@@ -138,15 +138,43 @@ 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':

 	//file manager actions, delete and rename
 	switch ($action) {
 		case 'listFiles':
+			// List files for current user with enhanced error handling
+			try {
+				$files = $storageManager->listFiles();
+				// Enhanced debugging
+				$github = StorageConfig::getGitHubConfig();
+				$debug = [
+					'hasToken' => !empty($github['token']),
+					'owner' => $github['owner'],
+					'repo' => $github['repo'],
+					'branch' => $github['branch'],
+					'path' => $github['path'],
+					'user' => $storageManager->getCurrentUser(),
+					'userPath' => $storageManager->getUserPath()
+				];
+				error_log("GitHub List Files Debug: " . json_encode($debug));
+				error_log("Files found: " . count($files));
+				header('Content-Type: application/json');
+				echo json_encode([
+					'success' => true,
+					'files' => $files,
+					'user' => $storageManager->getCurrentUser(),
+					'userPath' => $storageManager->getUserPath(),
+					'debug' => $debug
+				]);
+			} catch (Exception $e) {
+				error_log("GitHub List Files Error: " . $e->getMessage());
+				header('Content-Type: application/json');
+				echo json_encode([
+					'success' => false,
+					'message' => 'Error loading files: ' . $e->getMessage(),
+					'user' => $storageManager->getCurrentUser(),
+					'files' => []
+				]);
+			}
 			exit;
 		case 'loadFile':

storage.php CHANGED Viewed

@@ -1,7 +1,54 @@
 <?php
 // Configuration management class
 class StorageConfig {
     public static function getUsers() {
         $users = [];
         $i = 1;
         while (true) {
@@ -15,7 +62,9 @@ class StorageConfig {
             $users[$username] = $password;
             $i++;
         }
-        return $users;
     }
     public static function getStorageType() {

 <?php
+// Load environment variables from .env file
+function loadEnv($filePath) {
+    if (!file_exists($filePath)) {
+        return false;
+    }
+    $lines = file($filePath, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        if (strpos(trim($line), '#') === 0) {
+            continue; // Skip comments
+        }
+        list($name, $value) = explode('=', $line, 2);
+        $name = trim($name);
+        $value = trim($value);
+        // Remove quotes if present
+        if (preg_match('/^"(.*)"$/', $value, $matches)) {
+            $value = $matches[1];
+        } elseif (preg_match("/^'(.*)'$/", $value, $matches)) {
+            $value = $matches[1];
+        }
+        if (!array_key_exists($name, $_ENV)) {
+            $_ENV[$name] = $value;
+        }
+    }
+    return true;
+}
+// Load .env file
+if (file_exists(__DIR__ . '/.env')) {
+    loadEnv(__DIR__ . '/.env');
+} else {
+    // Try to load from .env.example as fallback
+    if (file_exists(__DIR__ . '/.env.example')) {
+        loadEnv(__DIR__ . '/.env.example');
+    }
+}
 // Configuration management class
 class StorageConfig {
     public static function getUsers() {
+        // Default users if no env variables found
+        $defaultUsers = [
+            'PS01' => 'password123',
+            'PS02' => 'password456',
+            'admin' => 'admin123'
+        ];
         $users = [];
         $i = 1;
         while (true) {
             $users[$username] = $password;
             $i++;
         }
+        // If no users found in env, use defaults
+        return empty($users) ? $defaultUsers : $users;
     }
     public static function getStorageType() {