Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import Html exposing (Html, text, div, button, input, h3)
- import Html.Attributes exposing(style, type', placeholder)
- import Html.App exposing (beginnerProgram)
- import Html.Events exposing (onInput)
- -- Types and Aliases
- type alias Model = { username:String, password:String, passwordConfirm:String }
- type Msg = Username String | Password String | PasswordConfirm String
- -- Init
- main =
- beginnerProgram
- { model = model
- , view = view
- , update = update
- }
- -- Model
- model : Model
- model = { username = "", password = "", passwordConfirm = "" }
- -- Update
- update : Msg -> Model -> Model
- update msg model =
- case msg of
- Username username
- -> { model | username = username }
- Password password
- -> { model | password = password }
- PasswordConfirm passwordConfirm
- -> { model | passwordConfirm = passwordConfirm }
- -- View
- view : Model -> Html Msg
- view model =
- div []
- [ h3 [] [ validate model ]
- , input [ onInput Username, placeholder "Username" ] []
- , input [ type' "password", onInput Password, placeholder "Password" ] []
- , input [ type' "password", onInput PasswordConfirm, placeholder "Password Confirmation" ] []
- ]
- -- Validation
- validate : Model -> Html Msg
- validate model =
- let (color, message) =
- if model.password == model.passwordConfirm
- then ("green", "Okay! :)")
- else ("red", "Bad! :(")
- in
- h3 [ style [("color", color)] ] [ text message ]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement