Move page subheaders under titles; minor cleanup (#892)

apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index.html.heex

@@ -1,15 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Firezone periodically checks for WAN connectivity to the Internet and logs
-      the result here. This is used to determine the public IP address of this
-      server for populating the default endpoint field in device configurations.
-    </p>
-  </div>
   <div class="block">
     <table class="table is-bordered is-hoverable is-striped is-fullwidth">
       <thead>

apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index_live.ex

@@ -6,6 +6,13 @@ defmodule FzHttpWeb.ConnectivityCheckLive.Index do
 
   alias FzHttp.ConnectivityChecks
 
+  @page_title "WAN Connectivity Checks"
+  @page_subtitle """
+  Firezone periodically checks for WAN connectivity to the Internet and logs the result here. \
+  This is used to determine the public IP address of this server for populating the default \
+  endpoint field in device configurations.
+  """
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     connectivity_checks = ConnectivityChecks.list_connectivity_checks(limit: 20)
@@ -13,6 +20,7 @@ defmodule FzHttpWeb.ConnectivityCheckLive.Index do
     {:ok,
      socket
      |> assign(:connectivity_checks, connectivity_checks)
-     |> assign(:page_title, "WAN Connectivity Checks")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 end

apps/fz_http/lib/fz_http_web/live/device_live/admin/index.html.heex

@@ -1,4 +1,6 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>

apps/fz_http/lib/fz_http_web/live/device_live/admin/index_live.ex

@@ -5,6 +5,11 @@ defmodule FzHttpWeb.DeviceLive.Admin.Index do
   use FzHttpWeb, :live_view
   alias FzHttp.{Devices, Repo}
 
+  @page_title "All Devices"
+  @page_subtitle """
+  Each device corresponds to a WireGuard configuration for connecting to this Firezone server.
+  """
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     devices =
@@ -15,7 +20,8 @@ defmodule FzHttpWeb.DeviceLive.Admin.Index do
     {:ok,
      socket
      |> assign(:devices, devices)
-     |> assign(:page_title, "All Devices")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @doc """

apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index.html.heex

@@ -15,8 +15,7 @@
   <h4 class="title is-4"><%= @page_title %></h4>
 
   <div class="block">
-    Each device corresponds to a WireGuard configuration for connecting to this
-    Firezone server.
+    <%= @page_subtitle %>
   </div>
 
   <div class="block">

apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index_live.ex

@@ -5,6 +5,11 @@ defmodule FzHttpWeb.DeviceLive.Unprivileged.Index do
   use FzHttpWeb, :live_view
   alias FzHttp.Devices
 
+  @page_title "Your Devices"
+  @page_subtitle """
+  Each device corresponds to a WireGuard configuration for connecting to this Firezone server.
+  """
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     user = socket.assigns.current_user
@@ -13,7 +18,8 @@ defmodule FzHttpWeb.DeviceLive.Unprivileged.Index do
      socket
      |> assign(:devices, Devices.list_devices(user.id))
      |> assign(:user, user)
-     |> assign(:page_title, "Your Devices")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @doc """

apps/fz_http/lib/fz_http_web/live/mfa_live/auth_live.ex

@@ -7,9 +7,11 @@ defmodule FzHttpWeb.MFALive.Auth do
   import FzHttpWeb.ControllerHelpers
   alias FzHttp.MFA
 
+  @page_title "Multi-factor Authentication"
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
-    {:ok, socket |> assign(:page_title, "Multi-factor Authentication")}
+    {:ok, socket |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView

apps/fz_http/lib/fz_http_web/live/notifications_live/badge.ex

@@ -16,13 +16,21 @@ defmodule FzHttpWeb.NotificationsLive.Badge do
 
     {:ok,
      socket
-     |> assign(:count, length(Notifications.current()))}
+     |> assign(assigns(Notifications.current()))}
   end
 
   @impl Phoenix.LiveView
   def handle_info({:notifications, notifications}, socket) do
     {:noreply,
      socket
-     |> assign(:count, length(notifications))}
+     |> assign(assigns(notifications))}
   end
+
+  defp assigns(notifications) do
+    count = length(notifications)
+    %{title: title(count), count: count}
+  end
+
+  defp title(0), do: "No Notifications"
+  defp title(n), do: "#{n} Notifications"
 end

apps/fz_http/lib/fz_http_web/live/notifications_live/badge.html.heex

@@ -1,6 +1,6 @@
 <%= live_redirect(
       to: Routes.notifications_index_path(FzHttpWeb.Endpoint, :index),
-      title: "Notifications",
+      title: @title,
       class: "navbar-item has-divider is-desktop-icon-only",
       style: "height: 100%"
     ) do %>

apps/fz_http/lib/fz_http_web/live/notifications_live/index.html.heex

@@ -1,44 +1,50 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <div class="block">
-    <table class="table is-hoverable is-bordered is-striped is-fullwidth">
-      <thead>
-        <tr>
-          <th></th>
-          <th>Time</th>
-          <th>User</th>
-          <th>Notification</th>
-          <th>Clear</th>
-        </tr>
-      </thead>
-      <tbody>
-        <%= for {notification, index} <- Enum.with_index(@notifications) do %>
+    <%= if Enum.any?(@notifications) do %>
+      <table class="table is-hoverable is-bordered is-striped is-fullwidth">
+        <thead>
           <tr>
-            <td class="has-text-centered is-vcentered">
-              <%= icon(notification.type, assigns) %>
-            </td>
-            <td
-              class="has-text-centered is-vcentered"
-              style="width: 15%"
-              id={"notification-time-#{index}"}
-              phx-hook="FormatTimestamp"
-              data-timestamp={notification.timestamp}>
-              ...
-            </td>
-            <td class="has-text-centered is-vcentered"><%= notification.user %></td>
-            <td class="is-vcentered"><%= notification.message %></td>
-            <td class="has-text-centered is-vcentered">
-              <button
-                title="Dissmiss notification"
-                class="delete is-medium"
-                phx-click="clear_notification"
-                phx-value-index={index}>
-              </button>
-            </td>
+            <th></th>
+            <th>Time</th>
+            <th>User</th>
+            <th>Notification</th>
+            <th>Clear</th>
           </tr>
-        <% end %>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <%= for {notification, index} <- Enum.with_index(@notifications) do %>
+            <tr>
+              <td class="has-text-centered is-vcentered">
+                <%= icon(notification.type, assigns) %>
+              </td>
+              <td
+                class="has-text-centered is-vcentered"
+                style="width: 15%"
+                id={"notification-time-#{index}"}
+                phx-hook="FormatTimestamp"
+                data-timestamp={notification.timestamp}>
+                ...
+              </td>
+              <td class="has-text-centered is-vcentered"><%= notification.user %></td>
+              <td class="is-vcentered"><%= notification.message %></td>
+              <td class="has-text-centered is-vcentered">
+                <button
+                  title="Dissmiss notification"
+                  class="delete is-medium"
+                  phx-click="clear_notification"
+                  phx-value-index={index}>
+                </button>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      No notifications to display.
+    <% end %>
   </div>
 </section>

apps/fz_http/lib/fz_http_web/live/notifications_live/index_live.ex

@@ -10,6 +10,8 @@ defmodule FzHttpWeb.NotificationsLive.Index do
   require Logger
 
   @topic "notifications_live"
+  @page_title "Notifications"
+  @page_subtitle "Persisted notifications will appear below."
 
   def topic, do: @topic
 
@@ -20,7 +22,8 @@ defmodule FzHttpWeb.NotificationsLive.Index do
     {:ok,
      socket
      |> assign(:notifications, Notifications.current())
-     |> assign(:page_title, "Notifications")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView

apps/fz_http/lib/fz_http_web/live/rule_live/index.html.heex

@@ -1,4 +1,6 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <div class="block">

apps/fz_http/lib/fz_http_web/live/rule_live/index_live.ex

@@ -4,9 +4,13 @@ defmodule FzHttpWeb.RuleLive.Index do
   """
   use FzHttpWeb, :live_view
 
+  @page_title "Egress Rules"
+  @page_subtitle "Firewall rules to apply to the kernel's forward chain."
+
   def mount(_params, _session, socket) do
     {:ok,
      socket
-     |> assign(:page_title, "Egress Rules")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 end

apps/fz_http/lib/fz_http_web/live/setting_live/account.html.heex

@@ -16,17 +16,13 @@
       return_to={Routes.setting_account_path(@socket, :show)} />
 <% end %>
 
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Configure account settings.
-    </p>
-  </div>
-
   <div class="level">
     <div class="level-left">
       <h4 class="title is-4">Details</h4>

apps/fz_http/lib/fz_http_web/live/setting_live/account_live.ex

@@ -8,6 +8,8 @@ defmodule FzHttpWeb.SettingLive.Account do
   alias FzHttpWeb.{Endpoint, Presence}
 
   @live_sessions_topic "notification:session"
+  @page_title "Account Settings"
+  @page_subtitle "Configure settings related to your Firezone web portal account."
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
@@ -17,7 +19,8 @@ defmodule FzHttpWeb.SettingLive.Account do
      socket
      |> assign(:changeset, Users.change_user(socket.assigns.current_user))
      |> assign(:methods, MFA.list_methods(socket.assigns.current_user))
-     |> assign(:page_title, "Account Settings")
+     |> assign(:page_title, @page_title)
+     |> assign(:page_subtitle, @page_subtitle)
      |> assign(:rules_path, Routes.rule_index_path(socket, :index))
      |> assign(
        :metas,

apps/fz_http/lib/fz_http_web/live/setting_live/customization.html.heex

@@ -1,14 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Customize your web portal.
-    </p>
-  </div>
-
   <h4 class="title is-4">Logo</h4>
 
   <div class="block">

apps/fz_http/lib/fz_http_web/live/setting_live/customization_live.ex

@@ -7,6 +7,8 @@ defmodule FzHttpWeb.SettingLive.Customization do
   alias FzHttp.Conf
 
   @max_logo_size 1024 ** 2
+  @page_title "Customization"
+  @page_subtitle "Customize the look and feel of your Firezone web portal."
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
@@ -15,7 +17,8 @@ defmodule FzHttpWeb.SettingLive.Customization do
 
     {:ok,
      socket
-     |> assign(:page_title, "Customization")
+     |> assign(:page_title, @page_title)
+     |> assign(:page_subtitle, @page_subtitle)
      |> assign(:logo, logo)
      |> assign(:logo_type, logo_type)
      |> allow_upload(:logo,

apps/fz_http/lib/fz_http_web/live/setting_live/security.html.heex

@@ -1,14 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Configure security-related settings.
-    </p>
-  </div>
-
   <h4 class="title is-4">Authentication</h4>
 
   <div class="block">

apps/fz_http/lib/fz_http_web/live/setting_live/security_live.ex

@@ -8,6 +8,9 @@ defmodule FzHttpWeb.SettingLive.Security do
 
   alias FzHttp.{Conf, Sites, Sites.Site}
 
+  @page_title "Security Settings"
+  @page_subtitle "Configure security-related settings."
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     config_changeset = Conf.change_configuration()
@@ -18,7 +21,8 @@ defmodule FzHttpWeb.SettingLive.Security do
      |> assign(:session_duration_options, session_duration_options())
      |> assign(:site_changeset, site_changeset())
      |> assign(:config_changeset, config_changeset)
-     |> assign(:page_title, "Security Settings")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView

apps/fz_http/lib/fz_http_web/live/setting_live/site.html.heex

@@ -1,14 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Configure default WireGuard settings for this site.
-    </p>
-  </div>
-
   <h4 class="title is-4">Site Defaults</h4>
 
   <div class="block">

apps/fz_http/lib/fz_http_web/live/setting_live/site_live.ex

@@ -6,13 +6,17 @@ defmodule FzHttpWeb.SettingLive.Site do
 
   alias FzHttp.{ConnectivityChecks, Sites}
 
+  @page_title "Site Settings"
+  @page_subtitle "Configure default WireGuard settings for this site."
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     {:ok,
      socket
      |> assign(:changeset, changeset())
      |> assign(:placeholders, placeholders())
-     |> assign(:page_title, "Site Settings")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   defp endpoint_placeholder do

apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account.html.heex

@@ -23,9 +23,7 @@
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
   <div class="block">
-    <p>
-      Configure account settings.
-    </p>
+    <%= @page_subtitle %>
   </div>
 
   <div class="level">

apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account_live.ex

@@ -12,6 +12,8 @@ defmodule FzHttpWeb.SettingLive.Unprivileged.Account do
   alias FzHttpWeb.{Endpoint, Presence}
 
   @live_sessions_topic "notification:session"
+  @page_title "Account Settings"
+  @page_subtitle "Configure account settings."
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
@@ -22,7 +24,8 @@ defmodule FzHttpWeb.SettingLive.Unprivileged.Account do
      |> assign(:local_auth_enabled, FzHttp.Conf.get(:local_auth_enabled))
      |> assign(:changeset, Users.change_user(socket.assigns.current_user))
      |> assign(:methods, MFA.list_methods(socket.assigns.current_user))
-     |> assign(:page_title, "Account Settings")
+     |> assign(:page_title, @page_title)
+     |> assign(:page_subtitle, @page_subtitle)
      |> assign(
        :metas,
        get_metas(Presence.list(@live_sessions_topic), socket.assigns.current_user.id)

apps/fz_http/lib/fz_http_web/live/user_live/index_live.ex

@@ -6,13 +6,15 @@ defmodule FzHttpWeb.UserLive.Index do
 
   alias FzHttp.Users
 
+  @page_title "Users"
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     {:ok,
      socket
      |> assign(:users, Users.list_users(:with_device_counts))
      |> assign(:changeset, Users.new_user())
-     |> assign(:page_title, "Users")}
+     |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView

apps/fz_http/lib/fz_http_web/templates/shared/heading.html.heex

@@ -1,16 +1,14 @@
 <section class="hero is-hero-bar">
   <div class="hero-body">
-    <div class="level">
-      <div class="level-left">
-        <div class="level-item">
-          <h1 class="title">
-            <%= @page_title %>
-          </h1>
-        </div>
-      </div>
-      <div class="level-right" style="display: none;">
-        <div class="level-item"></div>
-      </div>
+    <div class="block">
+        <h1 class="title">
+          <%= @page_title %>
+        </h1>
     </div>
+    <%= if assigns[:page_subtitle] do %>
+      <div class="block">
+        <p><%= @page_subtitle %></p>
+      </div>
+    <% end %>
   </div>
 </section>

docker-compose.yml

@@ -31,6 +31,7 @@ services:
       # doesn't match the platform under which Docker Engine is running. e.g.
       # WSL, Docker for Mac, etc.
       - /var/app/apps/fz_http/assets/node_modules
+      - /var/app/_build
     ports:
       - 51820:51820/udp
     environment: