-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.elm
99 lines (84 loc) · 2.78 KB
/
form.elm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import Char exposing (isDigit, isUpper)
main : Program Never Model Msg
main =
Html.beginnerProgram { model = model, view = view, update = update}
-- MODEL
type alias Model =
{ name : String,
age : Int,
password : String,
passwordAgain : String,
clicked : Bool
}
model : Model
model =
Model "" -1 "" "" False
-- UPDATE
type Msg =
Name String
| Age String
| Password String
| PasswordAgain String
| Clicked
update : Msg -> Model -> Model
update msg model =
case msg of
Name name ->
{ model | name = name }
Age age ->
{model | age = Result.withDefault -1 (String.toInt age)}
Password password ->
{ model | password = password }
PasswordAgain password ->
{ model | passwordAgain = password }
Clicked ->
{ model | clicked = True }
-- VIEW
inputClass : Html.Attribute msg
inputClass =
class "b mv3 ph3 pv2 input-reset ba b--black bg-black-70 white grow point db"
submitClass : Html.Attribute msg
submitClass =
class "b b--blue mv3 ph3 pv2 input-reset ba bg-blue grow pointer db"
view : Model -> Html Msg
view model =
div [class ""]
[
Html.h1 [class "tc h1 pb5"] [text "Password validator"]
, div [class "ba br3 b--black-50 pa2 measure center bg-black-10"] [
input [inputClass, type_ "text", placeholder "Name", onInput Name] [],
input [inputClass, type_ "text", placeholder "Age", onInput Age] [],
input [inputClass, type_ "password", placeholder "Password", onInput Password] [],
input [inputClass, type_ "password", placeholder "Re-enter Password", onInput PasswordAgain] [],
input [submitClass, type_ "submit", value "Check password", onClick Clicked] [],
viewValidation model
]
]
passValid : String -> Bool
passValid str =
let
len = String.length str >= 8
digit = String.any isDigit str
upper = String.any isUpper str
in
len && digit && upper
viewValidation : Model -> Html msg
viewValidation model =
let
(color, message) =
if model.password /= model.passwordAgain then
("yellow", "Passwords do not match")
else if not (passValid model.password) then
("red", "Password must include uppercase, digits, and > 8" )
else if (model.age < 1) || (model.age > 150) then
("pink", "Invalid age" )
else
("green", "Valid Password")
in
if model.clicked then
div [class ("ba br3 b--" ++ color ++ " pa3 bg-light-" ++ color)] [div [] [text message]]
else
div [] []