1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
 
 
 
-- MAIN
 
 
main =
  Browser.sandbox { init = init, update = update, view = view }
 
 
 
-- MODEL
 
 
type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  }
 
 
init : Model
init =
  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 password ->
      { model | passwordAgain = password }
 
 
 
-- VIEW
 
 
view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Name" model.name Name
    , viewInput "password" "Password" model.password Password
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
    , viewValidation model
    ]
 
 
viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []
 
 
viewValidation : Model -> Html msg
viewValidation model =
  if model.password == model.passwordAgain then
    div [ style "color" "green" ] [ text "OK" ]
  else
    div [ style "color" "red" ] [ text "Passwords do not match!" ]