138 lines
5.5 KiB
JavaScript
138 lines
5.5 KiB
JavaScript
class SignupForm extends Shadow {
|
|
|
|
errorMessage = "Error signing up. Please try again later or email info@hyperia.so if the problem persists."
|
|
successMessage = "Success! You may now log in."
|
|
|
|
inputStyles(el) {
|
|
return el
|
|
.border("1px solid var(--accent)")
|
|
.color("var(--accent)")
|
|
}
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
form(() => {
|
|
|
|
VStack(() => {
|
|
|
|
p()
|
|
.attr({id: "signupMessage"})
|
|
.display("none")
|
|
.padding(1, em)
|
|
.color("var(--main)")
|
|
.background("var(--accent)")
|
|
|
|
HStack(() => {
|
|
|
|
VStack(() => {
|
|
input("First Name*")
|
|
.attr({name: "firstName", type: "name", required: "true"})
|
|
.styles(this.inputStyles)
|
|
|
|
input("Last Name*")
|
|
.attr({name: "lastName", type: "name", required: "true"})
|
|
.styles(this.inputStyles)
|
|
|
|
input("Email*")
|
|
.attr({name: "email", type: "email", required: "true"})
|
|
.styles(this.inputStyles)
|
|
|
|
input("Password*")
|
|
.attr({name: "password", type: "password", required: "true"})
|
|
.styles(this.inputStyles)
|
|
|
|
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", 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", required: "true" })
|
|
.styles(this.inputStyles)
|
|
|
|
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", required: "true" })
|
|
.styles(this.inputStyles)
|
|
|
|
input("Country*")
|
|
.attr({ name: "country", type: "text", autocomplete: "country-name", required: "true" })
|
|
.styles(this.inputStyles)
|
|
})
|
|
.width(50, "%")
|
|
.gap(1, em)
|
|
|
|
})
|
|
.gap(2, em)
|
|
|
|
button("Submit")
|
|
})
|
|
.gap(2, em)
|
|
})
|
|
.color("var(--accent)")
|
|
.onSubmit(async (e) => {
|
|
e.preventDefault()
|
|
console.log("submitting")
|
|
$("#signupMessage").style.display = "none"
|
|
|
|
const formData = new FormData(this.$("form"));
|
|
const data = Object.fromEntries(formData.entries());
|
|
let newMember = {
|
|
"email": data.email,
|
|
"firstName": data.firstName,
|
|
"lastName": data.lastName,
|
|
"password": data.password
|
|
}
|
|
let address = {
|
|
"address1": data.address1,
|
|
"address2": data.address2,
|
|
"zip": data.zip,
|
|
"state": data.state,
|
|
"city": data.city
|
|
}
|
|
newMember.address = address
|
|
|
|
try {
|
|
const response = await fetch(window.location.pathname + window.location.search, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify(newMember)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
$("#signupMessage").style.display = "block"
|
|
$("#signupMessage").innerText = this.errorMessage
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
} else {
|
|
$("#signupMessage").style.display = "block"
|
|
$("#signupMessage").innerText = this.successMessage
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error("Fetch error:", err);
|
|
}
|
|
})
|
|
.x(50, vw).y(53, vh)
|
|
.width(60, vw)
|
|
.center()
|
|
})
|
|
}
|
|
}
|
|
|
|
register(SignupForm) |