chore(frontend): overflow-x-auto for RulesList

.env.example

@@ -1,4 +1,4 @@
-# Example .env file for Linspirer MITM Server
+# Example .env file for My Linspirer MITM Server
 # Copy this to .env and fill in your values
 
 # Required: AES-128 encryption key (16 characters)

frontend/src/components/RulesList.tsx

@@ -26,6 +26,9 @@ const RulesList: Component = () => {
     if (!confirm('Are you sure you want to delete this rule?')) return;
 
     try {
+      if (id === editingId()) {
+        setShowEditor(false);
+      }
       await rulesApi.delete(id);
       refetch();
     } catch (err) {
@@ -126,9 +129,6 @@ const RulesList: Component = () => {
               <label class="block text-sm font-medium text-gray-700 mb-1">
                 Method Name
               </label>
-              <Show
-                when={editingId() === null}
-                fallback={
               <input
                 type="text"
                 value={editingMethod()}
@@ -136,18 +136,6 @@ const RulesList: Component = () => {
                 class="w-full border border-gray-300 rounded-md px-3 py-2"
                 placeholder="com.linspirer.method.name"
               />
-                }
-              >
-                <select
-                  value={editingMethod()}
-                  onChange={(e) => setEditingMethod(e.currentTarget.value)}
-                  class="w-full border border-gray-300 rounded-md px-3 py-2"
-                >
-                  <option value="">-- Select Method --</option>
-                  <option value="com.linspirer.tactics.gettactics">Get Tactics</option>
-                  <option value="com.linspirer.device.getcommand">Get Command</option>
-                </select>
-              </Show>
             </div>
 
             <div>
@@ -190,6 +178,7 @@ const RulesList: Component = () => {
       </Show>
 
       <div class="bg-white shadow rounded-lg overflow-hidden">
+        <div class="overflow-x-auto">
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
@@ -214,12 +203,11 @@ const RulesList: Component = () => {
                 <For each={rules()}>
                   {(rule) => (
                     <tr>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      <td class="px-6 py-4 text-sm font-medium text-gray-900">
                         {rule.method_name}
                       </td>
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <span class={`px-2 py-1 rounded-full text-xs ${
+                        <span class={`px-2 py-1 rounded-full text-xs ${rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
-                        rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
                             rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
                               'bg-gray-100 text-gray-800'
                           }`}>
@@ -229,26 +217,22 @@ const RulesList: Component = () => {
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                         <button
                           onClick={() => toggleRule(rule)}
-                        class={`px-3 py-1 rounded-md text-sm font-medium ${
+                          class={`px-3 py-1 rounded-md text-sm font-medium ${rule.is_enabled
-                          rule.is_enabled
                               ? 'bg-green-100 text-green-800'
                               : 'bg-gray-100 text-gray-800'
-                        }`}
+                            }`}>
-                      >
                           {rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
                         </button>
                       </td>
                       <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                         <button
                           onClick={() => startEdit(rule)}
-                        class="text-indigo-600 hover:text-indigo-900 mr-4"
+                          class="text-indigo-600 hover:text-indigo-900 mr-4">
-                      >
                           Edit
                         </button>
                         <button
                           onClick={() => deleteRule(rule.id)}
-                        class="text-red-600 hover:text-red-900"
+                          class="text-red-600 hover:text-red-900">
-                      >
                           Delete
                         </button>
                       </td>
@@ -260,6 +244,7 @@ const RulesList: Component = () => {
           </table>
         </div>
       </div>
+    </div>
   );
 };
 

src/jsonrpc/tactics.rs

@@ -21,7 +21,6 @@ pub struct Tactics {
     pub name: String,
     #[serde_as(as = "BoolFromInt")]
     pub release_control: bool,
-    // TODO: std::time::Instant
     pub updated_at: String,
     #[serde(rename = "usergroup")]
     pub user_group: u32,
@@ -42,7 +41,6 @@ pub struct AppTactics {
 pub struct App {
     #[serde(rename = "canuninstall")]
     can_uninstall: bool,
-    // TODO: std::time::Instant
     created_at: String,
     #[serde(rename = "devicetype")]
     device_type: String,
@@ -67,7 +65,6 @@ pub struct App {
     sort_weight: i32,
     status: i32,
     target_sdk_version: i32,
-    // TODO: std::time::Instant
     updated_at: String,
     #[serde(rename = "versioncode")]
     version_code: i32,

src/main.rs

@@ -1,7 +1,7 @@
 use std::{net::SocketAddr, sync::Arc};
 
 use anyhow::Context;
-use axum::Router;
+use axum::{Router, routing::any};
 use axum::handler::Handler;
 use dotenvy::dotenv;
 use tower_http::compression::CompressionLayer;
@@ -80,15 +80,15 @@ async fn main() -> anyhow::Result<()> {
         commands: Default::default(),
     });
 
-    let log_middleware =
+    let proxy_middleware =
-        axum::middleware::from_fn_with_state(state.clone(), middleware::log_middleware);
+        axum::middleware::from_fn_with_state(state.clone(), middleware::middleware);
 
     // Build our application
     let app = Router::new()
         // Admin routes
         .nest("/admin", admin::routes::admin_routes(state.clone()))
-        // Proxy all other routes (fallback)
+        // Proxy Linspirer APIs
-        .fallback(proxy::proxy_handler.layer(log_middleware))
+        .route("/public-interface.php", any(proxy::proxy_handler.layer(proxy_middleware)))
         .layer(CompressionLayer::new().gzip(true))
         .with_state(state);
 

src/middleware.rs

@@ -18,7 +18,7 @@ enum ResponseBody {
     Modified(Value),
 }
 
-pub async fn log_middleware(
+pub async fn middleware(
     State(state): State<Arc<AppState>>,
     OriginalUri(uri): OriginalUri,
     req: Request<axum::body::Body>,
@@ -39,7 +39,7 @@ pub async fn log_middleware(
 
     let path = uri.path();
 
-    let (decrypted_request_log, method) = match str::from_utf8(&body_bytes)
+    let (decrypted_request_for_log, method) = match str::from_utf8(&body_bytes)
         .map_err(anyhow::Error::from)
         .and_then(|body| process_and_log_request(body, &state.key, &state.iv))
     {
@@ -125,7 +125,7 @@ pub async fn log_middleware(
     debug!(
         "{}\nRequest:\n{}\nResponse:\n{}\n{}",
         path,
-        serde_json::to_string_pretty(&decrypted_request_log).unwrap_or_default(),
+        serde_json::to_string_pretty(&decrypted_request_for_log).unwrap_or_default(),
         decrypted_response_for_log,
         "-".repeat(80),
     );