From 6c2b183f8e3f62bc2173732e9c366b3d655e94e8 Mon Sep 17 00:00:00 2001
From: metacryst <samrussell99@gmail.com>
Date: Tue, 25 Nov 2025 00:44:21 -0600
Subject: [PATCH] small signup improvements

---
 ui/public/components/SignupForm.js | 42 ++++++++++++++++--------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/public/components/SignupForm.js b/ui/public/components/SignupForm.js
index 63d96f1..47bbcdf 100644
--- a/ui/public/components/SignupForm.js
+++ b/ui/public/components/SignupForm.js
@@ -6,6 +6,7 @@ class SignupForm extends Shadow {
     inputStyles(el) {
         return el
         .border("1px solid var(--accent)")
+        .color("var(--accent)")
     }
 
     render() {
@@ -24,52 +25,52 @@ class SignupForm extends Shadow {
                     HStack(() => {
     
                         VStack(() => {
-                            input("First Name")
-                                .attr({name: "firstName", type: "name"})
+                            input("First Name*")
+                                .attr({name: "firstName", type: "name", required: "true"})
                                 .styles(this.inputStyles)
             
-                            input("Last Name")
-                                .attr({name: "lastName", type: "name"})
+                            input("Last Name*")
+                                .attr({name: "lastName", type: "name", required: "true"})
                                 .styles(this.inputStyles)
             
-                            input("Email")
-                                .attr({name: "email", type: "email"})
+                            input("Email*")
+                                .attr({name: "email", type: "email", required: "true"})
                                 .styles(this.inputStyles)
                                 
-                            input("Password")
-                                .attr({name: "password", type: "password"})
+                            input("Password*")
+                                .attr({name: "password", type: "password", required: "true"})
                                 .styles(this.inputStyles)
             
-                            input("Confirm Password")
-                                .attr({name: "password", type: "password"})
+                            input("Confirm Password*")
+                                .attr({name: "password", type: "password", required: "true"})
                                 .styles(this.inputStyles)
                         })
                         .width(50, "%")
                         .gap(1, em)
 
                         VStack(() => {
-                            input("Street Address")
-                                .attr({ name: "address1", type: "text", autocomplete: "address-line1" })
+                            input("Street Address*")
+                                .attr({ name: "address1", type: "text", autocomplete: "address-line1", required: "true" })
                                 .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" })
+                            input("City*")
+                                .attr({ name: "city", type: "text", autocomplete: "address-level2", required: "true" })
                                 .styles(this.inputStyles)
             
-                            input("State")
-                                .attr({ name: "state", type: "text", autocomplete: "address-level1" })
+                            input("State*")
+                                .attr({ name: "state", type: "text", autocomplete: "address-level1", required: "true" })
                                 .styles(this.inputStyles)
             
-                            input("ZIP Code")
-                                .attr({ name: "zip", type: "text", autocomplete: "postal-code" })
+                            input("ZIP Code*")
+                                .attr({ name: "zip", type: "text", autocomplete: "postal-code", required: "true" })
                                 .styles(this.inputStyles)
             
-                            input("Country")
-                                .attr({ name: "country", type: "text", autocomplete: "country-name" })
+                            input("Country*")
+                                .attr({ name: "country", type: "text", autocomplete: "country-name", required: "true" })
                                 .styles(this.inputStyles)
                         })
                         .width(50, "%")
@@ -82,6 +83,7 @@ class SignupForm extends Shadow {
                 })
                 .gap(2, em)
             })
+            .color("var(--accent)")
             .onSubmit(async (e) => {
                 e.preventDefault()
                 console.log("submitting")