// import m from "mithril"
// import { Button } from "polythene-mithril"
// import { Dialog } from "polythene-mithril"
// import { addTypography } from "polythene-css"
//
// addTypography()
//
// export const hello = {
//     view: function() {
//         return [
//             m(Button, {
//                 label: 'Show dialog',
//                 events: {
//                     onclick: function() {
//                         return Dialog.show({
//                             title: 'Hello',
//                             body: 'Click outside to close, or press ESCAPE',
//                             backdrop: true
//                         })
//                     }
//                 }
//             }),
//             m(Dialog)
//         ]
//     }
// }

import m from "mithril"
import powerform from "powerform"
import { required, equalsTo } from "validatex"

const form = powerform({
    username: required(true),
    password: required(true),
    confirmPassword: [required(true), equalsTo("password")]
})

const signup = {
    view: function() {
        return [
            m("input", {
                placeholder: "Username",
                onkeyup: m.withAttr("value", form.username),
                onchange: form.username.isValid
            }),
            m("p.error", form.username.error()),
            m("input", {
                placeholder: "Password",
                onkeypress: m.withAttr("value", form.password),
                onchange: form.password.isValid
            }),
            m("p.error", form.password.error()),
            m("input", {
                placeholder: "Confirm Password",
                onkeypress: m.withAttr("value", form.confirmPassword),
                onchange: form.confirmPassword.isValid
            }),
            m("p.error", form.confirmPassword.error()),
            m("button", {
                onclick: form.isValid()
            }, "Submit")
        ]
    }
}

export default signup
