formValidation.elm

module App exposing (..)

import Html exposing (..)
import Html.App as HtmlApp
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import String
import Set exposing (Set)
import Dict exposing (Dict)


-- MAIN


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



-- MODEL


type alias Errors =
    Dict String (Set String)


type alias Model =
    { name : String
    , password : String
    , passwordConfirmation : String
    , errors : Errors
    }


model : Model
model =
    { name = ""
    , password = ""
    , passwordConfirmation = ""
    , errors = Dict.empty
    }



-- UPDATE


type Msg
    = Name String
    | Password String
    | PasswordConfirmation String
    | Submit


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

        Password password ->
            { model | password = password }

        PasswordConfirmation passwordConfirmation ->
            { model | passwordConfirmation = passwordConfirmation }

        Submit ->
            model
                |> validate


isEmpty attr =
    String.isEmpty attr


isShort min attr =
    (String.length attr) < min


wrongPassConfirm model =
    (not (isShort 6 model.password)) && model.password /= model.passwordConfirmation


validate : Model -> Model
validate model =
    model
        |> setErrorMessage "name" (isEmpty model.name) "Can't be blank"
        |> setErrorMessage "name" (isShort 3 model.name) "Is too short"
        |> setErrorMessage "password" (isShort 6 model.password) "Is too short"
        |> setErrorMessage "passwordConfirmation" (wrongPassConfirm model) "Does not match"


setErrorMessage : String -> Bool -> String -> Model -> Model
setErrorMessage attr isInvalid message model =
    let
        modelErrors =
            model.errors

        attrErrors =
            Dict.get attr modelErrors
                |> Maybe.withDefault Set.empty

        newAttrErrors =
            if isInvalid then
                Set.insert message attrErrors
            else
                Set.remove message attrErrors

        newModelErrors =
            Dict.insert attr newAttrErrors modelErrors
    in
        { model | errors = newModelErrors }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ mainHeader model
        , mainView model
        ]


mainHeader : Model -> Html Msg
mainHeader model =
    header [ class "top-nav top-nav--blue" ]
        [ nav [ class "top-links--right" ]
            [ a [ class "top-links__link" ] [ text "Sair" ] ]
        ]


mainView : Model -> Html Msg
mainView model =
    div [ class "main" ]
        [ div [ class "center-box center-box--small center-box--white" ]
            [ div [ class "inner" ]
                [ someForm model ]
            ]
        ]


someForm : Model -> Html Msg
someForm model =
    Html.form [ onSubmit Submit ]
        [ div [ class "form-group" ]
            [ label [ class "form-group__full-input-label" ] [ text "Name" ]
            , input [ type' "text", class "form-group__full-input", onInput Name ] []
            , helpText "name" model
            ]
        , div [ class "form-group" ]
            [ label [ class "form-group__full-input-label" ] [ text "Password" ]
            , input [ type' "password", class "form-group__full-input", onInput Password ] []
            , helpText "password" model
            ]
        , div [ class "form-group" ]
            [ label [ class "form-group__full-input-label" ] [ text "Password confirmation" ]
            , input [ type' "password", class "form-group__full-input", onInput PasswordConfirmation ] []
            , helpText "passwordConfirmation" model
            ]
        , div [ class "form-group form-group--last" ]
            [ button [ type' "submit" ] [ text "Salvar" ]
            ]
        ]


helpText : String -> Model -> Html Msg
helpText field model =
    let
        errors =
            Dict.get field model.errors

        markup =
            case errors of
                Nothing ->
                    text ""

                Just messages ->
                    if Set.isEmpty messages then
                        text ""
                    else
                        div [ class "help-block" ]
                            [ messages
                                |> Set.toList
                                |> String.join ", "
                                |> text
                            ]
    in
        markup