gui: split host:port for manually-typed addresses

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
gui: split host:port pasted into address field
2026-05-06 01:30:42 +00:00 · 2026-05-06 01:30:39 +00:00 · 2026-05-06 01:27:37 +00:00 · 2026-05-06 01:27:37 +00:00 · 2026-05-06 01:27:33 +00:00 · 2026-05-05 18:18:10 -06:00
2 changed files with 153 additions and 51 deletions
@@ -35,12 +35,11 @@ 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::UdpSocket;
+    use tokio::net::{lookup_host, UdpSocket};

-    let dest = format!("{}:{}", address, port)
-        .to_socket_addrs()?
+    let dest = lookup_host(format!("{}:{}", address, port))
+        .await?
        .next()
        .ok_or_else(|| eyre!("could not resolve address"))?;

@@ -16,6 +16,15 @@ 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,
@@ -508,7 +517,6 @@ fn ServerCard(
    editing_index: Signal<Option<usize>>,
    overrides: Resource<ProxyOverrides>,
 ) -> Element {
-    let user_config = use_context::<ConfigSystem>();
    let net: Coroutine<Command> = use_coroutine_handle();

    let address = format!("{}:{}", server.address, server.port);
@@ -543,9 +551,7 @@ fn ServerCard(
                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(),
@@ -722,40 +728,57 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
                "+ Add Server"
            }

-            if *show_add_modal.read() {
-                {
-                    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_cancel: move |_| show_add_modal.set(false),
-                    })
-                }
-            }
+            ServerModals { servers, show_add_modal, editing_index }
+        }
+    )
+}

-            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),
-                        })
-                    }
+#[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() {
+                {
+                    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);
+                        },
+                        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),
+                    })
                }
            }
        }
@@ -816,9 +839,21 @@ 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 port_num: u16 = port.read().parse().unwrap_or(64738);
+        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;
+        }
        on_save.call(ServerEntry {
            name: name.read().clone(),
            address: address.read().clone(),
@@ -832,6 +867,12 @@ 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",
@@ -844,7 +885,7 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                class: "modal",
                h2 { "Add Server" }
                div {
-                    class: "modal-field",
+                    class: "{field_class}",
                    label { "Name" }
                    input {
                        r#type: "text",
@@ -853,16 +894,39 @@ 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: "modal-field",
+                    class: "{field_class}",
                    label { "Address" }
                    input {
                        r#type: "text",
                        placeholder: "mumble.example.com",
                        pattern: ADDRESS_PATTERN,
                        value: "{address.read()}",
-                        oninput: move |evt| address.set(evt.value().clone()),
+                        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);
+                            }
+                        },
                        required: true,
                    }
                    div {
@@ -871,7 +935,7 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                    }
                }
                div {
-                    class: "modal-field",
+                    class: "{field_class}",
                    label { "Port" }
                    input {
                        r#type: "number",
@@ -880,9 +944,13 @@ 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: "modal-field",
+                    class: "{field_class}",
                    label { "Username" }
                    input {
                        r#type: "text",
@@ -891,6 +959,10 @@ 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",
@@ -911,7 +983,6 @@ 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"
                    }
@@ -933,6 +1004,7 @@ 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);
@@ -961,7 +1033,7 @@ fn EditServerModal(
                class: "modal",
                h2 { "Edit Server" }
                div {
-                    class: "modal-field",
+                    class: "modal-field modal-field--strict",
                    label { "Name" }
                    input {
                        r#type: "text",
@@ -970,6 +1042,10 @@ 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",
@@ -979,7 +1055,26 @@ fn EditServerModal(
                        placeholder: "mumble.example.com",
                        pattern: ADDRESS_PATTERN,
                        value: "{address.read()}",
-                        oninput: move |evt| address.set(evt.value().clone()),
+                        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);
+                            }
+                        },
                        required: true,
                    }
                    div {
@@ -988,7 +1083,7 @@ fn EditServerModal(
                    }
                }
                div {
-                    class: "modal-field",
+                    class: "modal-field modal-field--strict",
                    label { "Port" }
                    input {
                        r#type: "number",
@@ -997,9 +1092,13 @@ 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",
+                    class: "modal-field modal-field--strict",
                    label { "Username" }
                    input {
                        r#type: "text",
@@ -1008,6 +1107,10 @@ fn EditServerModal(
                        oninput: move |evt| username.set(evt.value().clone()),
                        required: true,
                    }
+                    div {
+                        class: "modal-field__error",
+                        "Enter a username."
+                    }
                }
                div {
                    class: "modal-field",
Author	SHA1	Message	Date
restitux	e13f71c270	gui: split host:port for manually-typed addresses Build Mumble Web 2 / macos_build (push) Successful in 1m4s Details Build Mumble Web 2 / windows_build (push) Successful in 2m46s Details Build Mumble Web 2 / linux_build (push) Successful in 1m24s Details Build Mumble Web 2 / android_build (push) Successful in 4m34s Details Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-06 01:30:42 +00:00
restitux	c86226b40d	gui: split host:port pasted into address field Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-06 01:30:39 +00:00
restitux	614c7f7d56	gui: stricter validation in add and edit modals	2026-05-06 01:27:37 +00:00
restitux	5156338eb3	gui: add server add and edit modals	2026-05-06 01:27:37 +00:00
restitux	451ccf42ac	gui: new login screen	2026-05-06 01:27:33 +00:00
restitux	c678de4921	client/common: support new login screen	2026-05-05 18:18:10 -06:00
restitux	25ec34d7e7	common: resolve ping addresses with async DNS Build Mumble Web 2 / macos_build (push) Successful in 1m20s Details Build Mumble Web 2 / linux_build (push) Successful in 1m27s Details Build Mumble Web 2 / windows_build (push) Successful in 2m57s Details Build Mumble Web 2 / android_build (push) Successful in 4m40s Details The previous std::net::ToSocketAddrs call blocked the runtime during DNS lookup. This change allows the server ping status to be resolved asynchronously. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-05 18:18:07 -06:00