feat: mgmt ui works remotely

- mgmt ui now requires an api secret
- requets from ui to api now include api secret
- expand cors permissions of mgmt api
- static assets are embedded into ui

crates/proxy/src/mgmt.rs

@@ -2,7 +2,7 @@ use std::result::Result as StdResult;
 
 use anyhow::{Context, Result};
 use axum::extract::{Extension, Json, Path, Query, Request, State};
-use axum::http::{HeaderMap, HeaderValue, StatusCode};
+use axum::http::{header, HeaderMap, HeaderValue, StatusCode};
 use axum::middleware::{self, Next};
 use axum::response::{IntoResponse, Response};
 use axum::{
@@ -165,11 +165,11 @@ pub fn router(pool: SqlitePool, origin_cache: OriginCache, config: &Config) -> R
         .route("/attempts", get(list_attempts))
         .route("/attempts/:id", get(get_attempt))
         .route("/queue", post(add_request_to_queue))
-        .layer(CorsLayer::permissive())
-        .layer(TraceLayer::new_for_http())
         .layer(Extension(pool))
         .layer(Extension(origin_cache))
         .route_layer(middleware::from_fn_with_state(state, auth))
+        .layer(TraceLayer::new_for_http())
+        .layer(CorsLayer::very_permissive().expose_headers([header::CONTENT_RANGE]))
 }
 
 #[derive(Debug, Deserialize)]

crates/ui/Cargo.toml

@@ -17,3 +17,5 @@ tower-http = { version = "0.4.4", features = ["fs", "trace"] }
 tracing = "0.1.37"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 url = { version = "2.4.1", features = ["serde"] }
+rust-embed = { version = "8.2.0", features = ["axum-ex"] }
+mime_guess = "2.0.4"

crates/ui/src/main.rs

@@ -1,18 +1,27 @@
 use std::net::SocketAddr;
 
-use axum::{extract::State, response::Html, routing::get, Router};
-use bpaf::{construct, long, Parser};
-use tower_http::{
-    services::{ServeDir, ServeFile},
-    trace::TraceLayer,
+use axum::{
+    extract::State,
+    http::{header, StatusCode, Uri},
+    response::{Html, IntoResponse, Response},
+    routing::get,
+    Router,
 };
+use bpaf::{construct, long, Parser};
+use rust_embed::RustEmbed;
+use tower_http::trace::TraceLayer;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod error;
 
+#[derive(RustEmbed)]
+#[folder = "static/"]
+struct Assets;
+
 #[derive(Clone, Debug)]
 struct Config {
     api_url: String,
+    api_secret: String,
 }
 
 #[tokio::main]
@@ -29,16 +38,20 @@ async fn main() {
         .help("URL of the Soldr Management API")
         .argument::<String>("API_URL");
 
-    let parser = construct!(Config { api_url });
+    let api_secret = long("api-secret")
+        .help("Soldr Management API secret key")
+        .argument::<String>("API_SECRET");
+
+    let parser = construct!(Config {
+        api_url,
+        api_secret
+    });
     let ui_parser = parser.to_options().descr("Soldr UI");
     let config: Config = ui_parser.run();
 
     let app = Router::new()
         .route("/hello", get(|| async { "Hello, World!" }))
-        .nest_service("/assets", ServeDir::new("static/assets"))
-        .nest_service("/vite.svg", ServeFile::new("static/vite.svg"))
-        .route("/", get(serve_html))
-        .route("/*path", get(serve_html))
+        .fallback(static_handler)
         .layer(TraceLayer::new_for_http())
         .with_state(config);
 
@@ -50,14 +63,46 @@ async fn main() {
         .unwrap();
 }
 
-async fn serve_html(State(config): State<Config>) -> Html<String> {
-    let html = include_str!("../static/index.html");
+async fn static_handler(State(config): State<Config>, uri: Uri) -> impl IntoResponse {
+    let path = uri.path().trim_start_matches('/');
+
+    if path.is_empty() || path == "index.html" {
+        return index_html(config).await;
+    }
+
+    match Assets::get(path) {
+        Some(content) => {
+            let mime = mime_guess::from_path(path).first_or_octet_stream();
+
+            ([(header::CONTENT_TYPE, mime.as_ref())], content.data).into_response()
+        }
+        None => {
+            if path.contains('.') {
+                return not_found().await;
+            }
+
+            index_html(config).await
+        }
+    }
+}
+
+async fn index_html(config: Config) -> Response {
+    match Assets::get("index.html") {
+        Some(content) => {
+            let script_tag = format!(
+                r#"<script type="module">window.config = {{ apiUrl: "{}", apiSecret: "{}" }};</script>"#,
+                config.api_url, config.api_secret
+            );
+
+            let html = String::from_utf8(content.data.into_owned()).unwrap();
 
-    let script_tag = format!(
-        r#"<script type="module">window.apiUrl = "{}";</script>"#,
-        config.api_url
-    );
-    let html = html.replace("<!-- __SOLDR_UI_CONFIG__ -->", script_tag.as_str());
+            let html = html.replace("<!-- __SOLDR_UI_CONFIG__ -->", script_tag.as_str());
+            Html(html).into_response()
+        }
+        None => not_found().await,
+    }
+}
 
-    Html(html)
+async fn not_found() -> Response {
+    (StatusCode::NOT_FOUND, "404").into_response()
 }

justfile

@@ -2,6 +2,8 @@ build: build-ui build-core
 
 build-ui:
   cd packages/ui && npm run build
+  mkdir -p crates/ui/static
+  rm -fr crates/ui/static/*
   cp -r packages/ui/dist/* crates/ui/static/
 
 build-core:

packages/ui/.env.development

@@ -1 +1,2 @@
 VITE_MGMT_API_URL=http://localhost:3443
+VITE_MGMT_API_SECRET="a secret with minimum length of 32 characters"

packages/ui/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/soldering-iron.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Soldr - Management UI</title>
     <link

packages/ui/src/App.tsx

@@ -1,4 +1,4 @@
-import { Admin, Resource } from 'react-admin';
+import { Admin, Resource, fetchUtils } from 'react-admin';
 import simpleRestProvider from 'ra-data-simple-rest';
 
 import Layout from './Layout';
@@ -9,19 +9,30 @@ import Attempts from './Attempts';
 
 declare global {
   interface Window {
-    apiUrl?: string;
+    config: {
+      apiUrl?: string;
+      apiSecret?: string;
+    };
   }
 }
 
-const config = {
-  apiUrl: import.meta.env.PROD ? window.apiUrl : import.meta.env.VITE_MGMT_API_URL,
-};
+const config = import.meta.env.PROD
+  ? window.config
+  : {
+      apiUrl: import.meta.env.VITE_MGMT_API_URL,
+      apiSecret: import.meta.env.VITE_MGMT_API_SECRET,
+    };
 
 if (!config.apiUrl) {
   throw new Error('API URL is required');
 }
 
-const dataProvider = simpleRestProvider(config.apiUrl);
+const httpClient = (url: string, options: fetchUtils.Options = {}) => {
+  const user = { token: `Basic ${btoa(config.apiSecret)}`, authenticated: true };
+  return fetchUtils.fetchJson(url, { ...options, user });
+};
+
+const dataProvider = simpleRestProvider(config.apiUrl, httpClient);
 
 const App = () => (
   <Admin dataProvider={dataProvider} layout={Layout} dashboard={Dashboard}>