elm-architecture-forms.elm

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)


-- see https://guide.elm-lang.org/architecture/
-- run with http://elm-lang.org/examples/buttons

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


-- MODEL

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


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


-- UPDATE

type Msg
    = UpdateField FieldUpdate
    | Submit
    
type FieldUpdate
    = Name String
    | Password String
    | PasswordAgain String


updateFieldMessage : FieldUpdate -> Model -> Model
updateFieldMessage fieldUpdate model =
  case fieldUpdate of
    Name name ->
      { model | name = name }
    Password password ->
      { model | password = password }
    PasswordAgain password ->
      { model | passwordAgain = password }
  

update : Msg -> Model -> Model
update msg model =
  case msg of
    Submit ->
      { model | submitted = not model.submitted }
    UpdateField fieldUpdate ->
      updateFieldMessage fieldUpdate { model | submitted = False } 

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ input [ type_ "text", placeholder "Name", onInput (Name >> UpdateField) ] []
    , input [ type_ "password", placeholder "Password", onInput (Password >> UpdateField) ] []
    , input [ type_ "password", placeholder "Re-enter Password", onInput (PasswordAgain >> UpdateField) ] []
    , button [ onClick Submit ] [ text "submit" ]
    , viewValidation model
    ]

viewValidation : Model -> Html msg
viewValidation model =
  if model.submitted then
    let
      (color, message) =
        if model.password == model.passwordAgain then
          if String.length model.password < 8 then
            ("red", "Password needs to be at least 8 characters long!")
          else
            ("green", "OK")
        else
          ("red", "Passwords do not match!")
    in
      div [ style [("color", color)] ] [ text message ]
  else
    div [] []