ui: Render MIME parsing errors

ui/src/Data/Message.elm

@@ -18,6 +18,7 @@ type alias Message =
     , text : String
     , html : String
     , attachments : List Attachment
+    , errors : List Error
     }
 
 
@@ -28,6 +29,13 @@ type alias Attachment =
     }
 
 
+type alias Error =
+    { name : String
+    , detail : String
+    , severe : Bool
+    }
+
+
 decoder : Decoder Message
 decoder =
     succeed Message
@@ -42,6 +50,7 @@ decoder =
         |> required "text" string
         |> required "html" string
         |> required "attachments" (list attachmentDecoder)
+        |> required "errors" (list errorDecoder)
 
 
 attachmentDecoder : Decoder Attachment
@@ -50,3 +59,11 @@ attachmentDecoder =
         |> required "id" string
         |> required "filename" string
         |> required "content-type" string
+
+
+errorDecoder : Decoder Error
+errorDecoder =
+    succeed Error
+        |> required "name" string
+        |> required "detail" string
+        |> required "severe" bool

ui/src/Page/Mailbox.elm

@@ -590,11 +590,34 @@ viewMessage zone message bodyMode =
             , dt [] [ text "Subject:" ]
             , dd [] [ text message.subject ]
             ]
+        , messageErrors message
         , messageBody message bodyMode
         , attachments message
         ]
 
 
+messageErrors : Message -> Html Msg
+messageErrors message =
+    let
+        row error =
+            li []
+                [ span
+                    [ classList [ ( "warn-severe", error.severe ) ] ]
+                    [ text (error.name ++ ": ") ]
+                , text error.detail
+                ]
+    in
+    case message.errors of
+        [] ->
+            text ""
+
+        errors ->
+            div [ class "warn" ]
+                [ div [] [ h3 [] [ text "MIME problems detected" ] ]
+                , ul [] (List.map row errors)
+                ]
+
+
 messageBody : Message -> Body -> Html Msg
 messageBody message bodyMode =
     let

ui/src/main.css

@@ -141,6 +141,11 @@ h2 {
   font-weight: 700;
 }
 
+h3 {
+  font-size: 14px;
+  font-weight: 700;
+}
+
 .error {
   background-color: #f58080;
   background-image: linear-gradient(to bottom, #e86060 0, #f58080 100%);
@@ -203,6 +208,27 @@ h2 {
   padding: 10px !important;
 }
 
+.warn {
+  --light: #f5f580;
+  --dark: #e8e860;
+  background-color: var(--light);
+  background-image: linear-gradient(to bottom, var(--dark) 0, var(--light) 100%);
+  border: 1px solid var(--dark);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  padding: 6px 10px;
+  margin: 20px 0;
+}
+
+.warn li {
+  margin-left: 20px;
+  padding-left: 0px;
+}
+
+.warn-severe {
+  font-weight: 700;
+}
+
 /** NAV BAR */
 
 .navbar,