gui: stricter validation in add and edit modals

client/src/lib.rs

@@ -9,5 +9,3 @@ pub use imp::*;
 pub use mainloop::*;
 pub use mime_guess;
 pub use reqwest;
-
-pub const VERSION: Option<&str> = option_env!("MUMBLE_WEB2_VERSION");

common/src/lib.rs

@@ -35,11 +35,12 @@ pub struct ServerEntry {
 #[cfg(feature = "networking")]
 pub async fn ping_server(address: &str, port: u16) -> color_eyre::Result<ServerStatus> {
     use color_eyre::eyre::{bail, eyre};
+    use std::net::ToSocketAddrs;
     use std::time::Duration;
-    use tokio::net::{lookup_host, UdpSocket};
+    use tokio::net::UdpSocket;
 
-    let dest = lookup_host(format!("{}:{}", address, port))
-        .await?
+    let dest = format!("{}:{}", address, port)
+        .to_socket_addrs()?
         .next()
         .ok_or_else(|| eyre!("could not resolve address"))?;
 

gui/src/main.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 use mumble_web2_client::{
     network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
     ConfigSystemInterface as _, ConnectTarget, ConnectionState, Platform, PlatformInterface as _,
-    SharedState, State, UserId, UserState, VERSION,
+    SharedState, State, UserId, UserState,
 };
 use mumble_web2_common::{ProxyOverrides, ServerEntry};
 use Command::*;
@@ -16,15 +16,6 @@ fn address_is_valid(addr: &str) -> bool {
     !addr.is_empty() && !addr.contains(':')
 }
 
-fn split_host_port(input: &str) -> (String, Option<String>) {
-    if let Some((host, port)) = input.rsplit_once(':') {
-        if !port.is_empty() && port.chars().all(|c| c.is_ascii_digit()) {
-            return (host.to_string(), Some(port.to_string()));
-        }
-    }
-    (input.to_string(), None)
-}
-
 #[derive(Clone, Copy, PartialEq, Eq)]
 pub enum UserIcon {
     Normal,
@@ -510,73 +501,14 @@ pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
     )
 }
 
-#[component]
-fn ServerCard(
-    idx: usize,
-    server: ServerEntry,
-    editing_index: Signal<Option<usize>>,
-    overrides: Resource<ProxyOverrides>,
-) -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-
-    let address = format!("{}:{}", server.address, server.port);
-    let connect_entry = server.clone();
-
-    rsx!(
-        div {
-            class: "server-card",
-            img {
-                class: "server-card__icon",
-                src: asset!("assets/earth-14-svgrepo-com.svg"),
-                alt: "Server icon",
-            }
-            div {
-                class: "server-card__info",
-                span { class: "server-card__name", "{server.name}" }
-                span { class: "server-card__address", "{address}" }
-            }
-            ServerPingInfo {
-                address: server.address.clone(),
-                port: server.port,
-            }
-            button {
-                class: "server-card__action",
-                onclick: move |_| editing_index.set(Some(idx)),
-                img {
-                    src: asset!("assets/edit-3-svgrepo-com.svg"),
-                    alt: "Edit",
-                }
-            }
-            button {
-                class: "server-card__action server-card__action--connect",
-                onclick: {
-                    let entry = connect_entry.clone();
-                    move |_| {
-                        net.send(Connect {
-                            target: ConnectTarget::Direct {
-                                host: entry.address.clone(),
-                                port: entry.port,
-                            },
-                            username: entry.username.clone(),
-                            config: overrides.read().clone().unwrap_or_default(),
-                        });
-                    }
-                },
-                img {
-                    src: asset!("assets/arrow-right-svgrepo-com.svg"),
-                    alt: "Connect",
-                }
-            }
-        }
-    )
-}
-
 #[component]
 fn OverrideLoginView(overrides: Resource<ProxyOverrides>) -> Element {
     let user_config = use_context::<ConfigSystem>();
     let net: Coroutine<Command> = use_coroutine_handle();
     let state = use_context::<SharedState>();
 
+    let version = option_env!("MUMBLE_WEB2_VERSION");
+
     let proxy_url = overrides
         .read()
         .as_ref()
@@ -591,13 +523,12 @@ fn OverrideLoginView(overrides: Resource<ProxyOverrides>) -> Element {
 
     let is_connecting = matches!(&*state.status.read(), Connecting);
 
-
     rsx!(
         div {
             class: "server-list-page",
             h1 {
                 "Mumble Web"
-                match VERSION {
+                match version {
                     Some(v) => rsx!(div { class: "login_version", "({v})" }),
                     None => rsx!(),
                 }
@@ -676,10 +607,9 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
     let mut show_add_modal = use_signal(|| false);
     let mut editing_index = use_signal(|| None::<usize>);
 
-    let is_override_mode = overrides
-        .read()
-        .as_ref()
-        .is_some_and(|c| !c.any_server);
+    let version = option_env!("MUMBLE_WEB2_VERSION");
+
+    let is_override_mode = overrides.read().as_ref().is_some_and(|c| !c.any_server);
 
     // --- Overrides mode: single preset server, username-only input ---
     if is_override_mode {
@@ -692,7 +622,7 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
             class: "server-list-page",
             h1 {
                 "Mumble Web"
-                match VERSION {
+                match version {
                     Some(v) => rsx!(div { class: "login_version", "({v})" }),
                     None => rsx!(),
                 }
@@ -700,12 +630,59 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
             div {
                 class: "server-list",
                 for (idx, server) in servers.read().iter().enumerate() {
-                    ServerCard {
-                        key: "{idx}",
-                        idx,
-                        server: server.clone(),
-                        editing_index,
-                        overrides,
+                    {
+                        let address = format!("{}:{}", server.address, server.port);
+                        let connect_entry = server.clone();
+                        rsx!(
+                            div {
+                                key: "{idx}",
+                                class: "server-card",
+                                img {
+                                    class: "server-card__icon",
+                                    src: asset!("assets/earth-14-svgrepo-com.svg"),
+                                    alt: "Server icon",
+                                }
+                                div {
+                                    class: "server-card__info",
+                                    span { class: "server-card__name", "{server.name}" }
+                                    span { class: "server-card__address", "{address}" }
+                                }
+                                ServerPingInfo {
+                                    address: server.address.clone(),
+                                    port: server.port,
+                                }
+                                button {
+                                    class: "server-card__action",
+                                    onclick: move |_| editing_index.set(Some(idx)),
+                                    img {
+                                        src: asset!("assets/edit-3-svgrepo-com.svg"),
+                                        alt: "Edit",
+                                    }
+                                }
+                                button {
+                                    class: "server-card__action server-card__action--connect",
+                                    onclick: {
+                                        let entry = connect_entry.clone();
+                                        let user_config = user_config.clone();
+                                        move |_| {
+                                            user_config.config_set("username", &entry.username);
+                                            net.send(Connect {
+                                                target: ConnectTarget::Direct {
+                                                    host: entry.address.clone(),
+                                                    port: entry.port,
+                                                },
+                                                username: entry.username.clone(),
+                                                config: overrides.read().clone().unwrap_or_default(),
+                                            });
+                                        }
+                                    },
+                                    img {
+                                        src: asset!("assets/arrow-right-svgrepo-com.svg"),
+                                        alt: "Connect",
+                                    }
+                                }
+                            }
+                        )
                     }
                 }
             }
@@ -728,59 +705,42 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
                 "+ Add Server"
             }
 
-            ServerModals { servers, show_add_modal, editing_index }
-        }
-    )
-}
-
-#[component]
-fn ServerModals(
-    servers: Signal<Vec<ServerEntry>>,
-    show_add_modal: Signal<bool>,
-    editing_index: Signal<Option<usize>>,
-) -> Element {
-    let user_config = use_context::<ConfigSystem>();
-
-    rsx!(
-        if *show_add_modal.read() {
-            {
-                let user_config = user_config.clone();
-                let mut servers = servers;
-                let mut show_add_modal = show_add_modal;
-                rsx!(AddServerModal {
-                    on_save: move |entry: ServerEntry| {
-                        servers.write().push(entry);
-                        user_config.config_set("servers", &*servers.read());
-                        show_add_modal.set(false);
-                    },
-                    on_cancel: move |_| show_add_modal.set(false),
-                })
-            }
-        }
-
-        if let Some(idx) = *editing_index.read() {
-            if let Some(entry) = servers.read().get(idx).cloned() {
+            if *show_add_modal.read() {
                 {
-                    let user_config_save = user_config.clone();
-                    let user_config_del = user_config.clone();
-                    let mut servers = servers;
-                    let mut editing_index = editing_index;
-                    rsx!(EditServerModal {
-                        entry,
-                        on_save: move |updated: ServerEntry| {
-                            servers.write()[idx] = updated;
-                            user_config_save.config_set("servers", &*servers.read());
-                            editing_index.set(None);
+                    let user_config = user_config.clone();
+                    rsx!(AddServerModal {
+                        on_save: move |entry: ServerEntry| {
+                            servers.write().push(entry);
+                            user_config.config_set("servers", &*servers.read());
+                            show_add_modal.set(false);
                         },
-                        on_delete: move |_| {
-                            servers.write().remove(idx);
-                            user_config_del.config_set("servers", &*servers.read());
-                            editing_index.set(None);
-                        },
-                        on_cancel: move |_| editing_index.set(None),
+                        on_cancel: move |_| show_add_modal.set(false),
                     })
                 }
             }
+
+            if let Some(idx) = *editing_index.read() {
+                if let Some(entry) = servers.read().get(idx).cloned() {
+                    {
+                        let user_config_save = user_config.clone();
+                        let user_config_del = user_config.clone();
+                        rsx!(EditServerModal {
+                            entry,
+                            on_save: move |updated: ServerEntry| {
+                                servers.write()[idx] = updated;
+                                user_config_save.config_set("servers", &*servers.read());
+                                editing_index.set(None);
+                            },
+                            on_delete: move |_| {
+                                servers.write().remove(idx);
+                                user_config_del.config_set("servers", &*servers.read());
+                                editing_index.set(None);
+                            },
+                            on_cancel: move |_| editing_index.set(None),
+                        })
+                    }
+                }
+            }
         }
     )
 }
@@ -839,21 +799,9 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
             .unwrap_or_default()
     });
     let mut password = use_signal(|| String::new());
-    let mut address_paste_pending = use_signal(|| false);
-    let mut submit_attempted = use_signal(|| false);
 
     let do_save = move |_| {
-        let Ok(port_num) = port.read().parse::<u16>() else {
-            submit_attempted.set(true);
-            return;
-        };
-        if name.read().is_empty()
-            || !address_is_valid(&address.read())
-            || username.read().is_empty()
-        {
-            submit_attempted.set(true);
-            return;
-        }
+        let port_num: u16 = port.read().parse().unwrap_or(64738);
         on_save.call(ServerEntry {
             name: name.read().clone(),
             address: address.read().clone(),
@@ -867,12 +815,6 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
         });
     };
 
-    let field_class = if submit_attempted() {
-        "modal-field modal-field--strict"
-    } else {
-        "modal-field"
-    };
-
     rsx! {
         div {
             class: "modal-backdrop",
@@ -885,7 +827,7 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                 class: "modal",
                 h2 { "Add Server" }
                 div {
-                    class: "{field_class}",
+                    class: "modal-field",
                     label { "Name" }
                     input {
                         r#type: "text",
@@ -894,39 +836,16 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                         oninput: move |evt| name.set(evt.value().clone()),
                         required: true,
                     }
-                    div {
-                        class: "modal-field__error",
-                        "Enter a name for this server."
-                    }
                 }
                 div {
-                    class: "{field_class}",
+                    class: "modal-field",
                     label { "Address" }
                     input {
                         r#type: "text",
                         placeholder: "mumble.example.com",
                         pattern: ADDRESS_PATTERN,
                         value: "{address.read()}",
-                        onpaste: move |_| address_paste_pending.set(true),
-                        oninput: move |evt| {
-                            if address_paste_pending() {
-                                address_paste_pending.set(false);
-                                let (host, maybe_port) = split_host_port(&evt.value());
-                                address.set(host);
-                                if let Some(p) = maybe_port {
-                                    port.set(p);
-                                }
-                            } else {
-                                address.set(evt.value());
-                            }
-                        },
-                        onblur: move |_| {
-                            let (host, maybe_port) = split_host_port(&address.read());
-                            if let Some(p) = maybe_port {
-                                address.set(host);
-                                port.set(p);
-                            }
-                        },
+                        oninput: move |evt| address.set(evt.value().clone()),
                         required: true,
                     }
                     div {
@@ -935,7 +854,7 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                     }
                 }
                 div {
-                    class: "{field_class}",
+                    class: "modal-field",
                     label { "Port" }
                     input {
                         r#type: "number",
@@ -944,13 +863,9 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                         oninput: move |evt| port.set(evt.value().clone()),
                         required: true,
                     }
-                    div {
-                        class: "modal-field__error",
-                        "Enter a port number."
-                    }
                 }
                 div {
-                    class: "{field_class}",
+                    class: "modal-field",
                     label { "Username" }
                     input {
                         r#type: "text",
@@ -959,10 +874,6 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                         oninput: move |evt| username.set(evt.value().clone()),
                         required: true,
                     }
-                    div {
-                        class: "modal-field__error",
-                        "Enter a username."
-                    }
                 }
                 div {
                     class: "modal-field",
@@ -983,6 +894,7 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                     }
                     button {
                         class: "modal-btn modal-btn--primary",
+                        disabled: !address_is_valid(&address.read()) || username.read().is_empty(),
                         onclick: do_save,
                         "Save"
                     }
@@ -1004,7 +916,6 @@ fn EditServerModal(
     let mut port = use_signal(|| entry.port.to_string());
     let mut username = use_signal(|| entry.username.clone());
     let mut password = use_signal(|| entry.password.clone().unwrap_or_default());
-    let mut address_paste_pending = use_signal(|| false);
 
     let do_save = move |_| {
         let port_num: u16 = port.read().parse().unwrap_or(64738);
@@ -1033,7 +944,7 @@ fn EditServerModal(
                 class: "modal",
                 h2 { "Edit Server" }
                 div {
-                    class: "modal-field modal-field--strict",
+                    class: "modal-field",
                     label { "Name" }
                     input {
                         r#type: "text",
@@ -1042,10 +953,6 @@ fn EditServerModal(
                         oninput: move |evt| name.set(evt.value().clone()),
                         required: true,
                     }
-                    div {
-                        class: "modal-field__error",
-                        "Enter a name for this server."
-                    }
                 }
                 div {
                     class: "modal-field modal-field--strict",
@@ -1055,26 +962,7 @@ fn EditServerModal(
                         placeholder: "mumble.example.com",
                         pattern: ADDRESS_PATTERN,
                         value: "{address.read()}",
-                        onpaste: move |_| address_paste_pending.set(true),
-                        oninput: move |evt| {
-                            if address_paste_pending() {
-                                address_paste_pending.set(false);
-                                let (host, maybe_port) = split_host_port(&evt.value());
-                                address.set(host);
-                                if let Some(p) = maybe_port {
-                                    port.set(p);
-                                }
-                            } else {
-                                address.set(evt.value());
-                            }
-                        },
-                        onblur: move |_| {
-                            let (host, maybe_port) = split_host_port(&address.read());
-                            if let Some(p) = maybe_port {
-                                address.set(host);
-                                port.set(p);
-                            }
-                        },
+                        oninput: move |evt| address.set(evt.value().clone()),
                         required: true,
                     }
                     div {
@@ -1083,7 +971,7 @@ fn EditServerModal(
                     }
                 }
                 div {
-                    class: "modal-field modal-field--strict",
+                    class: "modal-field",
                     label { "Port" }
                     input {
                         r#type: "number",
@@ -1092,13 +980,9 @@ fn EditServerModal(
                         oninput: move |evt| port.set(evt.value().clone()),
                         required: true,
                     }
-                    div {
-                        class: "modal-field__error",
-                        "Enter a port number."
-                    }
                 }
                 div {
-                    class: "modal-field modal-field--strict",
+                    class: "modal-field",
                     label { "Username" }
                     input {
                         r#type: "text",
@@ -1107,10 +991,6 @@ fn EditServerModal(
                         oninput: move |evt| username.set(evt.value().clone()),
                         required: true,
                     }
-                    div {
-                        class: "modal-field__error",
-                        "Enter a username."
-                    }
                 }
                 div {
                     class: "modal-field",