Signup working with new db

ui/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    11.23.25 - Added onSubmit() event for form submission
     11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
     11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
     11.17.25.3 - Adding styles() and fixing dynamic function from earlier
@@ -907,6 +908,13 @@ HTMLElement.prototype.onInput = function(cb) {
     return this;
 };
 
+HTMLElement.prototype.onSubmit = function(cb) {
+    if(!this.matches('form'))
+        throw new Error("Can't put form event on non-form element!")
+    this._storeListener("submit", cb);
+    return this;
+};
+
 HTMLElement.prototype.onTouch = function(cb) {
     const onStart = () => cb.call(this, true);
     const onEnd = () => cb.call(this, false);

ui/public/components/SignupForm.js

@@ -1,5 +1,8 @@
 class SignupForm extends Shadow {
 
+    errorMessage = "Error signing up. Please try again later or email info@hyperia.so if the problem persists."
+    successMessage = "Success! You may now log in."
+
     inputStyles(el) {
         return el
         .border("1px solid var(--accent)")
@@ -11,6 +14,13 @@ class SignupForm extends Shadow {
 
                 VStack(() => {
 
+                    p()
+                        .attr({id: "signupMessage"})
+                        .display("none")
+                        .padding(1, em)
+                        .color("var(--main)")
+                        .background("var(--accent)")
+
                     HStack(() => {
     
                         VStack(() => {
@@ -71,10 +81,51 @@ class SignupForm extends Shadow {
                     button("Submit")
                 })
                 .gap(2, em)
-
-                console.log(window.location.pathname)
             })
-            .attr({action: window.location.pathname + window.location.search, method: "POST"})
+            .onSubmit(async (e) => {
+                e.preventDefault()
+                console.log("submitting")
+                $("#signupMessage").style.display = "none"
+
+                const formData = new FormData(this.$("form"));
+                const data = Object.fromEntries(formData.entries());
+                let newMember = {
+                    "email": data.email,
+                    "firstName": data.firstName,
+                    "lastName": data.lastName,
+                    "password": data.password
+                }
+                let address = {
+                    "address1": data.address1,
+                    "address2": data.address2,
+                    "zip": data.zip,
+                    "state": data.state,
+                    "city": data.city
+                }
+                newMember.address = address
+
+                try {
+                    const response = await fetch(window.location.pathname + window.location.search, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(newMember)
+                    });
+
+                    if (!response.ok) {
+                        $("#signupMessage").style.display = "block"
+                        $("#signupMessage").innerText = this.errorMessage
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    } else {
+                        $("#signupMessage").style.display = "block"
+                        $("#signupMessage").innerText = this.successMessage
+                    }
+
+                } catch (err) {
+                    console.error("Fetch error:", err);
+                }
+            })
             .x(50, vw).y(53, vh)
             .width(60, vw)
             .center()