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 0625106..e5fa53d 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, @@ -845,6 +851,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 { @@ -853,8 +860,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 { @@ -865,6 +878,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 { @@ -875,6 +889,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 { @@ -896,7 +911,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" } @@ -953,16 +968,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 { @@ -973,6 +995,7 @@ fn EditServerModal( placeholder: "64738", value: "{port.read()}", oninput: move |evt| port.set(evt.value().clone()), + required: true, } } div { @@ -983,6 +1006,7 @@ fn EditServerModal( placeholder: "Nickname", value: "{username.read()}", oninput: move |evt| username.set(evt.value().clone()), + required: true, } } div { @@ -1010,7 +1034,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" }