ui: Implement modal focus trap

ui/src/Layout.elm

@@ -37,6 +37,7 @@ import Html.Attributes
         , value
         )
 import Html.Events as Events
+import Modal
 import Route exposing (Route)
 
 
@@ -79,6 +80,8 @@ reset model =
 
 type Msg
     = ClearFlash
+    | ModalFocused Modal.Msg
+    | ModalUnfocused
     | OnMailboxNameInput String
     | OpenMailbox
     | ShowRecent Bool
@@ -94,6 +97,15 @@ update msg model session =
             , Cmd.none
             )
 
+        ModalFocused message ->
+            ( model
+            , Modal.updateSession message session
+            , Cmd.none
+            )
+
+        ModalUnfocused ->
+            ( model, session, Modal.resetFocusCmd (ModalFocused >> model.mapMsg) )
+
         OnMailboxNameInput name ->
             ( { model | mailboxName = name }
             , session
@@ -165,7 +177,7 @@ frame { model, session, activePage, activeMailbox, modal, content } =
                 ]
             ]
         , div [ class "navbar-bg" ] [ text "" ]
-        , frameModal modal
+        , Modal.view (ModalUnfocused |> model.mapMsg) modal
         , div [ class "page" ] (errorFlash model session.flash :: content)
         , footer []
             [ div [ class "footer" ]
@@ -178,18 +190,6 @@ frame { model, session, activePage, activeMailbox, modal, 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 : Model msg -> Maybe Session.Flash -> Html msg
 errorFlash model maybeFlash =
     let