gui: split host:port for manually-typed addresses

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

client/src/app.rs

@@ -21,10 +21,16 @@ pub struct AudioSettings {
     pub denoise: bool,
 }
 
+#[derive(Debug, Clone)]
+pub enum ConnectTarget {
+    Direct { host: String, port: u16 },
+    Proxy(String),
+}
+
 #[derive(Debug)]
 pub enum Command {
     Connect {
-        address: String,
+        target: ConnectTarget,
         username: String,
         config: ProxyOverrides,
     },

client/src/imp/connect.rs

@@ -1,5 +1,5 @@
-use crate::app::{Command, SharedState};
-use color_eyre::eyre::Error;
+use crate::app::{Command, ConnectTarget, SharedState};
+use color_eyre::eyre::{bail, Error};
 use futures_channel::mpsc::UnboundedReceiver;
 use mumble_protocol::control::ClientControlCodec;
 use std::net::ToSocketAddrs;
@@ -70,7 +70,7 @@ impl ServerCertVerifier for NoCertificateVerification {
 
 #[instrument]
 pub async fn network_connect(
-    address: String,
+    target: ConnectTarget,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
     overrides: &ProxyOverrides,
@@ -78,6 +78,13 @@ pub async fn network_connect(
 ) -> Result<(), Error> {
     info!("connecting");
 
+    let (host, port) = match target {
+        ConnectTarget::Direct { host, port } => (host, port),
+        ConnectTarget::Proxy(_) => {
+            bail!("desktop/mobile platform requires a direct host:port, not a proxy URL")
+        }
+    };
+
     let config = ClientConfig::builder()
         .dangerous()
         .with_custom_certificate_verifier(Arc::new(NoCertificateVerification))
@@ -85,15 +92,14 @@ pub async fn network_connect(
 
     let connector = TlsConnector::from(Arc::new(config));
 
-    let addr = format!("{}:{}", address, 64738)
+    let addr = (&*host, port)
         .to_socket_addrs()?
         .next()
         .unwrap();
 
     let server_tcp = TcpStream::connect(addr).await?;
     let server_stream = connector
-        //.connect("127.0.0.1".try_into()?, server_tcp)
-        .connect(address.try_into()?, server_tcp)
+        .connect(host.try_into()?, server_tcp)
         .await?;
     let (read_server, write_server) = tokio::io::split(server_stream);
 

client/src/imp/desktop.rs

@@ -1,4 +1,4 @@
-use crate::app::{Command, SharedState};
+use crate::app::{Command, ConnectTarget, SharedState};
 use color_eyre::eyre::Error;
 use futures_channel::mpsc::UnboundedReceiver;
 use mumble_web2_common::{ProxyOverrides, ServerStatus};
@@ -24,13 +24,13 @@ impl super::PlatformInterface for DesktopPlatform {
     }
 
     async fn network_connect(
-        address: String,
+        target: ConnectTarget,
         username: String,
         event_rx: &mut UnboundedReceiver<Command>,
         overrides: &ProxyOverrides,
         state: SharedState,
     ) -> Result<(), Error> {
-        super::connect::network_connect(address, username, event_rx, overrides, state).await
+        super::connect::network_connect(target, username, event_rx, overrides, state).await
     }
 
     async fn get_status(

client/src/imp/mobile.rs

@@ -1,4 +1,4 @@
-use crate::app::{Command, SharedState};
+use crate::app::{Command, ConnectTarget, SharedState};
 use color_eyre::eyre::Error;
 use futures_channel::mpsc::UnboundedReceiver;
 use mumble_web2_common::{ProxyOverrides, ServerStatus};
@@ -20,13 +20,13 @@ impl super::PlatformInterface for MobilePlatform {
     }
 
     async fn network_connect(
-        address: String,
+        target: ConnectTarget,
         username: String,
         event_rx: &mut UnboundedReceiver<Command>,
         overrides: &ProxyOverrides,
         state: SharedState,
     ) -> Result<(), Error> {
-        super::connect::network_connect(address, username, event_rx, overrides, state).await
+        super::connect::network_connect(target, username, event_rx, overrides, state).await
     }
 
     async fn get_status(

client/src/imp/mod.rs

@@ -4,7 +4,7 @@
 //! The traits make the platform boundary explicit and provide compile-time verification.
 #![allow(async_fn_in_trait)]
 
-use crate::app::{Command, SharedState};
+use crate::app::{Command, ConnectTarget, SharedState};
 use crate::effects::AudioProcessor;
 use color_eyre::eyre::Error;
 use futures_channel::mpsc::UnboundedReceiver;
@@ -79,7 +79,7 @@ pub trait PlatformInterface {
 
     /// Establish a connection to the Mumble server and run the network loop.
     fn network_connect(
-        address: String,
+        target: ConnectTarget,
         username: String,
         event_rx: &mut UnboundedReceiver<Command>,
         proxy_overrides: &ProxyOverrides,

client/src/imp/stub.rs

@@ -1,6 +1,9 @@
 /// Stub implementation of the platform interface, so that we can
 /// `cargo check` without any --feature flags.
-use crate::{app::SharedState, effects::AudioProcessor};
+use crate::{
+    app::{ConnectTarget, SharedState},
+    effects::AudioProcessor,
+};
 use color_eyre::eyre::Error;
 use futures_channel::mpsc::UnboundedReceiver;
 use mumble_web2_common::{ProxyOverrides, ServerStatus};
@@ -21,7 +24,7 @@ impl super::PlatformInterface for StubPlatform {
     }
 
     fn network_connect(
-        _address: String,
+        _target: ConnectTarget,
         _username: String,
         _event_rx: &mut UnboundedReceiver<crate::app::Command>,
         _overrides: &ProxyOverrides,

client/src/imp/web.rs

@@ -1,4 +1,4 @@
-use crate::app::{Command, SharedState};
+use crate::app::{Command, ConnectTarget, SharedState};
 use crate::effects::{AudioProcessor, AudioProcessorSender, TransmitState};
 use color_eyre::eyre::{bail, eyre, Error};
 use crossbeam::atomic::AtomicCell;
@@ -108,13 +108,19 @@ impl super::PlatformInterface for WebPlatform {
     }
 
     async fn network_connect(
-        address: String,
+        target: ConnectTarget,
         username: String,
         event_rx: &mut UnboundedReceiver<Command>,
         overrides: &ProxyOverrides,
         state: SharedState,
     ) -> Result<(), Error> {
-        network_connect(address, username, event_rx, overrides, state).await
+        let url = match target {
+            ConnectTarget::Proxy(url) => url,
+            ConnectTarget::Direct { .. } => {
+                bail!("web platform requires a proxy URL, not a direct host:port")
+            }
+        };
+        network_connect(url, username, event_rx, overrides, state).await
     }
 
     async fn get_status(

client/src/lib.rs

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

client/src/mainloop.rs

@@ -39,7 +39,7 @@ use crate::imp::{
 pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>, state: SharedState) {
     loop {
         let Some(Command::Connect {
-            address,
+            target,
             username,
             config,
         }) = event_rx.next().await
@@ -50,7 +50,7 @@ pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>, state:
         *state.server.write_unchecked() = Default::default();
         *state.status.write_unchecked() = ConnectionState::Connecting;
         if let Err(error) =
-            Platform::network_connect(address, username, &mut event_rx, &config, state.clone())
+            Platform::network_connect(target, username, &mut event_rx, &config, state.clone())
                 .await
         {
             error!("could not connect {:?}", error);

common/src/lib.rs

@@ -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"))?;
 

gui/assets/main.scss

@@ -643,6 +643,23 @@ a:visited {
     box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
 }
 
+.modal-field input:user-invalid,
+.modal-field--strict input:invalid {
+    border-color: rgba(255, 90, 90, 0.85);
+    box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.45);
+}
+
+.modal-field__error {
+    display: none;
+    font-size: 0.75rem;
+    color: #ff8888;
+}
+
+.modal-field:has(input:user-invalid) .modal-field__error,
+.modal-field--strict:has(input:invalid) .modal-field__error {
+    display: block;
+}
+
 /* Actions row */
 
 .modal-actions {

gui/src/main.rs

@@ -3,13 +3,28 @@
 use dioxus::prelude::*;
 use mumble_web2_client::{
     network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
-    ConfigSystemInterface as _, ConnectionState, Platform, PlatformInterface as _, SharedState,
-    State, UserId, UserState,
+    ConfigSystemInterface as _, ConnectTarget, ConnectionState, Platform, PlatformInterface as _,
+    SharedState, State, UserId, UserState, VERSION,
 };
 use mumble_web2_common::{ProxyOverrides, ServerEntry};
 use Command::*;
 use ConnectionState::*;
 
+const ADDRESS_PATTERN: &str = "[A-Za-z0-9.-]+";
+
+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,
@@ -495,6 +510,158 @@ 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 proxy_url = overrides
+        .read()
+        .as_ref()
+        .and_then(|c| c.proxy_url.clone())
+        .unwrap_or_default();
+
+    let mut username = use_signal(|| {
+        user_config
+            .config_get::<String>("username")
+            .unwrap_or_default()
+    });
+
+    let is_connecting = matches!(&*state.status.read(), Connecting);
+
+
+    rsx!(
+        div {
+            class: "server-list-page",
+            h1 {
+                "Mumble Web"
+                match VERSION {
+                    Some(v) => rsx!(div { class: "login_version", "({v})" }),
+                    None => rsx!(),
+                }
+            }
+            div {
+                class: "server-list",
+                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" }
+                        span { class: "server-card__address", "{proxy_url}" }
+                    }
+                }
+                div {
+                    class: "override-username-row",
+                    input {
+                        class: "override-username-input",
+                        r#type: "text",
+                        placeholder: "Username",
+                        value: "{username.read()}",
+                        oninput: move |evt| username.set(evt.value().clone()),
+                    }
+                    button {
+                        class: "server-card__action server-card__action--connect",
+                        disabled: is_connecting || username.read().is_empty(),
+                        onclick: {
+                            let proxy_url = proxy_url.clone();
+                            let user_config = user_config.clone();
+                            move |_| {
+                                user_config.config_set("username", &*username.read());
+                                net.send(Connect {
+                                    target: ConnectTarget::Proxy(proxy_url.clone()),
+                                    username: username.read().clone(),
+                                    config: overrides.read().clone().unwrap_or_default(),
+                                });
+                            }
+                        },
+                        img {
+                            src: asset!("assets/arrow-right-svgrepo-com.svg"),
+                            alt: "Connect",
+                        }
+                    }
+                }
+                match &*state.status.read() {
+                    Failed(msg) => rsx!(
+                        div {
+                            class: "login_error",
+                            "Failed to connect:"
+                            pre { "{msg}" }
+                        }
+                    ),
+                    _ => rsx!(),
+                }
+            }
+        }
+    )
+}
+
 #[component]
 pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
     let user_config = use_context::<ConfigSystem>();
@@ -509,8 +676,6 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
     let mut show_add_modal = use_signal(|| false);
     let mut editing_index = use_signal(|| None::<usize>);
 
-    let version = option_env!("MUMBLE_WEB2_VERSION");
-
     let is_override_mode = overrides
         .read()
         .as_ref()
@@ -518,89 +683,7 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
 
     // --- Overrides mode: single preset server, username-only input ---
     if is_override_mode {
-        let proxy_url = overrides
-            .read()
-            .as_ref()
-            .and_then(|c| c.proxy_url.clone())
-            .unwrap_or_default();
-
-        let mut username = use_signal(|| {
-            user_config
-                .config_get::<String>("username")
-                .unwrap_or_default()
-        });
-
-        let status = &state.status;
-        let is_connecting = matches!(&*status.read(), Connecting);
-
-        return rsx!(
-            div {
-                class: "server-list-page",
-                h1 {
-                    "Mumble Web"
-                    match version {
-                        Some(v) => rsx!(div { class: "login_version", "({v})" }),
-                        None => rsx!(),
-                    }
-                }
-                div {
-                    class: "server-list",
-                    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" }
-                            span { class: "server-card__address", "{proxy_url}" }
-                        }
-                    }
-                    div {
-                        class: "override-username-row",
-                        input {
-                            class: "override-username-input",
-                            r#type: "text",
-                            placeholder: "Username",
-                            value: "{username.read()}",
-                            oninput: move |evt| username.set(evt.value().clone()),
-                        }
-                        button {
-                            class: "server-card__action server-card__action--connect",
-                            disabled: is_connecting || username.read().is_empty(),
-                            onclick: {
-                                let proxy_url = proxy_url.clone();
-                                let user_config = user_config.clone();
-                                move |_| {
-                                    user_config.config_set("username", &*username.read());
-                                    net.send(Connect {
-                                        address: proxy_url.clone(),
-                                        username: username.read().clone(),
-                                        config: overrides.read().clone().unwrap_or_default(),
-                                    });
-                                }
-                            },
-                            img {
-                                src: asset!("assets/arrow-right-svgrepo-com.svg"),
-                                alt: "Connect",
-                            }
-                        }
-                    }
-                    match &*state.status.read() {
-                        Failed(msg) => rsx!(
-                            div {
-                                class: "login_error",
-                                "Failed to connect:"
-                                pre { "{msg}" }
-                            }
-                        ),
-                        _ => rsx!(),
-                    }
-                }
-            }
-        );
+        return rsx!(OverrideLoginView { overrides });
     }
 
     // --- Normal mode: editable server list ---
@@ -609,7 +692,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!(),
                 }
@@ -617,57 +700,12 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
             div {
                 class: "server-list",
                 for (idx, server) in servers.read().iter().enumerate() {
-                    {
-                        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);
-                                            let addr = format!("{}:{}", entry.address, entry.port);
-                                            net.send(Connect {
-                                                address: addr,
-                                                username: entry.username.clone(),
-                                                config: overrides.read().clone().unwrap_or_default(),
-                                            });
-                                        }
-                                    },
-                                    img {
-                                        src: asset!("assets/arrow-right-svgrepo-com.svg"),
-                                        alt: "Connect",
-                                    }
-                                }
-                            }
-                        )
+                    ServerCard {
+                        key: "{idx}",
+                        idx,
+                        server: server.clone(),
+                        editing_index,
+                        overrides,
                     }
                 }
             }
@@ -690,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),
+                    })
                 }
             }
         }
@@ -784,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(),
@@ -800,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",
@@ -812,43 +885,83 @@ 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",
                         placeholder: "My Mumble Server",
                         value: "{name.read()}",
                         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 {
+                        class: "modal-field__error",
+                        "Enter a hostname or IP address only — do not include a port."
                     }
                 }
                 div {
-                    class: "modal-field",
+                    class: "{field_class}",
                     label { "Port" }
                     input {
                         r#type: "number",
                         placeholder: "64738",
                         value: "{port.read()}",
                         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",
                         placeholder: "Nickname",
                         value: "{username.read()}",
                         oninput: move |evt| username.set(evt.value().clone()),
+                        required: true,
+                    }
+                    div {
+                        class: "modal-field__error",
+                        "Enter a username."
                     }
                 }
                 div {
@@ -870,7 +983,6 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
                     }
                     button {
                         class: "modal-btn modal-btn--primary",
-                        disabled: address.read().is_empty() || username.read().is_empty(),
                         onclick: do_save,
                         "Save"
                     }
@@ -892,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);
@@ -920,43 +1033,83 @@ fn EditServerModal(
                 class: "modal",
                 h2 { "Edit Server" }
                 div {
-                    class: "modal-field",
+                    class: "modal-field modal-field--strict",
                     label { "Name" }
                     input {
                         r#type: "text",
                         placeholder: "My Mumble Server",
                         value: "{name.read()}",
                         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: "modal-field modal-field--strict",
                     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 {
+                        class: "modal-field__error",
+                        "Enter a hostname or IP address only — do not include a port."
                     }
                 }
                 div {
-                    class: "modal-field",
+                    class: "modal-field modal-field--strict",
                     label { "Port" }
                     input {
                         r#type: "number",
                         placeholder: "64738",
                         value: "{port.read()}",
                         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",
                         placeholder: "Nickname",
                         value: "{username.read()}",
                         oninput: move |evt| username.set(evt.value().clone()),
+                        required: true,
+                    }
+                    div {
+                        class: "modal-field__error",
+                        "Enter a username."
                     }
                 }
                 div {
@@ -984,7 +1137,7 @@ fn EditServerModal(
                     }
                     button {
                         class: "modal-btn modal-btn--primary",
-                        disabled: address.read().is_empty() || username.read().is_empty(),
+                        disabled: !address_is_valid(&address.read()) || username.read().is_empty(),
                         onclick: do_save,
                         "Save"
                     }