ui: Mailbox purge prompts for confirmation

ui/src/Main.elm

@@ -298,13 +298,15 @@ view model =
         framePage :
             ActivePage
             -> (msg -> Msg)
-            -> { title : String, content : Html msg }
+            -> { title : String, modal : Maybe (Html msg), content : Html msg }
             -> Document Msg
-        framePage page toMsg { title, content } =
+        framePage page toMsg { title, modal, content } =
             Document title
-                [ content
-                    |> Html.map toMsg
-                    |> Page.frame controls model.session page
+                [ Page.frame controls
+                    model.session
+                    page
+                    (Maybe.map (Html.map toMsg) modal)
+                    (Html.map toMsg content)
                 ]
     in
     case model.page of

ui/src/Page/Home.elm

@@ -51,9 +51,10 @@ update session msg model =
 -- VIEW --
 
 
-view : Session -> Model -> { title : String, content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg }
 view session model =
     { title = "Inbucket"
+    , modal = Nothing
     , content =
         div [ class "page" ]
             [ Html.node "rendered-html"

ui/src/Page/Mailbox.elm

@@ -73,13 +73,14 @@ type alias Model =
     , state : State
     , bodyMode : Body
     , searchInput : String
+    , promptPurge : Bool
     , now : Posix
     }
 
 
 init : String -> Maybe MessageID -> ( Model, Cmd Msg, Session.Msg )
 init mailboxName selection =
-    ( Model mailboxName (LoadingList selection) SafeHtmlBody "" (Time.millisToPosix 0)
+    ( Model mailboxName (LoadingList selection) SafeHtmlBody "" False (Time.millisToPosix 0)
     , load mailboxName
     , Session.none
     )
@@ -133,7 +134,9 @@ type Msg
     | MarkedSeen (Result Http.Error ())
     | DeleteMessage Message
     | DeletedMessage (Result Http.Error ())
-    | PurgeMailbox
+    | PurgeMailboxPrompt
+    | PurgeMailboxCanceled
+    | PurgeMailboxConfirmed
     | PurgedMailbox (Result Http.Error ())
     | OnSearchInput String
     | Tick Posix
@@ -232,8 +235,14 @@ update session msg model =
                 _ ->
                     ( model, Cmd.none, Session.none )
 
-        PurgeMailbox ->
-            updatePurge model
+        PurgeMailboxPrompt ->
+            ( { model | promptPurge = True }, Cmd.none, Session.none )
+
+        PurgeMailboxCanceled ->
+            ( { model | promptPurge = False }, Cmd.none, Session.none )
+
+        PurgeMailboxConfirmed ->
+            updatePurge session model
 
         PurgedMailbox (Ok _) ->
             ( model, Cmd.none, Session.none )
@@ -291,19 +300,25 @@ updateMessageResult model message =
             )
 
 
-updatePurge : Model -> ( Model, Cmd Msg, Session.Msg )
-updatePurge model =
+updatePurge : Session -> Model -> ( Model, Cmd Msg, Session.Msg )
+updatePurge session model =
     let
         cmd =
-            "/api/v1/mailbox/"
-                ++ model.mailboxName
-                |> HttpUtil.delete PurgedMailbox
+            Cmd.batch
+                [ Route.replaceUrl session.key (Route.Mailbox model.mailboxName)
+                , "/api/v1/mailbox/"
+                    ++ model.mailboxName
+                    |> HttpUtil.delete PurgedMailbox
+                ]
     in
     case model.state of
         ShowingList list _ ->
-            ( { model | state = ShowingList (MessageList [] Nothing "") NoMessage }
+            ( { model
+                | promptPurge = False
+                , state = ShowingList (MessageList [] Nothing "") NoMessage
+              }
             , cmd
-            , Session.none
+            , Session.DisableRouting
             )
 
         _ ->
@@ -470,9 +485,10 @@ getMessage mailboxName id =
 -- VIEW
 
 
-view : Session -> Model -> { title : String, content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html Msg), content : Html Msg }
 view session model =
     { title = model.mailboxName ++ " - Inbucket"
+    , modal = viewModal model.promptPurge
     , content =
         div [ class "page mailbox" ]
             [ aside [ class "message-list-controls" ]
@@ -483,7 +499,7 @@ view session model =
                     , value model.searchInput
                     ]
                     []
-                , button [ onClick PurgeMailbox ] [ text "Purge" ]
+                , button [ onClick PurgeMailboxPrompt ] [ text "Purge" ]
                 ]
             , viewMessageList session model
             , main_
@@ -508,6 +524,22 @@ view session model =
     }
 
 
+viewModal : Bool -> Maybe (Html Msg)
+viewModal promptPurge =
+    if promptPurge then
+        Just <|
+            div []
+                [ p [] [ text "Are you sure you want to delete all messages in this mailbox?" ]
+                , div [ class "button-bar" ]
+                    [ button [ onClick PurgeMailboxConfirmed, class "danger" ] [ text "Yes" ]
+                    , button [ onClick PurgeMailboxCanceled ] [ text "Cancel" ]
+                    ]
+                ]
+
+    else
+        Nothing
+
+
 viewMessageList : Session -> Model -> Html Msg
 viewMessageList session model =
     aside [ class "message-list" ] <|

ui/src/Page/Monitor.elm

@@ -82,9 +82,10 @@ update session msg model =
 -- VIEW
 
 
-view : Session -> Model -> { title : String, content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg }
 view session model =
     { title = "Inbucket Monitor"
+    , modal = Nothing
     , content =
         div [ class "page" ]
             [ h1 [] [ text "Monitor" ]

ui/src/Page/Status.elm

@@ -240,9 +240,10 @@ loadServerConfig =
 -- VIEW --
 
 
-view : Session -> Model -> { title : String, content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg }
 view session model =
     { title = "Inbucket Status"
+    , modal = Nothing
     , content =
         div [ class "page" ]
             [ h1 [] [ text "Status" ]

ui/src/Views/Page.elm

@@ -37,8 +37,8 @@ type alias FrameControls msg =
     }
 
 
-frame : FrameControls msg -> Session -> ActivePage -> Html msg -> Html msg
-frame controls session page content =
+frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> Html msg -> Html msg
+frame controls session page modal content =
     div [ class "app" ]
         [ header []
             [ ul [ class "navbar", attribute "role" "navigation" ]
@@ -62,6 +62,7 @@ frame controls session page content =
             , errorFlash controls session.flash
             ]
         , div [ class "navbar-bg" ] [ text "" ]
+        , frameModal modal
         , content
         , footer []
             [ div [ class "footer" ]
@@ -74,6 +75,18 @@ frame controls session page content =
         ]
 
 
+frameModal : Maybe (Html msg) -> Html msg
+frameModal maybeModal =
+    case maybeModal of
+        Just modal ->
+            div [ class "modal-mask" ]
+                [ div [ class "modal well" ] [ modal ]
+                ]
+
+        Nothing ->
+            text ""
+
+
 errorFlash : FrameControls msg -> String -> Html msg
 errorFlash controls message =
     if message == "" then

ui/src/main.css

@@ -162,6 +162,27 @@ h1 {
   max-width: 1000px;
 }
 
+.modal-mask {
+  background-color: rgba(0,0,0,0.4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: auto;
+  max-height: 80%;
+  width: 700px;
+  max-width: 95%;
+  transform: translate(-50%, -50%);
+  padding: 10px !important;
+}
+
 /** NAV BAR */
 
 .navbar,