From 4f5eff6cdbfde0fb31baba41fb16401a7f4ec737 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <brock.tomlinson@ucalgary.ca>
Date: Thu, 8 May 2025 15:30:58 -0600
Subject: [PATCH] feat(dioxus): dioxus is not ready for production

---
 assets/styling/contactme.css | 50 ++++++++++++++++++++++++++++++++++--
 src/views/contact_me.rs      | 48 +++++++++++++++++++---------------
 2 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/assets/styling/contactme.css b/assets/styling/contactme.css
index c7ebb19..cbb2337 100644
--- a/assets/styling/contactme.css
+++ b/assets/styling/contactme.css
@@ -22,10 +22,56 @@
 	padding: 0svh 2svw;
 }
 
+#contact-me {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	background-color: transparent;
+	border-radius: 0px;
+	margin: 2svh 0.5svw;
+	padding: 0svh 1svw;
+}
+
+#contact-me input {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border-color: rgba(245, 245, 245, 0.5);
+	border-width: 2px;
+	padding: 1svh 0svw;
+	margin: 1svh 0.5svw;
+	color: inherit;
+	align-items: start;
+}
+
+#contact-me textarea {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border-color: rgba(245, 245, 245, 0.4);
+	border-width: 2px;
+	padding: 1svh 0svw;
+	margin: 1svh 0.5svw;
+	color: inherit;
+	align-items: start;
+	min-height: 25svh;
+}
+
+#contact-me button {
+	border-radius: var(--card-border-radius);
+	border-color: rgba(245, 245, 245, 0.5);
+	padding: 1svh 0svw;
+	margin: 1svh 0.5svw;
+	color: inherit;
+	align-items: start;
+	background-color: rgba(0, 128, 0, 0.6);
+	border-color: transparent;
+}
+
 #ContactMe form {
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
+	background-color: transparent;
+	border-radius: 0px;
 	margin: 2svh 0.5svw;
 	padding: 0svh 1svw;
 }
@@ -41,7 +87,7 @@
 	align-items: start;
 }
 
-#ContactMe form textarea {
+#ContactMe textarea {
 	background-color: var(--card-background-color);
 	border-radius: var(--card-border-radius);
 	border-color: rgba(245, 245, 245, 0.4);
@@ -53,7 +99,7 @@
 	min-height: 25svh;
 }
 
-#ContactMe form button {
+#ContactMe button {
 	border-radius: var(--card-border-radius);
 	border-color: rgba(245, 245, 245, 0.5);
 	padding: 1svh 0svw;
diff --git a/src/views/contact_me.rs b/src/views/contact_me.rs
index c40301a..a0d02c7 100644
--- a/src/views/contact_me.rs
+++ b/src/views/contact_me.rs
@@ -8,13 +8,15 @@ const CONTACTME_CSS: Asset = asset!("/assets/styling/contactme.css");
 
 #[component]
 pub fn ContactMe() -> Element {
-    // let mut test_form = use_signal(|| {
-    //     HashMap::from([
-    //         ("Name", "".to_string()),
-    //         ("Email", "".to_string()),
-    //         ("Message", "".to_string()),
-    //     ])
-    // });
+    let mut pre_form: Signal<HashMap<&'static str, String>> = use_signal(|| {
+        HashMap::from([
+            ("Name", "".to_string()),
+            ("Email", "".to_string()),
+            ("Message", "".to_string()),
+        ])
+    });
+
+    let mut error_box_message: Signal<String> = use_signal(|| "".to_string());
 
     rsx! {
         document::Link { rel: "stylesheet", href: CONTACTME_CSS }
@@ -27,29 +29,35 @@ pub fn ContactMe() -> Element {
                 }
             }
             div {
-                form {
-                    onsubmit: move |event| {
-                        event.prevent_default();
-                        tracing::info!("{:?}", event.data().values() ["name"]);
-                    },
+                div { id: "contact-me",
                     label { "Name" }
-                    input { name: "name" }
+                    input {
+                        oninput: move |event| {
+                            pre_form.write().insert("Name", event.value());
+                        },
+                    }
                     label { "Email" }
-                    input { name: "email", r#type: "email" }
+                    input {
+                        r#type: "email",
+                        oninput: move |event| {
+                            pre_form.write().insert("Email", event.value());
+                        },
+                    }
                     label { "Message" }
-                    textarea { name: "message" }
+                    textarea {
+                        oninput: move |event| {
+                            pre_form.write().insert("Message", event.value());
+                        },
+                    }
+                    p { "{error_box_message}" }
                     button {
                         r#type: "submit",
-                        onclick: move |_| tracing::info!("Clicked!"),
+                        onclick: move |_| tracing::info!("Clicked!\n{:?}", pre_form),
                         "Submit"
                     }
                 }
             }
         }
-        div {
-            h3 { "Form Submission" }
-                // p { "{test_form.values().iter().map(|value| value.to_string)}" }
-        }
         Contact {}
     }
 }