Updates design of config page, adds ajax

main
Yasen Pramatarov 2025-01-23 12:42:27 +02:00
parent 1f75f81297
commit ffe08f913b
6 changed files with 310 additions and 1520 deletions

View File

@ -3,15 +3,15 @@
/**
* class Config
*
* Handles editing and fetching configuration files.
* Handles editing and fetching ot the config files.
*/
class Config {
/**
* Edits a configuration file by updating specified options.
* Edits a config file by updating specified options.
*
* @param array $updatedConfig Key-value pairs of configuration options to update.
* @param string $config_file Path to the configuration file.
* @param array $updatedConfig Key-value pairs of config options to update.
* @param string $config_file Path to the config file.
*
* @return mixed Returns true on success, or an error message on failure.
*/
@ -50,104 +50,6 @@ class Config {
return true;
}
/**
* Loads the config.js file from the Jitsi server.
*
* @param string $jitsiUrl The base URL of the Jitsi server.
* @param bool $raw Whether to return the full file (true) or only uncommented values (false).
*
* @return string The content of the config.js file or an error message.
*/
public function getPlatformConfigjs($jitsiUrl, $raw = false) {
// constructing the URL
$configjsFile = $jitsiUrl . '/config.js';
// default content, if we can't get the file contents
$platformConfigjs = "The file $configjsFile can't be loaded.";
// ssl options
$contextOptions = [
'ssl' => [
'verify_peer' => true,
'verify_peer_name' => true,
],
];
$context = stream_context_create($contextOptions);
// get the file
$fileContent = @file_get_contents($configjsFile, false, $context);
if ($fileContent !== false) {
// when we need only uncommented values
if ($raw === false) {
// remove block comments
$platformConfigjs = preg_replace('!/\*.*?\*/!s', '', $fileContent);
// remove single-line comments
$platformConfigjs = preg_replace('/\/\/[^\n]*/', '', $platformConfigjs);
// remove empty lines
$platformConfigjs = preg_replace('/^\s*[\r\n]/m', '', $platformConfigjs);
// when we need the full file as it is
} else {
$platformConfigjs = $fileContent;
}
}
return $platformConfigjs;
}
/**
* Loads the interface_config.js file from the Jitsi server.
*
* @param string $jitsiUrl The base URL of the Jitsi server.
* @param bool $raw Whether to return the full file (true) or only uncommented values (false).
*
* @return string The content of the interface_config.js file or an error message.
*/
public function getPlatformInterfaceConfigjs($jitsiUrl, $raw = false) {
// constructing the URL
$interfaceConfigjsFile = $jitsiUrl . '/interface_config.js';
// default content, if we can't get the file contents
$platformInterfaceConfigjs = "The file $interfaceConfigjsFile can't be loaded.";
// ssl options
$contextOptions = [
'ssl' => [
'verify_peer' => true,
'verify_peer_name' => true,
],
];
$context = stream_context_create($contextOptions);
// get the file
$fileContent = @file_get_contents($interfaceConfigjsFile, false, $context);
if ($fileContent !== false) {
// when we need only uncommented values
if ($raw === false) {
// remove block comments
$platformInterfaceConfigjs = preg_replace('!/\*.*?\*/!s', '', $fileContent);
// remove single-line comments
$platformInterfaceConfigjs = preg_replace('/\/\/[^\n]*/', '', $platformInterfaceConfigjs);
// remove empty lines
$platformInterfaceConfigjs = preg_replace('/^\s*[\r\n]/m', '', $platformInterfaceConfigjs);
// when we need the full file as it is
} else {
$platformInterfaceConfigjs = $fileContent;
}
}
return $platformInterfaceConfigjs;
}
}
?>

View File

@ -1,205 +1,92 @@
<?php
/**
* Configuration management.
* Config management.
*
* This page ("config") handles configuration by adding, editing, and deleting platforms,
* hosts, agents, and the configuration file itself.
* This page handles the config file.
*/
// Get any new messages
include '../app/includes/messages.php';
include '../app/includes/messages-show.php';
$action = $_REQUEST['action'] ?? '';
$agent = $_REQUEST['agent'] ?? '';
$host = $_REQUEST['host'] ?? '';
require '../app/classes/config.php';
require '../app/classes/host.php';
require '../app/classes/agent.php';
$configObject = new Config();
$hostObject = new Host($dbWeb);
$agentObject = new Agent($dbWeb);
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
/**
* Handles form submissions from editing
*/
// For AJAX requests
$isAjax = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
// Get hash from URL if present
$hash = parse_url($_SERVER['REQUEST_URI'], PHP_URL_FRAGMENT) ?? '';
$redirectUrl = htmlspecialchars($app_root) . '?page=config';
if ($hash) {
$redirectUrl .= '#' . $hash;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Ensure no output before this point
ob_clean();
// For AJAX requests, get JSON data
if ($isAjax) {
header('Content-Type: application/json');
// Get raw input
$jsonData = file_get_contents('php://input');
$postData = json_decode($jsonData, true);
if (json_last_error() !== JSON_ERROR_NONE) {
Messages::flash('ERROR', 'DEFAULT', 'Invalid JSON data received', true);
echo json_encode([
'success' => false,
'message' => 'Invalid JSON data received'
]);
exit;
}
// editing the config file
if (isset($_POST['item']) && $_POST['item'] === 'config_file') {
// check if file is writable
// Check if file is writable
if (!is_writable($config_file)) {
$_SESSION['error'] = "Configuration file is not writable.";
Messages::flash('ERROR', 'DEFAULT', 'Config file is not writable', true);
echo json_encode([
'success' => false,
'message' => 'Config file is not writable'
]);
exit;
}
// Try to update config file
$result = $configObject->editConfigFile($postData, $config_file);
if ($result === true) {
$messageData = Messages::getMessageData('NOTICE', 'DEFAULT', 'Config file updated successfully', true);
echo json_encode([
'success' => true,
'message' => 'Config file updated successfully',
'messageData' => $messageData
]);
} else {
$messageData = Messages::getMessageData('ERROR', 'DEFAULT', "Error updating config file: $result", true);
echo json_encode([
'success' => false,
'message' => "Error updating config file: $result",
'messageData' => $messageData
]);
}
exit;
}
// Handle non-AJAX POST
if (!is_writable($config_file)) {
Messages::flash('ERROR', 'DEFAULT', 'Config file is not writable', true);
} else {
$result = $configObject->editConfigFile($_POST, $config_file);
if ($result === true) {
$_SESSION['notice'] = "The config file is edited.";
Messages::flash('NOTICE', 'DEFAULT', 'Config file updated successfully', true);
} else {
$_SESSION['error'] = "Editing the config file failed. Error: $result";
Messages::flash('ERROR', 'DEFAULT', "Error updating config file: $result", true);
}
}
header('Location: ' . $redirectUrl);
header('Location: ' . htmlspecialchars($app_root) . '?page=config');
exit;
// host operations
} elseif (isset($_POST['item']) && $_POST['item'] === 'host') {
if (isset($_POST['delete']) && $_POST['delete'] === 'true') { // This is a host delete
$host_id = $_POST['host'];
$result = $hostObject->deleteHost($host_id);
if ($result === true) {
$_SESSION['notice'] = "Host deleted successfully.";
} else {
$_SESSION['error'] = "Deleting the host failed. Error: $result";
}
} else if (!isset($_POST['host'])) { // This is a new host
$newHost = [
'address' => $_POST['address'],
'platform_id' => $_POST['platform'],
'name' => empty($_POST['name']) ? $_POST['address'] : $_POST['name'],
];
$result = $hostObject->addHost($newHost);
if ($result === true) {
$_SESSION['notice'] = "New Jilo host added.";
} else {
$_SESSION['error'] = "Adding the host failed. Error: $result";
}
} else { // This is an edit of existing host
$host_id = $_POST['host'];
$platform_id = $_POST['platform'];
$updatedHost = [
'id' => $host_id,
'address' => $_POST['address'],
'name' => empty($_POST['name']) ? $_POST['address'] : $_POST['name'],
];
$result = $hostObject->editHost($platform_id, $updatedHost);
if ($result === true) {
$_SESSION['notice'] = "Host edited.";
} else {
$_SESSION['error'] = "Editing the host failed. Error: $result";
}
}
header('Location: ' . $redirectUrl);
exit;
// agent operations
} elseif (isset($_POST['item']) && $_POST['item'] === 'agent') {
if (isset($_POST['delete']) && $_POST['delete'] === 'true') { // This is an agent delete
$agent_id = $_POST['agent'];
$result = $agentObject->deleteAgent($agent_id);
if ($result === true) {
$_SESSION['notice'] = "Agent deleted successfully.";
} else {
$_SESSION['error'] = "Deleting the agent failed. Error: $result";
}
} else if (isset($_POST['new']) && $_POST['new'] === 'true') { // This is a new agent
$newAgent = [
'type_id' => $_POST['type'],
'url' => $_POST['url'],
'secret_key' => empty($_POST['secret_key']) ? null : $_POST['secret_key'],
'check_period' => empty($_POST['check_period']) ? 0 : $_POST['check_period'],
];
$result = $agentObject->addAgent($_POST['host'], $newAgent);
if ($result === true) {
$_SESSION['notice'] = "New Jilo agent added.";
} else {
$_SESSION['error'] = "Adding the agent failed. Error: $result";
}
} else { // This is an edit of existing agent
$agent_id = $_POST['agent'];
$updatedAgent = [
'agent_type_id' => $_POST['agent_type_id'],
'url' => $_POST['url'],
'secret_key' => empty($_POST['secret_key']) ? null : $_POST['secret_key'],
'check_period' => empty($_POST['check_period']) ? 0 : $_POST['check_period'],
];
$result = $agentObject->editAgent($agent_id, $updatedAgent);
if ($result === true) {
$_SESSION['notice'] = "Agent edited.";
} else {
$_SESSION['error'] = "Editing the agent failed. Error: $result";
}
}
header('Location: ' . $redirectUrl);
exit;
// platform operations
} elseif (isset($_POST['item']) && $_POST['item'] === 'platform') {
if (isset($_POST['delete']) && $_POST['delete'] === 'true') { // This is a platform delete
$platform_id = $_POST['platform'];
$result = $platformObject->deletePlatform($platform_id);
if ($result === true) {
$_SESSION['notice'] = "Platform deleted successfully.";
} else {
$_SESSION['error'] = "Deleting the platform failed. Error: $result";
}
} else if (!isset($_POST['platform'])) { // This is a new platform
$newPlatform = [
'name' => $_POST['name'],
'jitsi_url' => $_POST['jitsi_url'],
'jilo_database' => $_POST['jilo_database'],
];
$result = $platformObject->addPlatform($newPlatform);
if ($result === true) {
$_SESSION['notice'] = "New Jitsi platform added.";
} else {
$_SESSION['error'] = "Adding the platform failed. Error: $result";
}
} else { // This is an edit of existing platform
$platform_id = $_POST['platform'];
$updatedPlatform = [
'id' => $platform_id,
'name' => $_POST['name'],
'jitsi_url' => $_POST['jitsi_url'],
'jilo_database' => $_POST['jilo_database'],
];
$result = $platformObject->editPlatform($updatedPlatform);
if ($result === true) {
$_SESSION['notice'] = "Platform edited.";
} else {
$_SESSION['error'] = "Editing the platform failed. Error: $result";
}
}
header('Location: ' . $redirectUrl);
exit;
}
} else {
/**
* Handles GET requests to display templates.
*/
switch ($item) {
case 'config_file':
if (isset($action) && $action === 'edit') {
include '../app/templates/config-configfile-edit.php';
} else {
if ($userObject->hasRight($user_id, 'view config file')) {
include '../app/templates/config-configfile.php';
} else {
include '../app/templates/error-unauthorized.php';
}
}
break;
default:
if ($userObject->hasRight($user_id, 'view config file')) {
$jilo_agent_types = $agentObject->getAgentTypes();
include '../app/templates/config-jilo.php';
} else {
include '../app/templates/error-unauthorized.php';
}
}
}
// Only include template for non-AJAX requests
if (!$isAjax) {
include '../app/templates/config.php';
}
?>

View File

@ -1,27 +0,0 @@
<!-- widget "config file" -->
<div class="card text-center w-75 mx-lef">
<p class="h4 card-header">Jilo configuration file :: edit</p>
<div class="card-body">
<div class="card-text">
<p class="text-danger"><strong>this may break everything, use with extreme caution</strong></p>
</div>
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=config&item=config_file">
<?php
include '../app/helpers/render.php';
editConfig($config, '0');
echo "\n";
?>
<p class="text-danger"><strong>this may break everything, use with extreme caution</strong></p>
<br />
<input type="hidden" name="item" value="config_file" />
<a class="btn btn-outline-secondary btn-sm" href="<?= htmlspecialchars($app_root) ?>?page=config&item=config_file" />Cancel</a>
&nbsp;&nbsp;
<input type="submit" class="btn btn-danger btn-sm" value="Save" />
</form>
</div>
</div>
<!-- /widget "config file" -->

View File

@ -1,17 +0,0 @@
<!-- widget "config file" -->
<div class="card text-center w-75 mx-lef">
<p class="h4 card-header">Jilo configuration file</p>
<div class="card-body">
<?php
include '../app/helpers/render.php';
renderConfig($config, '0');
echo "\n";
?>
<br />
<a class="btn btn-outline-danger btn-sm" href="<?= htmlspecialchars($app_root) ?>?page=config&item=config_file&action=edit" />Edit</a>
</div>
</div>
<!-- /widget "config file" -->

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,240 @@
<!-- config file -->
<div class="container-fluid mt-2">
<div id="messages-container"></div>
<div class="row mb-4">
<div class="col-12 mb-4">
<h2>Configuration</h2>
</div>
</div>
<div class="card shadow-sm">
<div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
<h5 class="card-title mb-0">
<i class="fas fa-wrench me-2 text-secondary"></i>
Jilo Web app configuration
</h5>
<?php if ($userObject->hasRight($user_id, 'edit config file')): ?>
<div>
<button type="button" class="btn btn-outline-primary btn-sm toggle-edit">
<i class="fas fa-edit me-2"></i>Edit
</button>
<div class="edit-controls d-none">
<button type="button" class="btn btn-danger btn-sm save-config">
<i class="fas fa-save me-2"></i>Save
</button>
<button type="button" class="btn btn-outline-secondary btn-sm ms-2 cancel-edit">
Cancel
</button>
</div>
</div>
<?php endif; ?>
</div>
<div class="card-body p-4">
<form id="configForm">
<?php
function renderConfigItem($key, $value, $path = '') {
$fullPath = $path ? $path . '[' . $key . ']' : $key;
// Only capitalize first letter, not every word
$displayName = ucfirst(str_replace('_', ' ', $key));
if (is_array($value)) {
echo '<div class="config-section mb-4">';
echo '<h6 class="border-bottom pb-2 mb-3">' . htmlspecialchars($displayName) . '</h6>';
echo '<div class="ps-4">';
foreach ($value as $subKey => $subValue) {
renderConfigItem($subKey, $subValue, $fullPath);
}
echo '</div>';
echo '</div>';
} else {
?>
<div class="config-item row mb-3 align-items-center">
<div class="col-md-4 text-end">
<label class="form-label mb-0"><?= htmlspecialchars($displayName) ?></label>
</div>
<div class="col-md-8">
<div class="view-mode">
<?php if (is_bool($value) || $key === 'registration_enabled'): ?>
<span class="badge <?= $value ? 'bg-success' : 'bg-secondary' ?>">
<?= $value ? 'Enabled' : 'Disabled' ?>
</span>
<?php elseif ($key === 'environment'): ?>
<span class="badge <?= $value === 'production' ? 'bg-danger' : 'bg-info' ?>">
<?= htmlspecialchars($value) ?>
</span>
<?php else: ?>
<?php if (empty($value) && $value !== '0'): ?>
<span class="text-muted fst-italic">blank</span>
<?php else: ?>
<span class="text-body">
<?= htmlspecialchars($value) ?>
</span>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="edit-mode d-none">
<?php if (is_bool($value) || $key === 'registration_enabled'): ?>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox"
name="<?= htmlspecialchars($fullPath) ?>"
<?= $value ? 'checked' : '' ?>>
</div>
<?php elseif ($key === 'environment'): ?>
<select class="form-select form-select-sm" name="<?= htmlspecialchars($fullPath) ?>">
<option value="development" <?= $value === 'development' ? 'selected' : '' ?>>Development</option>
<option value="production" <?= $value === 'production' ? 'selected' : '' ?>>Production</option>
</select>
<?php else: ?>
<input type="text" class="form-control form-control-sm"
name="<?= htmlspecialchars($fullPath) ?>"
value="<?= htmlspecialchars($value ?? '') ?>">
<?php endif; ?>
</div>
</div>
</div>
<?php
}
}
foreach ($config as $key => $value) {
renderConfigItem($key, $value);
}
?>
</form>
</div>
</div>
</div>
<script>
$(function() {
function showMessage(messageData) {
const dismissClass = messageData.dismissible ? ' alert-dismissible fade show' : '';
const dismissButton = messageData.dismissible ?
`<button type="button" class="btn-close${messageData.small ? ' btn-close-sm' : ''}" data-bs-dismiss="alert" aria-label="Close"></button>` : '';
const smallClass = messageData.small ? ' alert-sm' : '';
const $alert = $('<div>')
.addClass(`alert alert-${messageData.type}${dismissClass}${smallClass}`)
.attr('role', 'alert')
.html(`${messageData.message}${dismissButton}`);
$('#messages-container').html($alert);
if (messageData.dismissible) {
setTimeout(() => {
$alert.alert('close');
}, 5000);
}
}
// Toggle edit mode
$('.toggle-edit').click(function() {
$(this).hide();
$('.edit-controls').removeClass('d-none');
$('.view-mode').hide();
$('.edit-mode').removeClass('d-none');
});
// Cancel edit
$('.cancel-edit').click(function() {
$('.toggle-edit').show();
$('.edit-controls').addClass('d-none');
$('.view-mode').show();
$('.edit-mode').addClass('d-none');
});
// Save config
$('.save-config').click(function() {
const $btn = $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Saving...');
// Build form data object
const data = {};
// Handle text inputs
$('#configForm input[type="text"]').each(function() {
const name = $(this).attr('name');
data[name] = $(this).val();
});
// Handle checkboxes
$('#configForm input[type="checkbox"]').each(function() {
const name = $(this).attr('name');
data[name] = $(this).prop('checked') ? '1' : '0';
});
// Handle selects
$('#configForm select').each(function() {
const name = $(this).attr('name');
data[name] = $(this).val();
});
fetch('<?= htmlspecialchars($app_root) ?>?page=config', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(response => {
if (response.success) {
// Update view mode values
Object.entries(data).forEach(([key, value]) => {
const $item = $(`[name="${key}"]`).closest('.config-item');
const $viewMode = $item.find('.view-mode');
if ($item.length) {
if ($item.find('input[type="checkbox"]').length) {
// Boolean value
const isEnabled = value === '1';
$viewMode.html(`
<span class="badge ${isEnabled ? 'bg-success' : 'bg-secondary'}">
${isEnabled ? 'Enabled' : 'Disabled'}
</span>
`);
} else if ($item.find('select').length) {
// Environment value
$viewMode.html(`
<span class="badge ${value === 'production' ? 'bg-danger' : 'bg-info'}">
${value}
</span>
`);
} else {
// Text value
if (value === '') {
$viewMode.html('<span class="text-muted fst-italic">blank</span>');
} else {
$viewMode.html(`<span class="text-body">${value}</span>`);
}
}
}
});
// Exit edit mode
$('.toggle-edit').show();
$('.edit-controls').addClass('d-none');
$('.view-mode').show();
$('.edit-mode').addClass('d-none');
}
// Show message
if (response.messageData) {
showMessage(response.messageData);
}
$btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i>Save');
})
.catch(error => {
showMessage({
type: 'danger',
message: 'Error saving config: ' + error,
dismissible: true
});
$btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i>Save');
});
});
});
</script>
<!-- /config file -->