From b2fcaf6793f2f274f4b8de1cb748482a4fb47ede Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Fri, 17 Jan 2025 16:08:37 +0200
Subject: [PATCH] HTML fixes

---
 app/pages/status.php              | 13 +++----
 app/templates/security.php        | 58 +++++++++++++++----------------
 app/templates/status-agent.php    | 31 ++++++++++-------
 app/templates/status-platform.php | 28 +++++++++------
 app/templates/status-server.php   | 39 ++++++++++++---------
 5 files changed, 95 insertions(+), 74 deletions(-)

diff --git a/app/pages/status.php b/app/pages/status.php
index beaf2c0..d79e232 100644
--- a/app/pages/status.php
+++ b/app/pages/status.php
@@ -23,9 +23,9 @@ foreach ($platformsAll as $platform) {
     // check if we can connect to the jilo database
     $response = connectDB($config, 'jilo', $platform['jilo_database'], $platform['id']);
     if ($response['error'] !== null) {
-        $jilo_database_status = '<span class="text-danger">' . htmlspecialchars($response['error']) . '</span>';
+        $jilo_database_status = $response['error'];
     } else {
-        $jilo_database_status = '<span class="text-success">OK</span>';
+        $jilo_database_status = 'OK';
     }
 
     include '../app/templates/status-platform.php';
@@ -44,19 +44,19 @@ foreach ($platformsAll as $platform) {
 
         // determine agent availability based on response data
         if (json_last_error() === JSON_ERROR_NONE) {
-            $agent_availability = '<span class="text-warning">unknown</span>';
+            $agent_availability = 'unknown';
             foreach ($agent_data as $key => $value) {
                 if ($key === 'error') {
-                    $agent_availability = '<span class="text-danger">' . htmlspecialchars($value) . '</span>';
+                    $agent_availability = $value;
                     break;
                 }
                 if (preg_match('/_state$/', $key)) {
                     if ($value === 'error') {
-                        $agent_availability = '<span class="text-danger">not running</span>';
+                        $agent_availability = 'not running';
                         break;
                     }
                     if ($value === 'running') {
-                        $agent_availability = '<span class="text-success">running</span>';
+                        $agent_availability = 'running';
                         break;
                     }
                 }
@@ -66,6 +66,7 @@ foreach ($platformsAll as $platform) {
         }
 
         include '../app/templates/status-agent.php';
+        echo '</div>';
     }
 }
 
diff --git a/app/templates/security.php b/app/templates/security.php
index 861426b..b897c4e 100644
--- a/app/templates/security.php
+++ b/app/templates/security.php
@@ -1,22 +1,22 @@
-<!-- Security Settings -->
-<div class="container">
+<!-- security settings -->
+<div class="container-fluid mt-2">
     <div class="row mb-4">
         <div class="col">
-            <h2>Security Settings</h2>
+            <h2>Security settings</h2>
             <ul class="nav nav-tabs">
                 <?php if ($userObject->hasRight($user_id, 'superuser') || $userObject->hasRight($user_id, 'edit whitelist')) { ?>
                 <li class="nav-item">
-                    <a class="nav-link <?= $section === 'whitelist' ? 'active' : '' ?>" href="?page=security&section=whitelist">IP Whitelist</a>
+                    <a class="nav-link <?= $section === 'whitelist' ? 'active' : '' ?>" href="?page=security&section=whitelist">IP whitelist</a>
                 </li>
                 <?php } ?>
                 <?php if ($userObject->hasRight($user_id, 'superuser') || $userObject->hasRight($user_id, 'edit blacklist')) { ?>
                 <li class="nav-item">
-                    <a class="nav-link <?= $section === 'blacklist' ? 'active' : '' ?>" href="?page=security&section=blacklist">IP Blacklist</a>
+                    <a class="nav-link <?= $section === 'blacklist' ? 'active' : '' ?>" href="?page=security&section=blacklist">IP blacklist</a>
                 </li>
                 <?php } ?>
                 <?php if ($userObject->hasRight($user_id, 'superuser') || $userObject->hasRight($user_id, 'edit ratelimiting')) { ?>
                 <li class="nav-item">
-                    <a class="nav-link <?= $section === 'ratelimit' ? 'active' : '' ?>" href="?page=security&section=ratelimit">Rate Limiting</a>
+                    <a class="nav-link <?= $section === 'ratelimit' ? 'active' : '' ?>" href="?page=security&section=ratelimit">Rate limiting</a>
                 </li>
                 <?php } ?>
             </ul>
@@ -24,12 +24,12 @@
     </div>
 
     <?php if ($section === 'whitelist' && ($userObject->hasRight($user_id, 'superuser') || $userObject->hasRight($user_id, 'edit whitelist'))) { ?>
-    <!-- Whitelist Section -->
+    <!-- whitelist section -->
     <div class="row mb-4">
         <div class="col">
             <div class="card">
                 <div class="card-header">
-                    <h3>IP Whitelist</h3>
+                    <h3>IP whitelist</h3>
                     IP addresses and networks that will always bypass the ratelimiting login checks.
                 </div>
                 <div class="card-body">
@@ -37,7 +37,7 @@
                         <input type="hidden" name="action" value="add_whitelist">
                         <div class="row g-3">
                             <div class="col-md-4">
-                                <input type="text" class="form-control" name="ip_address" placeholder="IP Address or CIDR" required>
+                                <input type="text" class="form-control" name="ip_address" placeholder="IP address or CIDR" required>
                             </div>
                             <div class="col-md-4">
                                 <input type="text" class="form-control" name="description" placeholder="Description">
@@ -45,11 +45,11 @@
                             <div class="col-md-2">
                                 <div class="form-check">
                                     <input type="checkbox" class="form-check-input" name="is_network" id="is_network_white">
-                                    <label class="form-check-label" for="is_network_white">Is Network</label>
+                                    <label class="form-check-label" for="is_network_white">is network</label>
                                 </div>
                             </div>
                             <div class="col-md-2">
-                                <button type="submit" class="btn btn-primary">Add to Whitelist</button>
+                                <button type="submit" class="btn btn-primary">Add to whitelist</button>
                             </div>
                         </div>
                     </form>
@@ -57,11 +57,11 @@
                     <table class="table">
                         <thead>
                             <tr>
-                                <th>IP Address</th>
+                                <th>IP address</th>
                                 <th>Network</th>
                                 <th>Description</th>
-                                <th>Added By</th>
-                                <th>Added On</th>
+                                <th>Added by</th>
+                                <th>Added on</th>
                                 <th>Actions</th>
                             </tr>
                         </thead>
@@ -91,12 +91,12 @@
     <?php } ?>
 
     <?php if ($section === 'blacklist' && ($userObject->hasRight($user_id, 'superuser') || $userObject->hasRight($user_id, 'edit blacklist'))) { ?>
-    <!-- Blacklist Section -->
+    <!-- blacklist section -->
     <div class="row mb-4">
         <div class="col">
             <div class="card">
                 <div class="card-header">
-                    <h3>IP Blacklist</h3>
+                    <h3>IP blacklist</h3>
                     IP addresses and networks that will always get blocked at login.
                 </div>
                 <div class="card-body">
@@ -104,7 +104,7 @@
                         <input type="hidden" name="action" value="add_blacklist">
                         <div class="row g-3">
                             <div class="col-md-3">
-                                <input type="text" class="form-control" name="ip_address" placeholder="IP Address or CIDR" required>
+                                <input type="text" class="form-control" name="ip_address" placeholder="IP address or CIDR" required>
                             </div>
                             <div class="col-md-3">
                                 <input type="text" class="form-control" name="reason" placeholder="Reason">
@@ -115,11 +115,11 @@
                             <div class="col-md-2">
                                 <div class="form-check">
                                     <input type="checkbox" class="form-check-input" name="is_network" id="is_network_black">
-                                    <label class="form-check-label" for="is_network_black">Is Network</label>
+                                    <label class="form-check-label" for="is_network_black">is network</label>
                                 </div>
                             </div>
                             <div class="col-md-2">
-                                <button type="submit" class="btn btn-primary">Add to Blacklist</button>
+                                <button type="submit" class="btn btn-primary">Add to blacklist</button>
                             </div>
                         </div>
                     </form>
@@ -127,11 +127,11 @@
                     <table class="table">
                         <thead>
                             <tr>
-                                <th>IP Address</th>
+                                <th>IP address</th>
                                 <th>Network</th>
                                 <th>Reason</th>
-                                <th>Added By</th>
-                                <th>Added On</th>
+                                <th>Added by</th>
+                                <th>Added on</th>
                                 <th>Expires</th>
                                 <th>Actions</th>
                             </tr>
@@ -163,17 +163,17 @@
     <?php } ?>
 
     <?php if ($section === 'ratelimit' && ($userObject->hasRight($user_id, 'superuser') || $userObject->hasRight($user_id, 'edit ratelimiting'))) { ?>
-    <!-- Rate Limiting Section -->
+    <!-- rate limiting section -->
     <div class="row mb-4">
         <div class="col">
             <div class="card">
                 <div class="card-header">
-                    <h3>Rate Limiting Settings</h3>
+                    <h3>Rate limiting settings</h3>
                     Rate limiting settings control how many failed login attempts are allowed before blocking an IP address.
                 </div>
                 <div class="card-body">
                     <div class="alert alert-info">
-                        <h4>Current Settings</h4>
+                        <h4>Current settings</h4>
                         <ul>
                             <li>Maximum login attempts: <?= $rateLimiter->maxAttempts ?></li>
                             <li>Time window: <?= $rateLimiter->decayMinutes ?> minutes</li>
@@ -185,13 +185,13 @@
                         </p>
                     </div>
 
-                    <h4>Recent Failed Login Attempts</h4>
+                    <h4>Recent failed login attempts</h4>
                     <table class="table">
                         <thead>
                             <tr>
-                                <th>IP Address</th>
+                                <th>IP sddress</th>
                                 <th>Username</th>
-                                <th>Attempted At</th>
+                                <th>Attempted at</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -220,4 +220,4 @@
     </div>
     <?php } ?>
 </div>
-<!-- /Security Settings -->
+<!-- /security settings -->
diff --git a/app/templates/status-agent.php b/app/templates/status-agent.php
index e85c4c8..b979e13 100644
--- a/app/templates/status-agent.php
+++ b/app/templates/status-agent.php
@@ -1,14 +1,19 @@
 
-                <!-- jilo agent status -->
-                <div class="card text-center w-75 mx-lef" style="padding-left: 80px;">
-                    <div class="card-body">
-                        <p class="card-text text-left" style="text-align: left;">
-                            Jilo Agent <a href="<?= htmlspecialchars($app_root) ?>?page=config#platform<?= htmlspecialchars($platform['id']) ?>agent<?= htmlspecialchars($agent['id']) ?>"><?= htmlspecialchars($agent['agent_description']) ?></a>:
-                            <strong><?= $agent_availability ?></strong>
-                            <br />
-                            host: <strong><?= htmlspecialchars($agent_host) ?></strong>,
-                            port: <strong><?= htmlspecialchars($agent_port) ?></strong>,
-                            endpoint: <strong><?= htmlspecialchars($agent['agent_endpoint']) ?></strong>
-                        </p>
-                    </div>
-                </div>
+        <!-- jilo agent status -->
+        <div class="d-flex align-items-center flex-wrap border-top p-3">
+            <div class="d-flex align-items-center me-4">
+                <span class="me-2">Jilo agent 
+                    <a href="<?= htmlspecialchars($app_root) ?>?page=config#platform<?= htmlspecialchars($platform['id']) ?>agent<?= htmlspecialchars($agent['id']) ?>" class="text-decoration-none">
+                        <?= htmlspecialchars($agent['agent_description']) ?>
+                    </a>:
+                </span>
+                <span class="badge <?= $agent_availability === 'running' ? 'bg-success' : 'bg-danger' ?>" title="<?= $agent_availability !== 'running' ? htmlspecialchars($agent_availability) : '' ?>" data-toggle="tooltip" data-placement="right" data-offset="30.0">
+                    <?= $agent_availability === 'running' ? 'Running' : 'Error' ?>
+                </span>
+            </div>
+            <div class="d-flex align-items-center me-4">
+                <span class="me-4">Host: <strong><?= htmlspecialchars($agent_host) ?></strong></span>
+                <span class="me-4">Port: <strong><?= htmlspecialchars($agent_port) ?></strong></span>
+                <span>Endpoint: <strong><?= htmlspecialchars($agent['agent_endpoint']) ?></strong></span>
+            </div>
+        </div>
diff --git a/app/templates/status-platform.php b/app/templates/status-platform.php
index 44d9e4e..e74fa67 100644
--- a/app/templates/status-platform.php
+++ b/app/templates/status-platform.php
@@ -1,13 +1,21 @@
 
-                <!-- jitsi platform status -->
-                <br />
-                <div class="card text-center w-75 mx-lef" style="padding-left: 40px;">
-                    <div class="card-body">
-                        <p class="card-text text-left" style="text-align: left;">
-                            Jitsi Meet platform: <a href="<?= htmlspecialchars($app_root) ?>?page=config#platform<?= htmlspecialchars($platform['id']) ?>"><?= htmlspecialchars($platform['name']) ?></a>
-                            <br />
-                            jilo database: <strong><?= htmlspecialchars($platform['jilo_database']) ?></strong>,
-                            status: <strong><?= $jilo_database_status ?></strong>
-                        </p>
+    <!-- jitsi platform status -->
+    <div class="card mt-3 mb-3">
+        <div class="card-header">
+            <h4>
+                <a href="<?= htmlspecialchars($app_root) ?>?page=config#platform<?= htmlspecialchars($platform['id']) ?>" class="text-decoration-none">
+                    Jitsi platform "<?= htmlspecialchars($platform['name']) ?>"
+                </a>
+            </h4>
+            <small class="text-muted">Remote Jitsi Meet installation with its database and agents here.</small>
+        </div>
+        <div class="card-body p-0">
+            <div class="card-body">
+                <div class="d-flex align-items-center flex-wrap">
+                    <span class="me-4">Jilo database: <strong><?= htmlspecialchars($platform['jilo_database']) ?></strong></span>
+                    <div class="d-flex align-items-center">
+                        <span class="me-2">Status:</span>
+                        <span class="badge <?= $jilo_database_status === 'OK' ? 'bg-success' : 'bg-danger' ?>"><?= htmlspecialchars($jilo_database_status) ?></span>
                     </div>
                 </div>
+            </div>
diff --git a/app/templates/status-server.php b/app/templates/status-server.php
index 9a33722..cf5dbf0 100644
--- a/app/templates/status-server.php
+++ b/app/templates/status-server.php
@@ -1,19 +1,26 @@
+<!-- jilo status -->
+<div class="container-fluid mt-2">
+    <div class="row mb-5">
+        <div class="col">
+            <h2>Jilo status</h2>
 
-                <!-- jilo status -->
-                <div class="card text-center w-75 mx-lef">
-                    <p class="h4 card-header">Jilo platform status</p>
-                    <div class="card-body">
-                        <p class="card-text text-left" style="text-align: left;">
-                            Jilo Server:
-<?php if ($server_status) { ?>
-                                <strong><span class="text-success">running</span></strong>
-<?php } else { ?>
-                                <strong><span class="text-danger">not running</span></strong>
-<?php } ?>
-                                <br />
-                                host: <strong><?= htmlspecialchars($server_host) ?></strong>,
-                                port: <strong><?= htmlspecialchars($server_port) ?></strong>,
-                                endpoint: <strong><?= htmlspecialchars($server_endpoint) ?></strong>
-                        </p>
+            <!-- jilo status -->
+            <div class="card mt-3">
+                <div class="card-header">
+                    <h4>Jilo server</h4>
+                    <small class="text-muted">Responsible for periodic checks of remote agents and storing received data.</small>
+                </div>
+                <div class="card-body">
+                    <div class="d-flex align-items-center flex-wrap">
+                        <div class="d-flex align-items-center me-4">
+                            <span class="me-2">Jilo server:</span>
+                            <span class="badge <?= $server_status ? 'bg-success' : 'bg-danger' ?>">
+                                <?= $server_status ? 'Running' : 'Not running' ?>
+                            </span>
+                        </div>
+                        <span class="me-4">Host: <strong><?= htmlspecialchars($server_host) ?></strong></span>
+                        <span class="me-4">Port: <strong><?= htmlspecialchars($server_port) ?></strong></span>
+                        <span>Endpoint: <strong><?= htmlspecialchars($server_endpoint) ?></strong></span>
                     </div>
                 </div>
+            </div>