gui: stricter validation in add and edit modals

Reviewed-on: #34
Reviewed-by: restitux <restitux@ohea.xyz>
Co-authored-by: Sam Sartor <me@samsartor.com>
Co-committed-by: Sam Sartor <me@samsartor.com>

client/src/lib.rs

@@ -9,3 +9,5 @@ pub use imp::*;
 pub use mainloop::*;
 pub use mime_guess;
 pub use reqwest;
+
+pub const VERSION: Option<&str> = option_env!("MUMBLE_WEB2_VERSION");

gui/src/main.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 use mumble_web2_client::{
     network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
     ConfigSystemInterface as _, ConnectTarget, ConnectionState, Platform, PlatformInterface as _,
-    SharedState, State, UserId, UserState,
+    SharedState, State, UserId, UserState, VERSION,
 };
 use mumble_web2_common::{ProxyOverrides, ServerEntry};
 use Command::*;
@@ -501,14 +501,76 @@ pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
     )
 }
 
+#[component]
+fn ServerCard(
+    idx: usize,
+    server: ServerEntry,
+    editing_index: Signal<Option<usize>>,
+    overrides: Resource<ProxyOverrides>,
+) -> Element {
+    let user_config = use_context::<ConfigSystem>();
+    let net: Coroutine<Command> = use_coroutine_handle();
+
+    let address = format!("{}:{}", server.address, server.port);
+    let connect_entry = server.clone();
+
+    rsx!(
+        div {
+            class: "server-card",
+            img {
+                class: "server-card__icon",
+                src: asset!("assets/earth-14-svgrepo-com.svg"),
+                alt: "Server icon",
+            }
+            div {
+                class: "server-card__info",
+                span { class: "server-card__name", "{server.name}" }
+                span { class: "server-card__address", "{address}" }
+            }
+            ServerPingInfo {
+                address: server.address.clone(),
+                port: server.port,
+            }
+            button {
+                class: "server-card__action",
+                onclick: move |_| editing_index.set(Some(idx)),
+                img {
+                    src: asset!("assets/edit-3-svgrepo-com.svg"),
+                    alt: "Edit",
+                }
+            }
+            button {
+                class: "server-card__action server-card__action--connect",
+                onclick: {
+                    let entry = connect_entry.clone();
+                    let user_config = user_config.clone();
+                    move |_| {
+                        user_config.config_set("username", &entry.username);
+                        net.send(Connect {
+                            target: ConnectTarget::Direct {
+                                host: entry.address.clone(),
+                                port: entry.port,
+                            },
+                            username: entry.username.clone(),
+                            config: overrides.read().clone().unwrap_or_default(),
+                        });
+                    }
+                },
+                img {
+                    src: asset!("assets/arrow-right-svgrepo-com.svg"),
+                    alt: "Connect",
+                }
+            }
+        }
+    )
+}
+
 #[component]
 fn OverrideLoginView(overrides: Resource<ProxyOverrides>) -> Element {
     let user_config = use_context::<ConfigSystem>();
     let net: Coroutine<Command> = use_coroutine_handle();
     let state = use_context::<SharedState>();
 
-    let version = option_env!("MUMBLE_WEB2_VERSION");
-
     let proxy_url = overrides
         .read()
         .as_ref()
@@ -523,12 +585,13 @@ fn OverrideLoginView(overrides: Resource<ProxyOverrides>) -> Element {
 
     let is_connecting = matches!(&*state.status.read(), Connecting);
 
+
     rsx!(
         div {
             class: "server-list-page",
             h1 {
                 "Mumble Web"
-                match version {
+                match VERSION {
                     Some(v) => rsx!(div { class: "login_version", "({v})" }),
                     None => rsx!(),
                 }
@@ -607,9 +670,10 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
     let mut show_add_modal = use_signal(|| false);
     let mut editing_index = use_signal(|| None::<usize>);
 
-    let version = option_env!("MUMBLE_WEB2_VERSION");
+    let is_override_mode = overrides
-
+        .read()
-    let is_override_mode = overrides.read().as_ref().is_some_and(|c| !c.any_server);
+        .as_ref()
+        .is_some_and(|c| !c.any_server);
 
     // --- Overrides mode: single preset server, username-only input ---
     if is_override_mode {
@@ -622,7 +686,7 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
             class: "server-list-page",
             h1 {
                 "Mumble Web"
-                match version {
+                match VERSION {
                     Some(v) => rsx!(div { class: "login_version", "({v})" }),
                     None => rsx!(),
                 }
@@ -630,59 +694,12 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
             div {
                 class: "server-list",
                 for (idx, server) in servers.read().iter().enumerate() {
-                    {
+                    ServerCard {
-                        let address = format!("{}:{}", server.address, server.port);
-                        let connect_entry = server.clone();
-                        rsx!(
-                            div {
                         key: "{idx}",
-                                class: "server-card",
+                        idx,
-                                img {
+                        server: server.clone(),
-                                    class: "server-card__icon",
+                        editing_index,
-                                    src: asset!("assets/earth-14-svgrepo-com.svg"),
+                        overrides,
-                                    alt: "Server icon",
-                                }
-                                div {
-                                    class: "server-card__info",
-                                    span { class: "server-card__name", "{server.name}" }
-                                    span { class: "server-card__address", "{address}" }
-                                }
-                                ServerPingInfo {
-                                    address: server.address.clone(),
-                                    port: server.port,
-                                }
-                                button {
-                                    class: "server-card__action",
-                                    onclick: move |_| editing_index.set(Some(idx)),
-                                    img {
-                                        src: asset!("assets/edit-3-svgrepo-com.svg"),
-                                        alt: "Edit",
-                                    }
-                                }
-                                button {
-                                    class: "server-card__action server-card__action--connect",
-                                    onclick: {
-                                        let entry = connect_entry.clone();
-                                        let user_config = user_config.clone();
-                                        move |_| {
-                                            user_config.config_set("username", &entry.username);
-                                            net.send(Connect {
-                                                target: ConnectTarget::Direct {
-                                                    host: entry.address.clone(),
-                                                    port: entry.port,
-                                                },
-                                                username: entry.username.clone(),
-                                                config: overrides.read().clone().unwrap_or_default(),
-                                            });
-                                        }
-                                    },
-                                    img {
-                                        src: asset!("assets/arrow-right-svgrepo-com.svg"),
-                                        alt: "Connect",
-                                    }
-                                }
-                            }
-                        )
                     }
                 }
             }