sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small signup improvements

Browse Source
This commit is contained in:
metacryst
2025-11-25 00:44:21 -06:00
parent d63a7d02ec
commit 6c2b183f8e
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ui/public/components/SignupForm.js
View File

@@ -6,6 +6,7 @@ class SignupForm extends Shadow {
inputStyles(el) { inputStyles(el) {
return el return el
.border("1px solid var(--accent)") .border("1px solid var(--accent)")
.color("var(--accent)")
} }
render() { render() {
@@ -24,52 +25,52 @@ class SignupForm extends Shadow {
HStack(() => { HStack(() => {
VStack(() => { VStack(() => {
input("First Name") input("First Name*")
.attr({name: "firstName", type: "name"}) .attr({name: "firstName", type: "name", required: "true"})
.styles(this.inputStyles) .styles(this.inputStyles)
input("Last Name") input("Last Name*")
.attr({name: "lastName", type: "name"}) .attr({name: "lastName", type: "name", required: "true"})
.styles(this.inputStyles) .styles(this.inputStyles)
input("Email") input("Email*")
.attr({name: "email", type: "email"}) .attr({name: "email", type: "email", required: "true"})
.styles(this.inputStyles) .styles(this.inputStyles)
input("Password") input("Password*")
.attr({name: "password", type: "password"}) .attr({name: "password", type: "password", required: "true"})
.styles(this.inputStyles) .styles(this.inputStyles)
input("Confirm Password") input("Confirm Password*")
.attr({name: "password", type: "password"}) .attr({name: "password", type: "password", required: "true"})
.styles(this.inputStyles) .styles(this.inputStyles)
}) })
.width(50, "%") .width(50, "%")
.gap(1, em) .gap(1, em)
VStack(() => { VStack(() => {
input("Street Address") input("Street Address*")
.attr({ name: "address1", type: "text", autocomplete: "address-line1" }) .attr({ name: "address1", type: "text", autocomplete: "address-line1", required: "true" })
.styles(this.inputStyles) .styles(this.inputStyles)
input("Apt, Suite, Unit (optional)") input("Apt, Suite, Unit (optional)")
.attr({ name: "address2", type: "text", autocomplete: "address-line2" }) .attr({ name: "address2", type: "text", autocomplete: "address-line2" })
.styles(this.inputStyles) .styles(this.inputStyles)
input("City") input("City*")
.attr({ name: "city", type: "text", autocomplete: "address-level2" }) .attr({ name: "city", type: "text", autocomplete: "address-level2", required: "true" })
.styles(this.inputStyles) .styles(this.inputStyles)
input("State") input("State*")
.attr({ name: "state", type: "text", autocomplete: "address-level1" }) .attr({ name: "state", type: "text", autocomplete: "address-level1", required: "true" })
.styles(this.inputStyles) .styles(this.inputStyles)
input("ZIP Code") input("ZIP Code*")
.attr({ name: "zip", type: "text", autocomplete: "postal-code" }) .attr({ name: "zip", type: "text", autocomplete: "postal-code", required: "true" })
.styles(this.inputStyles) .styles(this.inputStyles)
input("Country") input("Country*")
.attr({ name: "country", type: "text", autocomplete: "country-name" }) .attr({ name: "country", type: "text", autocomplete: "country-name", required: "true" })
.styles(this.inputStyles) .styles(this.inputStyles)
}) })
.width(50, "%") .width(50, "%")
@@ -82,6 +83,7 @@ class SignupForm extends Shadow {
}) })
.gap(2, em) .gap(2, em)
}) })
.color("var(--accent)")
.onSubmit(async (e) => { .onSubmit(async (e) => {
e.preventDefault() e.preventDefault()
console.log("submitting") console.log("submitting")