feat: implemented form data fetching and the sign_up ui
This commit is contained in:
parent
39da0f4e99
commit
90f725d02d
GPG Key ID:
2B4F402172791BAF
|
|
@ -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-dialogs",
|
||||
"gloo-events",
|
||||
"gloo-file",
|
||||
"gloo-history",
|
||||
"gloo-net",
|
||||
"gloo-render",
|
||||
"gloo-storage",
|
||||
"gloo-timers",
|
||||
"gloo-utils",
|
||||
"gloo-worker",
|
||||
"gloo-console 0.2.3",
|
||||
"gloo-dialogs 0.1.1",
|
||||
"gloo-events 0.1.2",
|
||||
"gloo-file 0.2.3",
|
||||
"gloo-history 0.1.5",
|
||||
"gloo-net 0.3.1",
|
||||
"gloo-render 0.1.1",
|
||||
"gloo-storage 0.2.2",
|
||||
"gloo-timers 0.2.6",
|
||||
"gloo-utils 0.1.7",
|
||||
"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-utils",
|
||||
"gloo-events 0.1.2",
|
||||
"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-utils",
|
||||
"gloo-console 0.2.3",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue