Adds password input

src/Nri/Ui/TextInput/V5.elm

@@ -2,8 +2,7 @@ module Nri.Ui.TextInput.V5 exposing
     ( Model
     , view, writing
     , generateId
-    , number
-    , text
+    , number, text, password
     )
 
 {-|
@@ -20,8 +19,7 @@ module Nri.Ui.TextInput.V5 exposing
 
 ## Input types
 
-@docs number
-@docs text
+@docs number, text, password
 
 -}
 
@@ -81,6 +79,17 @@ number =
         }
 
 
+{-| An input that allows password entry
+-}
+password : InputType String
+password =
+    InputType
+        { toString = identity
+        , fromString = identity
+        , fieldType = "password"
+        }
+
+
 {-| -}
 view : Model value msg -> Html msg
 view model =

styleguide-app/Examples/TextInput.elm

@@ -17,12 +17,14 @@ import Nri.Ui.TextInput.V5 as TextInput
 type Msg
     = SetTextInput Id String
     | SetNumberInput (Maybe Int)
+    | SetPassword String
 
 
 {-| -}
 type alias State =
     { numberInputValue : Maybe Int
     , textInputValues : Dict Id String
+    , passwordInputValue : String
     }
 
 
@@ -58,6 +60,18 @@ example parentMessage state =
                     , showLabel = True
                     }
                 , Html.br [] []
+                , TextInput.view
+                    { label = "Password"
+                    , isInError = False
+                    , placeholder = ""
+                    , value = state.passwordInputValue
+                    , onInput = SetPassword
+                    , onBlur = Nothing
+                    , autofocus = False
+                    , type_ = TextInput.password
+                    , showLabel = True
+                    }
+                , Html.br [] []
                 , TextInput.view
                     { label = "Error"
                     , isInError = True
@@ -151,6 +165,7 @@ init : State
 init =
     { numberInputValue = Nothing
     , textInputValues = Dict.empty
+    , passwordInputValue = ""
     }
 
 
@@ -164,6 +179,9 @@ update msg state =
         SetNumberInput numberInputValue ->
             ( { state | numberInputValue = numberInputValue }, Cmd.none )
 
+        SetPassword password ->
+            ( { state | passwordInputValue = password }, Cmd.none )
+
 
 
 -- INTERNAL