Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save garettarrowood/1d55d2791fa2994d0674409d2e0cd5f1 to your computer and use it in GitHub Desktop.
Save garettarrowood/1d55d2791fa2994d0674409d2e0cd5f1 to your computer and use it in GitHub Desktop.
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onSubmit)
import String exposing (..)
import Char exposing (..)
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update
}
-- MODEL
type alias Model =
{ name : String
, password : String
, passwordAgain : String
, age : Int
}
model : Model
model =
Model "" "" "" 0
-- UPDATE
type Msg
= Name String
| Password String
| PasswordAgain String
| Age String
| Validate
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 }
Age age ->
{ model | age = String.toInt age |> Result.toMaybe |> Maybe.withDefault 0 }
Validate ->
viewValidation model
-- VIEW
view : Model -> Html Msg
view model =
div []
[ input [ type' "text", placeholder "Name", onInput Name ] []
, input [ type' "password", placeholder "Password", onInput Password ] []
, input [ type' "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
, input [ type' "number", placeholder "Age", onInput Age ] []
, button [ type' "submit", onSubmit Validate ] [ text "Submit" ]
]
viewValidation : Model -> Html msg
viewValidation model =
let
(color, message) =
if passwordBlank model then
("blue", "Please enter password")
else if passwordMinLength model then
("red", "Password must be 8 or more characters")
else if model.password /= model.passwordAgain then
("red", "Passwords do not match")
else if passwordHasNumber model then
("red", "Password must contain at least one digit")
else if passwordCaseCheck model then
("red", "Password must contain upper and lower case characters")
else if model.age < 21 then
("red", "You must be at least 21 to sign up")
else if model.name == "" then
("red", "You must input your name")
else
("green", "Your password passes validations")
in
div [ style [("color", color)] ] [ text message ]
passwordMinLength : Model -> Bool
passwordMinLength model =
length model.password < 8
passwordBlank : Model -> Bool
passwordBlank model =
model.password == ""
passwordHasNumber : Model -> Bool
passwordHasNumber model =
any isDigit model.password == False
passwordCaseCheck : Model -> Bool
passwordCaseCheck model =
(any isUpper model.password && any isLower model.password) == False
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment