Add release configuration

Reviewed-on: #305

.drone.yml

@@ -5,13 +5,14 @@ name: default
 
 steps:
 - name: web_build
-  image: node:20
+  image: node:23
   volumes:
     - name: web_app
       path: /tmp/web_build
   commands:
   - cd virtweb_frontend
-  - npm install
+  - npm install --legacy-peer-deps # TODO : remove when mui-file-input is updated
+  - npm run lint
   - npm run build
   - mv dist /tmp/web_build
 
@@ -25,6 +26,7 @@ steps:
   - rustup component add clippy
   - cd virtweb_backend
   - cargo clippy -- -D warnings
+  - cargo clippy --examples -- -D warnings
   - cargo test
 
 - name: backend_compile
@@ -34,6 +36,8 @@ steps:
     path: /usr/local/cargo/registry
   - name: web_app
     path: /tmp/web_build
+  - name: release
+    path: /tmp/release
   depends_on:
   - backend_check
   - web_build
@@ -43,10 +47,30 @@ steps:
   - mv /tmp/web_build/dist static
   - cargo build --release
   - ls -lah target/release/virtweb_backend
+  - cp target/release/virtweb_backend /tmp/release
 
+- name: gitea_release
+  image: plugins/gitea-release
+  depends_on:
+  - backend_compile
+  when:
+    event:
+      - tag
+  volumes:
+  - name: release
+    path: /tmp/release
+  environment:
+    PLUGIN_API_KEY:
+      from_secret: API_KEY
+  settings:
+    base_url: https://gitea.communiquons.org
+    files: /tmp/release/*
+    checksum: sha512
 
 volumes:
 - name: rust_registry
   temp: {}
 - name: web_app
   temp: {}
+- name: release
+  temp: {}

README.md

@@ -6,3 +6,18 @@ Please refer to this guide: [virtweb_docs/SETUP_DEV.md](virtweb_docs/SETUP_DEV.m
 
 ## Production requirements
 Please refer to this guide: [virtweb_docs/SETUP_PROD.md](virtweb_docs/SETUP_PROD.md)
+
+## Features
+* Only Qemu / KVM is supported!
+* Basic auth / OpenID auth
+* Create, update & delete VM
+* noVNC control of VMs
+* Start, stop, suspend, resume, reset & kill VMs
+* Create, update & delete networks
+* Start & stop networks
+* Create, update & delete network filters
+* Upload ISO for easy VM installation
+* API tokens for system interconnection
+
+## Screenshot
+![](https://0ph.fr/resume_assets/img/screenshots/virtweb.png)

renovate.json

@@ -1,9 +1,3 @@
 {
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "packageRules": [
-    {
-      "matchUpdateTypes": ["major", "minor", "patch"],
-      "automerge": true
-    }
-  ]
+  "extends": ["local>renovate/presets"]
 }

virtweb_backend/Cargo.toml

@@ -1,50 +1,48 @@
 [package]
 name = "virtweb_backend"
 version = "0.1.0"
-edition = "2021"
+edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-log = "0.4.21"
-env_logger = "0.11.3"
-clap = { version = "4.5.4", features = ["derive", "env"] }
-light-openid = { version = "1.0.2", features = ["crypto-wrapper"] }
-lazy_static = "1.4.0"
-actix = "0.13.3"
-actix-web = "4.5.1"
+log = "0.4.27"
+env_logger = "0.11.7"
+clap = { version = "4.5.34", features = ["derive", "env"] }
+light-openid = { version = "1.0.4", features = ["crypto-wrapper"] }
+lazy_static = "1.5.0"
+actix = "0.13.5"
+actix-web = "4.10.2"
 actix-remote-ip = "0.1.0"
-actix-session = { version = "0.9.0", features = ["cookie-session"] }
-actix-identity = "0.7.1"
-actix-cors = "0.7.0"
-actix-files = "0.6.5"
-actix-web-actors = "4.3.0"
-actix-http = "3.6.0"
-serde = { version = "1.0.197", features = ["derive"] }
-serde_json = "1.0.115"
-quick-xml = { version = "0.31.0", features = ["serialize", "overlapped-lists"] }
-futures-util = "0.3.30"
-anyhow = "1.0.81"
-actix-multipart = "0.6.1"
-tempfile = "3.10.1"
-reqwest = { version = "0.12.3", features = ["stream"] }
-url = "2.5.0"
-virt = "0.3.1"
-sysinfo = { version = "0.30.8", features = ["serde"] }
-uuid = { version = "1.8.0", features = ["v4", "serde"] }
-lazy-regex = "3.1.0"
-thiserror = "1.0.58"
-image = "0.25.1"
-rand = "0.8.5"
-bytes = "1.6.0"
-tokio = "1.37.0"
-futures = "0.3.30"
-ipnetwork = "0.20.0"
-num = "0.4.1"
-rust-embed = { version = "8.3.0" }
-mime_guess = "2.0.4"
+actix-session = { version = "0.10.1", features = ["cookie-session"] }
+actix-identity = "0.8.0"
+actix-cors = "0.7.1"
+actix-files = "0.6.6"
+actix-ws = "0.3.0"
+actix-http = "3.10.0"
+serde = { version = "1.0.219", features = ["derive"] }
+serde_json = "1.0.140"
+quick-xml = { version = "0.37.3", features = ["serialize", "overlapped-lists"] }
+futures-util = "0.3.31"
+anyhow = "1.0.97"
+actix-multipart = "0.7.2"
+tempfile = "3.19.1"
+reqwest = { version = "0.12.15", features = ["stream"] }
+url = "2.5.4"
+virt = "0.4.2"
+sysinfo = { version = "0.34.2", features = ["serde"] }
+uuid = { version = "1.16.0", features = ["v4", "serde"] }
+lazy-regex = "3.4.1"
+thiserror = "2.0.12"
+image = "0.25.6"
+rand = "0.9.0"
+bytes = "1.10.1"
+tokio = { version = "1.44.1", features = ["rt", "time", "macros"] }
+futures = "0.3.31"
+ipnetwork = { version = "0.21.1", features = ["serde"] }
+num = "0.4.3"
+rust-embed = { version = "8.6.0" }
+mime_guess = "2.0.5"
 dotenvy = "0.15.7"
-nix = { version = "0.28.0", features = ["net"] }
-jsonwebtoken = "9.3.0"
-elliptic-curve = { version = "0.13.8", features = ["pkcs8","pem" ] }
-p384 = { version = "0.13.0", features = ["ecdsa", "pkcs8", "pem"] }
+nix = { version = "0.29.0", features = ["net"] }
+basic-jwt = "0.3.0"

virtweb_backend/docker-compose.yaml

@@ -1,9 +1,8 @@
 services:
   oidc:
-    image: qlik/simple-oidc-provider
-    environment:
-    - REDIRECTS=http://localhost:3000/oidc_cb
-    - PORT=9001
+    image: dexidp/dex
     ports:
-    - 9001:9001
-    
+      - 9001:9001
+    volumes:
+      - ./docker/dex:/conf:ro
+    command: [ "dex", "serve", "/conf/dex.config.yaml" ]

virtweb_backend/docker/dex/dex.config.yaml

@@ -0,0 +1,27 @@
+issuer: http://127.0.0.1:9001/dex
+
+storage:
+  type: memory
+
+web:
+  http: 0.0.0.0:9001
+
+oauth2:
+  # Automate some clicking
+  # Note: this might actually make some tests pass that otherwise wouldn't.
+  skipApprovalScreen: false
+
+connectors:
+  # Note: this might actually make some tests pass that otherwise wouldn't.
+  - type: mockCallback
+    id: mock
+    name: Example
+
+# Basic OP test suite requires two clients.
+staticClients:
+  - id: foo
+    secret: bar
+    redirectURIs:
+      - http://localhost:3000/oidc_cb
+      - http://localhost:5173/oidc_cb
+    name: Project

virtweb_backend/examples/api_curl.rs

@@ -0,0 +1,67 @@
+use basic_jwt::JWTPrivateKey;
+use clap::Parser;
+use std::os::unix::prelude::CommandExt;
+use std::process::Command;
+use std::str::FromStr;
+use virtweb_backend::api_tokens::TokenVerb;
+use virtweb_backend::extractors::api_auth_extractor::TokenClaims;
+use virtweb_backend::utils::time_utils::time;
+
+/// cURL wrapper to query Virtweb backend API
+#[derive(Parser, Debug)]
+#[command(version, about, long_about = None)]
+struct Args {
+    /// URL of VirtWeb
+    #[arg(short('u'), long, env, default_value = "http://localhost:8000")]
+    virtweb_url: String,
+
+    /// Token ID
+    #[arg(short('i'), long, env)]
+    token_id: String,
+
+    /// Token private key
+    #[arg(short('t'), long, env)]
+    token_key: String,
+
+    /// Request verb
+    #[arg(short('X'), long, default_value = "GET")]
+    verb: String,
+
+    /// Request URI
+    uri: String,
+
+    /// Command line arguments to pass to cURL
+    #[clap(trailing_var_arg = true, allow_hyphen_values = true)]
+    run: Vec<String>,
+}
+
+fn main() {
+    let args = Args::parse();
+
+    let full_url = format!("{}{}", args.virtweb_url, args.uri);
+    log::debug!("Full URL: {full_url}");
+
+    let key = JWTPrivateKey::ES384 {
+        r#priv: args.token_key,
+    };
+    let claims = TokenClaims {
+        sub: args.token_id.to_string(),
+        iat: time() as usize,
+        exp: time() as usize + 50,
+        verb: TokenVerb::from_str(&args.verb).expect("Invalid request verb!"),
+        path: args.uri,
+        nonce: uuid::Uuid::new_v4().to_string(),
+    };
+
+    let jwt = key.sign_jwt(&claims).expect("Failed to sign JWT!");
+
+    let err = Command::new("curl")
+        .args(["-X", &args.verb])
+        .args(["-H", &format!("x-token-id: {}", args.token_id)])
+        .args(["-H", &format!("x-token-content: {jwt}")])
+        .args(args.run)
+        .arg(full_url)
+        .exec();
+
+    panic!("Failed to run cURL! {err}")
+}

virtweb_backend/src/actors/libvirt_actor.rs

@@ -31,7 +31,7 @@ impl LibVirtActor {
             "Will connect to hypvervisor at address '{}'",
             hypervisor_uri
         );
-        let conn = Connect::open(hypervisor_uri)?;
+        let conn = Connect::open(Some(hypervisor_uri))?;
 
         Ok(Self { m: conn })
     }

virtweb_backend/src/actors/mod.rs

@@ -1,3 +1,3 @@
 pub mod libvirt_actor;
-pub mod vnc_actor;
+pub mod vnc_handler;
 pub mod vnc_tokens_actor;

virtweb_backend/src/actors/vnc_actor.rs

@@ -1,209 +0,0 @@
-use actix::{Actor, ActorContext, AsyncContext, Handler, StreamHandler};
-use actix_http::ws::Item;
-use actix_web_actors::ws;
-use actix_web_actors::ws::Message;
-use bytes::Bytes;
-use image::EncodableLayout;
-use std::path::Path;
-use std::time::{Duration, Instant};
-use tokio::io::{AsyncReadExt, AsyncWriteExt};
-use tokio::net::unix::{OwnedReadHalf, OwnedWriteHalf};
-use tokio::net::UnixStream;
-
-/// How often heartbeat pings are sent
-const HEARTBEAT_INTERVAL: Duration = Duration::from_secs(5);
-
-/// How long before lack of client response causes a timeout
-const CLIENT_TIMEOUT: Duration = Duration::from_secs(20);
-
-#[derive(thiserror::Error, Debug)]
-enum VNCError {
-    #[error("Socket file does not exists!")]
-    SocketDoesNotExists,
-}
-
-pub struct VNCActor {
-    /// Qemu -> WS
-    read_half: Option<OwnedReadHalf>,
-
-    /// WS -> Qemu
-    write_half: OwnedWriteHalf,
-
-    // Client must respond to ping at a specific interval, otherwise we drop connection
-    hb: Instant,
-}
-
-impl VNCActor {
-    pub async fn new(socket_path: &str) -> anyhow::Result<Self> {
-        let socket_path = Path::new(socket_path);
-
-        if !socket_path.exists() {
-            return Err(VNCError::SocketDoesNotExists.into());
-        }
-
-        let socket = UnixStream::connect(socket_path).await?;
-        let (read_half, write_half) = socket.into_split();
-
-        Ok(Self {
-            read_half: Some(read_half),
-            write_half,
-            hb: Instant::now(),
-        })
-    }
-
-    /// helper method that sends ping to client every second.
-    ///
-    /// also this method checks heartbeats from client
-    fn hb(&self, ctx: &mut ws::WebsocketContext<Self>) {
-        ctx.run_interval(HEARTBEAT_INTERVAL, |act, ctx| {
-            // check client heartbeats
-            if Instant::now().duration_since(act.hb) > CLIENT_TIMEOUT {
-                // heartbeat timed out
-                log::warn!("WebSocket Client heartbeat failed, disconnecting!");
-                ctx.stop();
-                return;
-            }
-
-            ctx.ping(b"");
-        });
-    }
-
-    fn send_to_socket(&mut self, bytes: Bytes, ctx: &mut ws::WebsocketContext<Self>) {
-        log::trace!("Received {} bytes for VNC socket", bytes.len());
-
-        if let Err(e) = futures::executor::block_on(self.write_half.write(bytes.as_bytes())) {
-            log::error!("Failed to relay bytes to VNC socket {e}");
-            ctx.close(None);
-        }
-    }
-
-    fn start_qemu_to_ws_end(&mut self, ctx: &mut ws::WebsocketContext<Self>) {
-        let mut read_half = self.read_half.take().unwrap();
-        let addr = ctx.address();
-        let future = async move {
-            let mut buff: [u8; 5000] = [0; 5000];
-            loop {
-                match read_half.read(&mut buff).await {
-                    Ok(mut l) => {
-                        if l == 0 {
-                            log::warn!("Got empty read!");
-
-                            // Ugly hack made to wait for next byte
-                            let mut one_byte_buff: [u8; 1] = [0; 1];
-                            match read_half.read_exact(&mut one_byte_buff).await {
-                                Ok(b) => {
-                                    if b == 0 {
-                                        log::error!("Did not get a byte !");
-                                        let _ = addr.send(CloseWebSocketReq).await;
-                                        break;
-                                    }
-                                    buff[0] = one_byte_buff[0];
-                                    l = 1;
-                                }
-                                Err(e) => {
-                                    log::error!("Failed to read 1 BYTE from remote socket. Stopping now... {:?}", e);
-                                    break;
-                                }
-                            }
-                        }
-
-                        let to_send = SendBytesReq(Vec::from(&buff[0..l]));
-                        if let Err(e) = addr.send(to_send).await {
-                            log::error!("Failed to send to websocket. Stopping now... {:?}", e);
-                            return;
-                        }
-                    }
-                    Err(e) => {
-                        log::error!("Failed to read from remote socket. Stopping now... {:?}", e);
-                        break;
-                    }
-                };
-            }
-
-            log::info!("Exited read loop");
-        };
-
-        tokio::spawn(future);
-    }
-}
-
-impl Actor for VNCActor {
-    type Context = ws::WebsocketContext<Self>;
-
-    fn started(&mut self, ctx: &mut Self::Context) {
-        self.hb(ctx);
-        self.start_qemu_to_ws_end(ctx);
-    }
-}
-
-impl StreamHandler<Result<Message, ws::ProtocolError>> for VNCActor {
-    fn handle(&mut self, msg: Result<Message, ws::ProtocolError>, ctx: &mut Self::Context) {
-        match msg {
-            Ok(Message::Ping(msg)) => ctx.pong(&msg),
-
-            Ok(Message::Text(_text)) => {
-                log::error!("Received unexpected text on VNC WebSocket!");
-            }
-
-            Ok(Message::Binary(bin)) => {
-                log::info!("Forward {} bytes to VNC server", bin.len());
-                self.send_to_socket(bin, ctx);
-            }
-
-            Ok(Message::Continuation(msg)) => match msg {
-                Item::FirstText(_) => {
-                    log::error!("Received unexpected split text!");
-                    ctx.close(None);
-                }
-                Item::FirstBinary(bin) | Item::Continue(bin) | Item::Last(bin) => {
-                    self.send_to_socket(bin, ctx);
-                }
-            },
-
-            Ok(Message::Pong(_)) => {
-                log::trace!("Received PONG message");
-                self.hb = Instant::now();
-            }
-
-            Ok(Message::Close(r)) => {
-                log::info!("WebSocket closed. Reason={r:?}");
-                ctx.close(r);
-            }
-
-            Ok(Message::Nop) => {
-                log::debug!("Received Nop message")
-            }
-
-            Err(e) => {
-                log::error!("WebSocket protocol error! {e}");
-                ctx.close(None)
-            }
-        }
-    }
-}
-
-#[derive(actix::Message)]
-#[rtype(result = "()")]
-pub struct SendBytesReq(Vec<u8>);
-
-impl Handler<SendBytesReq> for VNCActor {
-    type Result = ();
-
-    fn handle(&mut self, msg: SendBytesReq, ctx: &mut Self::Context) -> Self::Result {
-        log::trace!("Send {} bytes to WS", msg.0.len());
-        ctx.binary(msg.0);
-    }
-}
-
-#[derive(actix::Message)]
-#[rtype(result = "()")]
-pub struct CloseWebSocketReq;
-
-impl Handler<CloseWebSocketReq> for VNCActor {
-    type Result = ();
-
-    fn handle(&mut self, _msg: CloseWebSocketReq, ctx: &mut Self::Context) -> Self::Result {
-        log::trace!("Close websocket, because VNC socket has terminated");
-        ctx.close(None);
-    }
-}

virtweb_backend/src/actors/vnc_handler.rs

@@ -0,0 +1,129 @@
+use actix_http::ws::Message;
+use futures_util::StreamExt as _;
+use std::time::{Duration, Instant};
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::net::UnixStream;
+use tokio::select;
+use tokio::time::interval;
+
+/// How often heartbeat pings are sent
+const HEARTBEAT_INTERVAL: Duration = Duration::from_secs(5);
+
+/// How long before lack of client response causes a timeout
+const CLIENT_TIMEOUT: Duration = Duration::from_secs(20);
+
+/// Broadcast text & binary messages received from a client, respond to ping messages, and monitor
+/// connection health to detect network issues and free up resources.
+pub async fn handle(
+    mut session: actix_ws::Session,
+    mut msg_stream: actix_ws::MessageStream,
+    mut socket: UnixStream,
+) {
+    log::info!("Connected to websocket");
+
+    let mut last_heartbeat = Instant::now();
+    let mut interval = interval(HEARTBEAT_INTERVAL);
+
+    let mut buf_socket = [0u8; 1024];
+
+    let reason = loop {
+        // waits for either `msg_stream` to receive a message from the client, the broadcast channel
+        // to send a message, or the heartbeat interval timer to tick, yielding the value of
+        // whichever one is ready first
+        select! {
+
+            // heartbeat interval ticked
+            _tick = interval.tick() => {
+                // if no heartbeat ping/pong received recently, close the connection
+                if Instant::now().duration_since(last_heartbeat) > CLIENT_TIMEOUT {
+                    log::info!(
+                        "client has not sent heartbeat in over {CLIENT_TIMEOUT:?}; disconnecting"
+                    );
+
+                    break None;
+                }
+
+                // send heartbeat ping
+                let _ = session.ping(b"").await;
+            }
+
+            msg = msg_stream.next() => {
+                let msg = match msg {
+                    // received message from WebSocket client
+                    Some(Ok(msg)) => msg,
+
+                    // client WebSocket stream error
+                    Some(Err(err)) => {
+                        log::error!("{err}");
+                        break None;
+                    }
+
+                    // client WebSocket stream ended
+                    None => break None
+                };
+
+                log::debug!("msg: {msg:?}");
+
+                match msg {
+                    Message::Text(_) => {
+                        log::error!("Received unexpected text on VNC WebSocket!");
+                    }
+
+                    Message::Binary(bin) => {
+                        log::info!("Forward {} bytes to VNC server", bin.len());
+                        if let Err(e) = socket.write(&bin).await {
+                            log::error!("Failed to relay bytes to VNC socket {e}");
+                            break None;
+                        }
+                    }
+
+                    Message::Close(reason) => {
+                        break reason;
+                    }
+
+                    Message::Ping(bytes) => {
+                        last_heartbeat = Instant::now();
+                        let _ = session.pong(&bytes).await;
+                    }
+
+                    Message::Pong(_) => {
+                        last_heartbeat = Instant::now();
+                    }
+
+                    Message::Continuation(_) => {
+                        log::warn!("no support for continuation frames");
+                    }
+
+                    // no-op; ignore
+                    Message::Nop => {}
+                };
+            }
+
+            // Forward socket packet to WS client
+            count = socket.read(&mut buf_socket) => {
+                let count = match count {
+                    Ok(count) => count,
+                    Err(e) => {
+                        log::error!("[VNC] Failed to read from upstream! {e}");
+                        break None;
+                    }
+                };
+
+                if count == 0 {
+                    log::warn!("[VNC] infinite loop (upstream), closing connection");
+                    break None;
+                }
+
+                if let Err(e)=session.binary(buf_socket[0..count].to_vec()).await{
+                    log::error!("[VNC] Failed to forward messages to upstream, will close connection! {e}");
+                    break None
+                }
+            }
+        }
+    };
+
+    // attempt to close connection gracefully
+    let _ = session.close(reason).await;
+
+    log::info!("Disconnected from websocket");
+}

virtweb_backend/src/api_tokens.rs

@@ -1,25 +1,122 @@
 //! # API tokens management
 
+use crate::app_config::AppConfig;
 use crate::constants;
-use crate::utils::jwt_utils;
-use crate::utils::jwt_utils::{TokenPrivKey, TokenPubKey};
 use crate::utils::time_utils::time;
+use actix_http::Method;
+use basic_jwt::{JWTPrivateKey, JWTPublicKey};
+use std::path::Path;
+use std::str::FromStr;
 
 #[derive(serde::Serialize, serde::Deserialize, Clone, Copy, Debug)]
 pub struct TokenID(pub uuid::Uuid);
 
+impl TokenID {
+    /// Parse a string as a token id
+    pub fn parse(t: &str) -> anyhow::Result<Self> {
+        Ok(Self(uuid::Uuid::parse_str(t)?))
+    }
+}
+
+#[derive(serde::Serialize, serde::Deserialize, Debug, Clone, Eq, PartialEq)]
+pub struct TokenRight {
+    verb: TokenVerb,
+    path: String,
+}
+
+#[derive(serde::Serialize, serde::Deserialize, Debug, Clone)]
+pub struct TokenRights(Vec<TokenRight>);
+
+impl TokenRights {
+    pub fn check_error(&self) -> Option<&'static str> {
+        for r in &self.0 {
+            if !r.path.starts_with("/api/") {
+                return Some("All API rights shall start with /api/");
+            }
+
+            if r.path.len() > constants::API_TOKEN_RIGHT_PATH_MAX_LENGTH {
+                return Some("An API path shall not exceed maximum URL size!");
+            }
+        }
+        None
+    }
+
+    pub fn contains(&self, verb: TokenVerb, path: &str) -> bool {
+        let req_path_split = path.split('/').collect::<Vec<_>>();
+
+        'root: for r in &self.0 {
+            if r.verb != verb {
+                continue 'root;
+            }
+
+            let mut last_idx = 0;
+            for (idx, part) in r.path.split('/').enumerate() {
+                if idx >= req_path_split.len() {
+                    continue 'root;
+                }
+
+                if part != "*" && part != req_path_split[idx] {
+                    continue 'root;
+                }
+
+                last_idx = idx;
+            }
+
+            // Check we visited the whole path
+            if last_idx + 1 == req_path_split.len() {
+                return true;
+            }
+        }
+
+        false
+    }
+}
+
 #[derive(serde::Serialize, serde::Deserialize, Debug, Clone)]
 pub struct Token {
+    pub id: TokenID,
     pub name: String,
     pub description: String,
-    pub id: TokenID,
     created: u64,
     updated: u64,
-    pub pub_key: TokenPubKey,
-    pub rights: Vec<TokenRights>,
-    pub last_used: Option<u64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub pub_key: Option<JWTPublicKey>,
+    pub rights: TokenRights,
+    pub last_used: u64,
     pub ip_restriction: Option<ipnetwork::IpNetwork>,
-    pub delete_after_inactivity: Option<u64>,
+    pub max_inactivity: Option<u64>,
+}
+
+impl Token {
+    /// Turn the token into a JSON string
+    fn save(&self) -> anyhow::Result<()> {
+        let json = serde_json::to_string(self)?;
+
+        std::fs::write(AppConfig::get().api_token_definition_path(self.id), json)?;
+
+        Ok(())
+    }
+
+    /// Load token information from a file
+    fn load_from_file(path: &Path) -> anyhow::Result<Self> {
+        Ok(serde_json::from_str(&std::fs::read_to_string(path)?)?)
+    }
+
+    /// Check whether a token is expired or not
+    pub fn is_expired(&self) -> bool {
+        if let Some(max_inactivity) = self.max_inactivity {
+            if max_inactivity + self.last_used < time() {
+                return true;
+            }
+        }
+
+        false
+    }
+
+    /// Check whether last_used shall be updated or not
+    pub fn should_update_last_activity(&self) -> bool {
+        self.last_used + 3600 < time()
+    }
 }
 
 #[derive(serde::Serialize, serde::Deserialize, Debug, Clone, Copy, Eq, PartialEq)]
@@ -31,10 +128,31 @@ pub enum TokenVerb {
     DELETE,
 }
 
-#[derive(serde::Serialize, serde::Deserialize, Debug, Clone)]
-pub struct TokenRights {
-    verb: TokenVerb,
-    uri: String,
+impl TokenVerb {
+    pub fn as_method(&self) -> Method {
+        match self {
+            TokenVerb::GET => Method::GET,
+            TokenVerb::POST => Method::POST,
+            TokenVerb::PUT => Method::PUT,
+            TokenVerb::PATCH => Method::PATCH,
+            TokenVerb::DELETE => Method::DELETE,
+        }
+    }
+}
+
+impl FromStr for TokenVerb {
+    type Err = ();
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        match s {
+            "GET" => Ok(TokenVerb::GET),
+            "POST" => Ok(TokenVerb::POST),
+            "PUT" => Ok(TokenVerb::PUT),
+            "PATCH" => Ok(TokenVerb::PATCH),
+            "DELETE" => Ok(TokenVerb::DELETE),
+            _ => Err(()),
+        }
+    }
 }
 
 /// Structure used to create a token
@@ -42,9 +160,9 @@ pub struct TokenRights {
 pub struct NewToken {
     pub name: String,
     pub description: String,
-    pub rights: Vec<TokenRights>,
+    pub rights: TokenRights,
     pub ip_restriction: Option<ipnetwork::IpNetwork>,
-    pub delete_after_inactivity: Option<u64>,
+    pub max_inactivity: Option<u64>,
 }
 
 impl NewToken {
@@ -66,13 +184,11 @@ impl NewToken {
             return Some("Description is too long!");
         }
 
-        for r in &self.rights {
-            if !r.uri.starts_with("/api/") {
-                return Some("All API rights shall start with /api/");
-            }
+        if let Some(err) = self.rights.check_error() {
+            return Some(err);
         }
 
-        if let Some(t) = self.delete_after_inactivity {
+        if let Some(t) = self.max_inactivity {
             if t < 3600 {
                 return Some("API tokens shall be valid for at least 1 hour!");
             }
@@ -83,23 +199,101 @@ impl NewToken {
 }
 
 /// Create a new Token
-pub async fn create(token: &NewToken) -> anyhow::Result<(Token, TokenPrivKey)> {
-    let (pub_key, priv_key) = jwt_utils::generate_key_pair()?;
+pub async fn create(t: &NewToken) -> anyhow::Result<(Token, JWTPrivateKey)> {
+    let priv_key = JWTPrivateKey::generate_ec384_signing_key()?;
+    let pub_key = priv_key.to_public_key()?;
 
-    let full_token = Token {
-        name: token.name.to_string(),
-        description: token.description.to_string(),
+    let token = Token {
+        name: t.name.to_string(),
+        description: t.description.to_string(),
         id: TokenID(uuid::Uuid::new_v4()),
         created: time(),
         updated: time(),
-        pub_key,
-        rights: token.rights.clone(),
-        last_used: Some(time()),
-        ip_restriction: token.ip_restriction,
-        delete_after_inactivity: token.delete_after_inactivity,
+        pub_key: Some(pub_key),
+        rights: t.rights.clone(),
+        last_used: time(),
+        ip_restriction: t.ip_restriction,
+        max_inactivity: t.max_inactivity,
     };
 
-    // TODO : save
+    token.save()?;
 
-    Ok((full_token, priv_key))
+    Ok((token, priv_key))
+}
+
+/// Get the entire list of api tokens
+pub async fn full_list() -> anyhow::Result<Vec<Token>> {
+    let mut list = Vec::new();
+    for f in std::fs::read_dir(AppConfig::get().api_tokens_path())? {
+        list.push(Token::load_from_file(&f?.path())?);
+    }
+    Ok(list)
+}
+
+/// Get the information about a single token
+pub async fn get_single(id: TokenID) -> anyhow::Result<Token> {
+    Token::load_from_file(&AppConfig::get().api_token_definition_path(id))
+}
+
+/// Update API tokens rights
+pub async fn update_rights(id: TokenID, rights: TokenRights) -> anyhow::Result<()> {
+    let mut token = get_single(id).await?;
+    token.rights = rights;
+    token.updated = time();
+    token.save()?;
+    Ok(())
+}
+
+/// Set last_used value of token
+pub async fn refresh_last_used(id: TokenID) -> anyhow::Result<()> {
+    let mut token = get_single(id).await?;
+    token.last_used = time();
+    token.save()?;
+    Ok(())
+}
+
+/// Delete an API token
+pub async fn delete(id: TokenID) -> anyhow::Result<()> {
+    let path = AppConfig::get().api_token_definition_path(id);
+    if path.exists() {
+        std::fs::remove_file(path)?;
+    }
+    Ok(())
+}
+
+#[cfg(test)]
+mod test {
+    use crate::api_tokens::{TokenRight, TokenRights, TokenVerb};
+
+    #[test]
+    fn test_rights_patch() {
+        let rights = TokenRights(vec![
+            TokenRight {
+                path: "/api/vm/*".to_string(),
+                verb: TokenVerb::GET,
+            },
+            TokenRight {
+                path: "/api/vm/a".to_string(),
+                verb: TokenVerb::PUT,
+            },
+            TokenRight {
+                path: "/api/vm/a/other".to_string(),
+                verb: TokenVerb::DELETE,
+            },
+            TokenRight {
+                path: "/api/net/create".to_string(),
+                verb: TokenVerb::POST,
+            },
+        ]);
+
+        assert!(rights.contains(TokenVerb::GET, "/api/vm/ab"));
+        assert!(!rights.contains(TokenVerb::GET, "/api/vm"));
+        assert!(!rights.contains(TokenVerb::GET, "/api/vm/ab/c"));
+        assert!(rights.contains(TokenVerb::PUT, "/api/vm/a"));
+        assert!(!rights.contains(TokenVerb::PUT, "/api/vm/other"));
+        assert!(rights.contains(TokenVerb::POST, "/api/net/create"));
+        assert!(!rights.contains(TokenVerb::GET, "/api/net/create"));
+        assert!(!rights.contains(TokenVerb::POST, "/api/net/b"));
+        assert!(!rights.contains(TokenVerb::POST, "/api/net/create/b"));
+    }
 }

virtweb_backend/src/app_config.rs

@@ -1,3 +1,4 @@
+use crate::api_tokens::TokenID;
 use crate::constants;
 use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::net::NetworkName;
@@ -67,7 +68,7 @@ pub struct AppConfig {
     #[arg(
         long,
         env,
-        default_value = "http://localhost:9001/.well-known/openid-configuration"
+        default_value = "http://localhost:9001/dex/.well-known/openid-configuration"
     )]
     pub oidc_configuration_url: String,
 
@@ -102,10 +103,15 @@ pub struct AppConfig {
     #[arg(short = 'H', long, env)]
     pub hypervisor_uri: Option<String>,
 
-    /// Trusted network. If set, a client from a different will not be able to perform request other
-    /// than those with GET verb (aside for login)
+    /// Trusted network. If set, a client (user) from a different network will not be able to perform
+    /// request other than those with GET verb (aside for login)
     #[arg(short = 'T', long, env)]
     pub trusted_network: Vec<String>,
+
+    /// Comma-separated list of allowed networks. If set, a client (user or API token) from a
+    /// different network will not be able to access VirtWeb
+    #[arg(short = 'A', long, env)]
+    pub allowed_networks: Vec<String>,
 }
 
 lazy_static::lazy_static! {
@@ -189,6 +195,25 @@ impl AppConfig {
         false
     }
 
+    /// Check if an IP belongs to an allowed network or not
+    pub fn is_allowed_ip(&self, ip: IpAddr) -> bool {
+        if self.allowed_networks.is_empty() {
+            return true;
+        }
+
+        for i in &self.allowed_networks {
+            for sub_i in i.split(',') {
+                let net =
+                    ipnetwork::IpNetwork::from_str(sub_i).expect("Allowed network is invalid!");
+                if net.contains(ip) {
+                    return true;
+                }
+            }
+        }
+
+        false
+    }
+
     /// Get OpenID providers configuration
     pub fn openid_provider(&self) -> Option<OIDCProvider<'_>> {
         if self.disable_oidc {
@@ -272,6 +297,10 @@ impl AppConfig {
     pub fn api_tokens_path(&self) -> PathBuf {
         self.storage_path().join(constants::STORAGE_TOKENS_DIR)
     }
+
+    pub fn api_token_definition_path(&self, id: TokenID) -> PathBuf {
+        self.api_tokens_path().join(format!("{}.json", id.0))
+    }
 }
 
 #[derive(Debug, Clone, serde::Serialize)]

virtweb_backend/src/constants.rs

@@ -104,3 +104,6 @@ pub const API_TOKEN_DESCRIPTION_MIN_LENGTH: usize = 5;
 
 /// API token description max length
 pub const API_TOKEN_DESCRIPTION_MAX_LENGTH: usize = 30;
+
+/// API token right path max length
+pub const API_TOKEN_RIGHT_PATH_MAX_LENGTH: usize = 255;

virtweb_backend/src/controllers/api_tokens_controller.rs

@@ -1,25 +1,25 @@
 //! # API tokens management
 
 use crate::api_tokens;
-use crate::api_tokens::NewToken;
-use crate::controllers::api_tokens_controller::rest_token::RestToken;
+use crate::api_tokens::{NewToken, TokenID, TokenRights};
 use crate::controllers::HttpResult;
-use crate::utils::jwt_utils::TokenPrivKey;
-use actix_web::{web, HttpResponse};
+use crate::controllers::api_tokens_controller::rest_token::RestToken;
+use actix_web::{HttpResponse, web};
+use basic_jwt::JWTPrivateKey;
 
 /// Create a special module for REST token to enforce usage of constructor function
 mod rest_token {
     use crate::api_tokens::Token;
-    use crate::utils::jwt_utils::TokenPubKey;
 
     #[derive(serde::Serialize)]
     pub struct RestToken {
+        #[serde(flatten)]
         token: Token,
     }
 
     impl RestToken {
         pub fn new(mut token: Token) -> Self {
-            token.pub_key = TokenPubKey::None;
+            token.pub_key = None;
             Self { token }
         }
     }
@@ -28,7 +28,7 @@ mod rest_token {
 #[derive(serde::Serialize)]
 struct CreateTokenResult {
     token: RestToken,
-    priv_key: TokenPrivKey,
+    priv_key: JWTPrivateKey,
 }
 
 /// Create a new API token
@@ -47,3 +47,54 @@ pub async fn create(new_token: web::Json<NewToken>) -> HttpResult {
         priv_key,
     }))
 }
+
+/// Get the list of API tokens
+pub async fn list() -> HttpResult {
+    let list = api_tokens::full_list()
+        .await?
+        .into_iter()
+        .map(RestToken::new)
+        .collect::<Vec<_>>();
+
+    Ok(HttpResponse::Ok().json(list))
+}
+
+#[derive(serde::Deserialize)]
+pub struct TokenIDInPath {
+    uid: TokenID,
+}
+
+/// Get the information about a single token
+pub async fn get_single(path: web::Path<TokenIDInPath>) -> HttpResult {
+    let token = api_tokens::get_single(path.uid).await?;
+
+    Ok(HttpResponse::Ok().json(RestToken::new(token)))
+}
+
+#[derive(serde::Deserialize)]
+pub struct UpdateTokenBody {
+    rights: TokenRights,
+}
+
+/// Update a token
+pub async fn update(
+    path: web::Path<TokenIDInPath>,
+    body: web::Json<UpdateTokenBody>,
+) -> HttpResult {
+    if let Some(err) = body.rights.check_error() {
+        log::error!("Failed to validate updated API token information! {err}");
+        return Ok(HttpResponse::BadRequest()
+            .json(format!("Failed to validate API token information! {err}")));
+    }
+
+    api_tokens::update_rights(path.uid, body.0.rights).await?;
+
+    Ok(HttpResponse::Accepted().finish())
+}
+
+/// Delete a token
+pub async fn delete(path: web::Path<TokenIDInPath>) -> HttpResult {
+    api_tokens::delete(path.uid).await?;
+
+    Ok(HttpResponse::Accepted().finish())
+}

virtweb_backend/src/controllers/auth_controller.rs

@@ -1,6 +1,6 @@
 use actix_remote_ip::RemoteIP;
 use actix_web::web::Data;
-use actix_web::{web, HttpResponse, Responder};
+use actix_web::{HttpResponse, Responder, web};
 use light_openid::basic_state_manager::BasicStateManager;
 
 use crate::app_config::AppConfig;

virtweb_backend/src/controllers/groups_controller.rs

@@ -0,0 +1,148 @@
+use crate::controllers::{HttpResult, LibVirtReq};
+use crate::extractors::group_vm_id_extractor::GroupVmIdExtractor;
+use crate::libvirt_rest_structures::vm::VMInfo;
+use actix_web::HttpResponse;
+use std::collections::HashMap;
+
+/// Get the list of groups
+pub async fn list(client: LibVirtReq) -> HttpResult {
+    let groups = match client.get_full_groups_list().await {
+        Err(e) => {
+            log::error!("Failed to get the list of groups! {e}");
+            return Ok(HttpResponse::InternalServerError()
+                .json(format!("Failed to get the list of groups! {e}")));
+        }
+        Ok(l) => l,
+    };
+
+    Ok(HttpResponse::Ok().json(groups))
+}
+
+/// Get information about the VMs of a group
+pub async fn vm_info(vms_xml: GroupVmIdExtractor) -> HttpResult {
+    let mut vms = Vec::new();
+    for vm in vms_xml.0 {
+        vms.push(VMInfo::from_domain(vm)?)
+    }
+    Ok(HttpResponse::Ok().json(vms))
+}
+
+#[derive(Default, serde::Serialize)]
+pub struct TreatmentResult {
+    ok: usize,
+    failed: usize,
+}
+
+/// Start the VMs of a group
+pub async fn vm_start(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.start_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Shutdown the VMs of a group
+pub async fn vm_shutdown(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.shutdown_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Suspend the VMs of a group
+pub async fn vm_suspend(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.suspend_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Resume the VMs of a group
+pub async fn vm_resume(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.resume_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Kill the VMs of a group
+pub async fn vm_kill(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.kill_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Reset the VMs of a group
+pub async fn vm_reset(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.reset_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Get the screenshot of the VMs of a group
+pub async fn vm_screenshot(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    if vms.0.is_empty() {
+        return Ok(HttpResponse::NoContent().finish());
+    }
+
+    let image = if vms.0.len() == 1 {
+        client.screenshot_domain(vms.0[0].uuid.unwrap()).await?
+    } else {
+        return Ok(
+            HttpResponse::UnprocessableEntity().json("Cannot return multiple VM screenshots!!")
+        );
+    };
+
+    Ok(HttpResponse::Ok().content_type("image/png").body(image))
+}
+
+/// Get the state of the VMs
+pub async fn vm_state(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut states = HashMap::new();
+
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            states.insert(uuid, client.get_domain_state(uuid).await?);
+        }
+    }
+
+    Ok(HttpResponse::Ok().json(states))
+}

virtweb_backend/src/controllers/iso_controller.rs

@@ -3,9 +3,9 @@ use crate::constants;
 use crate::controllers::HttpResult;
 use crate::utils::files_utils;
 use actix_files::NamedFile;
-use actix_multipart::form::tempfile::TempFile;
 use actix_multipart::form::MultipartForm;
-use actix_web::{web, HttpRequest, HttpResponse};
+use actix_multipart::form::tempfile::TempFile;
+use actix_web::{HttpRequest, HttpResponse, web};
 use futures_util::StreamExt;
 use std::fs::File;
 use std::io::Write;

virtweb_backend/src/controllers/mod.rs

@@ -1,13 +1,14 @@
 use crate::libvirt_client::LibVirtClient;
 use actix_http::StatusCode;
 use actix_web::body::BoxBody;
-use actix_web::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 use std::error::Error;
 use std::fmt::{Display, Formatter};
 use std::io::ErrorKind;
 
 pub mod api_tokens_controller;
 pub mod auth_controller;
+pub mod groups_controller;
 pub mod iso_controller;
 pub mod network_controller;
 pub mod nwfilter_controller;

virtweb_backend/src/controllers/network_controller.rs

@@ -1,7 +1,7 @@
 use crate::controllers::{HttpResult, LibVirtReq};
 use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::net::NetworkInfo;
-use actix_web::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 
 #[derive(serde::Serialize, serde::Deserialize)]
 pub struct NetworkID {

virtweb_backend/src/controllers/nwfilter_controller.rs

@@ -2,7 +2,7 @@ use crate::constants;
 use crate::controllers::{HttpResult, LibVirtReq};
 use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::nw_filter::NetworkFilter;
-use actix_web::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 
 #[derive(serde::Serialize, serde::Deserialize)]
 pub struct NetworkFilterID {

virtweb_backend/src/controllers/server_controller.rs

@@ -40,6 +40,7 @@ struct ServerConstraints {
     vnc_token_duration: u64,
     vm_name_size: LenConstraints,
     vm_title_size: LenConstraints,
+    group_id_size: LenConstraints,
     memory_size: LenConstraints,
     disk_name_size: LenConstraints,
     disk_size: LenConstraints,
@@ -53,6 +54,7 @@ struct ServerConstraints {
     nwfilter_selectors_count: LenConstraints,
     api_token_name_size: LenConstraints,
     api_token_description_size: LenConstraints,
+    api_token_right_path_size: LenConstraints,
 }
 
 pub async fn static_config(local_auth: LocalAuthEnabled) -> impl Responder {
@@ -71,6 +73,7 @@ pub async fn static_config(local_auth: LocalAuthEnabled) -> impl Responder {
 
             vm_name_size: LenConstraints { min: 2, max: 50 },
             vm_title_size: LenConstraints { min: 0, max: 50 },
+            group_id_size: LenConstraints { min: 3, max: 50 },
             memory_size: LenConstraints {
                 min: constants::MIN_VM_MEMORY,
                 max: constants::MAX_VM_MEMORY,
@@ -110,6 +113,11 @@ pub async fn static_config(local_auth: LocalAuthEnabled) -> impl Responder {
                 min: constants::API_TOKEN_DESCRIPTION_MIN_LENGTH,
                 max: constants::API_TOKEN_DESCRIPTION_MAX_LENGTH,
             },
+
+            api_token_right_path_size: LenConstraints {
+                min: 0,
+                max: constants::API_TOKEN_RIGHT_PATH_MAX_LENGTH,
+            },
         },
     })
 }
@@ -128,16 +136,13 @@ pub async fn server_info(client: LibVirtReq) -> HttpResult {
     system.refresh_all();
 
     let mut components = Components::new();
-    components.refresh_list();
-    components.refresh();
+    components.refresh(true);
 
     let mut disks = Disks::new();
-    disks.refresh_list();
-    disks.refresh();
+    disks.refresh(true);
 
     let mut networks = Networks::new();
-    networks.refresh_list();
-    networks.refresh();
+    networks.refresh(true);
 
     Ok(HttpResponse::Ok().json(ServerInfo {
         hypervisor: client.get_info().await?,
@@ -165,7 +170,7 @@ pub async fn network_hook_status() -> HttpResult {
 
 pub async fn number_vcpus() -> HttpResult {
     let mut system = System::new();
-    system.refresh_cpu();
+    system.refresh_cpu_all();
     let number_cpus = system.cpus().len();
     assert_ne!(number_cpus, 0, "Got invlid number of CPU!");
 

virtweb_backend/src/controllers/static_controller.rs

@@ -18,7 +18,7 @@ mod serve_static_debug {
 
 #[cfg(not(debug_assertions))]
 mod serve_static_release {
-    use actix_web::{web, HttpResponse, Responder};
+    use actix_web::{HttpResponse, Responder, web};
     use rust_embed::RustEmbed;
 
     #[derive(RustEmbed)]

virtweb_backend/src/controllers/vm_controller.rs

@@ -1,11 +1,12 @@
-use crate::actors::vnc_actor::VNCActor;
+use crate::actors::vnc_handler;
 use crate::actors::vnc_tokens_actor::VNCTokensManager;
 use crate::controllers::{HttpResult, LibVirtReq};
-use crate::libvirt_lib_structures::domain::DomainState;
 use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::domain::DomainState;
 use crate::libvirt_rest_structures::vm::VMInfo;
-use actix_web::{web, HttpRequest, HttpResponse};
-use actix_web_actors::ws;
+use actix_web::{HttpRequest, HttpResponse, rt, web};
+use std::path::Path;
+use tokio::net::UnixStream;
 
 #[derive(serde::Serialize)]
 struct VMInfoAndState {
@@ -21,7 +22,7 @@ struct VMUuid {
 
 /// Create a new VM
 pub async fn create(client: LibVirtReq, req: web::Json<VMInfo>) -> HttpResult {
-    let domain = match req.0.as_tomain() {
+    let domain = match req.0.as_domain() {
         Ok(d) => d,
         Err(e) => {
             log::error!("Failed to extract domain info! {e}");
@@ -83,6 +84,8 @@ pub async fn get_single(client: LibVirtReq, id: web::Path<SingleVMUUidReq>) -> H
         }
     };
 
+    log::debug!("INFO={info:#?}");
+
     let state = client.get_domain_state(id.uid).await?;
 
     Ok(HttpResponse::Ok().json(VMInfoAndState {
@@ -112,7 +115,7 @@ pub async fn update(
     id: web::Path<SingleVMUUidReq>,
     req: web::Json<VMInfo>,
 ) -> HttpResult {
-    let mut domain = match req.0.as_tomain() {
+    let mut domain = match req.0.as_domain() {
         Ok(d) => d,
         Err(e) => {
             log::error!("Failed to extract domain info! {e}");
@@ -322,5 +325,19 @@ pub async fn vnc(
     };
 
     log::info!("Start VNC connection on socket {socket_path}");
-    Ok(ws::start(VNCActor::new(&socket_path).await?, &req, stream)?)
+
+    let socket_path = Path::new(&socket_path);
+    if !socket_path.exists() {
+        log::error!("VNC socket path {socket_path:?} does not exist!");
+        return Ok(HttpResponse::ServiceUnavailable().json("VNC socket path does not exists!"));
+    }
+
+    let socket = UnixStream::connect(socket_path).await?;
+
+    let (res, session, msg_stream) = actix_ws::handle(&req, stream)?;
+
+    // spawn websocket handler (and don't await it) so that the response is returned immediately
+    rt::spawn(vnc_handler::handle(session, msg_stream, socket));
+
+    Ok(res)
 }

virtweb_backend/src/extractors/api_auth_extractor.rs

@@ -0,0 +1,151 @@
+use crate::api_tokens::{Token, TokenID, TokenVerb};
+
+use crate::api_tokens;
+use crate::utils::time_utils::time;
+use actix_remote_ip::RemoteIP;
+use actix_web::dev::Payload;
+use actix_web::error::{ErrorBadRequest, ErrorUnauthorized};
+use actix_web::{Error, FromRequest, HttpRequest};
+use std::future::Future;
+use std::pin::Pin;
+
+#[derive(serde::Serialize, serde::Deserialize, Debug)]
+pub struct TokenClaims {
+    pub sub: String,
+    pub iat: usize,
+    pub exp: usize,
+    pub verb: TokenVerb,
+    pub path: String,
+    pub nonce: String,
+}
+
+pub struct ApiAuthExtractor {
+    pub token: Token,
+    pub claims: TokenClaims,
+}
+
+impl FromRequest for ApiAuthExtractor {
+    type Error = Error;
+    type Future = Pin<Box<dyn Future<Output = Result<Self, Self::Error>>>>;
+
+    fn from_request(req: &HttpRequest, payload: &mut Payload) -> Self::Future {
+        let req = req.clone();
+
+        let remote_ip = match RemoteIP::from_request(&req, payload).into_inner() {
+            Ok(ip) => ip,
+            Err(e) => return Box::pin(async { Err(e) }),
+        };
+
+        Box::pin(async move {
+            let (token_id, token_jwt) = match (
+                req.headers().get("x-token-id"),
+                req.headers().get("x-token-content"),
+            ) {
+                (Some(id), Some(jwt)) => (
+                    id.to_str().unwrap_or("").to_string(),
+                    jwt.to_str().unwrap_or("").to_string(),
+                ),
+                (_, _) => {
+                    return Err(ErrorBadRequest("API auth headers were not all specified!"));
+                }
+            };
+
+            let token_id = match TokenID::parse(&token_id) {
+                Ok(t) => t,
+                Err(e) => {
+                    log::error!("Failed to parse token id! {e}");
+                    return Err(ErrorBadRequest("Unable to validate token ID!"));
+                }
+            };
+
+            let token = match api_tokens::get_single(token_id).await {
+                Ok(t) => t,
+                Err(e) => {
+                    log::error!("Failed to retrieve token: {e}");
+                    return Err(ErrorBadRequest("Unable to validate token!"));
+                }
+            };
+
+            if token.is_expired() {
+                log::error!("Token has expired (not been used for too long)!");
+                return Err(ErrorBadRequest("Unable to validate token!"));
+            }
+
+            let claims = match token
+                .pub_key
+                .as_ref()
+                .expect("All tokens shall have public key!")
+                .validate_jwt::<TokenClaims>(&token_jwt)
+            {
+                Ok(c) => c,
+                Err(e) => {
+                    log::error!("Failed to validate JWT: {e}");
+                    return Err(ErrorBadRequest("Unable to validate token!"));
+                }
+            };
+
+            if claims.sub != token.id.0.to_string() {
+                log::error!("JWT sub mismatch (should equal to token id)!");
+                return Err(ErrorBadRequest(
+                    "JWT sub mismatch (should equal to token id)!",
+                ));
+            }
+
+            if time() + 60 * 15 < claims.iat as u64 {
+                log::error!("iat is in the future!");
+                return Err(ErrorBadRequest("iat is in the future!"));
+            }
+
+            if claims.exp < claims.iat {
+                log::error!("exp shall not be smaller than iat!");
+                return Err(ErrorBadRequest("exp shall not be smaller than iat!"));
+            }
+
+            if claims.exp - claims.iat > 1800 {
+                log::error!("JWT shall not be valid more than 30 minutes!");
+                return Err(ErrorBadRequest(
+                    "JWT shall not be valid more than 30 minutes!",
+                ));
+            }
+
+            if claims.path != req.path() {
+                log::error!("JWT path mismatch!");
+                return Err(ErrorBadRequest("JWT path mismatch!"));
+            }
+
+            if claims.verb.as_method() != req.method() {
+                log::error!("JWT method mismatch!");
+                return Err(ErrorBadRequest("JWT method mismatch!"));
+            }
+
+            if !token.rights.contains(claims.verb, req.path()) {
+                log::error!(
+                    "Attempt to use a token for an unauthorized route! (token_id={})",
+                    token.id.0
+                );
+                return Err(ErrorUnauthorized(
+                    "Token cannot be used to query this route!",
+                ));
+            }
+
+            if let Some(ip) = token.ip_restriction {
+                if !ip.contains(remote_ip.0) {
+                    log::error!(
+                        "Attempt to use a token for an unauthorized IP! {remote_ip:?} token_id={}",
+                        token.id.0
+                    );
+                    return Err(ErrorUnauthorized("Token cannot be used from this IP!"));
+                }
+            }
+
+            if token.should_update_last_activity() {
+                if let Err(e) = api_tokens::refresh_last_used(token.id).await {
+                    log::error!("Could not update token last activity! {e}");
+                    return Err(ErrorBadRequest("Couldn't refresh token last activity!"));
+                }
+            }
+
+            Ok(ApiAuthExtractor { token, claims })
+        })
+    }
+}

virtweb_backend/src/extractors/auth_extractor.rs

@@ -1,7 +1,7 @@
 use actix_identity::Identity;
 use actix_web::dev::Payload;
 use actix_web::{Error, FromRequest, HttpMessage, HttpRequest};
-use futures_util::future::{ready, Ready};
+use futures_util::future::{Ready, ready};
 use std::fmt::Display;
 
 pub struct AuthExtractor {

virtweb_backend/src/extractors/group_vm_id_extractor.rs

@@ -0,0 +1,66 @@
+use crate::controllers::LibVirtReq;
+use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::domain::DomainXML;
+use crate::libvirt_rest_structures::vm::VMGroupId;
+use actix_http::Payload;
+use actix_web::error::ErrorBadRequest;
+use actix_web::web::Query;
+use actix_web::{Error, FromRequest, HttpRequest, web};
+use std::future::Future;
+use std::pin::Pin;
+
+pub struct GroupVmIdExtractor(pub Vec<DomainXML>);
+
+#[derive(serde::Deserialize)]
+struct GroupIDInPath {
+    gid: VMGroupId,
+}
+
+#[derive(serde::Deserialize)]
+struct FilterVM {
+    vm_id: Option<XMLUuid>,
+}
+
+impl FromRequest for GroupVmIdExtractor {
+    type Error = Error;
+    type Future = Pin<Box<dyn Future<Output = Result<Self, Self::Error>>>>;
+
+    fn from_request(req: &HttpRequest, _payload: &mut Payload) -> Self::Future {
+        let req = req.clone();
+
+        Box::pin(async move {
+            let Ok(group_id) =
+                web::Path::<GroupIDInPath>::from_request(&req, &mut Payload::None).await
+            else {
+                return Err(ErrorBadRequest("Group ID not specified in path!"));
+            };
+            let group_id = group_id.into_inner().gid;
+
+            let filter_vm = match Query::<FilterVM>::from_request(&req, &mut Payload::None).await {
+                Ok(v) => v,
+                Err(e) => {
+                    log::error!("Failed to extract VM id from request! {e}");
+                    return Err(ErrorBadRequest("Failed to extract VM id from request!"));
+                }
+            };
+
+            let Ok(client) = LibVirtReq::from_request(&req, &mut Payload::None).await else {
+                return Err(ErrorBadRequest("Failed to extract client handle!"));
+            };
+
+            let vms = match client.get_full_group_vm_list(&group_id).await {
+                Ok(vms) => vms,
+                Err(e) => {
+                    log::error!("Failed to get the VMs of the group {group_id:?}: {e}");
+                    return Err(ErrorBadRequest("Failed to get the VMs of the group!"));
+                }
+            };
+
+            // Filter (if requested by the user)
+            Ok(GroupVmIdExtractor(match filter_vm.vm_id {
+                None => vms,
+                Some(id) => vms.into_iter().filter(|vms| vms.uuid == Some(id)).collect(),
+            }))
+        })
+    }
+}

virtweb_backend/src/extractors/local_auth_extractor.rs

@@ -1,7 +1,7 @@
 use crate::app_config::AppConfig;
 use actix_web::dev::Payload;
 use actix_web::{Error, FromRequest, HttpRequest};
-use futures_util::future::{ready, Ready};
+use futures_util::future::{Ready, ready};
 use std::ops::Deref;
 
 #[derive(Debug, Copy, Clone, PartialEq)]

virtweb_backend/src/extractors/mod.rs

@@ -1,2 +1,4 @@
+pub mod api_auth_extractor;
 pub mod auth_extractor;
+pub mod group_vm_id_extractor;
 pub mod local_auth_extractor;

virtweb_backend/src/libvirt_client.rs

@@ -1,14 +1,15 @@
 use crate::actors::libvirt_actor;
 use crate::actors::libvirt_actor::LibVirtActor;
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::domain::{DomainState, DomainXML};
 use crate::libvirt_lib_structures::network::NetworkXML;
 use crate::libvirt_lib_structures::nwfilter::NetworkFilterXML;
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::hypervisor::HypervisorInfo;
 use crate::libvirt_rest_structures::net::NetworkInfo;
 use crate::libvirt_rest_structures::nw_filter::NetworkFilter;
-use crate::libvirt_rest_structures::vm::VMInfo;
+use crate::libvirt_rest_structures::vm::{VMGroupId, VMInfo};
 use actix::Addr;
+use std::collections::HashSet;
 
 #[derive(Clone)]
 pub struct LibVirtClient(pub Addr<LibVirtActor>);
@@ -107,6 +108,35 @@ impl LibVirtClient {
             .await?
     }
 
+    /// Get the full list of groups
+    pub async fn get_full_groups_list(&self) -> anyhow::Result<Vec<VMGroupId>> {
+        let domains = self.get_full_domains_list().await?;
+        let mut out = HashSet::new();
+        for d in domains {
+            if let Some(g) = VMInfo::from_domain(d)?.group {
+                out.insert(g);
+            }
+        }
+        let mut out: Vec<_> = out.into_iter().collect();
+        out.sort();
+        Ok(out)
+    }
+
+    /// Get the full list of VMs of a given group
+    pub async fn get_full_group_vm_list(
+        &self,
+        group: &VMGroupId,
+    ) -> anyhow::Result<Vec<DomainXML>> {
+        let vms = self.get_full_domains_list().await?;
+        let mut out = Vec::new();
+        for vm in vms {
+            if VMInfo::from_domain(vm.clone())?.group == Some(group.clone()) {
+                out.push(vm);
+            }
+        }
+        Ok(out)
+    }
+
     /// Update a network configuration
     pub async fn update_network(
         &self,

virtweb_backend/src/libvirt_lib_structures/domain.rs

@@ -1,7 +1,25 @@
 use crate::libvirt_lib_structures::XMLUuid;
 
+/// VirtWeb specific metadata
+#[derive(serde::Serialize, serde::Deserialize, Default, Debug, Clone)]
+#[serde(rename = "virtweb", default)]
+pub struct DomainMetadataVirtWebXML {
+    #[serde(rename = "@xmlns:virtweb", default)]
+    pub ns: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub group: Option<String>,
+}
+
+/// Domain metadata
+#[derive(serde::Serialize, serde::Deserialize, Default, Debug, Clone)]
+#[serde(rename = "metadata")]
+pub struct DomainMetadataXML {
+    #[serde(rename = "virtweb:metadata", default)]
+    pub virtweb: DomainMetadataVirtWebXML,
+}
+
 /// OS information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "os")]
 pub struct OSXML {
     #[serde(rename = "@firmware", default)]
@@ -11,7 +29,7 @@ pub struct OSXML {
 }
 
 /// OS Type information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "os")]
 pub struct OSTypeXML {
     #[serde(rename = "@arch")]
@@ -23,7 +41,7 @@ pub struct OSTypeXML {
 }
 
 /// OS Loader information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "loader")]
 pub struct OSLoaderXML {
     #[serde(rename = "@secure")]
@@ -31,39 +49,39 @@ pub struct OSLoaderXML {
 }
 
 /// Hypervisor features
-#[derive(serde::Serialize, serde::Deserialize, Default)]
+#[derive(serde::Serialize, serde::Deserialize, Clone, Default, Debug)]
 #[serde(rename = "features")]
 pub struct FeaturesXML {
     pub acpi: ACPIXML,
 }
 
 /// ACPI feature
-#[derive(serde::Serialize, serde::Deserialize, Default)]
+#[derive(serde::Serialize, serde::Deserialize, Clone, Default, Debug)]
 #[serde(rename = "acpi")]
 pub struct ACPIXML {}
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "mac")]
 pub struct NetMacAddress {
     #[serde(rename = "@address")]
     pub address: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "source")]
 pub struct NetIntSourceXML {
     #[serde(rename = "@network")]
     pub network: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "model")]
 pub struct NetIntModelXML {
     #[serde(rename = "@type")]
     pub r#type: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "filterref")]
 pub struct NetIntFilterParameterXML {
     #[serde(rename = "@name")]
@@ -72,7 +90,7 @@ pub struct NetIntFilterParameterXML {
     pub value: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "filterref")]
 pub struct NetIntfilterRefXML {
     #[serde(rename = "@filter")]
@@ -81,7 +99,7 @@ pub struct NetIntfilterRefXML {
     pub parameters: Vec<NetIntFilterParameterXML>,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "interface")]
 pub struct DomainNetInterfaceXML {
     #[serde(rename = "@type")]
@@ -95,14 +113,14 @@ pub struct DomainNetInterfaceXML {
     pub filterref: Option<NetIntfilterRefXML>,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "input")]
 pub struct DomainInputXML {
     #[serde(rename = "@type")]
     pub r#type: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "backend")]
 pub struct TPMBackendXML {
     #[serde(rename = "@type")]
@@ -112,7 +130,7 @@ pub struct TPMBackendXML {
     pub r#version: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "tpm")]
 pub struct TPMDeviceXML {
     #[serde(rename = "@model")]
@@ -121,7 +139,7 @@ pub struct TPMDeviceXML {
 }
 
 /// Devices information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "devices")]
 pub struct DevicesXML {
     /// Graphics (used for VNC)
@@ -150,7 +168,7 @@ pub struct DevicesXML {
 }
 
 /// Graphics information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "graphics")]
 pub struct GraphicsXML {
     #[serde(rename = "@type")]
@@ -160,14 +178,14 @@ pub struct GraphicsXML {
 }
 
 /// Video device information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "video")]
 pub struct VideoXML {
     pub model: VideoModelXML,
 }
 
 /// Video model device information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "model")]
 pub struct VideoModelXML {
     #[serde(rename = "@type")]
@@ -175,7 +193,7 @@ pub struct VideoModelXML {
 }
 
 /// Disk information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "disk")]
 pub struct DiskXML {
     #[serde(rename = "@type")]
@@ -193,7 +211,7 @@ pub struct DiskXML {
     pub address: Option<DiskAddressXML>,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "driver")]
 pub struct DiskDriverXML {
     #[serde(rename = "@name")]
@@ -204,14 +222,14 @@ pub struct DiskDriverXML {
     pub r#cache: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "source")]
 pub struct DiskSourceXML {
     #[serde(rename = "@file")]
     pub file: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "target")]
 pub struct DiskTargetXML {
     #[serde(rename = "@dev")]
@@ -220,18 +238,18 @@ pub struct DiskTargetXML {
     pub bus: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "readonly")]
 pub struct DiskReadOnlyXML {}
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "boot")]
 pub struct DiskBootXML {
     #[serde(rename = "@order")]
     pub order: String,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "address")]
 pub struct DiskAddressXML {
     #[serde(rename = "@type")]
@@ -251,7 +269,7 @@ pub struct DiskAddressXML {
 }
 
 /// Domain RAM information
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "memory")]
 pub struct DomainMemoryXML {
     #[serde(rename = "@unit")]
@@ -261,7 +279,7 @@ pub struct DomainMemoryXML {
     pub memory: usize,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "topology")]
 pub struct DomainCPUTopology {
     #[serde(rename = "@sockets")]
@@ -272,14 +290,14 @@ pub struct DomainCPUTopology {
     pub threads: usize,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "cpu")]
 pub struct DomainVCPUXML {
     #[serde(rename = "$value")]
     pub body: usize,
 }
 
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "cpu")]
 pub struct DomainCPUXML {
     #[serde(rename = "@mode")]
@@ -288,7 +306,7 @@ pub struct DomainCPUXML {
 }
 
 /// Domain information, see https://libvirt.org/formatdomain.html
-#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "domain")]
 pub struct DomainXML {
     /// Domain type (kvm)
@@ -300,6 +318,9 @@ pub struct DomainXML {
     pub genid: Option<uuid::Uuid>,
     pub title: Option<String>,
     pub description: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub metadata: Option<DomainMetadataXML>,
+
     pub os: OSXML,
     #[serde(default)]
     pub features: FeaturesXML,
@@ -319,10 +340,32 @@ pub struct DomainXML {
     pub on_crash: String,
 }
 
+const METADATA_START_MARKER: &str =
+    "<virtweb:metadata xmlns:virtweb=\"https://virtweb.communiquons.org\">";
+const METADATA_END_MARKER: &str = "</virtweb:metadata>";
+
 impl DomainXML {
     /// Decode Domain structure from XML definition
     pub fn parse_xml(xml: &str) -> anyhow::Result<Self> {
-        Ok(quick_xml::de::from_str(xml)?)
+        let mut res: Self = quick_xml::de::from_str(xml)?;
+
+        // Handle custom metadata parsing issue
+        //
+        // https://github.com/tafia/quick-xml/pull/797
+        if xml.contains(METADATA_START_MARKER) && xml.contains(METADATA_END_MARKER) {
+            let s = xml
+                .split_once(METADATA_START_MARKER)
+                .unwrap()
+                .1
+                .split_once(METADATA_END_MARKER)
+                .unwrap()
+                .0;
+            let s = format!("<virtweb>{s}</virtweb>");
+            let metadata: DomainMetadataVirtWebXML = quick_xml::de::from_str(&s)?;
+            res.metadata = Some(DomainMetadataXML { virtweb: metadata });
+        }
+
+        Ok(res)
     }
 
     /// Turn this domain into its XML definition

virtweb_backend/src/libvirt_lib_structures/mod.rs

@@ -1,4 +1,4 @@
-#[derive(serde::Serialize, serde::Deserialize, Clone, Copy, Debug)]
+#[derive(serde::Serialize, serde::Deserialize, Clone, Copy, Debug, Eq, PartialEq, Hash)]
 pub struct XMLUuid(pub uuid::Uuid);
 
 impl XMLUuid {

virtweb_backend/src/libvirt_rest_structures/net.rs

@@ -1,5 +1,5 @@
-use crate::libvirt_lib_structures::network::*;
 use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::network::*;
 use crate::libvirt_rest_structures::LibVirtStructError::StructureExtraction;
 use crate::nat::nat_definition::Nat;
 use crate::nat::nat_lib;

virtweb_backend/src/libvirt_rest_structures/nw_filter.rs

@@ -1,9 +1,9 @@
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::nwfilter::{
     NetworkFilterRefXML, NetworkFilterRuleProtocolAllXML, NetworkFilterRuleProtocolArpXML,
     NetworkFilterRuleProtocolIpvx, NetworkFilterRuleProtocolLayer4, NetworkFilterRuleProtocolMac,
     NetworkFilterRuleXML, NetworkFilterXML,
 };
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::LibVirtStructError;
 use crate::libvirt_rest_structures::LibVirtStructError::{
     NetworkFilterExtraction, StructureExtraction,

virtweb_backend/src/libvirt_rest_structures/vm.rs

@@ -1,7 +1,7 @@
 use crate::app_config::AppConfig;
 use crate::constants;
-use crate::libvirt_lib_structures::domain::*;
 use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::domain::*;
 use crate::libvirt_rest_structures::LibVirtStructError;
 use crate::libvirt_rest_structures::LibVirtStructError::StructureExtraction;
 use crate::utils::disks_utils::Disk;
@@ -10,6 +10,11 @@ use crate::utils::files_utils::convert_size_unit_to_mb;
 use lazy_regex::regex;
 use num::Integer;
 
+#[derive(
+    Debug, Clone, serde::Serialize, serde::Deserialize, PartialEq, Eq, Hash, Ord, PartialOrd,
+)]
+pub struct VMGroupId(pub String);
+
 #[derive(serde::Serialize, serde::Deserialize)]
 pub enum BootType {
     UEFI,
@@ -59,6 +64,9 @@ pub struct VMInfo {
     pub genid: Option<XMLUuid>,
     pub title: Option<String>,
     pub description: Option<String>,
+    /// Group associated with the VM (VirtWeb specific field)
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub group: Option<VMGroupId>,
     pub boot_type: BootType,
     pub architecture: VMArchitecture,
     /// VM allocated memory, in megabytes
@@ -79,7 +87,7 @@ pub struct VMInfo {
 
 impl VMInfo {
     /// Turn this VM into a domain
-    pub fn as_tomain(&self) -> anyhow::Result<DomainXML> {
+    pub fn as_domain(&self) -> anyhow::Result<DomainXML> {
         if !regex!("^[a-zA-Z0-9]+$").is_match(&self.name) {
             return Err(StructureExtraction("VM name is invalid!").into());
         }
@@ -105,6 +113,12 @@ impl VMInfo {
             }
         }
 
+        if let Some(group) = &self.group {
+            if !regex!("^[a-zA-Z0-9]+$").is_match(&group.0) {
+                return Err(StructureExtraction("VM group name is invalid!").into());
+            }
+        }
+
         if self.memory < constants::MIN_VM_MEMORY || self.memory > constants::MAX_VM_MEMORY {
             return Err(StructureExtraction("VM memory is invalid!").into());
         }
@@ -282,6 +296,12 @@ impl VMInfo {
             title: self.title.clone(),
             description: self.description.clone(),
 
+            metadata: Some(DomainMetadataXML {
+                virtweb: DomainMetadataVirtWebXML {
+                    ns: "https://virtweb.communiquons.org".to_string(),
+                    group: self.group.clone().map(|g| g.0),
+                },
+            }),
             os: OSXML {
                 r#type: OSTypeXML {
                     arch: match self.architecture {
@@ -369,6 +389,13 @@ impl VMInfo {
             genid: domain.genid.map(XMLUuid),
             title: domain.title,
             description: domain.description,
+            group: domain
+                .metadata
+                .clone()
+                .unwrap_or_default()
+                .virtweb
+                .group
+                .map(VMGroupId),
             boot_type: match domain.os.loader {
                 None => BootType::UEFI,
                 Some(l) => match l.secure.as_str() {

virtweb_backend/src/main.rs

@@ -1,17 +1,17 @@
 use actix::Actor;
 use actix_cors::Cors;
-use actix_identity::config::LogoutBehaviour;
 use actix_identity::IdentityMiddleware;
-use actix_multipart::form::tempfile::TempFileConfig;
+use actix_identity::config::LogoutBehaviour;
 use actix_multipart::form::MultipartFormConfig;
+use actix_multipart::form::tempfile::TempFileConfig;
 use actix_remote_ip::RemoteIPConfig;
-use actix_session::storage::CookieSessionStore;
 use actix_session::SessionMiddleware;
+use actix_session::storage::CookieSessionStore;
 use actix_web::cookie::{Key, SameSite};
 use actix_web::http::header;
 use actix_web::middleware::Logger;
 use actix_web::web::Data;
-use actix_web::{web, App, HttpServer};
+use actix_web::{App, HttpServer, web};
 use light_openid::basic_state_manager::BasicStateManager;
 use std::time::Duration;
 use virtweb_backend::actors::libvirt_actor::LibVirtActor;
@@ -22,7 +22,7 @@ use virtweb_backend::constants::{
     MAX_INACTIVITY_DURATION, MAX_SESSION_DURATION, SESSION_COOKIE_NAME,
 };
 use virtweb_backend::controllers::{
-    api_tokens_controller, auth_controller, iso_controller, network_controller,
+    api_tokens_controller, auth_controller, groups_controller, iso_controller, network_controller,
     nwfilter_controller, server_controller, static_controller, vm_controller,
 };
 use virtweb_backend::libvirt_client::LibVirtClient;
@@ -85,7 +85,7 @@ async fn main() -> std::io::Result<()> {
 
         let mut cors = Cors::default()
             .allowed_origin(&AppConfig::get().website_origin)
-            .allowed_methods(vec!["GET", "POST", "DELETE", "PUT"])
+            .allowed_methods(vec!["GET", "POST", "DELETE", "PUT", "PATCH"])
             .allowed_headers(vec![header::AUTHORIZATION, header::ACCEPT])
             .allowed_header(header::CONTENT_TYPE)
             .supports_credentials()
@@ -210,6 +210,44 @@ async fn main() -> std::io::Result<()> {
                 web::get().to(vm_controller::vnc_token),
             )
             .route("/api/vnc", web::get().to(vm_controller::vnc))
+            // Groups controller
+            .route("/api/group/list", web::get().to(groups_controller::list))
+            .route(
+                "/api/group/{gid}/vm/info",
+                web::get().to(groups_controller::vm_info),
+            )
+            .route(
+                "/api/group/{gid}/vm/start",
+                web::get().to(groups_controller::vm_start),
+            )
+            .route(
+                "/api/group/{gid}/vm/shutdown",
+                web::get().to(groups_controller::vm_shutdown),
+            )
+            .route(
+                "/api/group/{gid}/vm/suspend",
+                web::get().to(groups_controller::vm_suspend),
+            )
+            .route(
+                "/api/group/{gid}/vm/resume",
+                web::get().to(groups_controller::vm_resume),
+            )
+            .route(
+                "/api/group/{gid}/vm/kill",
+                web::get().to(groups_controller::vm_kill),
+            )
+            .route(
+                "/api/group/{gid}/vm/reset",
+                web::get().to(groups_controller::vm_reset),
+            )
+            .route(
+                "/api/group/{gid}/vm/screenshot",
+                web::get().to(groups_controller::vm_screenshot),
+            )
+            .route(
+                "/api/group/{gid}/vm/state",
+                web::get().to(groups_controller::vm_state),
+            )
             // Network controller
             .route(
                 "/api/network/create",
@@ -279,25 +317,25 @@ async fn main() -> std::io::Result<()> {
             )
             // API tokens controller
             .route(
-                "/api/tokens/create",
+                "/api/token/create",
                 web::post().to(api_tokens_controller::create),
             )
-            /* TODO .route(
-                "/api/tokens/list",
+            .route(
+                "/api/token/list",
                 web::get().to(api_tokens_controller::list),
             )
             .route(
-                "/api/tokens/{uid}",
+                "/api/token/{uid}",
                 web::get().to(api_tokens_controller::get_single),
             )
             .route(
-                "/api/tokens/{uid}",
-                web::put().to(api_tokens_controller::update),
+                "/api/token/{uid}",
+                web::patch().to(api_tokens_controller::update),
             )
             .route(
-                "/api/tokens/{uid}",
+                "/api/token/{uid}",
                 web::delete().to(api_tokens_controller::delete),
-            )*/
+            )
             // Static assets
             .route("/", web::get().to(static_controller::root_index))
             .route(

virtweb_backend/src/middlewares/auth_middleware.rs

@@ -1,14 +1,15 @@
-use std::future::{ready, Ready};
+use std::future::{Ready, ready};
 use std::rc::Rc;
 
 use crate::app_config::AppConfig;
 use crate::constants;
+use crate::extractors::api_auth_extractor::ApiAuthExtractor;
 use crate::extractors::auth_extractor::AuthExtractor;
 use actix_web::body::EitherBody;
 use actix_web::dev::Payload;
 use actix_web::{
-    dev::{forward_ready, Service, ServiceRequest, ServiceResponse, Transform},
     Error, FromRequest, HttpResponse,
+    dev::{Service, ServiceRequest, ServiceResponse, Transform, forward_ready},
 };
 use futures_util::future::LocalBoxFuture;
 
@@ -66,10 +67,43 @@ where
                     .await
                     .unwrap();
 
+            if !AppConfig::get().is_allowed_ip(remote_ip.0) {
+                log::error!(
+                    "An attempt to access VirtWeb from an unauthorized network has been intercepted! {:?}",
+                    remote_ip
+                );
+                return Ok(req
+                    .into_response(
+                        HttpResponse::MethodNotAllowed()
+                            .json("I am sorry, but your IP is not allowed to access this service!"),
+                    )
+                    .map_into_right_body());
+            }
+
             let auth_disabled = AppConfig::get().unsecure_disable_auth;
 
-            // Check authentication, if required
-            if !auth_disabled
+            // Check API authentication
+            if req.headers().get("x-token-id").is_some() {
+                let auth =
+                    match ApiAuthExtractor::from_request(req.request(), &mut Payload::None).await {
+                        Ok(auth) => auth,
+                        Err(e) => {
+                            log::error!(
+                                "Failed to extract API authentication information from request! {e}"
+                            );
+                            return Ok(req
+                                .into_response(HttpResponse::PreconditionFailed().finish())
+                                .map_into_right_body());
+                        }
+                    };
+
+                log::info!(
+                    "Using API token '{}' to perform the request",
+                    auth.token.name
+                );
+            }
+            // Check user authentication, if required
+            else if !auth_disabled
                 && !constants::ROUTES_WITHOUT_AUTH.contains(&req.path())
                 && req.path().starts_with("/api/")
             {

virtweb_backend/src/nat/nat_conf_mode.rs

@@ -49,7 +49,9 @@ pub async fn sub_main() -> anyhow::Result<()> {
     let args = NatArgs::parse();
 
     if !args.network_file().exists() {
-        log::warn!("Cannot do anything for the network, because the NAT configuration file does not exixsts!");
+        log::warn!(
+            "Cannot do anything for the network, because the NAT configuration file does not exixsts!"
+        );
         return Ok(());
     }
 
@@ -184,7 +186,9 @@ fn toggle_port_forwarding(
         false => "tcp",
     };
 
-    log::info!("Forward (add={enable}) incoming {protocol} connections for {host_ip}:{host_port} to {guest_ip}:{guest_port} int {net_interface}");
+    log::info!(
+        "Forward (add={enable}) incoming {protocol} connections for {host_ip}:{host_port} to {guest_ip}:{guest_port} int {net_interface}"
+    );
 
     // Rule 1
     let cmd = Command::new(program)

virtweb_backend/src/utils/jwt_utils.rs

@@ -1,140 +0,0 @@
-use elliptic_curve::pkcs8::EncodePublicKey;
-use jsonwebtoken::{Algorithm, DecodingKey, EncodingKey, Validation};
-use p384::ecdsa::{SigningKey, VerifyingKey};
-use p384::pkcs8::{EncodePrivateKey, LineEnding};
-use rand::rngs::OsRng;
-use serde::de::DeserializeOwned;
-use serde::Serialize;
-
-#[derive(serde::Serialize, serde::Deserialize, Clone, Debug)]
-#[serde(tag = "alg")]
-pub enum TokenPubKey {
-    /// This variant DOES make crash the program. It MUST NOT be serialized.
-    ///
-    /// It is a hack to hide public key when getting the list of tokens
-    None,
-
-    /// ECDSA with SHA2-384 variant
-    ES384 { r#pub: String },
-}
-
-#[derive(serde::Serialize, serde::Deserialize, Clone, Debug)]
-#[serde(tag = "alg")]
-pub enum TokenPrivKey {
-    ES384 { r#priv: String },
-}
-
-/// Generate a new token keypair
-pub fn generate_key_pair() -> anyhow::Result<(TokenPubKey, TokenPrivKey)> {
-    let signing_key = SigningKey::random(&mut OsRng);
-    let priv_pem = signing_key
-        .to_pkcs8_der()?
-        .to_pem("PRIVATE KEY", LineEnding::LF)?
-        .to_string();
-
-    let pub_key = VerifyingKey::from(signing_key);
-    let pub_pem = pub_key.to_public_key_pem(LineEnding::LF)?;
-
-    Ok((
-        TokenPubKey::ES384 { r#pub: pub_pem },
-        TokenPrivKey::ES384 { r#priv: priv_pem },
-    ))
-}
-
-/// Sign JWT with a private key
-pub fn sign_jwt<C: Serialize>(key: &TokenPrivKey, claims: &C) -> anyhow::Result<String> {
-    match key {
-        TokenPrivKey::ES384 { r#priv } => {
-            let encoding_key = EncodingKey::from_ec_pem(r#priv.as_bytes())?;
-
-            Ok(jsonwebtoken::encode(
-                &jsonwebtoken::Header::new(Algorithm::ES384),
-                &claims,
-                &encoding_key,
-            )?)
-        }
-    }
-}
-
-/// Validate a given JWT
-pub fn validate_jwt<E: DeserializeOwned>(key: &TokenPubKey, token: &str) -> anyhow::Result<E> {
-    match key {
-        TokenPubKey::ES384 { r#pub } => {
-            let decoding_key = DecodingKey::from_ec_pem(r#pub.as_bytes())?;
-
-            let validation = Validation::new(Algorithm::ES384);
-            Ok(jsonwebtoken::decode::<E>(token, &decoding_key, &validation)?.claims)
-        }
-        TokenPubKey::None => {
-            panic!("A public key is required!")
-        }
-    }
-}
-
-#[cfg(test)]
-mod test {
-    use crate::utils::jwt_utils::{generate_key_pair, sign_jwt, validate_jwt};
-    use crate::utils::time_utils::time;
-    use serde::{Deserialize, Serialize};
-
-    #[derive(Debug, Serialize, Deserialize, Eq, PartialEq)]
-    pub struct Claims {
-        sub: String,
-        exp: u64,
-    }
-
-    impl Default for Claims {
-        fn default() -> Self {
-            Self {
-                sub: "my-sub".to_string(),
-                exp: time() + 100,
-            }
-        }
-    }
-
-    #[test]
-    fn jwt_encode_sign_verify_valid() {
-        let (pub_key, priv_key) = generate_key_pair().unwrap();
-        let claims = Claims::default();
-        let jwt = sign_jwt(&priv_key, &claims).expect("Failed to sign JWT!");
-        let claims_out = validate_jwt(&pub_key, &jwt).expect("Failed to validate JWT!");
-
-        assert_eq!(claims, claims_out)
-    }
-
-    #[test]
-    fn jwt_encode_sign_verify_invalid_key() {
-        let (_pub_key, priv_key) = generate_key_pair().unwrap();
-        let (pub_key_2, _priv_key_2) = generate_key_pair().unwrap();
-        let claims = Claims::default();
-        let jwt = sign_jwt(&priv_key, &claims).expect("Failed to sign JWT!");
-        validate_jwt::<Claims>(&pub_key_2, &jwt).expect_err("JWT should not have validated!");
-    }
-
-    #[test]
-    fn jwt_verify_random_string() {
-        let (pub_key, _priv_key) = generate_key_pair().unwrap();
-        validate_jwt::<Claims>(&pub_key, "random_string")
-            .expect_err("JWT should not have validated!");
-    }
-
-    #[test]
-    fn jwt_expired() {
-        let (pub_key, priv_key) = generate_key_pair().unwrap();
-        let claims = Claims {
-            exp: time() - 100,
-            ..Default::default()
-        };
-        let jwt = sign_jwt(&priv_key, &claims).expect("Failed to sign JWT!");
-        validate_jwt::<Claims>(&pub_key, &jwt).expect_err("JWT should not have validated!");
-    }
-
-    #[test]
-    fn jwt_invalid_signature() {
-        let (pub_key, priv_key) = generate_key_pair().unwrap();
-        let claims = Claims::default();
-        let jwt = sign_jwt(&priv_key, &claims).expect("Failed to sign JWT!");
-        validate_jwt::<Claims>(&pub_key, &format!("{jwt}bad"))
-            .expect_err("JWT should not have validated!");
-    }
-}

virtweb_backend/src/utils/mod.rs

@@ -1,6 +1,5 @@
 pub mod disks_utils;
 pub mod files_utils;
-pub mod jwt_utils;
 pub mod net_utils;
 pub mod rand_utils;
 pub mod time_utils;

virtweb_backend/src/utils/net_utils.rs

@@ -57,7 +57,7 @@ pub fn is_net_interface_name_valid<D: AsRef<str>>(int: D) -> bool {
 /// Get the list of available network interfaces
 pub fn net_list() -> Vec<String> {
     let mut networks = Networks::new();
-    networks.refresh_list();
+    networks.refresh(true);
 
     networks
         .list()

virtweb_backend/src/utils/rand_utils.rs

@@ -1,12 +1,6 @@
-use rand::distributions::Alphanumeric;
-use rand::Rng;
+use rand::distr::{Alphanumeric, SampleString};
 
 /// Generate a random string
 pub fn rand_str(len: usize) -> String {
-    let s: String = rand::thread_rng()
-        .sample_iter(&Alphanumeric)
-        .take(len)
-        .map(char::from)
-        .collect();
-    s
+    Alphanumeric.sample_string(&mut rand::rng(), len)
 }

virtweb_docs/SETUP_PROD.md

@@ -9,7 +9,7 @@ make
 
 The release file will be available in `virtweb_backend/target/release/virtweb_backend`. 
 
-This is the only artifcat that must be copied to the server. It is recommended to copy it to the `/usr/local/bin` directory.
+This is the only artifact that must be copied to the server. It is recommended to copy it to the `/usr/local/bin` directory.
 
 ## Install requirements
 In order to work properly, VirtWeb relies on `libvirt`, `qemu` and `kvm`:

virtweb_frontend/README.md

@@ -1,46 +1,12 @@
-# Getting Started with Create React App
+# Virtweb frontend
+Built with Vite + React + TypeScript
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Get dependencies
+```bash
+npm install
+```
 
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+# Run for developpment
+```bash
+npm run dev
+```

virtweb_frontend/eslint.config.js

@@ -0,0 +1,54 @@
+import js from "@eslint/js";
+import reactDom from "eslint-plugin-react-dom";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import reactX from "eslint-plugin-react-x";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.strictTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "react-x": reactX,
+      "react-dom": reactDom,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      ...reactX.configs["recommended-typescript"].rules,
+      ...reactDom.configs.recommended.rules,
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-extraneous-class": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "react-refresh/only-export-components": "off",
+    },
+  }
+);

virtweb_frontend/package.json

@@ -3,62 +3,51 @@
   "version": "0.1.0",
   "type": "module",
   "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.8",
-    "@mdi/js": "^7.2.96",
-    "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^5.14.7",
-    "@mui/material": "^5.14.7",
-    "@mui/x-charts": "^7.1.1",
-    "@mui/x-data-grid": "^7.0.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/humanize-duration": "^3.27.1",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@types/uuid": "^9.0.5",
-    "@vitejs/plugin-react": "^4.2.1",
-    "filesize": "^10.0.12",
-    "humanize-duration": "^3.29.0",
-    "mui-file-input": "^4.0.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "react-vnc": "^1.0.0",
-    "typescript": "^4.1.6",
-    "uuid": "^9.0.1",
-    "vite": "^5.0.8",
-    "vite-tsconfig-paths": "^4.2.2",
-    "web-vitals": "^3.5.2",
-    "xml-formatter": "^3.6.0"
-  },
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
     "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^5.2.5",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-charts": "^7.28.0",
+    "@mui/x-data-grid": "^7.28.1",
+    "date-and-time": "^3.6.0",
+    "filesize": "^10.1.6",
+    "humanize-duration": "^3.29.0",
+    "mui-file-input": "^7.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-vnc": "^3.0.7",
+    "uuid": "^11.1.0",
+    "xml-formatter": "^3.6.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/humanize-duration": "^3.27.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-dom": "^1.38.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react-x": "^1.38.3",
+    "globals": "^15.15.0",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.3"
   }
 }

virtweb_frontend/src/App.tsx

@@ -9,29 +9,35 @@ import "./App.css";
 import { AuthApi } from "./api/AuthApi";
 import { ServerApi } from "./api/ServerApi";
 import {
-  CreateNetworkRoute,
-  EditNetworkRoute,
-} from "./routes/EditNetworkRoute";
-import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
-import { IsoFilesRoute } from "./routes/IsoFilesRoute";
-import { NetworksListRoute } from "./routes/NetworksListRoute";
-import { NotFoundRoute } from "./routes/NotFound";
-import { SysInfoRoute } from "./routes/SysInfoRoute";
-import { VMListRoute } from "./routes/VMListRoute";
-import { VMRoute } from "./routes/VMRoute";
-import { VNCRoute } from "./routes/VNCRoute";
-import { LoginRoute } from "./routes/auth/LoginRoute";
-import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
-import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
-import { BaseLoginPage } from "./widgets/BaseLoginPage";
-import { ViewNetworkRoute } from "./routes/ViewNetworkRoute";
-import { HomeRoute } from "./routes/HomeRoute";
-import { NetworkFiltersListRoute } from "./routes/NetworkFiltersListRoute";
-import { ViewNWFilterRoute } from "./routes/ViewNWFilterRoute";
+  CreateApiTokenRoute,
+  EditApiTokenRoute,
+} from "./routes/EditAPITokenRoute";
 import {
   CreateNWFilterRoute,
   EditNWFilterRoute,
 } from "./routes/EditNWFilterRoute";
+import {
+  CreateNetworkRoute,
+  EditNetworkRoute,
+} from "./routes/EditNetworkRoute";
+import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
+import { HomeRoute } from "./routes/HomeRoute";
+import { IsoFilesRoute } from "./routes/IsoFilesRoute";
+import { NetworkFiltersListRoute } from "./routes/NetworkFiltersListRoute";
+import { NetworksListRoute } from "./routes/NetworksListRoute";
+import { NotFoundRoute } from "./routes/NotFound";
+import { SysInfoRoute } from "./routes/SysInfoRoute";
+import { TokensListRoute } from "./routes/TokensListRoute";
+import { VMListRoute } from "./routes/VMListRoute";
+import { VMRoute } from "./routes/VMRoute";
+import { VNCRoute } from "./routes/VNCRoute";
+import { ViewApiTokenRoute } from "./routes/ViewApiTokenRoute";
+import { ViewNWFilterRoute } from "./routes/ViewNWFilterRoute";
+import { ViewNetworkRoute } from "./routes/ViewNetworkRoute";
+import { LoginRoute } from "./routes/auth/LoginRoute";
+import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
+import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
+import { BaseLoginPage } from "./widgets/BaseLoginPage";
 
 interface AuthContext {
   signedIn: boolean;
@@ -45,7 +51,10 @@ export function App() {
 
   const context: AuthContext = {
     signedIn: signedIn,
-    setSignedIn: (s) => setSignedIn(s),
+    setSignedIn: (s) => {
+      setSignedIn(s);
+      location.reload();
+    },
   };
 
   const router = createBrowserRouter(
@@ -72,6 +81,11 @@ export function App() {
           <Route path="nwfilter/:uuid" element={<ViewNWFilterRoute />} />
           <Route path="nwfilter/:uuid/edit" element={<EditNWFilterRoute />} />
 
+          <Route path="tokens" element={<TokensListRoute />} />
+          <Route path="token/new" element={<CreateApiTokenRoute />} />
+          <Route path="token/:id" element={<ViewApiTokenRoute />} />
+          <Route path="token/:id/edit" element={<EditApiTokenRoute />} />
+
           <Route path="sysinfo" element={<SysInfoRoute />} />
           <Route path="*" element={<NotFoundRoute />} />
         </Route>
@@ -86,12 +100,12 @@ export function App() {
   );
 
   return (
-    <AuthContextK.Provider value={context}>
+    <AuthContextK value={context}>
       <RouterProvider router={router} />
-    </AuthContextK.Provider>
+    </AuthContextK>
   );
 }
 
 export function useAuth(): AuthContext {
-  return React.useContext(AuthContextK)!;
+  return React.use(AuthContextK)!;
 }

virtweb_frontend/src/api/ApiClient.ts

@@ -26,7 +26,7 @@ export class APIClient {
    * Get backend URL
    */
   static backendURL(): string {
-    const URL = import.meta.env.VITE_APP_BACKEND ?? "";
+    const URL = String(import.meta.env.VITE_APP_BACKEND ?? "");
     if (URL.length === 0) throw new Error("Backend URL undefined!");
     return URL;
   }
@@ -44,7 +44,7 @@ export class APIClient {
    */
   static async exec(args: RequestParams): Promise<APIResponse> {
     let body: string | undefined | FormData = undefined;
-    let headers: any = {};
+    const headers: any = {};
 
     // JSON request
     if (args.jsonData) {
@@ -66,22 +66,25 @@ export class APIClient {
     if (args.upProgress) {
       const res: XMLHttpRequest = await new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
-        xhr.upload.addEventListener("progress", (e) =>
-          args.upProgress!(e.loaded / e.total)
-        );
-        xhr.addEventListener("load", () => resolve(xhr));
-        xhr.addEventListener("error", () =>
-          reject(new Error("File upload failed"))
-        );
-        xhr.addEventListener("abort", () =>
-          reject(new Error("File upload aborted"))
-        );
-        xhr.addEventListener("timeout", () =>
-          reject(new Error("File upload timeout"))
-        );
+        xhr.upload.addEventListener("progress", (e) => {
+          args.upProgress!(e.loaded / e.total);
+        });
+        xhr.addEventListener("load", () => {
+          resolve(xhr);
+        });
+        xhr.addEventListener("error", () => {
+          reject(new Error("File upload failed"));
+        });
+        xhr.addEventListener("abort", () => {
+          reject(new Error("File upload aborted"));
+        });
+        xhr.addEventListener("timeout", () => {
+          reject(new Error("File upload timeout"));
+        });
         xhr.open(args.method, url, true);
         xhr.withCredentials = true;
         for (const key in headers) {
+          // eslint-disable-next-line no-prototype-builtins
           if (headers.hasOwnProperty(key))
             xhr.setRequestHeader(key, headers[key]);
         }

virtweb_frontend/src/api/GroupApi.ts

@@ -0,0 +1,15 @@
+import { APIClient } from "./ApiClient";
+
+export class GroupApi {
+  /**
+   * Get the entire list of networks
+   */
+  static async GetList(): Promise<string[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: "/group/list",
+      })
+    ).data;
+  }
+}

virtweb_frontend/src/api/NWFilterApi.ts

@@ -140,7 +140,7 @@ export interface NWFilter {
   rules: NWFilterRule[];
 }
 
-export function NWFilterURL(n: NWFilter, edit: boolean = false): string {
+export function NWFilterURL(n: NWFilter, edit = false): string {
   return `/nwfilter/${n.uuid}${edit ? "/edit" : ""}`;
 }
 
@@ -221,7 +221,7 @@ export class NWFilterApi {
   static async Delete(n: NWFilter): Promise<void> {
     await APIClient.exec({
       method: "DELETE",
-      uri: `/nwfilter/${n.uuid}`,
+      uri: `/nwfilter/${n.uuid!}`,
     });
   }
 }

virtweb_frontend/src/api/NetworksApi.ts

@@ -53,7 +53,7 @@ export interface NetworkInfo {
 
 export type NetworkStatus = "Started" | "Stopped";
 
-export function NetworkURL(n: NetworkInfo, edit: boolean = false): string {
+export function NetworkURL(n: NetworkInfo, edit = false): string {
   return `/net/${n.uuid}${edit ? "/edit" : ""}`;
 }
 

virtweb_frontend/src/api/ServerApi.ts

@@ -16,6 +16,7 @@ export interface ServerConstraints {
   vnc_token_duration: number;
   vm_name_size: LenConstraint;
   vm_title_size: LenConstraint;
+  group_id_size: LenConstraint;
   memory_size: LenConstraint;
   disk_name_size: LenConstraint;
   disk_size: LenConstraint;
@@ -27,6 +28,9 @@ export interface ServerConstraints {
   nwfilter_comment_size: LenConstraint;
   nwfilter_priority: LenConstraint;
   nwfilter_selectors_count: LenConstraint;
+  api_token_name_size: LenConstraint;
+  api_token_description_size: LenConstraint;
+  api_token_right_path_size: LenConstraint;
 }
 
 export interface LenConstraint {
@@ -70,7 +74,7 @@ interface SystemInfo {
     secs: number;
     nanos: number;
   };
-  global_cpu_info: GlobalCPUInfo;
+  global_cpu_usage: number;
   cpus: CpuCore[];
   physical_core_count: number;
   total_memory: number;
@@ -91,14 +95,6 @@ interface SystemInfo {
   host_name: string;
 }
 
-interface GlobalCPUInfo {
-  cpu_usage: number;
-  name: string;
-  vendor_id: string;
-  brand: string;
-  frequency: number;
-}
-
 interface CpuCore {
   cpu_usage: number;
   name: string;

virtweb_frontend/src/api/TokensApi.ts

@@ -0,0 +1,102 @@
+import { time } from "../utils/DateUtils";
+import { APIClient } from "./ApiClient";
+
+export type RightVerb = "POST" | "GET" | "PUT" | "DELETE" | "PATCH";
+
+export interface TokenRight {
+  verb: RightVerb;
+  path: string;
+}
+
+export interface APIToken {
+  id: string;
+  name: string;
+  description: string;
+  created: number;
+  updated: number;
+  rights: TokenRight[];
+  last_used: number;
+  ip_restriction?: string;
+  max_inactivity?: number;
+}
+
+export function APITokenURL(t: APIToken, edit = false): string {
+  return `/token/${t.id}${edit ? "/edit" : ""}`;
+}
+
+export function ExpiredAPIToken(t: APIToken): boolean {
+  if (!t.max_inactivity) return false;
+  return t.last_used + t.max_inactivity < time();
+}
+
+export interface APITokenPrivateKey {
+  alg: string;
+  priv: string;
+}
+
+export interface CreatedAPIToken {
+  token: APIToken;
+  priv_key: APITokenPrivateKey;
+}
+
+export class TokensApi {
+  /**
+   * Create a new API token
+   */
+  static async Create(n: APIToken): Promise<CreatedAPIToken> {
+    return (
+      await APIClient.exec({
+        method: "POST",
+        uri: "/token/create",
+        jsonData: n,
+      })
+    ).data;
+  }
+
+  /**
+   * Get the full list of tokens
+   */
+  static async GetList(): Promise<APIToken[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: "/token/list",
+      })
+    ).data;
+  }
+
+  /**
+   * Get the information about a single token
+   */
+  static async GetSingle(uuid: string): Promise<APIToken> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/token/${uuid}`,
+      })
+    ).data;
+  }
+
+  /**
+   * Update an existing API token information
+   */
+  static async Update(n: APIToken): Promise<void> {
+    return (
+      await APIClient.exec({
+        method: "PATCH",
+        uri: `/token/${n.id}`,
+        jsonData: n,
+      })
+    ).data;
+  }
+
+  /**
+   * Delete an API token
+   */
+  static async Delete(n: APIToken): Promise<void> {
+    await APIClient.exec({
+      method: "DELETE",
+      uri: `/token/${n.id}`,
+    });
+  }
+}

virtweb_frontend/src/api/VMApi.ts

@@ -63,6 +63,7 @@ interface VMInfoInterface {
   genid?: string;
   title?: string;
   description?: string;
+  group?: string;
   boot_type: "UEFI" | "UEFISecureBoot";
   architecture: "i686" | "x86_64";
   memory: number;
@@ -80,6 +81,7 @@ export class VMInfo implements VMInfoInterface {
   genid?: string;
   title?: string;
   description?: string;
+  group?: string;
   boot_type: "UEFI" | "UEFISecureBoot";
   architecture: "i686" | "x86_64";
   number_vcpu: number;
@@ -96,6 +98,7 @@ export class VMInfo implements VMInfoInterface {
     this.genid = int.genid;
     this.title = int.title;
     this.description = int.description;
+    this.group = int.group;
     this.boot_type = int.boot_type;
     this.architecture = int.architecture;
     this.number_vcpu = int.number_vcpu;

virtweb_frontend/src/dialogs/CreatedTokenDialog.tsx

@@ -0,0 +1,58 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { APITokenURL, CreatedAPIToken } from "../api/TokensApi";
+import { CopyToClipboard } from "../widgets/CopyToClipboard";
+import { InlineCode } from "../widgets/InlineCode";
+
+export function CreatedTokenDialog(p: {
+  createdToken: CreatedAPIToken;
+}): React.ReactElement {
+  const navigate = useNavigate();
+
+  const close = () => {
+    navigate(APITokenURL(p.createdToken.token));
+  };
+  return (
+    <Dialog open>
+      <DialogTitle>Token successfully created</DialogTitle>
+      <DialogContent>
+        <Typography>
+          Your token was successfully created. You need now to copy the private
+          key, as it will be technically impossible to recover it after closing
+          this dialog.
+        </Typography>
+
+        <InfoBlock label="Token ID" value={p.createdToken.token.id} />
+        <InfoBlock label="Key algorithm" value={p.createdToken.priv_key.alg} />
+        <InfoBlock label="Private key" value={p.createdToken.priv_key.priv} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={close} color="error">
+          I copied the key, close this dialog
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function InfoBlock(
+  p: React.PropsWithChildren<{ label: string; value: string }>
+): React.ReactElement {
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", margin: "20px 10px" }}
+    >
+      <Typography variant="overline">{p.label}</Typography>
+      <CopyToClipboard content={p.value}>
+        <InlineCode>{p.value}</InlineCode>
+      </CopyToClipboard>
+    </div>
+  );
+}

virtweb_frontend/src/hooks/providers/AlertDialogProvider.tsx

@@ -39,7 +39,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
+      <AlertContextK value={hook}>{p.children}</AlertContextK>
 
       <Dialog
         open={open}
@@ -67,5 +67,5 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useAlert(): AlertContext {
-  return React.useContext(AlertContextK)!;
+  return React.use(AlertContextK)!;
 }

virtweb_frontend/src/hooks/providers/ConfirmDialogProvider.tsx

@@ -59,13 +59,13 @@ export function ConfirmDialogProvider(
 
   return (
     <>
-      <ConfirmContextK.Provider value={hook}>
+      <ConfirmContextK value={hook}>
         {p.children}
-      </ConfirmContextK.Provider>
+      </ConfirmContextK>
 
       <Dialog
         open={open}
-        onClose={() => handleClose(false)}
+        onClose={() => { handleClose(false); }}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
@@ -76,10 +76,10 @@ export function ConfirmDialogProvider(
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => handleClose(false)} autoFocus>
+          <Button onClick={() => { handleClose(false); }} autoFocus>
             {cancelButton ?? "Cancel"}
           </Button>
-          <Button onClick={() => handleClose(true)} color="error">
+          <Button onClick={() => { handleClose(true); }} color="error">
             {confirmButton ?? "Confirm"}
           </Button>
         </DialogActions>
@@ -89,5 +89,5 @@ export function ConfirmDialogProvider(
 }
 
 export function useConfirm(): ConfirmContext {
-  return React.useContext(ConfirmContextK)!;
+  return React.use(ConfirmContextK)!;
 }

virtweb_frontend/src/hooks/providers/LoadingMessageProvider.tsx

@@ -6,10 +6,10 @@ import {
 } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
-type LoadingMessageContext = {
+interface LoadingMessageContext {
   show: (message: string) => void;
   hide: () => void;
-};
+}
 
 const LoadingMessageContextK =
   React.createContext<LoadingMessageContext | null>(null);
@@ -34,9 +34,9 @@ export function LoadingMessageProvider(
 
   return (
     <>
-      <LoadingMessageContextK.Provider value={hook}>
+      <LoadingMessageContextK value={hook}>
         {p.children}
-      </LoadingMessageContextK.Provider>
+      </LoadingMessageContextK>
 
       <Dialog open={open}>
         <DialogContent>
@@ -60,5 +60,5 @@ export function LoadingMessageProvider(
 }
 
 export function useLoadingMessage(): LoadingMessageContext {
-  return React.useContext(LoadingMessageContextK)!;
+  return React.use(LoadingMessageContextK)!;
 }

virtweb_frontend/src/hooks/providers/SnackbarProvider.tsx

@@ -24,9 +24,9 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <SnackbarContextK.Provider value={hook}>
+      <SnackbarContextK value={hook}>
         {p.children}
-      </SnackbarContextK.Provider>
+      </SnackbarContextK>
 
       <Snackbar
         open={open}
@@ -39,5 +39,5 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useSnackbar(): SnackbarContext {
-  return React.useContext(SnackbarContextK)!;
+  return React.use(SnackbarContextK)!;
 }

virtweb_frontend/src/index.tsx

@@ -7,7 +7,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import "./index.css";
-import reportWebVitals from "./reportWebVitals";
 import { LoadServerConfig } from "./widgets/LoadServerConfig";
 import { ThemeProvider, createTheme } from "@mui/material";
 import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
@@ -22,7 +21,7 @@ const darkTheme = createTheme({
 });
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root")!
 );
 root.render(
   <React.StrictMode>
@@ -41,8 +40,3 @@ root.render(
     </ThemeProvider>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

virtweb_frontend/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

virtweb_frontend/src/routes/EditAPITokenRoute.tsx

@@ -0,0 +1,161 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  APIToken,
+  APITokenURL,
+  CreatedAPIToken,
+  TokensApi,
+} from "../api/TokensApi";
+import { CreatedTokenDialog } from "../dialogs/CreatedTokenDialog";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { time } from "../utils/DateUtils";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import {
+  APITokenDetails,
+  TokenWidgetStatus,
+} from "../widgets/tokens/APITokenDetails";
+
+export function CreateApiTokenRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const navigate = useNavigate();
+
+  const [createdToken, setCreatedToken] = React.useState<
+    CreatedAPIToken | undefined
+  >();
+
+  const [token] = React.useState<APIToken>({
+    id: "",
+    name: "",
+    description: "",
+    created: time(),
+    updated: time(),
+    last_used: time(),
+    rights: [],
+  });
+
+  const createApiToken = async (n: APIToken) => {
+    try {
+      const res = await TokensApi.Create(n);
+      snackbar("The api token was successfully created!");
+      setCreatedToken(res);
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to create API token!\n${e}`);
+    }
+  };
+
+  return (
+    <>
+      {createdToken && <CreatedTokenDialog createdToken={createdToken} />}
+
+      <EditApiTokenRouteInner
+        token={token}
+        creating={true}
+        onCancel={() => navigate("/tokens")}
+        onSave={createApiToken}
+      />
+    </>
+  );
+}
+
+export function EditApiTokenRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const [token, setToken] = React.useState<APIToken | undefined>();
+
+  const load = async () => {
+    setToken(await TokensApi.GetSingle(id!));
+  };
+
+  const updateApiToken = async (n: APIToken) => {
+    try {
+      await TokensApi.Update(n);
+      snackbar("The token was successfully updated!");
+      navigate(APITokenURL(token!));
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to update token!\n${e}`);
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={id}
+      ready={token !== undefined}
+      errMsg="Failed to fetch API token informations!"
+      load={load}
+      build={() => (
+        <EditApiTokenRouteInner
+          token={token!}
+          creating={false}
+          onCancel={() => navigate(`/token/${id}`)}
+          onSave={updateApiToken}
+        />
+      )}
+    />
+  );
+}
+
+function EditApiTokenRouteInner(p: {
+  token: APIToken;
+  creating: boolean;
+  onCancel: () => void;
+  onSave: (token: APIToken) => Promise<void>;
+}): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+
+  const [changed, setChanged] = React.useState(false);
+
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
+
+  const valueChanged = () => {
+    setChanged(true);
+    forceUpdate();
+  };
+
+  const save = async () => {
+    loadingMessage.show("Saving API token configuration...");
+    await p.onSave(p.token);
+    loadingMessage.hide();
+  };
+
+  return (
+    <VirtWebRouteContainer
+      label={p.creating ? "Create an API Token" : "Edit API Token"}
+      actions={
+        <span>
+          {changed && (
+            <Button
+              variant="contained"
+              onClick={save}
+              style={{ marginRight: "10px" }}
+            >
+              {p.creating ? "Create" : "Save"}
+            </Button>
+          )}
+          <Button onClick={p.onCancel} variant="outlined">
+            Cancel
+          </Button>
+        </span>
+      }
+    >
+      <APITokenDetails
+        token={p.token}
+        status={
+          p.creating ? TokenWidgetStatus.Create : TokenWidgetStatus.Update
+        }
+        onChange={valueChanged}
+      />
+    </VirtWebRouteContainer>
+  );
+}

virtweb_frontend/src/routes/EditNWFilterRoute.tsx

@@ -99,7 +99,7 @@ function EditNetworkFilterRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -97,7 +97,7 @@ function EditNetworkRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -15,7 +15,7 @@ export function CreateVMRoute(): React.ReactElement {
   const alert = useAlert();
   const navigate = useNavigate();
 
-  const [vm, setVM] = React.useState(VMInfo.NewEmpty);
+  const [vm, setVM] = React.useState(VMInfo.NewEmpty());
 
   const create = async (v: VMInfo) => {
     try {
@@ -103,7 +103,9 @@ function EditVMInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => {
+    updateState({});
+  }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -96,7 +96,7 @@ function UploadIsoFileCard(p: {
       p.onFileUploaded();
     } catch (e) {
       console.error(e);
-      await alert("Failed to perform file upload! " + e);
+      await alert(`Failed to perform file upload! ${e}`);
     }
 
     setUploadProgress(null);
@@ -120,7 +120,9 @@ function UploadIsoFileCard(p: {
           value={value}
           onChange={handleChange}
           style={{ flex: 1 }}
-          inputProps={{ accept: ServerApi.Config.iso_mimetypes.join(",") }}
+          slotProps={{
+            htmlInput: { accept: ServerApi.Config.iso_mimetypes.join(",") },
+          }}
         />
 
         {value && <Button onClick={upload}>Upload file</Button>}
@@ -147,6 +149,8 @@ function UploadIsoFileFromUrlCard(p: {
       loadingMessage.show("Downloading file from URL...");
       await IsoFilesApi.UploadFromURL(url, actualFileName);
 
+      p.onFileUploaded();
+
       setURL("");
       setFilename(null);
       snackbar("Successfully downloaded file!");
@@ -164,14 +168,18 @@ function UploadIsoFileFromUrlCard(p: {
           label="URL"
           value={url}
           style={{ flex: 3 }}
-          onChange={(e) => setURL(e.target.value)}
+          onChange={(e) => {
+            setURL(e.target.value);
+          }}
         />
         <span style={{ width: "10px" }}></span>
         <TextField
           label="Filename"
           value={actualFileName}
           style={{ flex: 2 }}
-          onChange={(e) => setFilename(e.target.value)}
+          onChange={(e) => {
+            setFilename(e.target.value);
+          }}
         />
         {url !== "" && actualFileName !== "" && (
           <Button onClick={upload}>Upload file</Button>
@@ -198,7 +206,7 @@ function IsoFilesList(p: {
     try {
       const blob = await IsoFilesApi.Download(entry, setDlProgress);
 
-      await downloadBlob(blob, entry.filename);
+      downloadBlob(blob, entry.filename);
     } catch (e) {
       console.error(e);
       alert("Failed to download iso file!");
@@ -236,7 +244,7 @@ function IsoFilesList(p: {
       </Typography>
     );
 
-  const columns: GridColDef[] = [
+  const columns: GridColDef<IsoFile>[] = [
     { field: "filename", headerName: "File name", flex: 3 },
     {
       field: "size",
@@ -301,7 +309,6 @@ function IsoFilesList(p: {
           getRowId={(c) => c.filename}
           rows={p.list}
           columns={columns}
-          autoHeight={true}
         />
       </VirtWebPaper>
     </>

virtweb_frontend/src/routes/NetworkFiltersListRoute.tsx

@@ -66,7 +66,7 @@ function NetworkFiltersListRouteInner(p: {
     const onlyBuiltin = visibleFilters === VisibleFilters.Builtin;
 
     return p.list.filter((f) => NWFilterIsBuiltin(f) === onlyBuiltin);
-  }, [visibleFilters]);
+  }, [visibleFilters, p.list]);
 
   return (
     <VirtWebRouteContainer
@@ -78,7 +78,9 @@ function NetworkFiltersListRouteInner(p: {
             size="small"
             value={visibleFilters}
             exclusive
-            onChange={(_ev, v) => setVisibleFilters(v)}
+            onChange={(_ev, v) => {
+              setVisibleFilters(v);
+            }}
             aria-label="visible filters"
           >
             <ToggleButton value={VisibleFilters.All}>All</ToggleButton>
@@ -130,8 +132,8 @@ function NetworkFiltersListRouteInner(p: {
                   </TableCell>
                   <TableCell>
                     <ul>
-                      {t.join_filters.map((f, n) => (
-                        <li key={n}>{f}</li>
+                      {t.join_filters.map((f) => (
+                        <li key={f}>{f}</li>
                       ))}
                     </ul>
                   </TableCell>

virtweb_frontend/src/routes/NetworksListRoute.tsx

@@ -1,4 +1,3 @@
-import DeleteIcon from "@mui/icons-material/Delete";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
   Button,
@@ -13,13 +12,13 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { RouterLink } from "../widgets/RouterLink";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
-import { useNavigate } from "react-router-dom";
 import { NetworkHookStatusWidget } from "../widgets/net/NetworkHookStatusWidget";
+import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
 
 export function NetworksListRoute(): React.ReactElement {
   const [list, setList] = React.useState<NetworkInfo[] | undefined>();

virtweb_frontend/src/routes/SysInfoRoute.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import {
   mdiHarddisk,
   mdiInformation,
@@ -8,7 +9,6 @@ import {
 import Icon from "@mdi/react";
 import {
   Box,
-  Grid,
   LinearProgress,
   Table,
   TableBody,
@@ -17,7 +17,10 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
+import Grid from "@mui/material/Grid";
 import { PieChart } from "@mui/x-charts";
+import { filesize } from "filesize";
+import humanizeDuration from "humanize-duration";
 import React from "react";
 import {
   DiskInfo,
@@ -28,8 +31,6 @@ import {
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import humanizeDuration from "humanize-duration";
-import { filesize } from "filesize";
 
 export function SysInfoRoute(): React.ReactElement {
   const [info, setInfo] = React.useState<ServerSystemInfo>();
@@ -65,7 +66,7 @@ export function SysInfoRouteInner(p: {
     <VirtWebRouteContainer label="Sysinfo">
       <Grid container spacing={2}>
         {/* Memory */}
-        <Grid xs={4}>
+        <Grid size={{ xs: 4 }}>
           <Box flexGrow={1}>
             <Typography style={{ textAlign: "center" }}>Memory</Typography>
             <PieChart
@@ -97,7 +98,7 @@ export function SysInfoRouteInner(p: {
         </Grid>
 
         {/* Disk usage */}
-        <Grid xs={4}>
+        <Grid size={{ xs: 4 }}>
           <Box flexGrow={1}>
             <Typography style={{ textAlign: "center" }}>Disk usage</Typography>
             <PieChart
@@ -125,7 +126,7 @@ export function SysInfoRouteInner(p: {
         </Grid>
 
         {/* CPU usage */}
-        <Grid xs={4}>
+        <Grid size={{ xs: 4 }}>
           <Box flexGrow={1}>
             <Typography style={{ textAlign: "center" }}>CPU usage</Typography>
             <PieChart
@@ -134,13 +135,13 @@ export function SysInfoRouteInner(p: {
                   data: [
                     {
                       id: 1,
-                      value: 100 - p.info.system.global_cpu_info.cpu_usage,
+                      value: 100 - p.info.system.global_cpu_usage,
                       label: "Free",
                     },
 
                     {
                       id: 2,
-                      value: p.info.system.global_cpu_info.cpu_usage,
+                      value: p.info.system.global_cpu_usage,
                       label: "Used",
                     },
                   ],
@@ -180,18 +181,18 @@ export function SysInfoRouteInner(p: {
         label="CPU info"
         icon={<Icon size={"1rem"} path={mdiMemory} />}
         entries={[
-          { label: "Brand", value: p.info.system.global_cpu_info.brand },
+          { label: "Brand", value: p.info.system.cpus[0].brand },
           {
             label: "Vendor ID",
-            value: p.info.system.global_cpu_info.vendor_id,
+            value: p.info.system.cpus[0].vendor_id,
           },
           {
             label: "CPU usage",
-            value: p.info.system.global_cpu_info.cpu_usage,
+            value: p.info.system.cpus[0].cpu_usage,
           },
           {
             label: "Name",
-            value: p.info.system.global_cpu_info.name,
+            value: p.info.system.cpus[0].name,
           },
           {
             label: "CPU model",
@@ -236,7 +237,7 @@ export function SysInfoRouteInner(p: {
 function SysInfoDetailsTable(p: {
   label: string;
   icon: React.ReactElement;
-  entries: Array<{ label: string; value: string | number }>;
+  entries: { label: string; value: string | number }[];
 }): React.ReactElement {
   return (
     <VirtWebPaper

virtweb_frontend/src/routes/TokensListRoute.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable react-x/no-array-index-key */
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import {
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  APIToken,
+  APITokenURL,
+  ExpiredAPIToken,
+  TokensApi,
+} from "../api/TokensApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { RouterLink } from "../widgets/RouterLink";
+import { TimeWidget, timeDiff } from "../widgets/TimeWidget";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+
+export function TokensListRoute(): React.ReactElement {
+  const [list, setList] = React.useState<APIToken[] | undefined>();
+
+  const [count] = React.useState(1);
+
+  const load = async () => {
+    setList(await TokensApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={count}
+      load={load}
+      ready={list !== undefined}
+      errMsg="Failed to load the list of tokens!"
+      build={() => <TokensListRouteInner list={list!} />}
+    />
+  );
+}
+
+export function TokensListRouteInner(p: {
+  list: APIToken[];
+}): React.ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <VirtWebRouteContainer
+      label="API tokens"
+      actions={
+        <RouterLink to="/token/new">
+          <Button>New</Button>
+        </RouterLink>
+      }
+    >
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell>Created</TableCell>
+              <TableCell>Updated</TableCell>
+              <TableCell>Last used</TableCell>
+              <TableCell>IP restriction</TableCell>
+              <TableCell>Max inactivity</TableCell>
+              <TableCell>Rights</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {p.list.map((t) => {
+              return (
+                <TableRow
+                  key={t.id}
+                  hover
+                  onDoubleClick={() => navigate(APITokenURL(t))}
+                  style={{ backgroundColor: ExpiredAPIToken(t) ? "red" : "" }}
+                >
+                  <TableCell>
+                    {t.name} {ExpiredAPIToken(t) && <i>(Expired)</i>}
+                  </TableCell>
+                  <TableCell>{t.description}</TableCell>
+                  <TableCell>
+                    <TimeWidget time={t.created} />
+                  </TableCell>
+                  <TableCell>
+                    <TimeWidget time={t.updated} />
+                  </TableCell>
+                  <TableCell>
+                    <TimeWidget time={t.last_used} />
+                  </TableCell>
+                  <TableCell>{t.ip_restriction}</TableCell>
+                  <TableCell>
+                    {t.max_inactivity && timeDiff(0, t.max_inactivity)}
+                  </TableCell>
+                  <TableCell>
+                    {t.rights.map((r, n) => {
+                      return (
+                        <div key={n}>
+                          {r.verb} {r.path}
+                        </div>
+                      );
+                    })}
+                  </TableCell>
+
+                  <TableCell>
+                    <RouterLink to={APITokenURL(t)}>
+                      <IconButton>
+                        <VisibilityIcon />
+                      </IconButton>
+                    </RouterLink>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </VirtWebRouteContainer>
+  );
+}

virtweb_frontend/src/routes/VMListRoute.tsx

@@ -1,3 +1,5 @@
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
   Button,
@@ -7,6 +9,7 @@ import {
   TableBody,
   TableCell,
   TableContainer,
+  TableFooter,
   TableHead,
   TableRow,
   Tooltip,
@@ -14,19 +17,27 @@ import {
 import { filesize } from "filesize";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { VMApi, VMInfo } from "../api/VMApi";
+import { GroupApi } from "../api/GroupApi";
+import { VMApi, VMInfo, VMState } from "../api/VMApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { RouterLink } from "../widgets/RouterLink";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
 
 export function VMListRoute(): React.ReactElement {
+  const [groups, setGroups] = React.useState<(string | undefined)[]>();
   const [list, setList] = React.useState<VMInfo[] | undefined>();
 
   const loadKey = React.useRef(1);
 
   const load = async () => {
-    setList(await VMApi.GetList());
+    const groups: (string | undefined)[] = await GroupApi.GetList();
+    const list = await VMApi.GetList();
+
+    if (list.find((v) => !v.group) !== undefined) groups.push(undefined);
+
+    setGroups(groups);
+    setList(list);
   };
 
   const reload = () => {
@@ -51,7 +62,7 @@ export function VMListRoute(): React.ReactElement {
             </>
           }
         >
-          <VMListWidget list={list!} onReload={reload} />
+          <VMListWidget list={list!} groups={groups!} onReload={reload} />
         </VirtWebRouteContainer>
       )}
     />
@@ -59,11 +70,37 @@ export function VMListRoute(): React.ReactElement {
 }
 
 function VMListWidget(p: {
+  groups: (string | undefined)[];
   list: VMInfo[];
   onReload: () => void;
 }): React.ReactElement {
   const navigate = useNavigate();
 
+  const [hiddenGroups, setHiddenGroups] = React.useState<
+    Set<string | undefined>
+  >(new Set());
+
+  const [runningVMs, setRunningVMs] = React.useState<Set<string>>(new Set());
+
+  const toggleHiddenGroup = (g: string | undefined) => {
+    if (hiddenGroups.has(g)) hiddenGroups.delete(g);
+    else hiddenGroups.add(g);
+
+    setHiddenGroups(new Set([...hiddenGroups]));
+  };
+
+  const updateVMState = (v: VMInfo, s: VMState) => {
+    const running = s !== "Shutoff";
+    if (runningVMs.has(v.name) === running) {
+      return;
+    }
+
+    if (running) runningVMs.add(v.name);
+    else runningVMs.delete(v.name);
+
+    setRunningVMs(new Set([...runningVMs]));
+  };
+
   return (
     <TableContainer component={Paper}>
       <Table>
@@ -72,39 +109,104 @@ function VMListWidget(p: {
             <TableCell>Name</TableCell>
             <TableCell>Description</TableCell>
             <TableCell>Memory</TableCell>
+            <TableCell>vCPU</TableCell>
             <TableCell>Status</TableCell>
             <TableCell>Actions</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {p.list.map((row) => (
-            <TableRow
-              hover
-              key={row.name}
-              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-              onDoubleClick={() => navigate(row.ViewURL)}
-            >
-              <TableCell component="th" scope="row">
-                {row.name}
-              </TableCell>
-              <TableCell>{row.description ?? ""}</TableCell>
-              <TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell>
-              <TableCell>
-                <VMStatusWidget vm={row} />
-              </TableCell>
-              <TableCell>
-                <Tooltip title="View this VM">
-                  <RouterLink to={row.ViewURL}>
-                    <IconButton>
-                      <VisibilityIcon />
+          {p.groups.map((g) => (
+            <React.Fragment key={g}>
+              {p.groups.length > 1 && (
+                <TableRow>
+                  <TableCell
+                    style={{ paddingBottom: 2, paddingTop: 2 }}
+                    colSpan={6}
+                  >
+                    <IconButton
+                      size="small"
+                      onClick={() => {
+                        toggleHiddenGroup(g);
+                      }}
+                    >
+                      {!hiddenGroups.has(g) ? (
+                        <KeyboardArrowUpIcon />
+                      ) : (
+                        <KeyboardArrowDownIcon />
+                      )}
                     </IconButton>
-                  </RouterLink>
-                </Tooltip>
-              </TableCell>
-            </TableRow>
+                    {g ?? "default"}
+                  </TableCell>
+                </TableRow>
+              )}
+
+              {!hiddenGroups.has(g) &&
+                p.list
+                  .filter((row) => row.group === g)
+                  .map((row) => (
+                    <TableRow
+                      hover
+                      key={row.name}
+                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                      onDoubleClick={() => navigate(row.ViewURL)}
+                    >
+                      <TableCell component="th" scope="row">
+                        {row.name}
+                      </TableCell>
+                      <TableCell>{row.description ?? ""}</TableCell>
+                      <TableCell>{vmMemoryToHuman(row.memory)}</TableCell>
+                      <TableCell>{row.number_vcpu}</TableCell>
+                      <TableCell>
+                        <VMStatusWidget
+                          vm={row}
+                          onChange={(s) => {
+                            updateVMState(row, s);
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <Tooltip title="View this VM">
+                          <RouterLink to={row.ViewURL}>
+                            <IconButton>
+                              <VisibilityIcon />
+                            </IconButton>
+                          </RouterLink>
+                        </Tooltip>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+            </React.Fragment>
           ))}
         </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell></TableCell>
+            <TableCell>
+              {vmMemoryToHuman(
+                p.list
+                  .filter((v) => runningVMs.has(v.name))
+                  .reduce((s, v) => s + v.memory, 0)
+              )}
+              {" / "}
+              {vmMemoryToHuman(p.list.reduce((s, v) => s + v.memory, 0))}
+            </TableCell>
+            <TableCell>
+              {p.list
+                .filter((v) => runningVMs.has(v.name))
+                .reduce((s, v) => s + v.number_vcpu, 0)}
+              {" / "}
+              {p.list.reduce((s, v) => s + v.number_vcpu, 0)}
+            </TableCell>
+            <TableCell></TableCell>
+            <TableCell></TableCell>
+          </TableRow>
+        </TableFooter>
       </Table>
     </TableContainer>
   );
 }
+
+function vmMemoryToHuman(size: number): string {
+  return filesize(size * 1000 * 1000);
+}

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -1,17 +1,16 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import KeyboardAltIcon from "@mui/icons-material/KeyboardAlt";
 import { IconButton, Tooltip } from "@mui/material";
 import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { VncScreen } from "react-vnc";
+import { VncScreen, VncScreenHandle } from "react-vnc";
 import { ServerApi } from "../api/ServerApi";
 import { VMApi, VMInfo } from "../api/VMApi";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { time } from "../utils/DateUtils";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import RFB from "react-vnc/dist/types/noVNC/core/rfb";
-import KeyboardAltIcon from "@mui/icons-material/KeyboardAlt";
 
 interface VNCTokenInfo {
   url: string;
@@ -43,9 +42,10 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
 
   const [token, setToken] = React.useState<VNCTokenInfo | undefined>();
   const [counter, setCounter] = React.useState(1);
-  const [rfb, setRFB] = React.useState<RFB | undefined>();
+  const [connected, setConnected] = React.useState(false);
 
-  const vncRef = React.createRef<HTMLDivElement>();
+  const vncRef = React.useRef<HTMLDivElement>(null);
+  const vncScreenRef = React.useRef<VncScreenHandle>(null);
 
   const connect = async (force: boolean) => {
     try {
@@ -71,7 +71,7 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   };
 
   const disconnected = () => {
-    setRFB(undefined);
+    setConnected(false);
     connect(true);
   };
 
@@ -91,7 +91,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
     connect(false);
 
     if (vncRef.current) {
-      vncRef.current.onfullscreenchange = () => setCounter(counter + 1);
+      vncRef.current.onfullscreenchange = () => {
+        setCounter(counter + 1);
+      };
     }
   });
 
@@ -118,9 +120,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
         )}
 
         {/* Keystrokes */}
-        {rfb && (
+        {connected && (
           <Tooltip title="Send Ctrl+Alt+Del">
-            <IconButton onClick={() => rfb?.sendCtrlAltDel()}>
+            <IconButton onClick={() => vncScreenRef.current?.sendCtrlAltDel()}>
               <KeyboardAltIcon />
             </IconButton>
           </Tooltip>
@@ -137,12 +139,15 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
         }}
       >
         <VncScreen
+          ref={vncScreenRef}
           url={token.url}
           onDisconnect={() => {
-            console.info("VNC disconnected " + token?.url);
+            console.info("VNC disconnected " + token.url);
             disconnected();
           }}
-          onConnect={(rfb) => setRFB(rfb)}
+          onConnect={() => {
+            setConnected(true);
+          }}
         />
       </div>
     </div>

virtweb_frontend/src/routes/ViewApiTokenRoute.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import {
+  APITokenDetails,
+  TokenWidgetStatus,
+} from "../widgets/tokens/APITokenDetails";
+
+export function ViewApiTokenRoute() {
+  const { id } = useParams();
+
+  const [token, setToken] = React.useState<APIToken | undefined>();
+
+  const load = async () => {
+    setToken(await TokensApi.GetSingle(id!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={id}
+      ready={token !== undefined}
+      errMsg="Failed to fetch API token information!"
+      load={load}
+      build={() => <ViewAPITokenRouteInner token={token!} />}
+    />
+  );
+}
+
+function ViewAPITokenRouteInner(p: { token: APIToken }): React.ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <VirtWebRouteContainer
+      label={`API token ${p.token.name}`}
+      actions={
+        <span style={{ display: "flex", alignItems: "center" }}>
+          <Button
+            variant="contained"
+            style={{ marginLeft: "15px" }}
+            onClick={() => navigate(APITokenURL(p.token, true))}
+          >
+            Edit
+          </Button>
+        </span>
+      }
+    >
+      <APITokenDetails token={p.token} status={TokenWidgetStatus.Read} />
+    </VirtWebRouteContainer>
+  );
+}

virtweb_frontend/src/routes/auth/LoginRoute.tsx

@@ -1,4 +1,5 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import {
   Alert,
   CircularProgress,
@@ -35,7 +36,7 @@ export function LoginRoute(): React.ReactElement {
   const canSubmit = username.length > 0 && password.length > 0;
 
   const [showPassword, setShowPassword] = React.useState(false);
-  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleClickShowPassword = () => { setShowPassword((show) => !show); };
 
   const handleMouseDownPassword = (
     event: React.MouseEvent<HTMLButtonElement>
@@ -104,7 +105,7 @@ export function LoginRoute(): React.ReactElement {
               label="Username"
               name="username"
               value={username}
-              onChange={(e) => setUsername(e.target.value)}
+              onChange={(e) => { setUsername(e.target.value); }}
               autoComplete="username"
               autoFocus
             />
@@ -119,7 +120,7 @@ export function LoginRoute(): React.ReactElement {
                 type={showPassword ? "text" : "password"}
                 id="password"
                 value={password}
-                onChange={(e) => setPassword(e.target.value)}
+                onChange={(e) => { setPassword(e.target.value); }}
                 autoComplete="current-password"
                 endAdornment={
                   <InputAdornment position="end">
@@ -130,7 +131,7 @@ export function LoginRoute(): React.ReactElement {
                         onMouseDown={handleMouseDownPassword}
                         edge="end"
                       >
-                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                        {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
                       </IconButton>
                     </Tooltip>
                   </InputAdornment>

virtweb_frontend/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

virtweb_frontend/src/utils/FilesUtils.ts

@@ -1,4 +1,4 @@
-export async function downloadBlob(blob: Blob, filename: string) {
+export function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
 
   const link = document.createElement("a");

virtweb_frontend/src/utils/RandUtils.ts

@@ -2,8 +2,9 @@
  * Generate a random MAC address
  */
 export function randomMacAddress(prefix: string | undefined): string {
+  prefix = prefix ?? "";
   let mac = "XX:XX:XX:XX:XX:XX";
-  mac = prefix + mac.slice(prefix?.length);
+  mac = prefix + mac.slice(prefix.length);
 
   return mac.replace(/X/g, () =>
     "0123456789abcdef".charAt(Math.floor(Math.random() * 16))

virtweb_frontend/src/widgets/AsyncWidget.tsx

@@ -19,7 +19,7 @@ export function AsyncWidget(p: {
 }): React.ReactElement {
   const [state, setState] = useState(State.Loading);
 
-  const counter = useRef<any | null>(null);
+  const counter = useRef<any>(null);
 
   const load = async () => {
     try {
@@ -67,7 +67,7 @@ export function AsyncWidget(p: {
 
           <Button onClick={load}>Try again</Button>
 
-          {p.errAdditionalElement && p.errAdditionalElement()}
+          {p.errAdditionalElement?.()}
         </Box>
       )
     );

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,4 +1,5 @@
 import {
+  mdiApi,
   mdiBoxShadow,
   mdiDisc,
   mdiHome,
@@ -12,11 +13,9 @@ import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
+  ListItemText
 } from "@mui/material";
 import { Outlet, useLocation } from "react-router-dom";
-import { isDebug } from "../utils/DebugUtils";
 import { RouterLink } from "./RouterLink";
 import { VirtWebAppBar } from "./VirtWebAppBar";
 
@@ -72,6 +71,11 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             uri="/iso"
             icon={<Icon path={mdiDisc} size={1} />}
           />
+          <NavLink
+            label="API tokens"
+            uri="/tokens"
+            icon={<Icon path={mdiApi} size={1} />}
+          />
           <NavLink
             label="Sysinfo"
             uri="/sysinfo"
@@ -90,7 +94,6 @@ function NavLink(p: {
   icon: React.ReactElement;
   uri: string;
   label: string;
-  secondaryAction?: React.ReactElement;
 }): React.ReactElement {
   const location = useLocation();
   return (
@@ -98,9 +101,6 @@ function NavLink(p: {
       <ListItemButton selected={p.uri === location.pathname}>
         <ListItemIcon>{p.icon}</ListItemIcon>
         <ListItemText primary={p.label} />
-        {p.secondaryAction && (
-          <ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
-        )}
       </ListItemButton>
     </RouterLink>
   );

virtweb_frontend/src/widgets/BaseLoginPage.tsx

@@ -38,10 +38,7 @@ export function BaseLoginPage() {
     <Grid container component="main" sx={{ height: "100vh" }}>
       <CssBaseline />
       <Grid
-        item
-        xs={false}
-        sm={4}
-        md={7}
+        size={{ xs: false, sm: 4, md: 7 }}
         sx={{
           backgroundImage: "url(/login_splash.jpg)",
           backgroundRepeat: "no-repeat",
@@ -53,7 +50,12 @@ export function BaseLoginPage() {
           backgroundPosition: "center",
         }}
       />
-      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+      <Grid
+        size={{ xs: 12, sm: 8, md: 5 }}
+        component={Paper}
+        elevation={6}
+        square
+      >
         <Box
           sx={{
             my: 8,

virtweb_frontend/src/widgets/ConfigImportExportButtons.tsx

@@ -31,14 +31,16 @@ export function ConfigImportExportButtons(p: {
       fileEl.click();
 
       // Wait for a file to be chosen
-      await new Promise((res, _rej) =>
-        fileEl.addEventListener("change", () => res(null))
-      );
+      await new Promise((res) => {
+        fileEl.addEventListener("change", () => {
+          res(null);
+        });
+      });
 
       if ((fileEl.files?.length ?? 0) === 0) return null;
 
       // Import conf
-      let file = fileEl.files![0];
+      const file = fileEl.files![0];
       const content = await file.text();
       p.importConf?.(JSON.parse(content));
     } catch (e) {

virtweb_frontend/src/widgets/InlineCode.tsx

@@ -0,0 +1,18 @@
+export function InlineCode(p: React.PropsWithChildren): React.ReactElement {
+  return (
+    <code
+      style={{
+        display: "inline-block",
+        backgroundColor: "black",
+        color: "white",
+        wordBreak: "break-all",
+        wordWrap: "break-word",
+        whiteSpace: "pre-wrap",
+        padding: "0px 7px",
+        borderRadius: "5px",
+      }}
+    >
+      {p.children}
+    </code>
+  );
+}

virtweb_frontend/src/widgets/StateActionButton.tsx

@@ -23,7 +23,7 @@ export function StateActionButton<S>(p: {
       p.onExecuted();
     } catch (e) {
       console.error(e);
-      alert("Failed to perform action! " + e);
+      alert(`Failed to perform action! ${e}`);
     }
   };
 

virtweb_frontend/src/widgets/TabsWidget.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import { Box, Tab, Tabs } from "@mui/material";
 
 export interface TabWidgetOption<E> {
@@ -24,7 +25,9 @@ export function TabsWidget<E>(p: {
     <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
       <Tabs
         value={currTabIndex}
-        onChange={(_ev, newVal) => updateActiveTab(newVal)}
+        onChange={(_ev, newVal) => {
+          updateActiveTab(newVal);
+        }}
       >
         {activeOptions.map((o, index) => (
           <Tab key={index} label={o.label} style={{ color: o.color }} />

virtweb_frontend/src/widgets/TimeWidget.tsx

@@ -0,0 +1,65 @@
+import { Tooltip } from "@mui/material";
+import date from "date-and-time";
+import { time } from "../utils/DateUtils";
+
+export function formatDate(time: number): string {
+  const t = new Date();
+  t.setTime(1000 * time);
+  return date.format(t, "DD/MM/YYYY HH:mm:ss");
+}
+
+export function timeDiff(a: number, b: number): string {
+  let diff = b - a;
+
+  if (diff === 0) return "now";
+  if (diff === 1) return "1 second";
+
+  if (diff < 60) {
+    return `${diff} seconds`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 minute";
+  if (diff < 24) {
+    return `${diff} minutes`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 hour";
+  if (diff < 24) {
+    return `${diff} hours`;
+  }
+
+  const diffDays = Math.floor(diff / 24);
+
+  if (diffDays === 1) return "1 day";
+  if (diffDays < 31) {
+    return `${diffDays} days`;
+  }
+
+  diff = Math.floor(diffDays / 31);
+
+  if (diff < 12) {
+    return `${diff} month`;
+  }
+
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffYears === 1) return "1 year";
+  return `${diffYears} years`;
+}
+
+export function timeDiffFromNow(t: number): string {
+  return timeDiff(t, time());
+}
+
+export function TimeWidget(p: { time?: number }): React.ReactElement {
+  if (!p.time) return <></>;
+  return (
+    <Tooltip title={formatDate(p.time)}>
+      <span>{timeDiffFromNow(p.time)}</span>
+    </Tooltip>
+  );
+}

virtweb_frontend/src/widgets/forms/CheckboxInput.tsx

@@ -17,7 +17,7 @@ export function CheckboxInput(p: {
         <Checkbox
           disabled={!p.editable}
           checked={p.checked}
-          onChange={(e) => p.onValueChange(e.target.checked)}
+          onChange={(e) => { p.onValueChange(e.target.checked); }}
         />
       }
       label={p.label}

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -1,5 +1,7 @@
-import { Grid, Paper, Typography } from "@mui/material";
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
+import Grid from "@mui/material/Grid";
 
 export function EditSection(
   p: {
@@ -9,7 +11,7 @@ export function EditSection(
   } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={p.fullWidth ? 12 : 6}>
+    <Grid size={{ sm: 12, md: p.fullWidth ? 12 : 6 }}>
       <Paper style={{ margin: "10px", padding: "10px" }}>
         {(p.title || p.actions) && (
           <span

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React from "react";
 import { TextInput } from "./TextInput";
 
@@ -22,15 +23,17 @@ export function IPInput(p: {
 export function IPInputWithMask(p: {
   label: string;
   editable: boolean;
+  ipAndMask?: string;
   ip?: string;
   mask?: number;
-  onValueChange?: (ip?: string, mask?: number) => void;
+  onValueChange?: (ip?: string, mask?: number, ipAndMask?: string) => void;
   version: 4 | 6;
 }): React.ReactElement {
   const showSlash = React.useRef(!!p.mask);
 
   const currValue =
-    (p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
+    p.ipAndMask ??
+    `${p.ip ?? ""}${p.mask || showSlash.current ? "/" : ""}${p.mask ?? ""}`;
 
   const { onValueChange, ...props } = p;
   return (
@@ -38,11 +41,11 @@ export function IPInputWithMask(p: {
       onValueChange={(v) => {
         showSlash.current = false;
         if (!v) {
-          onValueChange?.(undefined, undefined);
+          onValueChange?.(undefined, undefined, undefined);
           return;
         }
 
-        const split = v?.split("/");
+        const split = v.split("/");
         const ip =
           p.version === 4 ? sanitizeIpV4(split[0]) : sanitizeIpV6(split[0]);
         let mask = undefined;
@@ -52,7 +55,11 @@ export function IPInputWithMask(p: {
           mask = sanitizeMask(p.version, split[1]);
         }
 
-        onValueChange?.(ip, mask);
+        onValueChange?.(
+          ip,
+          mask,
+          mask || showSlash.current ? `${ip}/${mask ?? ""}` : ip
+        );
       }}
       value={currValue}
       {...props}
@@ -63,7 +70,7 @@ export function IPInputWithMask(p: {
 function sanitizeIpV4(s: string | undefined): string | undefined {
   if (s === "" || s === undefined) return s;
 
-  let split = s.split(".");
+  const split = s.split(".");
   if (split.length > 4) split.splice(4);
 
   let needAnotherIteration = false;
@@ -100,7 +107,7 @@ function sanitizeIpV6(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      let s = num.toString(16);
+      const s = num.toString(16);
       if (num > 0xffff) {
         needAnotherIteration = true;
         return s.slice(0, 4) + ":" + s.slice(4);

virtweb_frontend/src/widgets/forms/MACInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { TextInput } from "./TextInput";
 
 export function MACInput(p: {
@@ -32,7 +33,7 @@ function sanitizeMacAddress(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      let s = num.toString(16).padStart(2, "0");
+      const s = num.toString(16).padStart(2, "0");
       if (num > 0xff) {
         needAnotherIteration = true;
         return s.slice(0, 2) + ":" + s.slice(2);

virtweb_frontend/src/widgets/forms/NWFConnStateInput.tsx

@@ -12,7 +12,7 @@ export function NWFConnStateInput(p: {
       label="Connection state"
       value={p.value}
       onValueChange={(s) => {
-        p.onChange?.(s as any);
+        p.onChange(s as any);
       }}
       options={[
         { label: "None", value: undefined },

virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-x/no-array-index-key */
+/* eslint-disable react-hooks/exhaustive-deps */
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { NWFilter, NWFilterURL } from "../../api/NWFilterApi";

virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx

@@ -13,7 +13,7 @@ export function NWFilterPriorityInput(p: {
       value={p.value?.toString()}
       type="number"
       onValueChange={(v) => {
-        p.onChange?.(v && v !== "" ? Number(v) : undefined);
+        p.onChange(v && v !== "" ? Number(v) : undefined);
       }}
       size={ServerApi.Config.constraints.nwfilter_priority}
       helperText="A lower priority value is accessed before one with a higher value"

virtweb_frontend/src/widgets/forms/NWFilterRules.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -66,9 +67,19 @@ export function NWFilterRules(p: {
             deleteRule(n);
           }}
           onGoDown={
-            n < p.rules.length - 1 ? () => swapRules(n, n + 1) : undefined
+            n < p.rules.length - 1
+              ? () => {
+                  swapRules(n, n + 1);
+                }
+              : undefined
+          }
+          onGoUp={
+            n > 0
+              ? () => {
+                  swapRules(n, n - 1);
+                }
+              : undefined
           }
-          onGoUp={n > 0 ? () => swapRules(n, n - 1) : undefined}
           {...p}
         />
       ))}
@@ -153,7 +164,9 @@ function NWRuleEdit(p: {
             editable={p.editable}
             onChange={p.onChange}
             selector={s}
-            onDelete={() => deleteSelector(n)}
+            onDelete={() => {
+              deleteSelector(n);
+            }}
           />
         ))}
       </CardContent>

virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx

@@ -25,9 +25,7 @@ export function NWFilterSelectInput(p: {
         value={selectedValue}
         onDelete={p.editable ? () => p.onChange?.(undefined) : undefined}
         onClick={
-          !p.editable && selectedValue
-            ? () => navigate(NWFilterURL(selectedValue))
-            : undefined
+          !p.editable ? () => navigate(NWFilterURL(selectedValue)) : undefined
         }
       />
     );
@@ -48,7 +46,7 @@ export function NWFilterSelectInput(p: {
       renderInput={(params) => (
         <TextField {...params} variant="standard" label={p.label} />
       )}
-      renderOption={(_props, option, _state) => (
+      renderOption={(_props, option) => (
         <NWFilterItem
           dense
           onClick={() => {

virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx

@@ -1,10 +1,10 @@
+/* eslint-disable react-x/no-array-index-key */
 import { mdiIp } from "@mdi/js";
 import Icon from "@mdi/react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
-  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
@@ -19,6 +19,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { IPInput } from "./IPInput";
 import { MACInput } from "./MACInput";
 import { TextInput } from "./TextInput";
+import Grid from "@mui/material/Grid";
 
 export function NetDHCPHostReservations(p: {
   editable: boolean;
@@ -39,7 +40,7 @@ export function NetDHCPHostReservations(p: {
     <>
       <Grid container>
         {p.dhcp.hosts.map((h, num) => (
-          <Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
+          <Grid key={num} size={{ sm: 12, md: 6 }} style={{ padding: "10px" }}>
             <HostReservationWidget
               key={num}
               {...p}
@@ -130,7 +131,7 @@ function HostReservationWidget(p: {
             value={p.host.mac}
             onValueChange={(v) => {
               p.host.mac = v!;
-              p.onChange?.();
+              p.onChange();
             }}
           />
         )}
@@ -142,7 +143,7 @@ function HostReservationWidget(p: {
           value={p.host.ip}
           onValueChange={(v) => {
             p.host.ip = v!;
-            p.onChange?.();
+            p.onChange();
           }}
         />
       </div>

virtweb_frontend/src/widgets/forms/NetNatConfiguration.tsx

@@ -5,11 +5,11 @@ import {
   Card,
   CardActions,
   CardContent,
-  Grid,
   IconButton,
   Tooltip,
   Typography,
 } from "@mui/material";
+import Grid from "@mui/material/Grid";
 import React, { PropsWithChildren } from "react";
 import { NatEntry } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -54,6 +54,7 @@ export function NetNatConfiguration(p: {
     <>
       {p.nat.map((e, num) => (
         <NatEntryForm
+          // eslint-disable-next-line react-x/no-array-index-key
           key={num}
           {...p}
           entry={e}
@@ -295,7 +296,7 @@ function NATEntryProp(
   p: PropsWithChildren<{ label?: string }>
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={6} style={{ padding: "20px" }}>
+    <Grid size={{ sm: 12, md: 6 }} style={{ padding: "20px" }}>
       {p.label && (
         <Typography variant="h6" style={{ marginBottom: "10px" }}>
           {p.label}

virtweb_frontend/src/widgets/forms/PortInput.tsx

@@ -12,7 +12,7 @@ export function PortInput(p: {
       value={p.value?.toString() ?? ""}
       type="number"
       onValueChange={(v) => {
-        p.onChange?.(sanitizePort(v));
+        p.onChange(sanitizePort(v));
       }}
       checkValue={(v) => Number(v) <= 65535}
     />