forms.elm

-- Input a user name and password. Make sure the password matches.
--
-- Read how it works:
--   https://guide.elm-lang.org/architecture/forms.html
--

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



-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL


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


init : Model
init =
  Model "" "" "" "" False



-- UPDATE


type Msg
  = Name String
  | Age String
  | Password String
  | PasswordAgain String
  | Submit


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

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }
      
    Submit ->
      { model | submit = True }



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Name" model.name Name
    , viewInput "text" "Age" model.age Age
    , viewInput "password" "Password" model.password Password
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
    , div [] [ button [ onClick Submit ] [ text "Submit" ] ]
    , model |> checkSubmit  (checkPass >> htmlPassStates)
    ]

-- 

viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []

checkSubmit  :  (Model -> Html msg) -> Model -> Html msg
checkSubmit f m =
  if m.submit
  then f m
  else div [] []

-- 
type alias PassStates =
  { validation : Result String String
  , length : Result String String
  , lsd : Result String String
  , age : Result String String
  }

htmlPassStates : PassStates -> Html Msg
htmlPassStates p =
  div []
    [ htmlPassState p.validation "Validation: "
    , htmlPassState p.age "age: "
    , htmlPassState p.length "Length: "
    , htmlPassState p.lsd "lsd: "
    ]

htmlPassState : Result String String -> String -> Html msg
htmlPassState r s =
  case r of
  Ok o -> div [ style "color" "green" ] [ text (s ++ o) ]
  Err e ->div [ style "color" "red" ] [ text (s ++ e) ]

-- 
checkPass : Model -> PassStates
checkPass m =
  { validation = checkPassValidation m
  , length = checkPassLength m
  , lsd = checkPassLsd m
  , age = checkAge m
  }

checkPassValidation : Model -> Result String String
checkPassValidation m =
  if m.password == m.passwordAgain && (String.isEmpty m.password |> Basics.not)
  then Ok "OK"
  else Err "Passwords do not match!"

checkPassLength : Model -> Result String String
checkPassLength m =
  if String.length m.password >= 8 && (String.isEmpty m.password |> Basics.not)
  then Ok "OK"
  else Err "more length"

checkPassLsd : Model -> Result String String
checkPassLsd m =
  let s = m.password in
  if String.any Char.isDigit s
    && String.any Char.isUpper s
    && String.any Char.isLower s
    && (String.isEmpty m.password |> Basics.not)
  then Ok "OK"
  else Err "contain a char that is Upper, Lower, Digit"
  
checkAge : Model -> Result String String
checkAge m =
  if String.isEmpty m.age
  then Err "input age"
  else if (String.all Char.isDigit m.age |> Basics.not)
  then Err "must just positive digit"
  else if (String.toInt m.age |> Maybe.withDefault 0) > 135
  then Err "Are you some kind of turtle?"
  else Ok "OK"