9

I am planning to make a log-in for my application. For that I need a password field. I am not aware if shiny is even used for this purpose but still is it possible?

#code for a simple text box is 
textInput("id","label","value")

But is there a password field possible?

Aman Mathur
  • 709
  • 2
  • 15
  • 27

2 Answers2

5

Also, in the meantime there's a native 

passwordInput("passwd",label = "Enter password")

password input in shiny. This feature is available in shiny 0.11.1. Here's your reproducible example:

library(shiny)
shinyApp(ui = fluidPage(

tabPanel("Login",
       br(),
       tags$form(
         passwordInput("passwd",label = "Enter password"),
         submitButton("send passwd to shiny")
       ),
       textOutput("pwd")

 )
),
server = function(input, output,session) {

output$pwd <- renderText({
paste0("Your PW is: ",input$passwd)
})


})

Note, that the password is in the session then I am not so sure, how to erase the password from input$passwd after login was successful.

Matt Bannert
  • 27,631
  • 38
  • 141
  • 207
  • Your answer makes the pwd field to be in the top left corner of the page, how do you move it to the center? – Xavier Prudent Nov 16 '16 at 22:31
  • @XavierPrudent that depends on the template you're using. If you're not into HTML/CSS I'd recommend to use another package that helps out with the front end. Check https://rstudio.github.io/shinydashboard/ . The structure part of the documentation where it talks about rows and cols should help. – Matt Bannert Jan 30 '17 at 07:19
4

Shiny patch to enable password handling:

Install using library(devtools)

install_github("shiny","alexbbrown",ref="password-field")

Or download and install manually from:

https://github.com/alexbbrown/shiny/tree/password-field

Or patch your shiny manually:

index 9b63c7b..15377d8 100644
--- a/inst/www/shared/shiny.js
+++ b/inst/www/shared/shiny.js
@@ -1336,7 +1336,7 @@
   var textInputBinding = new InputBinding();
   $.extend(textInputBinding, {
     find: function(scope) {
-      return $(scope).find('input[type="text"]');
+      return $(scope).find('input[type="text"],input[type="password"]');
     },
     getId: function(el) {
       return InputBinding.prototype.getId.call(this, el) || el.name;

Usage

I haven't provided a convenience function to make password fields, but it can be done easily using R/Shiny html tags:

tags$input(id="password",type="password",placeholder="Password")
Alex Brown
  • 41,819
  • 10
  • 94
  • 108
  • BTW, installing this patch caused R to return an error with library(shiny) is called. Restarting the R session fixed it, however. – R-Enthusiast Dec 29 '15 at 23:43