I am creating a Shiny app with a login. For this I'm using the passwordInput function to let the user fill their password:
library(shiny)
ui <- fluidPage(
passwordInput("password", "Password:"),
actionButton("login", "Login"),
)
server <- function(input, output) {
}
shinyApp(ui, server)
Output:
Unfortunately, as you can see, there is no option to check what you have typed. Does anyone know how to add an eye icon to the password input so you can check what you have typed?
passwordInput("password", "Password:") creates a label and input tag
<label class="control-label" id="password-label" for="password">Password:</label>
<input id="password" type="password" class="shiny-input-password form-control shiny-bound-input" value="" data-update-on="change">
This post provides more detail and also a minimal solution for all browsers. I just translated this to shiny using an actionButton and some CSS for alignments. The icon-vignette ?shiny::icon links "lists of available icons https://fontawesome.com/icons (...)". You can toggle the icon-class on a button-click, which will make it appear as if the eye is crossed-out. Feel free to change the eye-icons as per your requirements.
library(shiny)
ui <- fluidPage(
div(class = "password-container", style = "display: flex; align-items: center;",
passwordInput("password", "Password:"),
actionButton("togglePassword", "",
icon = icon("eye-slash"),
style = "border: 0px; margin-top: 10px;",
class = "password-toggle",
onclick = "
// select the input text field by its ID assigned in passwordInput ('password' in this case)
const passwordField = $('#password');
const icon = $(this).find('i');
const isPassword = passwordField.attr('type') === 'password';
passwordField.attr('type', isPassword ? 'text' : 'password');
icon.toggleClass('fa-eye fa-eye-slash');
")
),
actionButton("login", "Login")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
passwordInputdoesn't do what you want, why not have your owninput[type="password"]? "you can normally check with the eye icon" - only if someone has added that button and toggled totype="text".