gui: stricter validation in add and edit modals

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

@@ -10,6 +10,12 @@ 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(':')
+}
+
 #[derive(Clone, Copy, PartialEq, Eq)]
 pub enum UserIcon {
     Normal,
@@ -824,9 +830,20 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()
             .unwrap_or_default()
     });
     let mut password = use_signal(|| String::new());
+    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(),
@@ -840,6 +857,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",
@@ -852,43 +875,64 @@ 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()),
+                        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 {
@@ -910,7 +954,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"
                     }
@@ -960,43 +1003,64 @@ 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()),
+                        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 {
@@ -1024,7 +1088,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"
                     }