How to edit the text area, font and password mask in a R Shiny shinyauthr login page

Question

How can 1) the text area, 2) font and 3) password mask colours, be edited in a R Shiny shinyauthr login page please? I am keen to explore ‘inline’ style editing options if possible.

The sample code below is lifted directly from ‘https://rdrr.io/cran/shinyauthr/man/loginUI.html’; my real code is running with a bs4dash dashboard and the login fields are inheriting a dark background with dark font and password mask.

library(shiny)
library(shinyauthr)

user_base <- dplyr::tibble(
  user = c("user1", "user2"),
  password = c("pass1", "pass2"),
  permissions = c("admin", "standard"),
  name = c("User One", "User Two")
)

ui <- fluidPage(
  div(class = "pull-right", shinyauthr::logoutUI(id = "logout")),
  shinyauthr::loginUI(id = "login"),
  tableOutput("user_table")
)


server <- function(input, output, session) {
  
  credentials <- shinyauthr::loginServer(
    id = "login",
    data = user_base,
    user_col = user,
    pwd_col = password,
    log_out = reactive(logout_init())
  )

  logout_init <- shinyauthr::logoutServer(
    id = "logout",
    active = reactive(credentials()$user_auth)
  )

  output$user_table <- renderTable({
    req(credentials()$user_auth)
    credentials()$info
  })

}
shinyApp(ui = ui, server = server)

user_4550695 · Answer

It looks like shinyauthr doesn't apply any helpful CSS classes to the generated login panel, so you'll need to make your own to be able to select the elements of interest. I'd probably wrap the loginUI in a div, and then target the input elements within that div.

A bare-bones example:

library(shiny)
library(shinyauthr)

ui <- fluidPage(
  tags$style(".login-ui input { color: #fff; background: tomato }"),
  div(class = "login-ui", shinyauthr::loginUI(id = "login")),
)

server <- function(input, output, session) {
  shinyauthr::loginServer("login", data = data.frame())
}

shinyApp(ui, server)

How to edit the text area, font and password mask in a R Shiny shinyauthr login page

1 Answers