basic public page

2026-01-05 05:52:06 -06:00
parent 6a435ac11a
commit 58cbc31fba
28 changed files with 261 additions and 7506 deletions
--- a/ui/public/pages/SignupForm.js
+++ b/ui/public/pages/SignupForm.js
@@ -0,0 +1,110 @@
+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)")
+        .color("var(--accent)")
+    }
+
+    render() {
+        ZStack(() => {
+            form(() => {
+
+                VStack(() => {
+
+                    p()
+                        .attr({id: "signupMessage"})
+                        .display("none")
+                        .padding(1, em)
+                        .color("var(--main)")
+                        .background("var(--accent)")
+
+                    HStack(() => {
+    
+                        VStack(() => {
+                            input("First Name*")
+                                .attr({name: "firstName", type: "name", required: "true"})
+                                .styles(this.inputStyles)
+            
+                            input("Last Name*")
+                                .attr({name: "lastName", type: "name", required: "true"})
+                                .styles(this.inputStyles)
+            
+                            input("Email*")
+                                .attr({name: "email", type: "email", required: "true"})
+                                .styles(this.inputStyles)
+                                
+                            input("Password*")
+                                .attr({name: "password", type: "password", required: "true"})
+                                .styles(this.inputStyles)
+            
+                            input("Confirm Password*")
+                                .attr({name: "password", type: "password", required: "true"})
+                                .styles(this.inputStyles)
+                        })
+                        .width(100, "%")
+                        .gap(1, em)    
+                    })
+                    .gap(2, em)
+                    .width(100, pct)
+
+                    button("Submit")
+                })
+                .gap(2, em)
+            })
+            .color("var(--accent)")
+            .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(30, vmax)
+            .center()
+        })
+    }
+}
+
+register(SignupForm)