PureScript Login Form

Main.purs

module Main where

import Prelude
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Aff.Class (class MonadAff)
import Effect.Console (log)
import Effect.Class (liftEffect)
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Halogen.VDom.Driver (runUI)

data Action
  = UpdateUsername String
  | UpdatePassword String
  | Submit

type State
  = { username :: String
    , password :: String
    }

handleAction :: Action -> H.HalogenM State Action () Void Effect Unit
handleAction = case _ of
  UpdateUsername username -> do
    H.modify_ (_ { username = username })
  UpdatePassword password -> do
    H.modify_ (_ { password = password })
  Submit -> do
    s <- H.get
    liftEffect $ log $ "Submitting: " <> s.username <> ", " <> s.password

component :: H.Component HH.HTML Action State Void
component =
  H.mkComponent
    { initialState: const { username: "", password: "" }
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }

render :: State -> H.ComponentHTML Action ()
render state =
  HH.form_
    [ HH.input
        [ HP.type_ HP.InputText
        , HP.value state.username
        , HE.onValueInput $ Just <<< UpdateUsername
        ]
    , HH.input
        [ HP.type_ HP.InputPassword
        , HP.value state.password
        , HE.onValueInput $ Just <<< UpdatePassword
        ]
    , HH.button
        [ HE.onClick (\_ -> Just Submit) ]
        [ HH.text "Submit" ]
    ]

main :: Effect Unit
main =
  HA.runHalogenAff do
    body <- HA.awaitBody
    runUI component { username: "", password: "" } body