User Submitting Signup

ui/_/code/quill.js

@@ -283,6 +283,8 @@ function extendHTMLElementWithStyleSetters() {
             case "marginBottom":
             case "marginRight":
 
+            case "textUnderlineOffset":
+
                 return "unit-number"
 
             default:

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)

ui/public/index.html

@@ -15,14 +15,6 @@
     </style>
     <script src="_/code/quill.js"></script>
     <script type="module" src="index.js"></script>
-    <script>
-      window.addEventListener('load', () => {
-          if (window.location.search) {
-            // Replace the URL with the clean path (e.g., '/')
-            window.history.replaceState(null, '', '/');
-          }
-        });
-    </script>
   </head>
   <body>
   </body>

ui/public/pages/Home.js

@@ -1,4 +1,5 @@
 import "../components/NavBar.js"
+import "../components/JoinForm.js"
 import "./Why.js"
 import "./Events.js"
 import "./Join.js"
@@ -51,6 +52,11 @@ class Home extends Shadow {
                 case "/signin":
                     SignIn()
                     break;
+
+                default:
+                    if(window.location.pathname.startsWith("/signup")) {
+                        JoinForm()
+                    }
             }
 
         })