mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 04:07:54 +03:00
add visibilityToggleId to password inputs
This commit is contained in:
charbelrami
parent
942370c66b
commit
d209d789f0
@ -105,6 +105,16 @@ example =
|
||||
}
|
||||
|
||||
|
||||
newPasswordVisibilityToggleId : String
|
||||
newPasswordVisibilityToggleId =
|
||||
"text-input__newPassword-example__visibility-toggle"
|
||||
|
||||
|
||||
currentPasswordVisibilityToggleId : String
|
||||
currentPasswordVisibilityToggleId =
|
||||
"text-input__currentPassword-example__visibility-toggle"
|
||||
|
||||
|
||||
customizableExamples : State -> List ( String, String, Html Msg )
|
||||
customizableExamples state =
|
||||
let
|
||||
@ -206,16 +216,44 @@ customizableExamples state =
|
||||
\onInput ->
|
||||
TextInput.newPassword
|
||||
{ onInput = onInput
|
||||
, showPassword = state.showPassword
|
||||
, setShowPassword = SetShowPassword
|
||||
, showPassword = state.showNewPassword
|
||||
, setShowPassword = SetShowNewPassword
|
||||
, visibilityToggleId = newPasswordVisibilityToggleId
|
||||
}
|
||||
, inputTypeCode =
|
||||
"""TextInput.newPassword <|
|
||||
\\onInput ->
|
||||
TextInput.newPassword
|
||||
{ onInput = onInput
|
||||
, showPassword = model.showPassword -- pass in whether the PW should be shown as plaintext. You'll need to wire this in.
|
||||
, setShowPassword = SetShowPassword -- You'll need to wire this in before the code will compile
|
||||
, showNewPassword = model.showNewPassword -- pass in whether the PW should be shown as plaintext. You'll need to wire this in.
|
||||
, setShowNewPassword = SetShowNewPassword -- You'll need to wire this in before the code will compile
|
||||
, visibilityToggleId = newPasswordVisibilityToggleId
|
||||
}
|
||||
"""
|
||||
, inputTypeValueCode = \value -> Code.string (Maybe.withDefault "" value)
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "currentPassword"
|
||||
, toString = identity
|
||||
, inputType =
|
||||
\onInput ->
|
||||
TextInput.currentPassword
|
||||
{ onInput = onInput
|
||||
, showPassword = state.showCurrentPassword
|
||||
, setShowPassword = SetShowCurrentPassword
|
||||
, visibilityToggleId = currentPasswordVisibilityToggleId
|
||||
}
|
||||
, inputTypeCode =
|
||||
"""TextInput.currentPassword <|
|
||||
\\onInput ->
|
||||
TextInput.currentPassword
|
||||
{ onInput = onInput
|
||||
, showPassword = model.showCurrentPassword -- pass in whether the PW should be shown as plaintext. You'll need to wire this in.
|
||||
, setShowPassword = SetShowCurrentPassword -- You'll need to wire this in before the code will compile
|
||||
, visibilityToggleId = currentPasswordVisibilityToggleId
|
||||
}
|
||||
"""
|
||||
, inputTypeValueCode = \value -> Code.string (Maybe.withDefault "" value)
|
||||
@ -383,7 +421,8 @@ customizableExamples state =
|
||||
{-| -}
|
||||
type alias State =
|
||||
{ inputValues : Dict Int String
|
||||
, showPassword : Bool
|
||||
, showNewPassword : Bool
|
||||
, showCurrentPassword : Bool
|
||||
, control : Control ExampleConfig
|
||||
}
|
||||
|
||||
@ -392,7 +431,8 @@ type alias State =
|
||||
init : State
|
||||
init =
|
||||
{ inputValues = Dict.empty
|
||||
, showPassword = False
|
||||
, showNewPassword = False
|
||||
, showCurrentPassword = False
|
||||
, control = initControl
|
||||
}
|
||||
|
||||
@ -454,7 +494,8 @@ controlAttributes =
|
||||
{-| -}
|
||||
type Msg
|
||||
= SetInput Int String
|
||||
| SetShowPassword Bool
|
||||
| SetShowNewPassword Bool
|
||||
| SetShowCurrentPassword Bool
|
||||
| UpdateControl (Control ExampleConfig)
|
||||
| Focused (Result Dom.Error ())
|
||||
| Blurred (Result Dom.Error ())
|
||||
@ -469,12 +510,22 @@ update msg state =
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
SetShowPassword showPassword ->
|
||||
( { state | showPassword = showPassword }
|
||||
SetShowNewPassword showNewPassword ->
|
||||
( { state | showNewPassword = showNewPassword }
|
||||
, Cmd.batch
|
||||
[ Task.attempt Blurred (Dom.blur "text-input__newPassword-example__visibility-toggle")
|
||||
[ Task.attempt Blurred (Dom.blur newPasswordVisibilityToggleId)
|
||||
, Process.sleep 0
|
||||
|> Task.andThen (\_ -> Dom.focus "text-input__newPassword-example__visibility-toggle")
|
||||
|> Task.andThen (\_ -> Dom.focus newPasswordVisibilityToggleId)
|
||||
|> Task.attempt Focused
|
||||
]
|
||||
)
|
||||
|
||||
SetShowCurrentPassword showCurrentPassword ->
|
||||
( { state | showCurrentPassword = showCurrentPassword }
|
||||
, Cmd.batch
|
||||
[ Task.attempt Blurred (Dom.blur currentPasswordVisibilityToggleId)
|
||||
, Process.sleep 0
|
||||
|> Task.andThen (\_ -> Dom.focus currentPasswordVisibilityToggleId)
|
||||
|> Task.attempt Focused
|
||||
]
|
||||
)
|
||||
|
||||
@ -18,7 +18,7 @@ module Nri.Ui.TextInput.V7 exposing
|
||||
|
||||
- no longer defaults the placeholder value to the label text
|
||||
- Adjust disabled styles
|
||||
- add `passwordVisibilityToggleId`
|
||||
- add `visibilityToggleId`
|
||||
|
||||
|
||||
# Changes from V6
|
||||
@ -167,6 +167,7 @@ newPassword :
|
||||
{ onInput : String -> msg
|
||||
, showPassword : Bool
|
||||
, setShowPassword : Bool -> msg
|
||||
, visibilityToggleId : String
|
||||
}
|
||||
-> Attribute String msg
|
||||
newPassword =
|
||||
@ -185,6 +186,7 @@ currentPassword :
|
||||
{ onInput : String -> msg
|
||||
, showPassword : Bool
|
||||
, setShowPassword : Bool -> msg
|
||||
, visibilityToggleId : String
|
||||
}
|
||||
-> Attribute String msg
|
||||
currentPassword =
|
||||
@ -197,6 +199,7 @@ password :
|
||||
{ onInput : String -> msg
|
||||
, showPassword : Bool
|
||||
, setShowPassword : Bool -> msg
|
||||
, visibilityToggleId : String
|
||||
}
|
||||
-> Attribute String msg
|
||||
password autocomplete settings =
|
||||
@ -205,7 +208,7 @@ password autocomplete settings =
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just settings.onInput
|
||||
, floatingContent =
|
||||
, passwordFloatingContent =
|
||||
Just <|
|
||||
viewPasswordFloatingContent
|
||||
(if settings.showPassword then
|
||||
@ -229,6 +232,7 @@ password autocomplete settings =
|
||||
, autocomplete = Just autocomplete
|
||||
, inputCss = Css.paddingRight (Css.px 135) :: config.inputCss
|
||||
, isPassword = True
|
||||
, passwordVisibilityToggleId = Just settings.visibilityToggleId
|
||||
}
|
||||
)
|
||||
|
||||
@ -724,6 +728,7 @@ type alias EventsAndValues value msg =
|
||||
, onBlur : Maybe msg
|
||||
, onEnter : Maybe msg
|
||||
, floatingContent : Maybe (FloatingContentConfig msg -> Html msg)
|
||||
, passwordFloatingContent : Maybe (PasswordFloatingContentConfig msg -> Html msg)
|
||||
}
|
||||
|
||||
|
||||
@ -737,6 +742,7 @@ emptyEventsAndValues =
|
||||
, onEnter = Nothing
|
||||
, onInput = Nothing
|
||||
, floatingContent = Nothing
|
||||
, passwordFloatingContent = Nothing
|
||||
}
|
||||
|
||||
|
||||
@ -752,6 +758,7 @@ map f toString (Attribute eventsAndValues configF) =
|
||||
, onEnter = eventsAndValues.onEnter
|
||||
, onInput = eventsAndValues.onInput
|
||||
, floatingContent = eventsAndValues.floatingContent
|
||||
, passwordFloatingContent = eventsAndValues.passwordFloatingContent
|
||||
}
|
||||
configF
|
||||
|
||||
@ -777,6 +784,7 @@ type alias Config msg =
|
||||
, inputMode : Maybe String
|
||||
, autocomplete : Maybe String
|
||||
, isPassword : Bool
|
||||
, passwordVisibilityToggleId : Maybe String
|
||||
}
|
||||
|
||||
|
||||
@ -800,6 +808,7 @@ emptyConfig =
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Nothing
|
||||
, isPassword = False
|
||||
, passwordVisibilityToggleId = Nothing
|
||||
}
|
||||
|
||||
|
||||
@ -830,6 +839,7 @@ applyEvents =
|
||||
, onFocus = orExisting .onFocus eventsAndValues existing
|
||||
, onBlur = orExisting .onBlur eventsAndValues existing
|
||||
, floatingContent = orExisting .floatingContent eventsAndValues existing
|
||||
, passwordFloatingContent = orExisting .passwordFloatingContent eventsAndValues existing
|
||||
, onEnter = orExisting .onEnter eventsAndValues existing
|
||||
, onInput = orExisting .onInput eventsAndValues existing
|
||||
}
|
||||
@ -973,24 +983,34 @@ view label attributes =
|
||||
, theme = config.inputStyle
|
||||
}
|
||||
config
|
||||
, Maybe.map2
|
||||
(\view_ onStringInput_ ->
|
||||
view_
|
||||
{ label = label
|
||||
, stringValue = stringValue
|
||||
, onInput = onStringInput_
|
||||
, noMarginTop = config.noMarginTop
|
||||
, passwordVisibilityToggleId =
|
||||
if config.isPassword then
|
||||
Just idValue |> Maybe.map (\id_ -> id_ ++ "__visibility-toggle")
|
||||
, if config.isPassword then
|
||||
Maybe.map2
|
||||
(\view_ onStringInput_ ->
|
||||
view_
|
||||
{ label = label
|
||||
, stringValue = stringValue
|
||||
, onInput = onStringInput_
|
||||
, noMarginTop = config.noMarginTop
|
||||
, visibilityToggleId = Maybe.withDefault "" config.passwordVisibilityToggleId
|
||||
}
|
||||
)
|
||||
eventsAndValues.passwordFloatingContent
|
||||
eventsAndValues.onInput
|
||||
|> Maybe.withDefault (Html.text "")
|
||||
|
||||
else
|
||||
Nothing
|
||||
}
|
||||
)
|
||||
eventsAndValues.floatingContent
|
||||
eventsAndValues.onInput
|
||||
|> Maybe.withDefault (Html.text "")
|
||||
else
|
||||
Maybe.map2
|
||||
(\view_ onStringInput_ ->
|
||||
view_
|
||||
{ label = label
|
||||
, stringValue = stringValue
|
||||
, onInput = onStringInput_
|
||||
, noMarginTop = config.noMarginTop
|
||||
}
|
||||
)
|
||||
eventsAndValues.floatingContent
|
||||
eventsAndValues.onInput
|
||||
|> Maybe.withDefault (Html.text "")
|
||||
]
|
||||
++ InputErrorAndGuidanceInternal.view idValue InputErrorAndGuidanceInternal.smallMargin config
|
||||
)
|
||||
@ -1009,7 +1029,15 @@ type alias FloatingContentConfig msg =
|
||||
, stringValue : String
|
||||
, onInput : String -> msg
|
||||
, noMarginTop : Bool
|
||||
, passwordVisibilityToggleId : Maybe String
|
||||
}
|
||||
|
||||
|
||||
type alias PasswordFloatingContentConfig msg =
|
||||
{ label : String
|
||||
, stringValue : String
|
||||
, onInput : String -> msg
|
||||
, noMarginTop : Bool
|
||||
, visibilityToggleId : String
|
||||
}
|
||||
|
||||
|
||||
@ -1060,7 +1088,7 @@ resetButton config =
|
||||
]
|
||||
|
||||
|
||||
viewPasswordFloatingContent : String -> msg -> FloatingContentConfig msg -> Html msg
|
||||
viewPasswordFloatingContent : String -> msg -> PasswordFloatingContentConfig msg -> Html msg
|
||||
viewPasswordFloatingContent label toggle config =
|
||||
if config.stringValue == "" then
|
||||
Html.text ""
|
||||
@ -1071,9 +1099,9 @@ viewPasswordFloatingContent label toggle config =
|
||||
-- adding additional aria attributes connecting this clickable
|
||||
-- text to the password field.
|
||||
ClickableText.button label
|
||||
([ ClickableText.onClick toggle
|
||||
, ClickableText.small
|
||||
, ClickableText.css
|
||||
[ ClickableText.onClick toggle
|
||||
, ClickableText.small
|
||||
, ClickableText.css
|
||||
[ Css.position Css.absolute
|
||||
, Css.right (Css.px 15)
|
||||
, if config.noMarginTop then
|
||||
@ -1083,13 +1111,6 @@ viewPasswordFloatingContent label toggle config =
|
||||
Css.top (Css.px 22)
|
||||
, Css.fontSize (Css.px 13)
|
||||
]
|
||||
, ClickableText.custom [ Attributes.type_ "button" ]
|
||||
]
|
||||
++ (case config.passwordVisibilityToggleId of
|
||||
Just id_ ->
|
||||
[ ClickableText.id id_ ]
|
||||
|
||||
Nothing ->
|
||||
[]
|
||||
)
|
||||
)
|
||||
, ClickableText.custom [ Attributes.type_ "button" ]
|
||||
, ClickableText.id config.visibilityToggleId
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user