Varun V
487fa25dc8
The login form example was trying to directly use FormValue in reqwest's form method, which doesn't implement Serialize. This change extracts the actual string values using as_value() before sending them to the server.
50 lines
1.6 KiB
Rust
50 lines
1.6 KiB
Rust
//! Implementing a login form
|
|
//!
|
|
//! This example demonstrates how to implement a login form using Dioxus desktop. Since forms typically navigate the
|
|
//! page on submit, we need to intercept the onsubmit event and send a request to a server. On the web, we could
|
|
//! just leave the `submit action` as is, but on desktop, we need to handle the form submission ourselves.
|
|
//!
|
|
//! Todo: actually spin up a server and run the login flow. Login is way more complex than a form override :)
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
let onsubmit = move |evt: FormEvent| async move {
|
|
let resp = reqwest::Client::new()
|
|
.post("http://localhost:8080/login")
|
|
.form(&[
|
|
("username", evt.values()["username"].as_value()),
|
|
("password", evt.values()["password"].as_value()),
|
|
])
|
|
.send()
|
|
.await;
|
|
|
|
match resp {
|
|
// Parse data from here, such as storing a response token
|
|
Ok(_data) => println!("Login successful!"),
|
|
|
|
//Handle any errors from the fetch here
|
|
Err(_err) => {
|
|
println!("Login failed - you need a login server running on localhost:8080.")
|
|
}
|
|
}
|
|
};
|
|
|
|
rsx! {
|
|
h1 { "Login" }
|
|
form { onsubmit,
|
|
input { r#type: "text", id: "username", name: "username" }
|
|
label { "Username" }
|
|
br {}
|
|
input { r#type: "password", id: "password", name: "password" }
|
|
label { "Password" }
|
|
br {}
|
|
button { "Login" }
|
|
}
|
|
}
|
|
}
|