From 45ebcf6f0e9f1f86601e83d83a55797e21628a85 Mon Sep 17 00:00:00 2001
From: JtotheThree <johnmullins@gmail.com>
Date: Fri, 7 Jan 2022 20:01:52 -0600
Subject: [PATCH 1/2] form prevent_default

---
 packages/html/src/elements.rs | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/html/src/elements.rs b/packages/html/src/elements.rs
index 1a2f36e57..4b53f91f0 100644
--- a/packages/html/src/elements.rs
+++ b/packages/html/src/elements.rs
@@ -1047,7 +1047,7 @@ impl input {
     /// - `text`
     /// - `time`
     /// - `url`
-    /// - `week`    
+    /// - `week`
     pub fn r#type<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
         cx.attr("type", val, None, false)
     }
@@ -1106,6 +1106,12 @@ impl a {
     }
 }
 
+impl form {
+    pub fn prevent_default<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
+        cx.attr("dioxus-prevent-default", val, None, false)
+    }
+}
+
 builder_constructors! {
     // SVG components
     /// Build a

From e69fbb4baa3de3902a746a0cb2b06338e33dcaa9 Mon Sep 17 00:00:00 2001
From: JtotheThree <johnmullins@gmail.com>
Date: Fri, 7 Jan 2022 20:20:52 -0600
Subject: [PATCH 2/2] login_form example

---
 examples/login_form.rs | 89 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 examples/login_form.rs

diff --git a/examples/login_form.rs b/examples/login_form.rs
new file mode 100644
index 000000000..fdd1843ce
--- /dev/null
+++ b/examples/login_form.rs
@@ -0,0 +1,89 @@
+//! This example demonstrates the following:
+//! Futures in a callback, Router, and Forms
+
+use dioxus::events::*;
+use dioxus::prelude::*;
+use dioxus::router::{Link, Router, Route, RouterService};
+
+fn main() {
+    dioxus::desktop::launch(APP);
+}
+
+static APP: Component = |cx| {
+    cx.render(rsx!{
+        Router {
+            Route { to: "/", home() }
+            Route { to: "/login", login() }
+        }
+    })
+};
+
+fn home(cx: Scope) -> Element {
+    cx.render(rsx! {
+        h1 { "Welcome Home" }
+        Link { to: "/login", "Login" }
+    })
+}
+
+
+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 |_| {
+        cx.push_future({
+            let (username, password) = (username.get().clone(), password.get().clone());
+            let service = service.clone();
+
+            async move {
+                let params = [
+                    ("username", username.to_string()),
+                    ("password", password.to_string())
+                ];
+
+                let resp = reqwest::Client::new()
+                    .post("http://localhost/login")
+                    .form(&params)
+                    .send()
+                    .await;
+
+                match resp {
+                    Ok(data) => {
+                        // 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!{
+        h1 { "Login" }
+        form {
+            onsubmit: onsubmit,
+            // Prevent the default behavior of <form> to post
+            prevent_default: "onsubmit",
+            input {
+                oninput: move |evt| username.set(evt.value.clone())
+            }
+            label {
+                "Username"
+            }
+            br {}
+            input {
+                oninput: move |evt| password.set(evt.value.clone()),
+                r#type: "password"
+            }
+            label {
+                "Password"
+            }
+            br {}
+            button {
+                "Login"
+            }
+        }
+    })
+}
\ No newline at end of file