class SignIn extends Shadow {

    inputStyles(el) {
        return el
            .color("var(--accent)")
            .border("1px solid var(--accent)")
    }

    render() {
        ZStack(() => {
            if(window.location.search.includes("new")) {
                p("Welcome to Hyperia! You may now log in.")
                .x(50, vw).y(40, vh)
                .center()
            }

            form(() => {
                input("Email")
                    .attr({name: "email", type: "email"})
                    .margin(1, em)
                    .styles(this.inputStyles)
                input("Password")
                    .attr({name: "password", type: "password"})
                    .margin(1, em)
                    .styles(this.inputStyles)
                button("Submit")
                    .margin(1, em)
            })
            .attr({action: "/login", method: "POST"})
            .x(50, vw).y(50, vh)
            .center()
        })
    }
}

register(SignIn)