password.elm

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onBlur, onFocus)



-- MAIN


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



-- MODEL


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


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



-- UPDATE


type Msg
  = Name String
  | Password String
  | PasswordAgain String
  | EnteredPassword
  | FinishedPassword
  | Nil


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

    Password password ->
      { model | password = password, startedPassword = True }

    PasswordAgain password ->
      { model | passwordAgain = password }
      
    EnteredPassword -> 
      { model | finishedPassword = False }
      
    FinishedPassword -> 
      { model | finishedPassword = model.startedPassword }
      
    Nil -> 
      model



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Name" model.name Name Nil Nil
    , viewInput "password" "Password" model.password Password EnteredPassword FinishedPassword
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain EnteredPassword FinishedPassword
    , viewValidation model
    ]


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


viewValidation : Model -> Html msg
viewValidation model =
  if not model.finishedPassword then
    div [] []
  else if String.length model.password < 8 then
    div [ style "color" "red" ] [ text "Enter a valid password."]
  else if model.password == model.passwordAgain then
    div [ style "color" "green" ] [ text "OK" ]
  else
    div [ style "color" "red" ] [ text "Passwords do not match!" ]
    
valid : String -> Bool
valid password =
  String.length password >= 8 &&
  String.any Char.isDigit password &&
  String.any Char.isUpper password &&
  String.any Char.isLower password