add cancellable login

NEWS.md

@@ -44,6 +44,7 @@
 - `f7Shadow()`removed from Framework7. No replacement. Will be removed in a future release.
 - `f7Swipeout`: deprecate `side` parameter and `...`. Now use either `left`/`right` or both.
 - `f7AutoComplete`: `value` now defaults to `NULL` (instead of the first choice).
+- `updateF7Login()`: `id` is deprecated.
 
 ## Minor change
 - `f7Messages()`: the corresponding input is now a list of lists, each item being a single `f7Message()`. The previous setting was not optimal R,the JS binding was returning a array of objects, which can't be easily translated to R. We now return an object of objects which becomes a list of lists.
@@ -94,7 +95,8 @@ the new router layout. Items must be wrapped in a `shiny::tagList()`.
 - `updateF7App` can now also handle changes in app theme (ios or md), dark mode, and color.
 - `f7Fabs()` has a new argument `global` that can be used to make FABs persistent across different tabs in `f7TabLayout()`. 
 - `f7ExpandableCard()` has a new argument `buttonColor` that can be used to control the color of the close button.
-- `f7Login()` has a new argument `module` that can, optionally, be set to `FALSE` for more flexibility. For example, this allows you to use `f7Login()` inside your own modules, or without the provided `f7LoginServer()` module.
+- `f7Login()` has a new argument `cancellable` that can, optionally, show a cancel button to close the login window. `f7LoginServer()` also return the cancel state so it can be used to trigger actions on the server side, like changing tab.
+- `updateF7Login()`: new `cancel` parameter to close the login window.
 - Fix various issues in documentation.
 - Include new vignettes.
 

R/f7Login.R

@@ -7,6 +7,8 @@
 #' as the button is pressed, its value is incremented which may be used to call 
 #' \link{updateF7Login}. `input$user` and `input$password` contains values passed 
 #' by the user in these respective fields and can be forwarded to \link{updateF7Login}.
+#' `input$cancel` is increment whenever the login is closed when cancellable. You can access
+#' the value and trigger other actions on the server, as shown in \link{f7LoginServer}.
 #'
 #' @param ... Slot for inputs like password, text, ...
 #' @param id Login unique id.
@@ -16,18 +18,30 @@
 #' @param 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).
+#' @param cancellable Whether to show a cancel button to close the login modal. Default
+#' to FALSE.
 #'
 #' @export
 #' @rdname authentication
 #' @importFrom jsonlite toJSON
 #' @example inst/examples/login/app.R
-f7Login <- function(..., id, title, label = "Sign In", footer = NULL, startOpen = TRUE) {
+f7Login <- function(..., id, title, label = "Sign In", footer = NULL, startOpen = TRUE,
+cancellable = FALSE) {
 
   ns <- shiny::NS(id)
 
-  submitBttn <- f7Button(inputId = ns("submit"), label = label)
-  submitBttn[[2]]$attribs$class <- "item-link list-button f7-action-button"
-  submitBttn[[2]]$name <- "a"
+  submitBttn <- f7Button(inputId = ns("submit"), label = label, fill = FALSE)
+
+  btnUI <- submitBttn
+
+  if (cancellable) {
+    cancelButton <- f7Button(ns("cancel"), label = "Cancel", fill = FALSE)
+    btnUI <- f7Grid(
+      cols = 2,
+      cancelButton,
+      submitBttn
+    )
+  }
 
   shiny::tags$div(
     id = sprintf("%s-login", id),
@@ -56,9 +70,7 @@ f7Login <- function(..., id, title, label = "Sign In", footer = NULL, startOpen
               ),
               ...
             ),
-            f7List(
-              submitBttn
-            ),
+            btnUI,
             if (!is.null(footer)) {
               shiny::tags$div(class = "block-footer", footer)
             }
@@ -103,8 +115,7 @@ f7LoginServer <- function(id, ignoreInit = FALSE, trigger = NULL) {
         },
         {
           if (!authenticated()) updateF7Login()
-        },
-        once = TRUE
+        }
       )
 
       # toggle the login only if not authenticated
@@ -116,18 +127,26 @@ f7LoginServer <- function(id, ignoreInit = FALSE, trigger = NULL) {
               user = input$user,
               password = input$password
             )
+            shiny::req(nchar(input$user) > 0, nchar(input$password) > 0)
             authenticated(TRUE)
           }
         },
         ignoreInit = ignoreInit
       )
+
+      # Close on cancel
+      shiny::observeEvent(input$cancel, {
+        updateF7Login(cancel = TRUE)
+      })
 
       # useful to export the user name outside the module
       return(
         list(
           status = shiny::reactive(input$login),
           user = shiny::reactive(input$user),
-          password = shiny::reactive(input$password)
+          password = shiny::reactive(input$password),
+          authenticated = shiny::reactive(authenticated()),
+          cancelled = shiny::reactive(input$cancel)
         )
       )
     }
@@ -137,17 +156,31 @@ f7LoginServer <- function(id, ignoreInit = FALSE, trigger = NULL) {
 #' Activates Framework7 login.
 #'
 #' \code{updateF7Login} toggles a login page.
-#'
+#' 
+#' @param id `r lifecycle::badge("deprecated")`.
 #' @param user Value of the user input.
 #' @param password Value of the password input.
+#' @param cancel Whether to close the login. Default to FALSE.
 #' @param session Shiny session object.
 #' @export
 #' @rdname authentication
-updateF7Login <- function(user = NULL, password = NULL, session = shiny::getDefaultReactiveDomain()) {
+updateF7Login <- function(id = deprecated(), user = NULL, password = NULL, cancel = FALSE, session = shiny::getDefaultReactiveDomain()) {
+
+  if (lifecycle::is_present(id)) {
+    lifecycle::deprecate_warn(
+      when = "2.0.0",
+      what = "updateF7Login(id)",
+      details = "id has been
+      deprecated will be removed from shinyMobile
+      in the next release."
+    )
+  }
+
   message <- dropNulls(
     list(
       user = user,
-      password = password
+      password = password,
+      cancel = cancel
     )
   )
   session$sendInputMessage("login", message)

inst/examples/login/app.R

@@ -13,7 +13,7 @@ app <- shinyApp(
         f7Link(label = "Link 1", href = "https://www.google.com"),
         f7Link(label = "Link 2", href = "https://www.google.com")
       ),
-      f7Login(id = "login", title = "Welcome"),
+      f7Login(id = "login", title = "Welcome", cancellable = TRUE),
       # main content
       f7BlockTitle(
         title = HTML(paste("Welcome", textOutput("user"))),
@@ -27,7 +27,9 @@ app <- shinyApp(
     exportTestValues(
       status = loginData$status(),
       user = loginData$user(),
-      password = loginData$password()
+      password = loginData$password(),
+      authenticated = loginData$authenticated(),
+      cancelled = loginData$cancelled()
     )
 
     output$user <- renderText({

srcjs/bindings/loginInputBinding.js

@@ -44,11 +44,15 @@ $.extend(f7LoginBinding, {
   // see updateF7Login
   receiveMessage: function(el, data) {
     if (this.instances[el.id].opened) {
-      // only close if valid password and user
-      if (data.user.length > 0 && data.password.length > 0) {
+      if (data.cancel) {
         this.instances[el.id].close();
       } else {
-        this.app.dialog.alert('Please enter a valid password and user.');
+        // only close if valid password and user
+        if (data.user.length > 0 && data.password.length > 0) {
+          this.instances[el.id].close();
+        } else {
+          this.app.dialog.alert('Please enter a valid password and user.');
+        }
       }
     } else {
       this.instances[el.id].open();

tests/testthat/_snaps/f7Login/login-app-001.json

@@ -1,5 +1,7 @@
 {
   "export": {
+    "authenticated": false,
+    "cancelled": 0,
     "password": "",
     "status": true,
     "user": ""

tests/testthat/_snaps/f7Login/login-app-002.json

@@ -1,7 +1,9 @@
 {
   "export": {
-    "password": "pwd",
+    "authenticated": false,
+    "cancelled": 1,
+    "password": "",
     "status": false,
-    "user": "usr"
+    "user": ""
   }
 }

tests/testthat/_snaps/f7Login/login-app-003.json

@@ -0,0 +1,9 @@
+{
+  "export": {
+    "authenticated": true,
+    "cancelled": 1,
+    "password": "pwd",
+    "status": true,
+    "user": "usr"
+  }
+}

tests/testthat/test-f7Login.R

@@ -9,6 +9,9 @@ test_that("login works", {
     name = "login-app"
   )
 
+  app$expect_values(export = TRUE)
+  app$click(selector = "#login-cancel")
+  app$wait_for_idle(2000)
   app$expect_values(export = TRUE)
 
   app$set_inputs("login-user" = "usr", "login-password" = "pwd")