gui: new login screen
This commit is contained in:
+494
-151
@@ -3,12 +3,10 @@
|
||||
use dioxus::prelude::*;
|
||||
use mumble_web2_client::{
|
||||
network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
|
||||
ConfigSystemInterface as _, ConnectionState, Platform, PlatformInterface as _, ServerState,
|
||||
ConfigSystemInterface as _, ConnectTarget, ConnectionState, Platform, PlatformInterface as _,
|
||||
SharedState, State, UserId, UserState, VERSION,
|
||||
};
|
||||
use mumble_web2_common::{ProxyOverrides, ServerStatus};
|
||||
use std::collections::{HashMap, HashSet};
|
||||
use std::{fmt, sync::Arc};
|
||||
use mumble_web2_common::{ProxyOverrides, ServerEntry};
|
||||
use Command::*;
|
||||
use ConnectionState::*;
|
||||
|
||||
@@ -498,183 +496,528 @@ pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
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 mut address_input = use_signal(|| user_config.config_get::<String>("server_url"));
|
||||
let address = use_memo(move || {
|
||||
if let Some(addr) = address_input() {
|
||||
addr.clone()
|
||||
} else {
|
||||
overrides()
|
||||
.and_then(|c| c.proxy_url.clone())
|
||||
.unwrap_or_default()
|
||||
}
|
||||
});
|
||||
let address = format!("{}:{}", server.address, server.port);
|
||||
let connect_entry = server.clone();
|
||||
|
||||
let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
|
||||
use_resource(move || {
|
||||
let addr = address();
|
||||
async move {
|
||||
let client = reqwest::Client::new();
|
||||
loop {
|
||||
*last_status.write_unchecked() =
|
||||
Some(Platform::get_status(&client, &addr).await);
|
||||
Platform::sleep(std::time::Duration::from_secs_f32(1.0)).await;
|
||||
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 proxy_url = overrides
|
||||
.read()
|
||||
.as_ref()
|
||||
.and_then(|c| c.proxy_url.clone())
|
||||
.unwrap_or_default();
|
||||
|
||||
let mut username = use_signal(|| {
|
||||
user_config
|
||||
.config_get::<String>("username")
|
||||
.unwrap_or(String::new())
|
||||
.unwrap_or_default()
|
||||
});
|
||||
|
||||
let do_connect = move |_| {
|
||||
let _ = user_config.config_set::<String>("username", &username.read());
|
||||
if overrides.read().as_ref().is_some_and(|cfg| cfg.any_server) {
|
||||
user_config.config_set::<String>("server_url", &address.read());
|
||||
}
|
||||
net.send(Connect {
|
||||
address: address.read().clone(),
|
||||
username: username.read().clone(),
|
||||
config: overrides.read().clone().unwrap_or_default(),
|
||||
})
|
||||
};
|
||||
let state = use_context::<SharedState>();
|
||||
let status = &state.status;
|
||||
let bottom = match &*status.read() {
|
||||
Disconnected => rsx! {
|
||||
button {
|
||||
class: "login_bttn",
|
||||
onclick: do_connect.clone(),
|
||||
"Connect"
|
||||
}
|
||||
},
|
||||
Connecting => rsx! {
|
||||
div {
|
||||
class: "login_bttn",
|
||||
"Connecting..."
|
||||
}
|
||||
},
|
||||
Failed(msg) => rsx!(
|
||||
button {
|
||||
class: "login_bttn",
|
||||
onclick: do_connect.clone(),
|
||||
"Reconnect"
|
||||
}
|
||||
div {
|
||||
class: "login_error",
|
||||
"Failed to connect:"
|
||||
pre {
|
||||
"{msg}"
|
||||
}
|
||||
}
|
||||
),
|
||||
Connected => unreachable!(),
|
||||
};
|
||||
let is_connecting = matches!(&*state.status.read(), Connecting);
|
||||
|
||||
|
||||
rsx!(
|
||||
div {
|
||||
class: "login",
|
||||
class: "server-list-page",
|
||||
h1 {
|
||||
"Mumble Web"
|
||||
match VERSION {
|
||||
Some(v) => rsx!(" " span { class: "login_version", "({v})" }),
|
||||
Some(v) => rsx!(div { class: "login_version", "({v})" }),
|
||||
None => rsx!(),
|
||||
}
|
||||
}
|
||||
if overrides.read().as_ref().is_some_and(|cfg| cfg.any_server) {
|
||||
div {
|
||||
class: "server-list",
|
||||
div {
|
||||
label {
|
||||
for: "address-entry",
|
||||
"Server Address:"
|
||||
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" }
|
||||
span { class: "server-card__address", "{proxy_url}" }
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "override-username-row",
|
||||
input {
|
||||
id: "address-entry",
|
||||
placeholder: "address",
|
||||
value: "{address.read()}",
|
||||
autofocus: "true",
|
||||
oninput: move |evt| address_input.set(Some(evt.value().clone())),
|
||||
class: "override-username-input",
|
||||
r#type: "text",
|
||||
placeholder: "Username",
|
||||
value: "{username.read()}",
|
||||
oninput: move |evt| username.set(evt.value().clone()),
|
||||
}
|
||||
button {
|
||||
class: "server-card__action server-card__action--connect",
|
||||
disabled: is_connecting || username.read().is_empty(),
|
||||
onclick: {
|
||||
let proxy_url = proxy_url.clone();
|
||||
let user_config = user_config.clone();
|
||||
move |_| {
|
||||
user_config.config_set("username", &*username.read());
|
||||
net.send(Connect {
|
||||
target: ConnectTarget::Proxy(proxy_url.clone()),
|
||||
username: username.read().clone(),
|
||||
config: overrides.read().clone().unwrap_or_default(),
|
||||
});
|
||||
}
|
||||
},
|
||||
img {
|
||||
src: asset!("assets/arrow-right-svgrepo-com.svg"),
|
||||
alt: "Connect",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
label {
|
||||
for: "username-entry",
|
||||
"Username:"
|
||||
//style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
|
||||
}
|
||||
input {
|
||||
id: "username-entry",
|
||||
placeholder: "username",
|
||||
value: "{username.read()}",
|
||||
autofocus: "true",
|
||||
oninput: move |evt| username.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
match &*last_status.read() {
|
||||
None => rsx!(div {
|
||||
class: "login_status",
|
||||
span {"···"}
|
||||
}),
|
||||
Some(Ok(ServerStatus { success: false, .. })) => rsx!(div {
|
||||
class: "login_status is_error",
|
||||
span {
|
||||
"Could not reach server"
|
||||
match &*state.status.read() {
|
||||
Failed(msg) => rsx!(
|
||||
div {
|
||||
class: "login_error",
|
||||
"Failed to connect:"
|
||||
pre { "{msg}" }
|
||||
}
|
||||
}),
|
||||
Some(Ok(status)) => rsx!(div {
|
||||
class: "login_status",
|
||||
if let (Some(users), Some(max_users)) = (status.users, status.max_users) {
|
||||
span {"{users}/{max_users} Online"}
|
||||
} else {
|
||||
span {"Unknown Online"}
|
||||
}
|
||||
span {"-"}
|
||||
if let Some((maj, min, pat)) = status.version {
|
||||
span {"Version: {maj}.{min}.{pat}"}
|
||||
} else {
|
||||
span {"Unknown Version"}
|
||||
}
|
||||
}),
|
||||
Some(Err(_)) => rsx!(div {
|
||||
class: "login_status is_error",
|
||||
span {
|
||||
"Could not reach server"
|
||||
}
|
||||
}),
|
||||
),
|
||||
_ => rsx!(),
|
||||
}
|
||||
div {
|
||||
{bottom}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
)
|
||||
// rsx!(
|
||||
// div {
|
||||
// class: "{login_box}",
|
||||
// h1 {
|
||||
// "Mumble Web"
|
||||
// }
|
||||
// input {
|
||||
// placeholder: "username",
|
||||
// value: "{username.read()}",
|
||||
// autofocus: "true",
|
||||
// oninput: move |evt| username.set(evt.value().clone()),
|
||||
// }
|
||||
// input {
|
||||
// placeholder: "server address",
|
||||
// value: "{address.read()}",
|
||||
// autofocus: "true",
|
||||
// oninput: move |evt| address_input.set(Some(evt.value().clone())),
|
||||
// }
|
||||
// {bottom}
|
||||
// }
|
||||
// )
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
let user_config = use_context::<ConfigSystem>();
|
||||
let net: Coroutine<Command> = use_coroutine_handle();
|
||||
let state = use_context::<SharedState>();
|
||||
|
||||
let mut servers = use_signal(|| {
|
||||
user_config
|
||||
.config_get::<Vec<ServerEntry>>("servers")
|
||||
.unwrap_or_default()
|
||||
});
|
||||
let mut show_add_modal = use_signal(|| false);
|
||||
let mut editing_index = use_signal(|| None::<usize>);
|
||||
|
||||
let is_override_mode = overrides
|
||||
.read()
|
||||
.as_ref()
|
||||
.is_some_and(|c| !c.any_server);
|
||||
|
||||
// --- Overrides mode: single preset server, username-only input ---
|
||||
if is_override_mode {
|
||||
return rsx!(OverrideLoginView { overrides });
|
||||
}
|
||||
|
||||
// --- Normal mode: editable server list ---
|
||||
rsx!(
|
||||
div {
|
||||
class: "server-list-page",
|
||||
h1 {
|
||||
"Mumble Web"
|
||||
match VERSION {
|
||||
Some(v) => rsx!(div { class: "login_version", "({v})" }),
|
||||
None => rsx!(),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "server-list",
|
||||
for (idx, server) in servers.read().iter().enumerate() {
|
||||
ServerCard {
|
||||
key: "{idx}",
|
||||
idx,
|
||||
server: server.clone(),
|
||||
editing_index,
|
||||
overrides,
|
||||
}
|
||||
}
|
||||
}
|
||||
match &*state.status.read() {
|
||||
Failed(msg) => rsx!(
|
||||
div {
|
||||
class: "server-list",
|
||||
div {
|
||||
class: "login_error",
|
||||
"Failed to connect:"
|
||||
pre { "{msg}" }
|
||||
}
|
||||
}
|
||||
),
|
||||
_ => rsx!(),
|
||||
}
|
||||
button {
|
||||
class: "add-server-btn",
|
||||
onclick: move |_| show_add_modal.set(true),
|
||||
"+ Add Server"
|
||||
}
|
||||
|
||||
if *show_add_modal.read() {
|
||||
{
|
||||
let user_config = user_config.clone();
|
||||
rsx!(AddServerModal {
|
||||
on_save: move |entry: ServerEntry| {
|
||||
servers.write().push(entry);
|
||||
user_config.config_set("servers", &*servers.read());
|
||||
show_add_modal.set(false);
|
||||
},
|
||||
on_cancel: move |_| show_add_modal.set(false),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if let Some(idx) = *editing_index.read() {
|
||||
if let Some(entry) = servers.read().get(idx).cloned() {
|
||||
{
|
||||
let user_config_save = user_config.clone();
|
||||
let user_config_del = user_config.clone();
|
||||
rsx!(EditServerModal {
|
||||
entry,
|
||||
on_save: move |updated: ServerEntry| {
|
||||
servers.write()[idx] = updated;
|
||||
user_config_save.config_set("servers", &*servers.read());
|
||||
editing_index.set(None);
|
||||
},
|
||||
on_delete: move |_| {
|
||||
servers.write().remove(idx);
|
||||
user_config_del.config_set("servers", &*servers.read());
|
||||
editing_index.set(None);
|
||||
},
|
||||
on_cancel: move |_| editing_index.set(None),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn ServerPingInfo(address: String, port: u16) -> Element {
|
||||
let ping_result = use_resource(move || {
|
||||
let addr = format!("{}:{}", address.clone(), port);
|
||||
async move {
|
||||
let client = reqwest::Client::new();
|
||||
Platform::get_status(&client, &addr).await
|
||||
}
|
||||
});
|
||||
|
||||
let read = ping_result.read();
|
||||
match &*read {
|
||||
Some(Ok(status)) => {
|
||||
let users_text = match (status.users, status.max_users) {
|
||||
(Some(u), Some(m)) => format!("{u}/{m}"),
|
||||
(Some(u), None) => format!("{u} online"),
|
||||
_ => String::new(),
|
||||
};
|
||||
rsx!(
|
||||
div {
|
||||
class: "server-card__ping",
|
||||
if !users_text.is_empty() {
|
||||
span { "{users_text}" }
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
Some(Err(_)) => rsx!(
|
||||
div {
|
||||
class: "server-card__ping",
|
||||
span { "offline" }
|
||||
}
|
||||
),
|
||||
None => rsx!(
|
||||
div {
|
||||
class: "server-card__ping",
|
||||
span { "..." }
|
||||
}
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()>) -> Element {
|
||||
let user_config = use_context::<ConfigSystem>();
|
||||
let mut name = use_signal(|| String::new());
|
||||
let mut address = use_signal(|| String::new());
|
||||
let mut port = use_signal(|| "64738".to_string());
|
||||
let mut username = use_signal(|| {
|
||||
user_config
|
||||
.config_get::<String>("username")
|
||||
.unwrap_or_default()
|
||||
});
|
||||
let mut password = use_signal(|| String::new());
|
||||
|
||||
let do_save = move |_| {
|
||||
let port_num: u16 = port.read().parse().unwrap_or(64738);
|
||||
on_save.call(ServerEntry {
|
||||
name: name.read().clone(),
|
||||
address: address.read().clone(),
|
||||
port: port_num,
|
||||
username: username.read().clone(),
|
||||
password: if password.read().is_empty() {
|
||||
None
|
||||
} else {
|
||||
Some(password.read().clone())
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "modal-backdrop",
|
||||
onclick: move |_| on_cancel.call(()),
|
||||
}
|
||||
div {
|
||||
class: "modal-container",
|
||||
onclick: move |evt| evt.stop_propagation(),
|
||||
div {
|
||||
class: "modal",
|
||||
h2 { "Add Server" }
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Name" }
|
||||
input {
|
||||
r#type: "text",
|
||||
placeholder: "My Mumble Server",
|
||||
value: "{name.read()}",
|
||||
oninput: move |evt| name.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Address" }
|
||||
input {
|
||||
r#type: "text",
|
||||
placeholder: "mumble.example.com",
|
||||
value: "{address.read()}",
|
||||
oninput: move |evt| address.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Port" }
|
||||
input {
|
||||
r#type: "number",
|
||||
placeholder: "64738",
|
||||
value: "{port.read()}",
|
||||
oninput: move |evt| port.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Username" }
|
||||
input {
|
||||
r#type: "text",
|
||||
placeholder: "Nickname",
|
||||
value: "{username.read()}",
|
||||
oninput: move |evt| username.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Password (optional)" }
|
||||
input {
|
||||
r#type: "password",
|
||||
placeholder: "Password",
|
||||
value: "{password.read()}",
|
||||
oninput: move |evt| password.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-actions",
|
||||
button {
|
||||
class: "modal-btn",
|
||||
onclick: move |_| on_cancel.call(()),
|
||||
"Cancel"
|
||||
}
|
||||
button {
|
||||
class: "modal-btn modal-btn--primary",
|
||||
disabled: address.read().is_empty() || username.read().is_empty(),
|
||||
onclick: do_save,
|
||||
"Save"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn EditServerModal(
|
||||
entry: ServerEntry,
|
||||
on_save: EventHandler<ServerEntry>,
|
||||
on_delete: EventHandler<()>,
|
||||
on_cancel: EventHandler<()>,
|
||||
) -> Element {
|
||||
let mut name = use_signal(|| entry.name.clone());
|
||||
let mut address = use_signal(|| entry.address.clone());
|
||||
let mut port = use_signal(|| entry.port.to_string());
|
||||
let mut username = use_signal(|| entry.username.clone());
|
||||
let mut password = use_signal(|| entry.password.clone().unwrap_or_default());
|
||||
|
||||
let do_save = move |_| {
|
||||
let port_num: u16 = port.read().parse().unwrap_or(64738);
|
||||
on_save.call(ServerEntry {
|
||||
name: name.read().clone(),
|
||||
address: address.read().clone(),
|
||||
port: port_num,
|
||||
username: username.read().clone(),
|
||||
password: if password.read().is_empty() {
|
||||
None
|
||||
} else {
|
||||
Some(password.read().clone())
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "modal-backdrop",
|
||||
onclick: move |_| on_cancel.call(()),
|
||||
}
|
||||
div {
|
||||
class: "modal-container",
|
||||
onclick: move |evt| evt.stop_propagation(),
|
||||
div {
|
||||
class: "modal",
|
||||
h2 { "Edit Server" }
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Name" }
|
||||
input {
|
||||
r#type: "text",
|
||||
placeholder: "My Mumble Server",
|
||||
value: "{name.read()}",
|
||||
oninput: move |evt| name.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Address" }
|
||||
input {
|
||||
r#type: "text",
|
||||
placeholder: "mumble.example.com",
|
||||
value: "{address.read()}",
|
||||
oninput: move |evt| address.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Port" }
|
||||
input {
|
||||
r#type: "number",
|
||||
placeholder: "64738",
|
||||
value: "{port.read()}",
|
||||
oninput: move |evt| port.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Username" }
|
||||
input {
|
||||
r#type: "text",
|
||||
placeholder: "Nickname",
|
||||
value: "{username.read()}",
|
||||
oninput: move |evt| username.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-field",
|
||||
label { "Password (optional)" }
|
||||
input {
|
||||
r#type: "password",
|
||||
placeholder: "Password",
|
||||
value: "{password.read()}",
|
||||
oninput: move |evt| password.set(evt.value().clone()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "modal-actions",
|
||||
button {
|
||||
class: "modal-btn modal-btn--danger",
|
||||
onclick: move |_| on_delete.call(()),
|
||||
"Delete"
|
||||
}
|
||||
span { class: "modal-actions__spacer" }
|
||||
button {
|
||||
class: "modal-btn",
|
||||
onclick: move |_| on_cancel.call(()),
|
||||
"Cancel"
|
||||
}
|
||||
button {
|
||||
class: "modal-btn modal-btn--primary",
|
||||
disabled: address.read().is_empty() || username.read().is_empty(),
|
||||
onclick: do_save,
|
||||
"Save"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
||||
Reference in New Issue
Block a user