ASF_tools/asf-cloud-server/TBM_devbench/views/admin.ejs

<%- include('layout', { body: `
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-cogs"></i> Admin Dashboard</h2>
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addUserModal">
        <i class="fas fa-user-plus"></i> Add User
    </button>
</div>

<!-- Users Section -->
<div class="card mb-4">
    <div class="card-header">
        <h5><i class="fas fa-users"></i> Users Management</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Email</th>
                        <th>DevBenches</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${users.map(user => `
                        <tr>
                            <td>${user.username}</td>
                            <td>${user.email}</td>
                            <td><span class="badge bg-info">${user.devbench_count}</span></td>
                            <td>${new Date(user.created_at).toLocaleDateString()}</td>
                            <td>
                                <button class="btn btn-sm btn-warning" onclick="resetPassword(${user.id})">
                                    <i class="fas fa-key"></i> Reset Password
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="deleteUser(${user.id})">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- DevBenches Section -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5><i class="fas fa-server"></i> All DevBenches</h5>
        <small class="text-light"><i class="fas fa-info-circle"></i> Default SSH/VNC Password: <strong>ASF</strong></small>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>DevBench Name</th>
                        <th>Actual Name</th>
                        <th>Status</th>
                        <th>SSH Port</th>
                        <th>VNC Port</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${devbenches.map(db => `
                        <tr>
                            <td>${db.username}</td>
                            <td>${db.name}</td>
                            <td>${db.actual_name || 'N/A'}</td>
                            <td>
                                <span id="status-${db.id}" class="badge bg-${db.status === 'active' ? 'success' : db.status === 'creating' ? 'warning' : 'danger'}">
                                    ${db.status}
                                </span>
                            </td>
                            <td>${db.ssh_info || 'N/A'}</td>
                            <td>${db.vnc_info || 'N/A'}</td>
                            <td>${new Date(db.created_at).toLocaleDateString()}</td>
                            <td>
                                <button class="btn btn-sm btn-danger" onclick="adminDeleteDevbench(${db.id})">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addUserForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newUsername" class="form-label">Username</label>
                        <input type="text" class="form-control" id="newUsername" name="username" required 
                               pattern="[a-zA-Z]+" title="Username must contain only letters">
                        <div class="form-text">Username must contain only letters (no spaces, numbers, or special characters)</div>
                    </div>
                    <div class="mb-3">
                        <label for="newEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="newEmail" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">Initial Password</label>
                        <input type="password" class="form-control" id="newPassword" name="password" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Add User</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('addUserForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    try {
        const response = await fetch('/admin/add-user', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(Object.fromEntries(formData))
        });
        
        const result = await response.json();
        
        if (result.success) {
            location.reload();
        } else {
            alert(result.error);
        }
    } catch (error) {
        alert('Error adding user');
    }
});

async function deleteUser(userId) {
    if (confirm('Are you sure you want to delete this user and all their DevBenches?')) {
        try {
            const response = await fetch(\`/admin/delete-user/\${userId}\`, { method: 'POST' });
            const result = await response.json();
            
            if (result.success) {
                location.reload();
            } else {
                alert(result.error);
            }
        } catch (error) {
            alert('Error deleting user');
        }
    }
}

async function resetPassword(userId) {
    const newPassword = prompt('Enter new password:');
    if (newPassword) {
        try {
            const response = await fetch(\`/admin/reset-password/\${userId}\`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ newPassword })
            });
            
            const result = await response.json();
            
            if (result.success) {
                alert('Password reset successfully');
            } else {
                alert(result.error);
            }
        } catch (error) {
            alert('Error resetting password');
        }
    }
}

async function adminDeleteDevbench(devbenchId) {
    if (confirm('Are you sure you want to delete this DevBench?')) {
        try {
            const response = await fetch(\`/delete-devbench/\${devbenchId}\`, { method: 'POST' });
            const result = await response.json();
            
            if (result.success) {
                location.reload();
            } else {
                alert(result.error);
            }
        } catch (error) {
            alert('Error deleting DevBench');
        }
    }
}
</script>
`, username: typeof username !== 'undefined' ? username : 'admin' }) %>