diff --git a/gui/assets/main.scss b/gui/assets/main.scss index 439f7b7..658f6f1 100644 --- a/gui/assets/main.scss +++ b/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 { diff --git a/gui/src/main.rs b/gui/src/main.rs index d711f44..bdd01a9 100644 --- a/gui/src/main.rs +++ b/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, 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::() 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, 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, 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, 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" }