Fixed error page layout

eyra · Jun 27, 2023 · 20bd46f · 20bd46f
1 parent 916577a
commit 20bd46f
Show file tree

Hide file tree

Showing 23 changed files with 213 additions and 221 deletions.
diff --git a/core/config/config.exs b/core/config/config.exs
@@ -15,6 +15,11 @@ config :logger, :console,
   format: "$time $metadata[$level] $message\n",
   metadata: [:request_id]
 
+config :plug, :statuses, %{
+  403 => "Access Denied",
+  404 => "Page not found"
+}
+
 config :core,
   image_catalog: Core.ImageCatalog.Unsplash,
   banking_backend: Systems.Banking.Dummy

diff --git a/core/config/dev.exs b/core/config/dev.exs
@@ -23,7 +23,7 @@ config :core, Core.Repo,
 config :core, CoreWeb.Endpoint,
   reloadable_compilers: [:elixir],
   force_ssl: false,
-  debug_errors: true,
+  debug_errors: false,
   code_reloader: true,
   check_origin: false,
   live_reload: [

diff --git a/core/lib/core_web/controllers/error_html.ex b/core/lib/core_web/controllers/error_html.ex
@@ -1,12 +1,67 @@
 defmodule CoreWeb.ErrorHTML do
   use CoreWeb, :html
+  use CoreWeb.Layouts.Stripped.Component, :error
 
-  embed_templates("error_html/*")
+  defp body("403.html", status), do: dgettext("eyra-error", "403.body", status: status)
+  defp body("404.html", status), do: dgettext("eyra-error", "404.body", status: status)
+  defp body("500.html", status), do: dgettext("eyra-error", "500.body", status: status)
+  defp body("503.html", status), do: dgettext("eyra-error", "503.body", status: status)
+  defp body(_, status), do: dgettext("eyra-error", "generic.body", status: status)
 
-  # By default, Phoenix returns the status message from
-  # the template name. For example, "404.html" becomes
-  # "Not Found".
-  def template_not_found(template, _assigns) do
-    Phoenix.Controller.status_message_from_template(template)
+  defp image("403.html"), do: "/images/illustrations/403.svg"
+  defp image("404.html"), do: "/images/illustrations/404.svg"
+  defp image("500.html"), do: "/images/illustrations/500.svg"
+  defp image("503.html"), do: "/images/illustrations/503.svg"
+  defp image(_), do: nil
+
+  defp status(template), do: Phoenix.Controller.status_message_from_template(template)
+
+  def render(template, assigns) do
+    status = status(template)
+
+    assigns =
+      Map.merge(assigns, %{
+        menus: build_menus(assigns),
+        status: status,
+        body: body(template, status),
+        image: image(template)
+      })
+
+    ~H"""
+     <.error
+      title={@status}
+      menus={@menus}
+      body={@body}
+      image={@image}
+    />
+    """
+  end
+
+  attr(:title, :string, required: true)
+  attr(:body, :string, required: true)
+  attr(:image, :string, default: nil)
+  attr(:menus, :map, required: true)
+
+  def error(assigns) do
+    ~H"""
+    <.stripped title={@title} menus={@menus} >
+        <Area.content>
+            <Margin.y id={:page_top} />
+            <div class="flex flex-col md:flex-row gap-10 items-center md:items-start">
+                <div>
+                    <div class="text-title3 font-title3 sm:text-title2 lg:text-title1 lg:font-title1 text-grey1"><%= dgettext("eyra-error","page.title") %></div>
+                    <div class="mb-6 md:mb-8"></div>
+                    <div class="text-bodymedium sm:text-bodylarge font-body text-grey1"><%= raw(@body) %></div>
+                    <div class="mb-6 md:mb-8"></div>
+                </div>
+                <%= if @image do %>
+                  <div class="flex-shrink-0">
+                      <img src={@image} alt="" />
+                  </div>
+                <% end %>
+            </div>
+        </Area.content>
+    </.stripped>
+    """
   end
 end
diff --git a/core/lib/core_web/controllers/error_html/403.html.eex b/core/lib/core_web/controllers/error_html/403.html.eex
diff --git a/core/lib/core_web/controllers/error_html/404.html.eex b/core/lib/core_web/controllers/error_html/404.html.eex
diff --git a/core/lib/core_web/controllers/error_html/500.html.eex b/core/lib/core_web/controllers/error_html/500.html.eex
diff --git a/core/lib/core_web/controllers/error_html/503.html.eex b/core/lib/core_web/controllers/error_html/503.html.eex
diff --git a/core/lib/core_web/controllers/layouts/error.html.eex b/core/lib/core_web/controllers/layouts/error.html.eex
diff --git a/core/lib/core_web/controllers/layouts/error.html.heex b/core/lib/core_web/controllers/layouts/error.html.heex
@@ -0,0 +1,28 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title><%= Meta.bundle_title() %></title>
+    <%= csrf_meta_tag() %>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, user-scalable=no, initial-scale=1.0" />
+    <meta name="theme-color" content="#4272ef">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <script src="https://cdn.jsdelivr.net/gh/alpine-collective/alpine-magic-helpers@1.1.x/dist/index.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="/css/app.css"
+    />
+    <script src="/js/app.js" defer></script>
+  </head>
+  <body class="font-body bg-grey5 scrollbar-hide" x-data="{ overlay: false}" >
+    <div class="fixed z-10 w-full h-full bg-black bg-opacity-20" x-show="overlay"></div>
+    <div class="flex flex-row">
+      <div class="flex flex-col w-full">
+        <div class="flex-grow">
+            <%= @inner_content %>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/core/lib/core_web/controllers/layouts/stripped/component.ex b/core/lib/core_web/controllers/layouts/stripped/component.ex
@@ -19,19 +19,21 @@ defmodule CoreWeb.Layouts.Stripped.Component do
 
       def builder, do: Application.fetch_env!(:core, :stripped_menu_builder)
 
-      def build_menu(socket, type) do
-        builder().build_menu(socket, type, unquote(active_item))
+      def build_menu(assigns, type) do
+        builder().build_menu(assigns, type, unquote(active_item))
       end
 
-      def build_menus(socket) do
-        menus =
-          Enum.reduce(@menus, %{}, fn menu_id, acc ->
-            Map.put(acc, menu_id, build_menu(socket, menu_id))
-          end)
-
+      def build_menus(%{assigns: assigns} = socket) do
+        menus = build_menus(assigns)
         socket |> assign(menus: menus)
       end
 
+      def build_menus(assigns) do
+        Enum.reduce(@menus, %{}, fn menu_id, acc ->
+          Map.put(acc, menu_id, build_menu(assigns, menu_id))
+        end)
+      end
+
       def update_menus(socket) do
         socket
         |> build_menus()

diff --git a/core/lib/core_web/controllers/layouts/website/component.ex b/core/lib/core_web/controllers/layouts/website/component.ex
@@ -20,19 +20,21 @@ defmodule CoreWeb.Layouts.Website.Component do
 
       def builder, do: Application.fetch_env!(:core, :website_menu_builder)
 
-      def build_menu(socket, type) do
-        builder().build_menu(socket, type, unquote(active_item))
+      def build_menu(assigns, type) do
+        builder().build_menu(assigns, type, unquote(active_item))
       end
 
-      def build_menus(socket) do
-        menus =
-          Enum.reduce(@menus, %{}, fn menu_id, acc ->
-            Map.put(acc, menu_id, build_menu(socket, menu_id))
-          end)
-
+      def build_menus(%{assigns: assigns} = socket) do
+        menus = build_menus(assigns)
         socket |> assign(menus: menus)
       end
 
+      def build_menus(assigns) do
+        Enum.reduce(@menus, %{}, fn menu_id, acc ->
+          Map.put(acc, menu_id, build_menu(assigns, menu_id))
+        end)
+      end
+
       def update_menus(socket) do
         socket
         |> build_menus()

diff --git a/core/lib/core_web/controllers/layouts/workspace/component.ex b/core/lib/core_web/controllers/layouts/workspace/component.ex
@@ -22,19 +22,21 @@ defmodule CoreWeb.Layouts.Workspace.Component do
 
       def builder, do: Application.fetch_env!(:core, :workspace_menu_builder)
 
-      def build_menu(socket, type) do
-        builder().build_menu(socket, type, unquote(active_item))
+      def build_menu(assigns, type) do
+        builder().build_menu(assigns, type, unquote(active_item))
       end
 
-      def build_menus(socket) do
-        menus =
-          Enum.reduce(@menus, %{}, fn menu_id, acc ->
-            Map.put(acc, menu_id, build_menu(socket, menu_id))
-          end)
-
+      def build_menus(%{assigns: assigns} = socket) do
+        menus = build_menus(assigns)
         socket |> assign(menus: menus)
       end
 
+      def build_menus(assigns) do
+        Enum.reduce(@menus, %{}, fn menu_id, acc ->
+          Map.put(acc, menu_id, build_menu(assigns, menu_id))
+        end)
+      end
+
       def update_menus(socket) do
         socket
         |> build_menus()

diff --git a/core/lib/core_web/live/menu/builder.ex b/core/lib/core_web/live/menu/builder.ex
@@ -28,7 +28,7 @@ defmodule CoreWeb.Menu.Builder do
       import CoreWeb.Menu.Helpers
 
       @impl true
-      def build_menu(%{assigns: assigns}, menu_id, active_item) do
+      def build_menu(assigns, menu_id, active_item) do
         builder = &build_item(assigns, menu_id, &1, active_item, @item_flags)
 
         primary = select_items(menu_id, @primary)

diff --git a/core/priv/gettext/en/LC_MESSAGES/eyra-enums.po b/core/priv/gettext/en/LC_MESSAGES/eyra-enums.po
@@ -333,3 +333,11 @@ msgstr "Data Donation Study"
 #, elixir-autogen, elixir-format, fuzzy
 msgid "project_templates.empty"
 msgstr "Empty"
+
+#, elixir-autogen, elixir-format, fuzzy
+msgid "project_tools.benchmark"
+msgstr "Benchmark"
+
+#, elixir-autogen, elixir-format, fuzzy
+msgid "project_tools.data_donation"
+msgstr "Data Donation Study"