Start capturing input

Cargo.lock

@@ -5484,6 +5484,7 @@ dependencies = [
  "serde 1.0.217",
  "serde-wasm-bindgen",
  "serde_json",
+ "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
  "yew",

visions/ui/Cargo.toml

@@ -9,6 +9,7 @@ gloo-net = "0.6.0"
 serde = { version = "1.0.217", features = ["derive"] }
 serde-wasm-bindgen = "0.6.5"
 serde_json = "1.0.138"
+wasm-bindgen = "0.2.100"
 wasm-bindgen-futures = "0.4.50"
 web-sys = "0.3.77"
 yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

visions/ui/src/main.rs

@@ -1,6 +1,7 @@
 use std::rc::Rc;
 
 use gloo_console::log;
+use wasm_bindgen::JsCast;
 use web_sys::HtmlInputElement;
 use yew::prelude::*;
 
@@ -43,9 +44,6 @@ struct LoginProps {
 
 #[function_component]
 fn Login(LoginProps { on_login }: &LoginProps) -> Html {
-    let username_node_ref = use_node_ref();
-    let password_node_ref = use_node_ref();
-
     let username = use_state(|| "".to_owned());
     let password = use_state(|| "".to_owned());
 
@@ -58,21 +56,25 @@ fn Login(LoginProps { on_login }: &LoginProps) -> Html {
 
     let on_username_changed = {
         let username = username.clone();
-        let username_node_ref = username_node_ref.clone();
-        Callback::from(move |_| {
-            let input = username_node_ref.cast::<HtmlInputElement>().unwrap();
-            log!("username changed: {}", input.value());
-            username.set(input.value());
+        Callback::from(move |event: Event| {
+            let input = event
+                .target()
+                .and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
+            if let Some(input) = input {
+                username.set(input.value());
+            }
         })
     };
 
     let on_password_changed = {
         let password = password.clone();
-        let password_node_ref = password_node_ref.clone();
-        Callback::from(move |_| {
-            let input = password_node_ref.cast::<HtmlInputElement>().unwrap();
-            log!("password changed: {}", input.value());
-            password.set(input.value());
+        Callback::from(move |event: Event| {
+            let input = event
+                .target()
+                .and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
+            if let Some(input) = input {
+                password.set(input.value());
+            }
         })
     };
 
@@ -80,8 +82,8 @@ fn Login(LoginProps { on_login }: &LoginProps) -> Html {
         <div class="login-form">
             <div class="card">
                 <h1>{"Welcome to Visions VTT"}</h1>
-                <input ref={username_node_ref} type="text" name="username" placeholder="username" onchange={on_username_changed} />
-                <input ref={password_node_ref} type="password" name="password" placeholder="password" onchange={on_password_changed} />
+                <input type="text" name="username" placeholder="username" onchange={on_username_changed} />
+                <input type="password" name="password" placeholder="password" onchange={on_password_changed} />
                 <button onclick={on_click}>{"Login"}</button>
             </div>