Currently I am trying to build up a dashboard that has a login page. To be able to access the dashboard and have your "profile"on the right top of the page, you need to login first.
The username is: maria and the password is mypass.
however, as soon as I run the code and open the login page, the user details and tasks are already visible. How can I fix my code to be able to check the user details and tasks only after the login (just like the logout button)?
I would be very happy If anyone could help me with that. Thank you in advance!
here is my code:
library(shiny)
library(shinydashboard)
library(DT)
library(shinyjs)
library(sodium)
#Code test log in page + dashboard
# Main log in screen
loginpage <- div(id = "loginpage", style = "width: 500px; max-width: 100%; margin: 0 auto; padding: 20px;",
wellPanel(
tags$h2("LOG IN", class = "text-center", style = "padding-top: 0;color:#333; font-weight:600;"),
textInput("userName", placeholder="Username", label = tagList(icon("user"), "Username")),
passwordInput("passwd", placeholder="Password", label = tagList(icon("unlock-alt"), "Password")
),
setBackgroundImage(
src = "https://www.datocms-assets.com/32427/1631000692-image.png?auto=format&max-w=980",
shinydashboard = TRUE
),
br(),
div(
style = "text-align: center;",
actionButton("login", "SIGN IN", style = "color: white; background-color:#3c8dbc;
padding: 10px 15px; width: 150px; cursor: pointer;
font-size: 18px; font-weight: 600;"),
shinyjs::hidden(
div(id = "nomatch",
tags$p("Oops! Incorrect username or password!",
style = "color: red; font-weight: 600;
padding-top: 5px;font-size:16px;",
class = "text-center"))),
br(),
br(),
tags$code(""),
br(),
tags$code("")
)),
)
credentials = data.frame(
username_id = c("maria", "myuser1"),
passod = sapply(c("mypass", "mypass1"),password_store),
permission = c("basic", "advanced"),
stringsAsFactors = F
)
header <- dashboardHeader (title = "Project Rocket Platform", uiOutput("logoutbtn"), userOutput("user"), dropdownMenu(type = "tasks", badgeStatus = "success",
taskItem(value = 100, color = "green",
"Profile Setup"
),
taskItem(value = 100, color = "aqua",
"Introducing Arduino"
),
taskItem(value = 10, color = "yellow",
"My First Project"
),
taskItem(value = 0, color = "red",
"Adicional Tasks"
)
))
sidebar <- dashboardSidebar(uiOutput("sidebarpanel"))
body <- dashboardBody(shinyjs::useShinyjs(), uiOutput("body"))
ui<-dashboardPage(header, sidebar, body, skin = "yellow")
server <- function(input, output, session) {
login = FALSE
USER <- reactiveValues(login = login)
observe({
if (USER$login == FALSE) {
if (!is.null(input$login)) {
if (input$login > 0) {
Username <- isolate(input$userName)
Password <- isolate(input$passwd)
if(length(which(credentials$username_id==Username))==1) {
pasmatch <- credentials["passod"][which(credentials$username_id==Username),]
pasverify <- password_verify(pasmatch, Password)
if(pasverify) {
USER$login <- TRUE
} else {
shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade")
shinyjs::delay(3000, shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade"))
}
} else {
shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade")
shinyjs::delay(3000, shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade"))
}
}
}
}
})
output$logoutbtn <- renderUI({
req(USER$login)
tags$li(a(icon("fa fa-sign-out"), "Logout",
href="javascript:window.location.reload(true)"),
class = "dropdown",
style = "background-color: #eee !important; border: 0;
font-weight: bold; margin:5px; padding: 10px;")
})
output$sidebarpanel <- renderUI({
if (USER$login == TRUE ){
sidebarMenu(color= "yellow",
menuItem("My Courses", tabName = "dashboard", icon = icon("book-reader")),
menuItem("My Progress", tabName = "second", icon = icon("chart-line"))
)
}
})
output$body <- renderUI({
if (USER$login == TRUE ) {
tabItems(
# First tab
tabItem(tabName ="dashboard", class = "active",
fluidRow(
box(width = 12, dataTableOutput('results'))
),
box(
title = "Courses", background = "orange", solidHeader = TRUE, img(src = "robot.png", high = 100, width = 250), width = 6,
height = 2, "Welcome back, Maria!",
plotOutput("plot4", height = 250)
),
box(
title = "My results", width = 6,
height = 2,
plotOutput("plot4", height = 250)
)),
# Second tab
tabItem(tabName = "second",
fluidRow(
box(width = 12, dataTableOutput('results2'))
),
box(
title = "Today's Learning",
"How difficult the lessons of today was? ", br(),
sliderInput("slider", "Slider input:", 1, 100, 50),
textInput("text", "What was more difficult for me?")
)
))
}
else {
loginpage
}
})
output$results <- DT::renderDataTable({
datatable(iris, options = list(autoWidth = TRUE,
searching = FALSE))
})
output$results2 <- DT::renderDataTable({
datatable(mtcars, options = list(autoWidth = TRUE,
searching = FALSE))
})
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
output$user <- renderUser({
dashboardUser(
name = "Maria Silva",
image = "https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/girl_avatar_child_kid-512.png",
title = "Level 1",
subtitle = "Student",
footer = p("", class = "text-center"),
fluidRow(
dashboardUserItem(
width = 6,
socialButton(
href = "https://login.arduino.cc/login?state=hKFo2SBUck42U2FXNGRrQlpGR29zbnUyQXZMaHEwNjBmMnctWKFupWxvZ2luo3RpZNkgdDZXZVhSZ2RqRkNwbjV0bkhDdHFOUHAzaXJjNGJqQ3OjY2lk2SB4T2M5VTBZNE01SzhvVXJaMHoxdHQzbW1kaFJxdUJLVw&client=xOc9U0Y4M5K8oUrZ0z1tt3mmdhRquBKW&protocol=oauth2&authorizeTimeoutInSeconds=5&redirect_uri=https%3A%2F%2Fclassroom.arduino.cc&scope=openid+profile+email&loginCoppa=login-selector&response_type=code&response_mode=query&nonce=MEo4QWpqR2dsMjdmMERuajNtWHB1bWM4Z2ZYOUl4alFuQjN1YjM3bmt0bQ%3D%3D&code_challenge=R1g7BOrjx6SHzZ9GQ4JeuFhuj5ud2-FOCU1ctZlRtRE&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtc3BhLWpzIiwidmVyc2lvbiI6IjEuMTIuMSJ9#/sso/login",
icon = icon("mouse-pointer")
)
),
dashboardUserItem(
width = 6,
socialButton(
href = "https://github.com",
icon = icon("tasks")
)
)
)
)
})
}
runApp(list(ui = ui, server = server), launch.browser = TRUE)