shinyMobile (version 1.0.1)

f7Login: Framework7 login screen

Description

Provide a template for authentication

f7LoginServer is a useful server elements to fine tune the f7Login page.

updateF7Login toggles a login page.

Usage

f7Login(..., id, title, label = "Sign In", footer = NULL, startOpen = TRUE)
f7LoginServer(input, output, session, ignoreInit = FALSE, trigger = NULL)
updateF7Login(
  id,
  user = NULL,
  password = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

...

Slot for inputs like password, text, ...

id

f7Login unique id.

title

Login page title.

label

Login confirm button label.

footer

Optional footer.

startOpen

Whether to open the login page at start. Default to TRUE. There are some cases where it is interesting to set up to FALSE, for instance when you want to have authentication only in a specific tab of your app (See example 2).

input

Shiny input object.

output

Shiny output object.

session

Shiny session object.

ignoreInit

If TRUE, then, when this observeEvent is first created/initialized, ignore the handlerExpr (the second argument), whether it is otherwise supposed to run or not. The default is FALSE.

trigger

Reactive trigger to toggle the login page state. Useful, when one wants to set up local authentication (for a specific section). See example 2.

user

Value of the user input.

password

Value of the password input.

Details

This function does not provide the backend features. You would need to store credentials in a database for instance.

Examples

if (interactive()) {
 # global authentication
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Login module",
     f7SingleLayout(
       navbar = f7Navbar(
         title = "Login Example",
         hairline = FALSE,
         shadow = TRUE
       ),
       toolbar = f7Toolbar(
         position = "bottom",
         f7Link(label = "Link 1", href = "https://www.google.com"),
         f7Link(label = "Link 2", href = "https://www.google.com")
       ),
       f7Login(id = "loginPage", title = "Welcome"),
       # main content
       f7BlockTitle(
         title = HTML(paste("Welcome", textOutput("user"))),
         size = "large"
       ) %>% f7Align("center")
     )
   ),
   server = function(input, output, session) {

     loginData <- callModule(f7LoginServer, id = "loginPage")

     output$user <- renderText({
      req(loginData$user)
      loginData$user()
     })
   }
 )

 # section specific authentication
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Local access restriction",
     f7TabLayout(
       navbar = f7Navbar(
         title = "Login Example for Specific Section",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7Tabs(
         id = "tabs",
         f7Tab(
           tabName = "Tab 1",
           "Without authentication"
         ),
         f7Tab(
           tabName = "Restricted",
           # main content
           f7BlockTitle(
             title = HTML(paste("Welcome", textOutput("user"))),
             size = "large"
           ) %>% f7Align("center")
         )
       ),
       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE)
     )
   ),
   server = function(input, output, session) {

     # trigger
     trigger <- reactive({
      req(input$tabs)
     })

     # do not run first since the login page is not yet visible
     loginData <- callModule(
      f7LoginServer,
      id = "loginPage",
      ignoreInit = TRUE,
      trigger = trigger
     )

     output$user <- renderText({
      req(loginData$user)
      loginData$user()
     })

   }
 )

 # with 2 different protected sections
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Multiple restricted areas",
     f7TabLayout(
       navbar = f7Navbar(
         title = "Login Example for 2 Specific Section",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7Tabs(
         id = "tabs",
         f7Tab(
           tabName = "Tab 1",
           "Without authentication"
         ),
         f7Tab(
           tabName = "Restricted",
           # main content
           f7BlockTitle(
             title = "1st restricted area",
             size = "large"
           ) %>% f7Align("center")
         ),
         f7Tab(
           tabName = "Restricted 2",
           # main content
           f7BlockTitle(
             title = "2nd restricted area",
             size = "large"
           ) %>% f7Align("center")
         )
       ),
       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE),
       f7Login(id = "loginPage2", title = "Welcome", startOpen = FALSE)
     )
   ),
   server = function(input, output, session) {

     trigger1 <- reactive({
       req(input$tabs == "Restricted")
     })

     trigger2 <- reactive({
       req(input$tabs == "Restricted 2")
     })

     # do not run first since the login page is not yet visible
     callModule(
       f7LoginServer,
       id = "loginPage",
       ignoreInit = TRUE,
       trigger = trigger1
     )

     callModule(
       f7LoginServer,
       id = "loginPage2",
       ignoreInit = TRUE,
       trigger = trigger2
     )

   }
 )
}