HTML error page

Author: MarcoDaniels

elm.json

@@ -9,14 +9,21 @@
             "NoRedInk/elm-json-decode-pipeline": "1.0.1",
             "elm/core": "1.0.5",
             "elm/json": "1.1.3",
-            "elm/url": "1.0.0"
+            "elm/url": "1.0.0",
+            "zwilias/elm-html-string": "2.0.2"
         },
-        "indirect": {}
+        "indirect": {
+            "NoRedInk/elm-string-conversions": "1.0.1",
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
+            "elm/html": "1.0.0",
+            "elm/http": "2.0.0",
+            "elm/time": "1.0.0",
+            "elm/virtual-dom": "1.0.3"
+        }
     },
     "test-dependencies": {
         "direct": {},
-        "indirect": {
-            "elm/time": "1.0.0"
-        }
+        "indirect": {}
     }
 }

src/Main.elm

@@ -1,6 +1,8 @@
 port module Main exposing (main)
 
 import Dict
+import Html.String as Html
+import Html.String.Attributes as Html
 import Json.Decode as Decode exposing (Decoder, Error)
 import Json.Decode.Pipeline as Decode
 import Json.Encode as Encode
@@ -137,6 +139,28 @@ main =
         }
 
 
+errorMessage : String -> String
+errorMessage msg =
+    Html.div
+        [ Html.style "display" "flex"
+        , Html.style "justify-content" "center"
+        , Html.style "flex-direction" "column"
+        , Html.style "align-items" "center"
+        ]
+        [ Html.div [] [ Html.h1 [] [ Html.text "Cockpit CMS proxy" ] ]
+        , Html.div [] [ Html.text "There seems to be an error in the proxy configuration" ]
+        , Html.div [ Html.style "margin-top" "20px" ]
+            [ Html.code
+                [ Html.style "background-color" "#f1f1f1"
+                , Html.style "color" "crimson"
+                , Html.style "padding" "10px"
+                ]
+                [ Html.text msg ]
+            ]
+        ]
+        |> Html.toString 2
+
+
 update : Msg -> Config -> ( Config, Cmd Msg )
 update msg config =
     case msg of
@@ -147,7 +171,7 @@ update msg config =
                     ( config
                     , { response = response
                       , request = request
-                      , meta = MetaOutputError { success = False, data = err }
+                      , meta = MetaOutputError { success = False, data = errorMessage err }
                       }
                         |> toOutput
                     )