Customize the text Input for getting the user name and password in R Shiny

Question

I am currently developing a shiny application. I need to have a login module at the beginning of the application. I have a desired output.

But I don't get the output as shown above.

This is the code used in ui.R

library(shiny)
library(shinyWidgets)
shinyUI(
  fluidPage(
    setBackgroundColor(color = "#29667a"),
    fluidRow(
      column(8, align = "center", offset = 2,
             textInput("name", label = " ", value = " ",width = "45%"),
             tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center;
                        font-size: 30px; display: block;}")
      )
    ),
    fluidRow(
      column(8, align = "center", offset = 2,
             textInput("password", label = " ", value = " ",width = "45%"),
             tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center;
                        font-size: 30px; display: block;}")
      )
    ),
    fluidRow(
      column(6, align = "center", offset = 3,
             actionButton("login",label = "Login", width = "60%")),
      tags$style(type = 'text/css',"#button { vertical-align: middle; height: 50px;
                 width: 100%; font-size: 30px;}"))
    )

  )

Can anyone say how to add the icons to the username and password boxes and have an hyperlink at the bottom of the action button. In addition to it, the input boxes are to be displayed at the middle of the page. But it gets displayed at the top of the page.

Please give a solution for this requirements.

Thanks in advance!!

The screenshot is obtained from the similar application developed earlier in PHP. — Nevedha Ayyanar, Mar 11 '19 at 07:43
For the password field, see https://stackoverflow.com/a/28987713/5785085 — CIAndrews, Mar 11 '19 at 07:46
@NevedhaAyyanar see my answer [here](https://stackoverflow.com/questions/40985684/r-shiny-present-a-shinybs-modal-popup-on-page-visit-no-user-action/50807446#50807446), it may help — A. Suliman, Mar 11 '19 at 09:07
[check](https://paul.rbind.io/2018/11/04/introducing-shinyauthr/) this awesome blogpost by Paul Campbell for authentication in shiny. — msr_003, Mar 11 '19 at 10:11

amrrs · Accepted Answer · 2019-03-11T09:52:23.177

Updated Answer. Based on the comment. The source code of shinyWidgets has been used to create a custom function that accepts both Icon and Password.

library(shiny)
library(shinyWidgets)
library(fontawesome)



## Modifying inbuilt textInputAddon to accept password of shinyWidgets 

## blantantly copied: https://github.com/dreamRs/shinyWidgets/blob/master/R/utils.R
`%AND%` <- function (x, y) {
  if (!is.null(x) && !anyNA(x))
    if (!is.null(y) && !anyNA(y))
      return(y)
  return(NULL)
}

## blantantly copied: https://github.com/dreamRs/shinyWidgets/blob/master/R/input-textaddon.R

passwordInputAddon <- function (inputId, label, value = "", placeholder = NULL, addon, width = NULL)
{
  value <- shiny::restoreInput(id = inputId, default = value)
  htmltools::tags$div(
    class = "form-group shiny-input-container",
    label %AND% htmltools::tags$label(label, `for` = inputId),
    style = if (!is.null(width)) paste0("width: ", htmltools::validateCssUnit(width), ";"),
    htmltools::tags$div(
      style = "margin-bottom: 5px;", class="input-group",
      addon %AND% htmltools::tags$span(class="input-group-addon", addon),
      htmltools::tags$input(
        id = inputId, type = "password", class = "form-control",
        value = value, placeholder = placeholder
      )
    )
  )
}



ui <- shinyUI(
  fluidPage(
    tags$style(".container-fluid {margin-top: 20%}"),
    setBackgroundColor(color = "#29667a"),

      fluidRow(
        column(8, align = "center", offset = 2,
               textInputAddon("name", label = "", placeholder = "Username", addon = icon("user"),width = "45%"),
               tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center;
                        font-size: 30px; display: block;}")
        )
      ),
      fluidRow(
        column(8, align = "center", offset = 2,
               passwordInputAddon("password", label = "", placeholder = "Password", addon = icon("key"),width = "45%"),               tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center;
                        font-size: 30px; display: block;}")
        )
      ),
      fluidRow(
        column(6, align = "center", offset = 3,
               actionButton("login",label = "Login", width = "60%"))    ),
      fluidRow(
        column(6, align = "center", offset = 3,
               tags$div(HTML("<a href='https://www.github.com'> Forgot Password? </a>"))
        ))
    )






)

server <- function(input, output){

}

shinyApp(ui,server)

Instead of using the text input we can use textInputAddon() to add the icon to the input control.Something like this `textInputAddon("name", label = " ", value = " ",width = "45%",addon = icon("user"))` . If the same is used for password also, then how to mask the password with bullets? — Nevedha Ayyanar, Mar 11 '19 at 08:52

Customize the text Input for getting the user name and password in R Shiny

1 Answers1