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) {
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")