basic public page
This commit is contained in:
metacryst
@@ -1,5 +1,5 @@
|
||||
import "../components/NavBar.js"
|
||||
import "../components/SignupForm.js"
|
||||
import "./SignupForm.js"
|
||||
import "./Why.js"
|
||||
import "./Events.js"
|
||||
import "./Join.js"
|
||||
@@ -7,55 +7,119 @@ import "./SignIn.js"
|
||||
import "./Success.js"
|
||||
|
||||
class Home extends Shadow {
|
||||
|
||||
MainContent() {
|
||||
return VStack(() => {
|
||||
HStack(() => {
|
||||
img("/_/icons/quill.svg", "6em")
|
||||
|
||||
p("PARCHMENT")
|
||||
.fontFamily("Nabla")
|
||||
.fontSize(6.5, em)
|
||||
.marginLeft(1, rem)
|
||||
.color("var(--accent)")
|
||||
})
|
||||
.marginBottom(1, rem)
|
||||
|
||||
HStack(() => {
|
||||
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
span("The Network OS")
|
||||
.fontFamily("Canterbury")
|
||||
.color("var(--accent)")
|
||||
.fontSize(2.5, em)
|
||||
.paddingBottom(1, rem)
|
||||
})
|
||||
.height(5, em)
|
||||
.verticalAlign("center")
|
||||
.horizontalAlign("center")
|
||||
|
||||
p("Parchment helps you connect to every group you are a part of.")
|
||||
.color("var(--red)")
|
||||
.borderTop("1px solid var(--red)")
|
||||
.borderHorizontal("1px solid var(--red)")
|
||||
.height(5, em)
|
||||
.fontSize(1.2, em)
|
||||
.paddingTop(2, rem)
|
||||
.paddingHorizontal(2, rem)
|
||||
})
|
||||
|
||||
VStack(() => {
|
||||
|
||||
HStack(() => {
|
||||
p("Log In")
|
||||
.color("var(--red)")
|
||||
.paddingVertical(1.2, rem)
|
||||
.paddingHorizontal(3, rem)
|
||||
.fontSize(1.2, em)
|
||||
.cursor("default")
|
||||
.onHover(function (hovering) {
|
||||
console.log("hover")
|
||||
if(hovering) {
|
||||
this.style.background = "var(--red)"
|
||||
this.style.color = "black"
|
||||
} else {
|
||||
this.style.background = ""
|
||||
this.style.color = "var(--red)"
|
||||
}
|
||||
})
|
||||
.onClick(() => {
|
||||
window.navigateTo("/login")
|
||||
})
|
||||
p("Sign Up")
|
||||
.color("var(--red)")
|
||||
.borderLeft("1px solid var(--red)")
|
||||
.paddingVertical(1.2, rem)
|
||||
.paddingHorizontal(3, rem)
|
||||
.fontSize(1.2, em)
|
||||
.cursor("default")
|
||||
.onHover(function (hovering) {
|
||||
console.log("hover")
|
||||
if(hovering) {
|
||||
this.style.background = "var(--red)"
|
||||
this.style.color = "black"
|
||||
} else {
|
||||
this.style.background = ""
|
||||
this.style.color = "var(--red)"
|
||||
}
|
||||
})
|
||||
.onClick(() => {
|
||||
window.navigateTo("/signup")
|
||||
})
|
||||
})
|
||||
.height(5, em)
|
||||
.border("1px solid var(--red)")
|
||||
|
||||
div()
|
||||
.height(5, em)
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
ZStack(() => {
|
||||
img("/_/images/nodes.svg", "20vw")
|
||||
.marginHorizontal(50, pct)
|
||||
.marginTop(13, em)
|
||||
.center()
|
||||
})
|
||||
.width(100, pct)
|
||||
.marginBottom(10, em)
|
||||
.border("1px solid var(--red)")
|
||||
})
|
||||
.marginHorizontal(27, vw)
|
||||
.width(46, vw)
|
||||
.marginTop(10, vh)
|
||||
.fontFamily("Nanum")
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
ZStack(() => {
|
||||
|
||||
NavBar()
|
||||
|
||||
img("/_/icons/logo.svg", "2.5em")
|
||||
.onClick((done) => {
|
||||
if(!done) return
|
||||
window.navigateTo("/")
|
||||
})
|
||||
.position("absolute")
|
||||
.left(50, vw).top(4, em)
|
||||
.center()
|
||||
.transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
|
||||
|
||||
switch(window.location.pathname) {
|
||||
case "/":
|
||||
img("/_/images/knight.webp", "29vmax")
|
||||
.position("absolute")
|
||||
.left(50, vw).top(isMobile() ? 50 : 53, vh)
|
||||
.center()
|
||||
|
||||
if(!isMobile()) {
|
||||
p("H Y P E R I A ")
|
||||
.x(50, vw).y(53, vh)
|
||||
.textAlign("center")
|
||||
.center()
|
||||
.color("var(--gold)")
|
||||
.fontSize(5, vw)
|
||||
.maxWidth(isMobile() ? 1000 : 100, em)
|
||||
} else {
|
||||
p("H Y P E R I A ")
|
||||
.x(46, vw).y(isMobile() ? 50 : 53, vh)
|
||||
.textAlign("center")
|
||||
.color("var(--gold)")
|
||||
.fontSize(5, vw)
|
||||
}
|
||||
|
||||
if(!isMobile()) {
|
||||
let text = "A Classical Christian Network"
|
||||
p(isMobile() ? text : text.toUpperCase())
|
||||
.x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
|
||||
.center()
|
||||
.letterSpacing(0.1, em)
|
||||
.width(isMobile() ? 80 : 100, vw)
|
||||
.fontSize(isMobile() ? 0.8 : 1, em)
|
||||
.textAlign("center")
|
||||
}
|
||||
this.MainContent()
|
||||
break;
|
||||
case "/why":
|
||||
Why()
|
||||
@@ -73,7 +137,7 @@ class Home extends Shadow {
|
||||
default:
|
||||
if(window.location.pathname.startsWith("/signup")) {
|
||||
SignupForm()
|
||||
} else if(window.location.pathname.startsWith("/signin")) {
|
||||
} else if(window.location.pathname.startsWith("/login")) {
|
||||
SignIn()
|
||||
}
|
||||
}
|
||||
|
||||
110
ui/public/pages/SignupForm.js
Normal file
110
ui/public/pages/SignupForm.js
Normal file
@@ -0,0 +1,110 @@
|
||||
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(100, "%")
|
||||
.gap(1, em)
|
||||
})
|
||||
.gap(2, em)
|
||||
.width(100, pct)
|
||||
|
||||
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(30, vmax)
|
||||
.center()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
register(SignupForm)
|
||||
Reference in New Issue
Block a user