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 d106df83f8
commit 2c4078847a
2 changed files with 71 additions and 6 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
+54 -6
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,
@@ -845,6 +851,11 @@ fn AddServerModal(on_save: EventHandler<ServerEntry>, 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<ServerEntry>, 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<ServerEntry>, 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<ServerEntry>, 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<ServerEntry>, 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"
}