| <!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>
|
|
|
|
|
| <div id="renameModal" class="modal">
|
| <div class="modal-content">
|
| <div class="modal-header">
|
| <h4>Rename File</h4>
|
| <span class="close" onclick="closeModal('renameModal')">×</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>
|
|
|
|
|
| <div id="deleteModal" class="modal">
|
| <div class="modal-content">
|
| <div class="modal-header">
|
| <h4>Delete File</h4>
|
| <span class="close" onclick="closeModal('deleteModal')">×</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 = '';
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| checkAuthenticationAndInit();
|
| });
|
|
|
| async function checkAuthenticationAndInit() {
|
| try {
|
| const response = await fetch('save.php?action=checkAuth');
|
| if (response.status === 401) {
|
|
|
| window.location.href = 'index.html';
|
| return;
|
| }
|
|
|
| const data = await response.json();
|
| if (!data.authenticated) {
|
|
|
| window.location.href = 'index.html';
|
| return;
|
| }
|
|
|
|
|
| loadUserInfo();
|
| loadFileList();
|
| } catch (error) {
|
| console.error('Auth check failed:', error);
|
|
|
| window.location.href = 'index.html';
|
| }
|
| }
|
|
|
| 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);
|
| }
|
|
|
|
|
| window.onclick = function(event) {
|
| const modals = document.querySelectorAll('.modal');
|
| modals.forEach(modal => {
|
| if (event.target === modal) {
|
| modal.style.display = 'none';
|
| }
|
| });
|
| }
|
| </script>
|
| </body>
|
| </html> |
