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 ef0e5ad..5b49518 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, @@ -511,10 +517,7 @@ pub fn LoginView(overrides: Resource) -> Element { let version = option_env!("MUMBLE_WEB2_VERSION"); - let is_override_mode = overrides - .read() - .as_ref() - .is_some_and(|c| !c.any_server); + 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 { @@ -821,6 +824,7 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() placeholder: "My Mumble Server", value: "{name.read()}", oninput: move |evt| name.set(evt.value().clone()), + required: true, } } div { @@ -829,8 +833,14 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() 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 { @@ -841,6 +851,7 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() placeholder: "64738", value: "{port.read()}", oninput: move |evt| port.set(evt.value().clone()), + required: true, } } div { @@ -851,6 +862,7 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() placeholder: "Nickname", value: "{username.read()}", oninput: move |evt| username.set(evt.value().clone()), + required: true, } } div { @@ -872,7 +884,7 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() } 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" } @@ -929,16 +941,23 @@ fn EditServerModal( placeholder: "My Mumble Server", value: "{name.read()}", oninput: move |evt| name.set(evt.value().clone()), + required: true, } } 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 { @@ -949,6 +968,7 @@ fn EditServerModal( placeholder: "64738", value: "{port.read()}", oninput: move |evt| port.set(evt.value().clone()), + required: true, } } div { @@ -959,6 +979,7 @@ fn EditServerModal( placeholder: "Nickname", value: "{username.read()}", oninput: move |evt| username.set(evt.value().clone()), + required: true, } } div { @@ -986,7 +1007,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" }