fix: login form

examples/login_form.rs

@@ -3,14 +3,14 @@
 
 use dioxus::events::*;
 use dioxus::prelude::*;
-use dioxus::router::{Link, Router, Route, RouterService};
+use dioxus::router::{Link, Route, Router, RouterService};
 
 fn main() {
     dioxus::desktop::launch(APP);
 }
 
 static APP: Component = |cx| {
-    cx.render(rsx!{
+    cx.render(rsx! {
         Router {
             Route { to: "/", home() }
             Route { to: "/login", login() }
@@ -25,65 +25,45 @@ fn home(cx: Scope) -> Element {
     })
 }
 
-
 fn login(cx: Scope) -> Element {
-    let username = use_state(&cx, String::new);
-    let password = use_state(&cx, String::new);
-
     let service = cx.consume_context::<RouterService>()?;
 
-    let onsubmit = move |_| {
+    let onsubmit = move |evt: FormEvent| {
-        cx.push_future({
+        to_owned![service];
-            let (username, password) = (username.get().clone(), password.get().clone());
+        let username = evt.values["username"].clone();
-            let service = service.clone();
+        let password = evt.values["password"].clone();
 
-            async move {
+        cx.spawn(async move {
-                let params = [
+            let resp = reqwest::Client::new()
-                    ("username", username.to_string()),
+                .post("http://localhost/login")
-                    ("password", password.to_string())
+                .form(&[("username", username), ("password", password)])
-                ];
+                .send()
+                .await;
 
-                let resp = reqwest::Client::new()
+            match resp {
-                    .post("http://localhost/login")
+                // Parse data from here, such as storing a response token
-                    .form(&params)
+                Ok(data) => service.push_route("/"),
-                    .send()
-                    .await;
 
-                match resp {
+                //Handle any errors from the fetch here
-                    Ok(data) => {
+                Err(err) => {}
-                        // Parse data from here, such as storing a response token
-                        service.push_route("/");
-                    }
-                    Err(err) => {} //Handle any errors from the fetch here
-                }
             }
         });
     };
 
-    cx.render(rsx!{
+    cx.render(rsx! {
         h1 { "Login" }
         form {
             onsubmit: onsubmit,
-            // Prevent the default behavior of <form> to post
+            prevent_default: "onsubmit", // Prevent the default behavior of <form> to post
-            prevent_default: "onsubmit",
+            input { r#type: "text" }
-            input {
+            label { "Username" }
-                oninput: move |evt| username.set(evt.value.clone())
-            }
-            label {
-                "Username"
-            }
             br {}
-            input {
+            input { r#type: "password" }
-                oninput: move |evt| password.set(evt.value.clone()),
-                r#type: "password"
-            }
             label {
                 "Password"
             }
             br {}
-            button {
+            button { "Login" }
-                "Login"
-            }
         }
     })
-}
+}