63 lines
2.1 KiB
JavaScript
63 lines
2.1 KiB
JavaScript
const env = import.meta.env
|
|
|
|
class Login extends Shadow {
|
|
inputStyles(el) {
|
|
return el
|
|
.background("var(--main)")
|
|
.color("var(--text)")
|
|
.border("1px solid var(--accent)")
|
|
.fontSize(0.9, rem)
|
|
.backgroundColor("var(--accentdark)")
|
|
.borderRadius(12, px)
|
|
.outline("none")
|
|
.onTouch((start) => {
|
|
if(start) {
|
|
this.style.backgroundColor = "var(--accent)"
|
|
} else {
|
|
this.style.backgroundColor = "var(--accentdark)"
|
|
}
|
|
})
|
|
}
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
img(window.matchMedia('(prefers-color-scheme: dark)') ? "/_/icons/columnwhite.svg" : "/_/icons/logo.svg", window.isMobile() ? "5vmax" : "3vmax")
|
|
.position("absolute")
|
|
.top(5, em)
|
|
.left(2, em)
|
|
.onClick((done) => {
|
|
window.navigateTo("/")
|
|
})
|
|
|
|
form(() => {
|
|
input("Email", "70vw")
|
|
.attr({name: "email", type: "email"})
|
|
.margin(1, em)
|
|
.padding(1, em)
|
|
.styles(this.inputStyles)
|
|
input("Password", "70vw")
|
|
.attr({name: "password", type: "password"})
|
|
.margin(1, em)
|
|
.padding(1, em)
|
|
.styles(this.inputStyles)
|
|
button("==>")
|
|
.margin(1, em)
|
|
.padding(1, em)
|
|
.fontSize(0.9, rem)
|
|
.borderRadius(12, px)
|
|
.background("var(--accent)")
|
|
.color("var(--text)")
|
|
.border("1px solid var(--accent)")
|
|
})
|
|
.attr({action: `${env.VITE_API_URL}/login`, method: "POST"})
|
|
.x(50, vw).y(50, vh)
|
|
.center()
|
|
})
|
|
.background("var(--main)")
|
|
.width(100, vw)
|
|
.height(100, pct)
|
|
.margin(0)
|
|
}
|
|
}
|
|
|
|
register(Login) |