Search code examples
rshinyrecaptcha

shinyCaptcha. How to customize my own button?

The example code for shinyCaptcha documentation works well.

library(shiny)
library(shinyCAPTCHA)

ui <- fluidPage(
  recaptchaUI("test", sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"),
  uiOutput("body")
)

server <- function(input, output, session) {
  
  result <- callModule(recaptcha, "test", secret = "6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe")
  
  output$body <- renderUI({
    fluidPage(
    uiOutput("humansOnly")
    )
    
  })  
  
  output$humansOnly <- renderUI({
    req(result()$success)
    tags$h1("For human eyes only!")
  })
  
}

shinyApp(ui, server)

It shows:

enter image description here

The app includes the button and I cannot change it. I want to use my own button, change the label, the location, etc. is there any way to do it?

Thanks!

Solution

  • The code of recaptchaUI is:

    recaptchaUI <- function(id, sitekey = Sys.getenv("recaptcha_sitekey"), ...) {
  ns <- NS(id)
  
  tagList(tags$div(
    ......,
    tags$form(
      class = "shinyCAPTCHA-form",
      action = "?",
      method = "POST",
      tags$div(class = "g-recaptcha", `data-sitekey` = sitekey, `data-callback` = I("shinyCaptcha")),
      tags$br(),
      tags$input(type = "submit", ...)
    )
  ))
}

    The button corresponds to tags$input(type = "submit", ...). As you can see, it takes the arguments given in the ellipsis .... So, to change the text displayed on the button, you can use the value attribute of the submit button like this:

    recaptchaUI(
  "test", 
  sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
  value = "the text you want"
)

    To change the style (color etc), use the style attribute:

    recaptchaUI(
  "test", 
  sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
  value = "the text you want",
  style = "color: red; background-color: yellow;"
)

    To change the location of the button, for example to move it to the right, you can use the CSS property margin-left:

    recaptchaUI(
  "test", 
  sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
  value = "the text you want",
  style = "color: red; background-color: yellow; margin-left: 50px;"
)