Root: Use icon from parent school (fixes #105)

lib/layouts/components/menu_desktop.ex

@@ -10,7 +10,7 @@ defmodule UneebeeWeb.Components.Layouts.MenuDesktop do
     <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
       <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4">
         <div class="flex h-16 shrink-0 items-center">
-          <img class="h-8 w-auto" src={school_logo(@school)} alt={school_name(@school)} />
+          <img class="h-8 w-auto" src={school_logo(@school, @app)} alt={school_name(@school)} />
         </div>
 
         <%= render_slot(@inner_block) %>

lib/layouts/components/menu_mobile.ex

@@ -10,7 +10,7 @@ defmodule UneebeeWeb.Components.Layouts.MenuMobile do
     <.drawer id="mobile-menu">
       <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4">
         <div class="flex h-16 shrink-0 items-center">
-          <img class="h-8 w-auto" src={school_logo(@school)} alt={school_name(@school)} />
+          <img class="h-8 w-auto" src={school_logo(@school, @app)} alt={school_name(@school)} />
         </div>
 
         <%= render_slot(@inner_block) %>

lib/layouts/layouts.ex

@@ -17,7 +17,7 @@ defmodule UneebeeWeb.Layouts do
   embed_templates "templates/*"
 
   @spec social_image(String.t() | nil, School.t() | nil) :: String.t()
-  def social_image(nil, school), do: school_logo(school)
+  def social_image(nil, school), do: school_logo(school, nil)
   def social_image(img, _school), do: img
 
   @spec page_title(String.t() | nil, School.t() | nil) :: String.t()

lib/layouts/menu_utils.ex

@@ -4,25 +4,24 @@ defmodule UneebeeWeb.Layouts.MenuUtils do
 
   alias Uneebee.Content.Course
   alias Uneebee.Organizations.School
-  alias UneebeeWeb.Shared.ImageOptimizer
 
   @spec school_name(School.t() | nil) :: String.t()
   def school_name(nil), do: "UneeBee"
   def school_name(%School{} = school), do: school.name
 
-  @spec school_logo(School.t() | nil) :: String.t()
-  def school_logo(nil), do: ~p"/images/logo.svg"
-  def school_logo(%School{logo: nil}), do: school_logo(nil)
-  def school_logo(%School{} = school), do: get_image_url(school.logo, "logo")
-
-  @spec school_icon(School.t() | nil, non_neg_integer()) :: String.t()
-  def school_icon(nil, size), do: "/favicon/#{size}.png"
-  def school_icon(%School{icon: nil}, size), do: school_icon(nil, size)
-
-  def school_icon(%School{} = school, size) do
-    url = ImageOptimizer.raw_image_url(school.icon)
-    "#{url}/w=#{size},h=#{size},sharpen=1"
-  end
+  @spec school_logo(School.t() | nil, School.t() | nil) :: String.t()
+  def school_logo(nil, _app), do: ~p"/images/logo.svg"
+  def school_logo(%School{logo: nil}, nil), do: school_logo(nil, nil)
+  def school_logo(%School{logo: nil}, %School{logo: nil}), do: school_logo(nil, nil)
+  def school_logo(%School{logo: nil}, %School{logo: logo}), do: get_image_url(logo, "logo")
+  def school_logo(%School{} = school, _app), do: get_image_url(school.logo, "logo")
+
+  @spec school_icon(School.t() | nil, School.t() | nil, non_neg_integer()) :: String.t()
+  def school_icon(nil, _app, size), do: "/favicon/#{size}.png"
+  def school_icon(%School{icon: nil}, nil, size), do: school_icon(nil, nil, size)
+  def school_icon(%School{icon: nil}, %School{icon: nil}, size), do: school_icon(nil, nil, size)
+  def school_icon(%School{icon: nil}, %School{icon: icon}, size), do: get_image_url(icon, size, flexible: true)
+  def school_icon(%School{} = school, _app, size), do: get_image_url(school.icon, size, flexible: true)
 
   @spec user_settings?(atom()) :: boolean()
   def user_settings?(active_page) do

lib/layouts/templates/app.html.heex

@@ -1,4 +1,4 @@
-<.menu_mobile :if={show_menu?(@active_page)} school={@school}>
+<.menu_mobile :if={show_menu?(@active_page)} school={@school} app={@app}>
   <.app_menu
     active_page={@active_page}
     user_role={@user_role}
@@ -11,7 +11,7 @@
   />
 </.menu_mobile>
 
-<.menu_desktop :if={show_menu?(@active_page)} school={@school}>
+<.menu_desktop :if={show_menu?(@active_page)} school={@school} app={@app}>
   <.app_menu
     active_page={@active_page}
     user_role={@user_role}

lib/layouts/templates/auth.html.heex

@@ -1,6 +1,6 @@
 <header class="flex items-center justify-between p-4 sm:px-6 lg:px-8">
   <.link href={~p"/"}>
-    <img src={school_logo(@school)} alt={gettext("Logo")} class="h-14" />
+    <img src={school_logo(@school, @app)} alt={gettext("Logo")} class="h-14" />
   </.link>
 </header>
 

lib/layouts/templates/dashboard_course.html.heex

@@ -1,4 +1,4 @@
-<.menu_desktop :if={show_menu?(@active_page)} school={@school}>
+<.menu_desktop :if={show_menu?(@active_page)} school={@school} app={@app}>
   <.app_menu
     active_page={@active_page}
     user_role={@user_role}

lib/layouts/templates/dashboard_school.html.heex

@@ -1,4 +1,4 @@
-<.menu_desktop :if={show_menu?(@active_page)} school={@school}>
+<.menu_desktop :if={show_menu?(@active_page)} school={@school} app={@app}>
   <.app_menu
     active_page={@active_page}
     user_role={@user_role}

lib/layouts/templates/root.html.heex

@@ -14,9 +14,9 @@
     <script :if={enable_plausible?(assigns[:school_user])} defer data-domain={plausible_domain(assigns[:app])} src="https://plausible.io/js/script.js">
     </script>
 
-    <link rel="apple-touch-icon" sizes="180x180" href={school_icon(assigns.school, 180)} />
-    <link rel="icon" type="image/png" sizes="32x32" href={school_icon(assigns.school, 32)} />
-    <link rel="icon" type="image/png" sizes="16x16" href={school_icon(assigns.school, 16)} />
+    <link rel="apple-touch-icon" sizes="180x180" href={school_icon(assigns.school, assigns.app, 180)} />
+    <link rel="icon" type="image/png" sizes="32x32" href={school_icon(assigns.school, assigns.app, 32)} />
+    <link rel="icon" type="image/png" sizes="16x16" href={school_icon(assigns.school, assigns.app, 16)} />
     <meta name="msapplication-TileColor" content="#ffc40d" />
     <meta name="theme-color" content="#ffc40d" />
 

lib/shared/utilities.ex

@@ -72,9 +72,16 @@ defmodule UneebeeWeb.Shared.Utilities do
   In both cases, we should just load the image. However, when it's an optimized image using Cloudflare Images,
   then we should use the `image_url` function from `UneebeeWeb.Shared.ImageOptimizer`.
   """
-  @spec get_image_url(String.t() | nil, String.t()) :: String.t()
-  def get_image_url(nil, _variant), do: nil
-  def get_image_url("/" <> _rest = image, _variant), do: image
-  def get_image_url("https://" <> _rest = image, _variant), do: image
-  def get_image_url(image, variant), do: ImageOptimizer.image_url(image, variant)
+  @spec get_image_url(String.t() | nil, String.t(), list()) :: String.t()
+  def get_image_url(image, variant, opts \\ [])
+  def get_image_url(nil, _variant, _opts), do: nil
+  def get_image_url("/" <> _rest = image, _variant, _opts), do: image
+  def get_image_url("https://" <> _rest = image, _variant, _opts), do: image
+
+  def get_image_url(image, variant, flexible: true) do
+    url = ImageOptimizer.raw_image_url(image)
+    "#{url}/w=#{variant},h=#{variant},sharpen=1"
+  end
+
+  def get_image_url(image, variant, _opts), do: ImageOptimizer.image_url(image, variant)
 end

test/accounts/user_live/user_login_live_test.exs

@@ -3,6 +3,7 @@ defmodule UneebeeWeb.UserLoginLiveTest do
 
   import Phoenix.LiveViewTest
   import Uneebee.Fixtures.Accounts
+  import Uneebee.Fixtures.Organizations
 
   describe "Log in page" do
     test "renders log in page", %{conn: conn} do
@@ -26,13 +27,23 @@ defmodule UneebeeWeb.UserLoginLiveTest do
 
   describe "login page (with school configured)" do
     setup do
-      set_school(%{conn: build_conn()}, %{allow_guests?: true})
+      set_school(%{conn: build_conn()}, %{allow_guests?: true, logo: "/m_logo.png", icon: "/m_icon.png"})
     end
 
     test "renders the page even when guests are allowed", %{conn: conn} do
       assert {:ok, _lv, html} = live(conn, ~p"/users/login")
       assert html =~ "Sign in to your account"
     end
+
+    test "displays the logo and icon from the app school when it has one", %{conn: conn, school: school} do
+      child_school = school_fixture(%{school_id: school.id, logo: nil})
+      conn = Map.put(conn, :host, "#{child_school.slug}.#{school.custom_domain}")
+
+      {:ok, lv, html} = live(conn, ~p"/users/login")
+
+      assert has_element?(lv, ~s|img[src="/m_logo.png"]|)
+      assert html =~ "sizes=\"16x16\" href=\"/m_icon.png\"/>"
+    end
   end
 
   describe "user login" do