85 lines
3.2 KiB
JavaScript
85 lines
3.2 KiB
JavaScript
class SignupForm 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(SignupForm) |