From e8a8a12de30e7d749f96780723647c8cb7e28c48 Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Wed, 19 Feb 2025 22:39:42 -0500
Subject: [PATCH] Start capturing input

---
 Cargo.lock             |  1 +
 visions/ui/Cargo.toml  |  1 +
 visions/ui/src/main.rs | 32 +++++++++++++++++---------------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index a44fd05..dc4cd0a 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -5484,6 +5484,7 @@ dependencies = [
  "serde 1.0.217",
  "serde-wasm-bindgen",
  "serde_json",
+ "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
  "yew",
diff --git a/visions/ui/Cargo.toml b/visions/ui/Cargo.toml
index e028c2e..21947c7 100644
--- a/visions/ui/Cargo.toml
+++ b/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"] }
diff --git a/visions/ui/src/main.rs b/visions/ui/src/main.rs
index f7058c4..e55da64 100644
--- a/visions/ui/src/main.rs
+++ b/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>