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..0571fae 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,11 @@ 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 { + class: "modal-field__error", + "Enter a name for this server." } } div { @@ -853,8 +864,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 +882,11 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() 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 { @@ -875,6 +897,11 @@ fn AddServerModal(on_save: EventHandler, on_cancel: EventHandler<() placeholder: "Nickname", value: "{username.read()}", oninput: move |evt| username.set(evt.value().clone()), + required: true, + } + div { + class: "modal-field__error", + "Enter a username." } } div { @@ -896,7 +923,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" } @@ -946,43 +973,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 { @@ -1010,7 +1058,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" }