feat: implemented form data fetching and the sign_up ui

Cargo.lock

@@ -96,6 +96,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "equivalent"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -115,6 +121,9 @@ dependencies = [
 name = "frontend"
 version = "0.1.0"
 dependencies = [
+ "gloo 0.10.0",
+ "wasm-bindgen",
+ "web-sys",
  "yew",
  "yew-router",
 ]
@@ -208,17 +217,36 @@ version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
 dependencies = [
- "gloo-console",
+ "gloo-console 0.2.3",
- "gloo-dialogs",
+ "gloo-dialogs 0.1.1",
- "gloo-events",
+ "gloo-events 0.1.2",
- "gloo-file",
+ "gloo-file 0.2.3",
- "gloo-history",
+ "gloo-history 0.1.5",
- "gloo-net",
+ "gloo-net 0.3.1",
- "gloo-render",
+ "gloo-render 0.1.1",
- "gloo-storage",
+ "gloo-storage 0.2.2",
- "gloo-timers",
+ "gloo-timers 0.2.6",
- "gloo-utils",
+ "gloo-utils 0.1.7",
- "gloo-worker",
+ "gloo-worker 0.2.1",
+]
+
+[[package]]
+name = "gloo"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd35526c28cc55c1db77aed6296de58677dbab863b118483a27845631d870249"
+dependencies = [
+ "gloo-console 0.3.0",
+ "gloo-dialogs 0.2.0",
+ "gloo-events 0.2.0",
+ "gloo-file 0.3.0",
+ "gloo-history 0.2.0",
+ "gloo-net 0.4.0",
+ "gloo-render 0.2.0",
+ "gloo-storage 0.3.0",
+ "gloo-timers 0.3.0",
+ "gloo-utils 0.2.0",
+ "gloo-worker 0.4.0",
 ]
 
 [[package]]
@@ -227,7 +255,20 @@ version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
 dependencies = [
- "gloo-utils",
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
+dependencies = [
+ "gloo-utils 0.2.0",
  "js-sys",
  "serde",
  "wasm-bindgen",
@@ -244,6 +285,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-dialogs"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf4748e10122b01435750ff530095b1217cf6546173459448b83913ebe7815df"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-events"
 version = "0.1.2"
@@ -254,6 +305,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-events"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27c26fb45f7c385ba980f5fa87ac677e363949e065a083722697ef1b2cc91e41"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-file"
 version = "0.2.3"
@@ -261,7 +322,19 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
 dependencies = [
  "futures-channel",
- "gloo-events",
+ "gloo-events 0.1.2",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
+dependencies = [
+ "gloo-events 0.2.0",
  "js-sys",
  "wasm-bindgen",
  "web-sys",
@@ -273,8 +346,24 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
 dependencies = [
- "gloo-events",
+ "gloo-events 0.1.2",
- "gloo-utils",
+ "gloo-utils 0.1.7",
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91be9f3dd048f35a59c8de3d716ef6d568360078c73ed35a7700776ed53153c8"
+dependencies = [
+ "gloo-events 0.2.0",
+ "gloo-utils 0.2.0",
  "serde",
  "serde-wasm-bindgen",
  "serde_urlencoded",
@@ -292,7 +381,28 @@ dependencies = [
  "futures-channel",
  "futures-core",
  "futures-sink",
- "gloo-utils",
+ "gloo-utils 0.1.7",
+ "http",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ac9e8288ae2c632fa9f8657ac70bfe38a1530f345282d7ba66a1f70b72b7dc4"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
  "http",
  "js-sys",
  "pin-project",
@@ -314,13 +424,38 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-render"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56008b6744713a8e8d98ac3dcb7d06543d5662358c9c805b4ce2167ad4649833"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-storage"
 version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5d6ab60bf5dbfd6f0ed1f7843da31b41010515c745735c970e821945ca91e480"
 dependencies = [
- "gloo-utils",
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbc8031e8c92758af912f9bc08fbbadd3c6f3cfcbf6b64cdf3d6a81f0139277a"
+dependencies = [
+ "gloo-utils 0.2.0",
  "js-sys",
  "serde",
  "serde_json",
@@ -341,6 +476,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.1.7"
@@ -354,6 +499,19 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-utils"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b5555354113b18c547c1d3a98fbf7fb32a9ff4f6fa112ce823a21641a0ba3aa"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-worker"
 version = "0.2.1"
@@ -362,8 +520,8 @@ checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
 dependencies = [
  "anymap2",
  "bincode",
- "gloo-console",
+ "gloo-console 0.2.3",
- "gloo-utils",
+ "gloo-utils 0.1.7",
  "js-sys",
  "serde",
  "wasm-bindgen",
@@ -371,12 +529,49 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-worker"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76495d3dd87de51da268fa3a593da118ab43eb7f8809e17eb38d3319b424e400"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker-macros"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "956caa58d4857bc9941749d55e4bd3000032d8212762586fa5705632967140e7"
+dependencies = [
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.31",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.12.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
 
+[[package]]
+name = "hashbrown"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c6201b9ff9fd90a5a3bac2e56a830d0caa509576f0e503818ee82c181b3437a"
+
 [[package]]
 name = "hermit-abi"
 version = "0.3.2"
@@ -400,7 +595,7 @@ version = "0.3.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7c6ecbd987bb94f1f3c76c6787879756cf4b6f73bfff48d79308e8c56b46f65f"
 dependencies = [
- "indexmap",
+ "indexmap 1.9.3",
 ]
 
 [[package]]
@@ -410,7 +605,17 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
 dependencies = [
  "autocfg",
- "hashbrown",
+ "hashbrown 0.12.3",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ad227c3af19d4914570ad36d30409928b75967c298feb9ea1969db3a610bb14e"
+dependencies = [
+ "equivalent",
+ "hashbrown 0.14.0",
 ]
 
 [[package]]
@@ -539,6 +744,16 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "proc-macro-crate"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+dependencies = [
+ "once_cell",
+ "toml_edit",
+]
+
 [[package]]
 name = "proc-macro-error"
 version = "1.0.4"
@@ -579,7 +794,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "03b55e106e5791fa5a13abd13c85d6127312e8e09098059ca2bc9b03ca4cf488"
 dependencies = [
  "futures",
- "gloo",
+ "gloo 0.8.1",
  "num_cpus",
  "once_cell",
  "pin-project",
@@ -748,6 +963,23 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "toml_datetime"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7cda73e2f1397b1262d6dfdcef8aafae14d1de7748d66822d3bfeeb6d03e5e4b"
+
+[[package]]
+name = "toml_edit"
+version = "0.19.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
+dependencies = [
+ "indexmap 2.0.1",
+ "toml_datetime",
+ "winnow",
+]
+
 [[package]]
 name = "tracing"
 version = "0.1.37"
@@ -868,6 +1100,15 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "winnow"
+version = "0.5.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7c2e3184b9c4e92ad5167ca73039d0c42476302ab603e2fec4487511f38ccefc"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "yew"
 version = "0.20.0"
@@ -876,9 +1117,9 @@ checksum = "5dbecfe44343b70cc2932c3eb445425969ae21754a8ab3a0966981c1cf7af1cc"
 dependencies = [
  "console_error_panic_hook",
  "futures",
- "gloo",
+ "gloo 0.8.1",
  "implicit-clone",
- "indexmap",
+ "indexmap 1.9.3",
  "js-sys",
  "prokio",
  "rustversion",
@@ -914,7 +1155,7 @@ version = "0.17.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "426ee0486d2572a6c5e39fbdbc48b58d59bb555f3326f54631025266cf04146e"
 dependencies = [
- "gloo",
+ "gloo 0.8.1",
  "js-sys",
  "route-recognizer",
  "serde",

Cargo.toml

@@ -7,4 +7,7 @@ edition = "2021"
 
 [dependencies]
 yew = { version = "0.20.0", features = ["csr"] }
-yew-router = "0.17.0"
+yew-router = "0.17.0"
+web-sys = { version = "0.3.64", features = ["HtmlInputElement"] }
+wasm-bindgen = "0.2.87"
+gloo = "0.10.0"

src/topbar/guest/mod.rs

@@ -1,7 +1,9 @@
 mod signin;
+mod signup;
 
 use crate::topbar::Tab;
 use signin::SignIn;
+use signup::SignUp;
 use std::rc::Rc;
 use yew::prelude::*;
 
@@ -77,7 +79,7 @@ pub fn TopBar() -> Html {
             }
 
             if state.sign_up {
-                <h1>{"Sign Up"}</h1>
+                <SignUp/>
             }
         </nav>
     }

src/topbar/guest/signin.rs

@@ -1,21 +1,67 @@
+use std::ops::Deref;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 
+#[derive(PartialEq, Clone, Default, Debug)]
+struct Data {
+    pub username: String,
+    pub password: String,
+}
+
 #[function_component]
 pub fn SignIn() -> Html {
+    let state = use_state(|| Data::default());
+
+    let cloned_state = state.clone();
+    let on_username_changed = Callback::from(move |event: Event| {
+        let username = event
+            .target()
+            .expect("WTF")
+            .unchecked_into::<HtmlInputElement>()
+            .value();
+
+        let mut data = cloned_state.deref().clone();
+        data.username = username;
+        cloned_state.set(data);
+    });
+
+    let cloned_state = state.clone();
+    let on_password_changed = Callback::from(move |event: Event| {
+        let password = event
+            .target()
+            .expect("WTF")
+            .unchecked_into::<HtmlInputElement>()
+            .value();
+
+        let mut data = cloned_state.deref().clone();
+        data.password = password;
+        cloned_state.set(data);
+    });
+
+    let cloned_state = state.clone();
+    let onsubmit = Callback::from(move |event: SubmitEvent| {
+        event.prevent_default();
+
+        let data = cloned_state.deref().clone();
+        gloo::console::log!("username: ", data.username);
+        gloo::console::log!("password: ", data.password);
+    });
+
     html! {
-        <form class="auth-container">
+        <form class="auth-container" onsubmit={onsubmit}>
             <div class="auth-field">
                 <label for="username">{"Username"}</label><br/>
-                <input class="auth-input" type="text" name="username"/><br/>
+                <input class="auth-input" type="text" name="username" onchange={on_username_changed}/><br/>
             </div>
 
             <div class="auth-field">
                 <label for="password">{"Password"}</label><br/>
-                <input class="auth-input" type="password" name="password"/><br/>
+                <input class="auth-input" type="password" name="password" onchange={on_password_changed}/><br/>
             </div>
 
             <div class="center-x">
-                <button class="auth-submit">{"Sign In"}</button>
+                <button class="auth-submit" type="submit">{"Sign In"}</button>
             </div>
         </form>
     }

src/topbar/guest/signup.rs

@@ -0,0 +1,88 @@
+use std::ops::Deref;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
+use yew::prelude::*;
+
+#[derive(PartialEq, Clone, Default, Debug)]
+struct Data {
+    pub username: String,
+    pub email: String,
+    pub password: String,
+}
+
+#[function_component]
+pub fn SignUp() -> Html {
+    let state = use_state(|| Data::default());
+
+    let cloned_state = state.clone();
+    let on_username_changed = Callback::from(move |event: Event| {
+        let username = event
+            .target()
+            .expect("WTF")
+            .unchecked_into::<HtmlInputElement>()
+            .value();
+
+        let mut data = cloned_state.deref().clone();
+        data.username = username;
+        cloned_state.set(data);
+    });
+
+    let cloned_state = state.clone();
+    let on_email_changed = Callback::from(move |event: Event| {
+        let email = event
+            .target()
+            .expect("WTF")
+            .unchecked_into::<HtmlInputElement>()
+            .value();
+
+        let mut data = cloned_state.deref().clone();
+        data.email = email;
+        cloned_state.set(data);
+    });
+
+    let cloned_state = state.clone();
+    let on_password_changed = Callback::from(move |event: Event| {
+        let password = event
+            .target()
+            .expect("WTF")
+            .unchecked_into::<HtmlInputElement>()
+            .value();
+
+        let mut data = cloned_state.deref().clone();
+        data.password = password;
+        cloned_state.set(data);
+    });
+
+    let cloned_state = state.clone();
+    let onsubmit = Callback::from(move |event: SubmitEvent| {
+        event.prevent_default();
+
+        let data = cloned_state.deref().clone();
+        gloo::console::log!("username: ", data.username);
+        gloo::console::log!("email: ", data.email);
+        gloo::console::log!("password: ", data.password);
+    });
+
+    html! {
+        <form class="auth-container" onsubmit={onsubmit}>
+            <div class="auth-field">
+                <label for="username">{"Username"}</label><br/>
+                <input class="auth-input" type="text" name="username" onchange={on_username_changed}/><br/>
+            </div>
+
+            <div class="auth-field">
+                <label for="password">{"Password"}</label><br/>
+                <input class="auth-input" type="password" name="password" onchange={on_password_changed}/><br/>
+            </div>
+
+            <div class="auth-field">
+                <label for="email">{"Email"}</label><br/>
+                <input class="auth-input" type="text" name="email" onchange={on_email_changed}/><br/>
+            </div>
+
+            <div class="center-x">
+                <button class="auth-submit" type="submit">{"Sign In"}</button>
+            </div>
+        </form>
+    }
+}