elm-archi-intro-form.elm

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String

main =
  Html.beginnerProgram
    { model = model
    , view = view
    , update = update
    }

-- Model

type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  }

model : Model
model =
  Model "" "" ""

-- Update

type Msg
  = Name String
  | Password String
  | PasswordAgain String


update : Msg -> Model -> Model
update msg model =
  case msg of
    Name name ->
      { model | name = name }
    Password password ->
      { model | password = password }
    PasswordAgain passwordAgain ->
      { model | passwordAgain = passwordAgain }

-- View

view : Model -> Html Msg
view model =
  div []
    [ viewGreeting model
    , input [ type' "text", placeholder "Name", onInput Name][]
    , input [ type' "password", placeholder "Password", onInput Password][]
    , input [ type' "password", placeholder "Re-enter Password", onInput PasswordAgain][]
    , viewValidation model
    ]

viewGreeting : Model -> Html msg
viewGreeting model =
  let
    (greeting) =
      if model.name == "" then
        ("")
      else
        (String.concat ["Hello ", model.name])
  in
    div [][ text (greeting) ]

viewValidation : Model -> Html msg
viewValidation model =
  let
    (color, message) =
      if model.password == model.passwordAgain then
        ("green", "OK")
      else
        ("red", "Passwords do not match!")
  in
    div [style [("color", color)] ] [ text message ]