Confirmation dialog
Server-validated confirmation
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let confirmationDialogConfig =
ConfirmationDialog.create
"delete-account-confirmation"
"Delete account?"
"Deleting Operating removes its draft entries. Posted entries remain in the audit history."
"Keep account"
"Delete account"
"@post('/components/dialogs/confirm').then(() => document.getElementById('delete-account-confirmation-confirm')?.focus())"
let confirmationDialogContent validation =
(match validation with
| Some message -> confirmationDialogConfig |> ConfirmationDialog.withValidation message
| None -> confirmationDialogConfig)
|> ConfirmationDialog.renderContent
let confirmationExample =
div {
confirmationDialogConfig |> ConfirmationDialog.trigger "Delete account"
confirmationDialogConfig |> ConfirmationDialog.render
}The demo server rejects deletion so you can inspect its validation state.
Pending confirmation
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let pendingConfirmationConfig =
ConfirmationDialog.create
"pending-account-confirmation"
"Delete account?"
"The account deletion is already being checked."
"Close"
"Delete account"
"@post('/components/dialogs/confirm')"
|> ConfirmationDialog.pending
let pendingConfirmationExample =
div {
pendingConfirmationConfig |> ConfirmationDialog.trigger "Open pending confirmation"
pendingConfirmationConfig |> ConfirmationDialog.render
}