User Submitting Signup

2025-11-18 07:58:35 -06:00
parent 81ca35bf2f
commit b8e48f7945
8 changed files with 196 additions and 35 deletions
--- a/ui/public/components/JoinForm.js
+++ b/ui/public/components/JoinForm.js
@@ -0,0 +1,91 @@
+css(`
+    joinform- input::placeholder {
+        color: var(--accent)
+    }
+`)
+
+class JoinForm extends Shadow {
+
+    inputStyles(el) {
+        return el
+        .border("1px solid var(--accent)")
+    }
+
+    render() {
+        ZStack(() => {
+            form(() => {
+
+                VStack(() => {
+
+                    HStack(() => {
+    
+                        VStack(() => {
+                            input("First Name")
+                                .attr({name: "firstname", type: "name"})
+                                .styles(this.inputStyles)
+            
+                            input("Last Name")
+                                .attr({name: "lastname", type: "name"})
+                                .styles(this.inputStyles)
+            
+                            input("Email")
+                                .attr({name: "email", type: "email"})
+                                .styles(this.inputStyles)
+                                
+                            input("Password")
+                                .attr({name: "password", type: "password"})
+                                .styles(this.inputStyles)
+            
+                            input("Confirm Password")
+                                .attr({name: "password", type: "password"})
+                                .styles(this.inputStyles)
+                        })
+                        .width(50, "%")
+                        .gap(1, em)
+
+                        VStack(() => {
+                            input("Street Address")
+                                .attr({ name: "address1", type: "text", autocomplete: "address-line1" })
+                                .styles(this.inputStyles)
+            
+                            input("Apt, Suite, Unit (optional)")
+                                .attr({ name: "address2", type: "text", autocomplete: "address-line2" })
+                                .styles(this.inputStyles)
+            
+                            input("City")
+                                .attr({ name: "city", type: "text", autocomplete: "address-level2" })
+                                .styles(this.inputStyles)
+            
+                            input("State")
+                                .attr({ name: "state", type: "text", autocomplete: "address-level1" })
+                                .styles(this.inputStyles)
+            
+                            input("ZIP Code")
+                                .attr({ name: "zip", type: "text", autocomplete: "postal-code" })
+                                .styles(this.inputStyles)
+            
+                            input("Country")
+                                .attr({ name: "country", type: "text", autocomplete: "country-name" })
+                                .styles(this.inputStyles)
+                        })
+                        .width(50, "%")
+                        .gap(1, em)
+    
+                    })
+                    .gap(2, em)
+
+                    button("Submit")
+                })
+                .gap(2, em)
+
+                console.log(window.location.pathname)
+            })
+            .attr({action: window.location.pathname + window.location.search, method: "POST"})
+            .x(50, vw).y(53, vh)
+            .width(60, vw)
+            .center()
+        })
+    }
+}
+
+register(JoinForm)