Onclick Hide/Unhide in Shiny

Question

Below is a screenshot of my Shiny app, I have created a simple login page to give access rights to the data only to the authenticated users. But I have the following issues,

1. Unable to hide the Mainpanel on the start of the app, meaning- the mainpanel should be hidden on the start of the app and should be visible only after Login button is pressed.

2. After the mainpanel is visible the sidebar where the Username, Password and Login button should be hidden.

   

UI.R

library(shiny)
library(shinyjs)

shinyUI(fluidPage(
 useShinyjs(),
 titlePanel(
 fluidRow(  
column(9, h1("VHMS")),
column(1, img(src = '2.png', width = 100))), windowTitle = "my"),

br(),
br(),
br(),
br(),
sidebarLayout(

sidebarPanel(
             textInput("Username", "Username"),
             passwordInput("Password", "Password"),
             actionButton("Login", "Login")),position = "right",


mainPanel(

  fluidRow( column(12,

 (tabsetPanel("views", type = "tabs",
                 tabPanel("TableView", dataTableOutput("df_directions")),
                 tabPanel("MapView", dataTableOutput("df_locations"))
  )


  )
  )
  )         
  ) 
  )
  )
 )

Server.R

library(shiny)
library(shinyjs)
useShinyjs()
shinyServer(function(input, output) {
output$df_directions <-   renderDataTable({
json_data1 }, options = list(scrollX = TRUE))  
})

I'am able to address my issues individually but I am not able to integrate my Hide/Show login into a single script.

Answer 1

Here is your code modified to hide the main panel until the user make click on "Login". It still needs to validate the username and password.

library(shiny)
library(shinyjs)

ui <- shinyUI(fluidPage(
  useShinyjs(),
  titlePanel(
    fluidRow(  
      column(9, h1("VHMS")),
      column(1, img(src = '2.png', width = 100))
    ), 
    windowTitle = "my"
  ),
  br(),
  br(),
  br(),
  br(),
  sidebarLayout(
    sidebarPanel( id = "loginID",
             textInput("Username", "Username"),
             passwordInput("Password", "Password"),
             actionButton("Login", "Login")
    ),
    position = "right",
    shinyjs::hidden(
      mainPanel( id = "panelID",
        fluidRow( 
          column(12,
            tabsetPanel("views", type = "tabs",
                       tabPanel("TableView", dataTableOutput("df_directions")),
                       tabPanel("MapView", dataTableOutput("df_locations"))
            )
          )
        )         
      ) 
    )
  )
))

server <- shinyServer(function(input, output) {
  output$df_directions <- renderDataTable(
    mtcars, 
    options = list(scrollX = TRUE)
  )  

  observeEvent(input$Login, {
    # TODO: verify username and password
    shinyjs::hide("loginID")
    shinyjs::show("panelID")
  })
})

shinyApp(ui = ui, server = server)