mumble/mumble-web2
6
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

gui: stricter validation in add and edit modals

Browse Source
This commit is contained in:
restitux
2026-05-05 05:47:55 +00:00
committed by Sam Sartor
parent 5156338eb3
commit 614c7f7d56
2 changed files with 92 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/assets/main.scss
+17
View File
@@ -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
+75 -11
View File
@@ -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"
}