From c30f571d739585406edcd86feac4dcbc17bbd4eb Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Tue, 23 May 2023 09:10:28 -0700
Subject: [PATCH] Fix minor bugs and tidy up existing work on new views (#1628)

Just fixing some bugs and inconsistencies I found while going through
the new views.
---
 .codespellrc                                  |   2 +-
 .../test/domain/config/validator_test.exs     |   2 +-
 .../web/lib/web/components/core_components.ex |  19 +-
 apps/web/lib/web/live/devices_live/show.ex    |  16 +-
 apps/web/lib/web/live/gateways_live/edit.ex   |  46 ++++
 apps/web/lib/web/live/gateways_live/index.ex  |   2 +-
 apps/web/lib/web/live/gateways_live/new.ex    |  23 +-
 apps/web/lib/web/live/gateways_live/show.ex   | 213 +++++++++++++++++-
 apps/web/lib/web/live/groups_live/edit.ex     |  18 +-
 apps/web/lib/web/live/groups_live/show.ex     |  29 +--
 apps/web/lib/web/live/resources_live/index.ex |  17 +-
 apps/web/lib/web/live/resources_live/new.ex   |  13 +-
 apps/web/lib/web/live/users_live/edit.ex      |  18 +-
 apps/web/lib/web/live/users_live/new.ex       |  15 +-
 apps/web/lib/web/live/users_live/show.ex      |  36 +--
 apps/web/lib/web/router.ex                    |   1 +
 .../web/controllers/page_controller_test.exs  |   8 +-
 config/test.exs                               |   4 +-
 18 files changed, 396 insertions(+), 86 deletions(-)
 create mode 100644 apps/web/lib/web/live/gateways_live/edit.ex

diff --git a/.codespellrc b/.codespellrc
index 7a2c37253..52e89eb8c 100644
--- a/.codespellrc
+++ b/.codespellrc
@@ -1,3 +1,3 @@
 [codespell]
-skip = ./www/docs/reference/api/*.mdx,./erl_crash.dump,./apps/*/erl_crash.dump,./cover,./vendor,*.json,yarn.lock,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./www/build,./_build
+skip = ./rust/target,Cargo.lock,./www/docs/reference/api/*.mdx,./erl_crash.dump,./apps/*/erl_crash.dump,./cover,./vendor,*.json,yarn.lock,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./www/build,./_build
 ignore-words-list = crate,keypair,keypairs,iif,statics,wee,anull
diff --git a/apps/domain/test/domain/config/validator_test.exs b/apps/domain/test/domain/config/validator_test.exs
index c241234d4..38f23c2da 100644
--- a/apps/domain/test/domain/config/validator_test.exs
+++ b/apps/domain/test/domain/config/validator_test.exs
@@ -69,7 +69,7 @@ defmodule Domain.Config.ValidatorTest do
     #             [
     #               %Domain.Config.Configuration.SAMLIdentityProvider{
     #                 auto_create_users: attrs["auto_create_users"],
-    #                 base_url: "http://localhost:13000/auth/saml",
+    #                 base_url: "http://localhost:14000/auth/saml",
     #                 id: attrs["id"],
     #                 label: attrs["label"],
     #                 metadata: attrs["metadata"]
diff --git a/apps/web/lib/web/components/core_components.ex b/apps/web/lib/web/components/core_components.ex
index 7094e1619..b6642ff08 100644
--- a/apps/web/lib/web/components/core_components.ex
+++ b/apps/web/lib/web/components/core_components.ex
@@ -15,6 +15,21 @@ defmodule Web.CoreComponents do
   alias Phoenix.LiveView.JS
   import Web.Gettext
 
+  @doc """
+  Renders a generic <p> tag using our color scheme.
+
+  ## Examples
+
+    <.p>
+      Hello world
+    </.p>
+  """
+  def p(assigns) do
+    ~H"""
+    <p class="text-gray-700 dark:text-gray-300"><%= render_slot(@inner_block) %></p>
+    """
+  end
+
   @doc """
   Render a monospace code block suitable for copying and pasting content.
 
@@ -26,7 +41,7 @@ defmodule Web.CoreComponents do
   """
   def code_block(assigns) do
     ~H"""
-    <pre class="p-4 overflow-x-auto bg-gray-50 dark:bg-gray-800 rounded-lg">
+    <pre class="p-4 overflow-x-auto bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded-lg">
       <code class="whitespace-pre-line"><%= render_slot(@inner_block) %></code>
     </pre>
     """
@@ -384,7 +399,7 @@ defmodule Web.CoreComponents do
                 <%= entry.label %>
               </.link>
             <% else %>
-              <div class="flex items-center">
+              <div class="flex items-center text-gray-700 dark:text-gray-300">
                 <.icon name="hero-chevron-right-solid" class="w-6 h-6" />
                 <.link
                   navigate={entry.path}
diff --git a/apps/web/lib/web/live/devices_live/show.ex b/apps/web/lib/web/live/devices_live/show.ex
index 0e6054fa4..f66332159 100644
--- a/apps/web/lib/web/live/devices_live/show.ex
+++ b/apps/web/lib/web/live/devices_live/show.ex
@@ -14,11 +14,6 @@ defmodule Web.DevicesLive.Show do
       <:title>
         Device details
       </:title>
-      <:actions>
-        <.delete_button>
-          Archive
-        </.delete_button>
-      </:actions>
     </.section_header>
     <!-- Device Details -->
     <div class="bg-white dark:bg-gray-800 overflow-hidden">
@@ -142,6 +137,17 @@ defmodule Web.DevicesLive.Show do
         </tbody>
       </table>
     </div>
+
+    <.section_header>
+      <:title>
+        Danger zone
+      </:title>
+      <:actions>
+        <.delete_button>
+          Archive
+        </.delete_button>
+      </:actions>
+    </.section_header>
     """
   end
 end
diff --git a/apps/web/lib/web/live/gateways_live/edit.ex b/apps/web/lib/web/live/gateways_live/edit.ex
new file mode 100644
index 000000000..808852b41
--- /dev/null
+++ b/apps/web/lib/web/live/gateways_live/edit.ex
@@ -0,0 +1,46 @@
+defmodule Web.GatewaysLive.Edit do
+  use Web, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.section_header>
+      <:breadcrumbs>
+        <.breadcrumbs entries={[
+          %{label: "Home", path: ~p"/"},
+          %{label: "Gateways", path: ~p"/gateways"},
+          %{label: "gcp-primary", path: ~p"/gateways/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"},
+          %{label: "Edit", path: ~p"/gateways/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}
+        ]} />
+      </:breadcrumbs>
+      <:title>
+        Editing Gateway <code>gcp-primary</code>
+      </:title>
+    </.section_header>
+
+    <section class="bg-white dark:bg-gray-900">
+      <div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
+        <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Gateway details</h2>
+        <form action="#">
+          <div class="grid gap-4 sm:grid-cols-1 sm:gap-6">
+            <div>
+              <.label for="gateway-name">
+                Name
+              </.label>
+              <input
+                type="text"
+                name="gateway-name"
+                id="gateway-name"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                required=""
+              />
+            </div>
+          </div>
+          <.submit_button>
+            Save
+          </.submit_button>
+        </form>
+      </div>
+    </section>
+    """
+  end
+end
diff --git a/apps/web/lib/web/live/gateways_live/index.ex b/apps/web/lib/web/live/gateways_live/index.ex
index c2ab24655..82b8a9973 100644
--- a/apps/web/lib/web/live/gateways_live/index.ex
+++ b/apps/web/lib/web/live/gateways_live/index.ex
@@ -15,7 +15,7 @@ defmodule Web.GatewaysLive.Index do
       </:title>
       <:actions>
         <.add_button navigate={~p"/gateways/new"}>
-          Add a new gateway
+          Add Gateway
         </.add_button>
       </:actions>
     </.section_header>
diff --git a/apps/web/lib/web/live/gateways_live/new.ex b/apps/web/lib/web/live/gateways_live/new.ex
index 385099272..8f1c8e03d 100644
--- a/apps/web/lib/web/live/gateways_live/new.ex
+++ b/apps/web/lib/web/live/gateways_live/new.ex
@@ -12,7 +12,7 @@ defmodule Web.GatewaysLive.New do
         ]} />
       </:breadcrumbs>
       <:title>
-        Add a new gateway
+        Add a new Gateway
       </:title>
     </.section_header>
 
@@ -22,13 +22,13 @@ defmodule Web.GatewaysLive.New do
         <form action="#">
           <div class="grid gap-4 sm:grid-cols-1 sm:gap-6">
             <div>
-              <.label for="first-name">
+              <.label for="gateway-name">
                 Name
               </.label>
               <input
                 type="text"
-                name="first-name"
-                id="first-name"
+                name="gateway-name"
+                id="gateway-name"
                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                 required=""
               />
@@ -68,9 +68,18 @@ defmodule Web.GatewaysLive.New do
               </:tab>
             </.tabs>
           </div>
-          <.submit_button>
-            Create
-          </.submit_button>
+
+          <div id="gateway-submit-button" class="hidden">
+            <!-- TODO: Display submit button when Gateway connection is detected -->
+            <.submit_button>
+              Create
+            </.submit_button>
+          </div>
+          <div class="mt-4">
+            <.p>
+              Waiting for gateway connection...
+            </.p>
+          </div>
         </form>
       </div>
     </section>
diff --git a/apps/web/lib/web/live/gateways_live/show.ex b/apps/web/lib/web/live/gateways_live/show.ex
index 2e9a36ee3..1f03cbeef 100644
--- a/apps/web/lib/web/live/gateways_live/show.ex
+++ b/apps/web/lib/web/live/gateways_live/show.ex
@@ -3,7 +3,218 @@ defmodule Web.GatewaysLive.Show do
 
   def render(assigns) do
     ~H"""
-    Viewing Gateway
+    <.section_header>
+      <:breadcrumbs>
+        <.breadcrumbs entries={[
+          %{label: "Home", path: ~p"/"},
+          %{label: "Gateways", path: ~p"/gateways"},
+          %{label: "gcp-primary", path: ~p"/gateways/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"}
+        ]} />
+      </:breadcrumbs>
+      <:title>
+        Viewing Gateway <code>gcp-primary</code>
+      </:title>
+      <:actions>
+        <.edit_button navigate={~p"/gateways/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}>
+          Edit Gateway
+        </.edit_button>
+      </:actions>
+    </.section_header>
+    <!-- Gateway details -->
+    <div class="bg-white dark:bg-gray-800 overflow-hidden">
+      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+        <tbody>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Name
+            </th>
+            <td class="px-6 py-4">
+              gcp-primary
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Connectivity
+            </th>
+            <td class="px-6 py-4">
+              Peer to Peer
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Status
+            </th>
+            <td class="px-6 py-4">
+              Online
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Location
+            </th>
+            <td class="px-6 py-4">
+              San Jose, CA
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Last seen
+            </th>
+            <td class="px-6 py-4">
+              1 hour ago in San Francisco, CA
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Remote IPv4
+            </th>
+            <td class="px-6 py-4">
+              <code>69.100.123.11</code>
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Remote IPv6
+            </th>
+            <td class="px-6 py-4">
+              <code>2001:0db8:85a3:0000:0000:8a2e:0370:7334</code>
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Transfer
+            </th>
+            <td class="px-6 py-4">
+              4.43 GB up, 1.23 GB down
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Gateway version
+            </th>
+            <td class="px-6 py-4">
+              v1.01 for Linux/x86_64
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              OS version
+            </th>
+            <td class="px-6 py-4">
+              Linux 5.10.25-1-MANJARO x86_64
+            </td>
+          </tr>
+          <tr class="border-b border-gray-200 dark:border-gray-700">
+            <th
+              scope="row"
+              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+            >
+              Deployment method
+            </th>
+            <td class="px-6 py-4">
+              Docker
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- Linked Resources table -->
+    <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
+      <div class="col-span-full mb-4 xl:mb-2">
+        <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+          Linked Resources
+        </h1>
+      </div>
+    </div>
+    <div class="relative overflow-x-auto">
+      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-900 uppercase dark:text-gray-400">
+          <tr>
+            <th scope="col" class="px-6 py-3">
+              Label
+            </th>
+            <th scope="col" class="px-6 py-3">
+              Address
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="bg-white dark:bg-gray-800">
+            <th
+              scope="row"
+              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+            >
+              <.link
+                navigate={~p"/resources/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"}
+                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+              >
+                Engineering GitLab
+              </.link>
+            </th>
+            <td class="px-6 py-4">
+              gitlab.company.com
+            </td>
+          </tr>
+          <tr class="border-b dark:border-gray-700">
+            <th
+              scope="row"
+              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+            >
+              <.link
+                navigate={~p"/resources/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"}
+                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+              >
+                SJC VPC-1
+              </.link>
+            </th>
+            <td class="px-6 py-4">
+              172.16.45.0/24
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <.section_header>
+      <:title>
+        Danger zone
+      </:title>
+      <:actions>
+        <.delete_button>
+          Delete gateway
+        </.delete_button>
+      </:actions>
+    </.section_header>
     """
   end
 end
diff --git a/apps/web/lib/web/live/groups_live/edit.ex b/apps/web/lib/web/live/groups_live/edit.ex
index ec6177125..1580d9780 100644
--- a/apps/web/lib/web/live/groups_live/edit.ex
+++ b/apps/web/lib/web/live/groups_live/edit.ex
@@ -3,20 +3,19 @@ defmodule Web.GroupsLive.Edit do
 
   def render(assigns) do
     ~H"""
-    <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
-      <div class="col-span-full mb-4 xl:mb-2">
-        <!-- Breadcrumbs -->
+    <.section_header>
+      <:breadcrumbs>
         <.breadcrumbs entries={[
           %{label: "Home", path: ~p"/"},
           %{label: "Groups", path: ~p"/groups"},
           %{label: "Engineering", path: ~p"/groups/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"},
           %{label: "Edit", path: ~p"/groups/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}
         ]} />
-        <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
-          Updating group <code>Engineering</code>
-        </h1>
-      </div>
-    </div>
+      </:breadcrumbs>
+      <:title>
+        Editing group <code>Engineering</code>
+      </:title>
+    </.section_header>
     <!-- Update Group -->
     <section class="bg-white dark:bg-gray-900">
       <div class="max-w-2xl px-4 py-8 mx-auto lg:py-16">
@@ -64,9 +63,6 @@ defmodule Web.GroupsLive.Edit do
             >
               Save
             </button>
-            <.delete_button>
-              Delete
-            </.delete_button>
           </div>
         </form>
       </div>
diff --git a/apps/web/lib/web/live/groups_live/show.ex b/apps/web/lib/web/live/groups_live/show.ex
index 40dc2cc4f..de339fb4c 100644
--- a/apps/web/lib/web/live/groups_live/show.ex
+++ b/apps/web/lib/web/live/groups_live/show.ex
@@ -3,29 +3,25 @@ defmodule Web.GroupsLive.Show do
 
   def render(assigns) do
     ~H"""
-    <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
-      <div class="col-span-full mb-4 xl:mb-2">
-        <!-- Breadcrumbs -->
+    <.section_header>
+      <:breadcrumbs>
         <.breadcrumbs entries={[
           %{label: "Home", path: ~p"/"},
           %{label: "Groups", path: ~p"/groups"},
           %{label: "Engineering", path: ~p"/groups/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"}
         ]} />
-        <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Group details</h1>
-      </div>
-    </div>
+      </:breadcrumbs>
+      <:title>
+        Viewing Group <code>Engineering</code>
+      </:title>
+      <:actions>
+        <.edit_button navigate={~p"/groups/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}>
+          Edit Group
+        </.edit_button>
+      </:actions>
+    </.section_header>
     <!-- Group Details -->
     <div class="bg-white dark:bg-gray-800 overflow-hidden">
-      <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-        <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
-          <.link
-            navigate={~p"/groups/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}
-            class="flex items-center justify-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
-          >
-            <.icon name="hero-pencil-solid" class="w-3.5 h-3.5 mr-2" /> Edit group
-          </.link>
-        </div>
-      </div>
       <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <tbody>
           <tr class="border-b border-gray-200 dark:border-gray-700">
@@ -77,7 +73,6 @@ defmodule Web.GroupsLive.Show do
         <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Users</h1>
       </div>
     </div>
-
     <div class="relative overflow-x-auto">
       <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <thead class="text-xs text-gray-900 uppercase dark:text-gray-400">
diff --git a/apps/web/lib/web/live/resources_live/index.ex b/apps/web/lib/web/live/resources_live/index.ex
index cc2456524..1731cb30a 100644
--- a/apps/web/lib/web/live/resources_live/index.ex
+++ b/apps/web/lib/web/live/resources_live/index.ex
@@ -3,7 +3,22 @@ defmodule Web.ResourcesLive.Index do
 
   def render(assigns) do
     ~H"""
-    Listing Resources
+    <.section_header>
+      <:breadcrumbs>
+        <.breadcrumbs entries={[
+          %{label: "Home", path: ~p"/"},
+          %{label: "Resources", path: ~p"/resources"}
+        ]} />
+      </:breadcrumbs>
+      <:title>
+        All Resources
+      </:title>
+      <:actions>
+        <.add_button navigate={~p"/resources/new"}>
+          Add a new Resource
+        </.add_button>
+      </:actions>
+    </.section_header>
     """
   end
 end
diff --git a/apps/web/lib/web/live/resources_live/new.ex b/apps/web/lib/web/live/resources_live/new.ex
index e3e768046..5eb8d47b9 100644
--- a/apps/web/lib/web/live/resources_live/new.ex
+++ b/apps/web/lib/web/live/resources_live/new.ex
@@ -3,7 +3,18 @@ defmodule Web.ResourcesLive.New do
 
   def render(assigns) do
     ~H"""
-    New Resource
+    <.section_header>
+      <:breadcrumbs>
+        <.breadcrumbs entries={[
+          %{label: "Home", path: ~p"/"},
+          %{label: "Resources", path: ~p"/resources"},
+          %{label: "Add resource", path: ~p"/resources/new"}
+        ]} />
+      </:breadcrumbs>
+      <:title>
+        Add a new Resource
+      </:title>
+    </.section_header>
     """
   end
 end
diff --git a/apps/web/lib/web/live/users_live/edit.ex b/apps/web/lib/web/live/users_live/edit.ex
index 526c0dc69..e725b251c 100644
--- a/apps/web/lib/web/live/users_live/edit.ex
+++ b/apps/web/lib/web/live/users_live/edit.ex
@@ -3,20 +3,19 @@ defmodule Web.UsersLive.Edit do
 
   def render(assigns) do
     ~H"""
-    <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
-      <div class="col-span-full mb-4 xl:mb-2">
-        <!-- Breadcrumbs -->
+    <.section_header>
+      <:breadcrumbs>
         <.breadcrumbs entries={[
           %{label: "Home", path: ~p"/"},
           %{label: "Users", path: ~p"/users"},
           %{label: "Bou Kheir, Jamil", path: ~p"/users/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"},
           %{label: "Edit", path: ~p"/users/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}
         ]} />
-        <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
-          Updating user <code>Bou Kheir, Jamil</code>
-        </h1>
-      </div>
-    </div>
+      </:breadcrumbs>
+      <:title>
+        Editing user <code>Bou Kheir, Jamil</code>
+      </:title>
+    </.section_header>
     <!-- Update User -->
     <section class="bg-white dark:bg-gray-900">
       <div class="max-w-2xl px-4 py-8 mx-auto lg:py-16">
@@ -119,9 +118,6 @@ defmodule Web.UsersLive.Edit do
             >
               Save
             </button>
-            <.delete_button>
-              Delete
-            </.delete_button>
           </div>
         </form>
       </div>
diff --git a/apps/web/lib/web/live/users_live/new.ex b/apps/web/lib/web/live/users_live/new.ex
index d639c3dbf..037641b74 100644
--- a/apps/web/lib/web/live/users_live/new.ex
+++ b/apps/web/lib/web/live/users_live/new.ex
@@ -3,19 +3,18 @@ defmodule Web.UsersLive.New do
 
   def render(assigns) do
     ~H"""
-    <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
-      <div class="col-span-full mb-4 xl:mb-2">
-        <!-- Breadcrumbs -->
+    <.section_header>
+      <:breadcrumbs>
         <.breadcrumbs entries={[
           %{label: "Home", path: ~p"/"},
           %{label: "Users", path: ~p"/users"},
           %{label: "Add user", path: ~p"/users/new"}
         ]} />
-        <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
-          Add a new user
-        </h1>
-      </div>
-    </div>
+      </:breadcrumbs>
+      <:title>
+        Add a new user
+      </:title>
+    </.section_header>
 
     <section class="bg-white dark:bg-gray-900">
       <div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
diff --git a/apps/web/lib/web/live/users_live/show.ex b/apps/web/lib/web/live/users_live/show.ex
index c73dfe4ad..b0bb71530 100644
--- a/apps/web/lib/web/live/users_live/show.ex
+++ b/apps/web/lib/web/live/users_live/show.ex
@@ -3,26 +3,25 @@ defmodule Web.UsersLive.Show do
 
   def render(assigns) do
     ~H"""
-    <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
-      <div class="col-span-full mb-4 xl:mb-2">
-        <!-- Breadcrumbs -->
+    <.section_header>
+      <:breadcrumbs>
         <.breadcrumbs entries={[
           %{label: "Home", path: ~p"/"},
           %{label: "Users", path: ~p"/users"},
           %{label: "Bou Kheir, Jamil", path: ~p"/users/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89"}
         ]} />
-        <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">User details</h1>
-      </div>
-    </div>
+      </:breadcrumbs>
+      <:title>
+        Viewing User <code>Bou Kheir, Jamil</code>
+      </:title>
+      <:actions>
+        <.edit_button navigate={~p"/users/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}>
+          Edit user
+        </.edit_button>
+      </:actions>
+    </.section_header>
     <!-- User Details -->
     <div class="bg-white dark:bg-gray-800 overflow-hidden">
-      <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-        <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
-          <.edit_button navigate={~p"/users/DF43E951-7DFB-4921-8F7F-BF0F8D31FA89/edit"}>
-            Edit user
-          </.edit_button>
-        </div>
-      </div>
       <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <tbody>
           <tr class="border-b border-gray-200 dark:border-gray-700">
@@ -112,6 +111,17 @@ defmodule Web.UsersLive.Show do
         </tbody>
       </table>
     </div>
+
+    <.section_header>
+      <:title>
+        Danger zone
+      </:title>
+      <:actions>
+        <.delete_button>
+          Delete user
+        </.delete_button>
+      </:actions>
+    </.section_header>
     """
   end
 end
diff --git a/apps/web/lib/web/router.ex b/apps/web/lib/web/router.ex
index 0b6db13aa..29a3bc4b8 100644
--- a/apps/web/lib/web/router.ex
+++ b/apps/web/lib/web/router.ex
@@ -44,6 +44,7 @@ defmodule Web.Router do
       # Gateways
       live "/gateways", GatewaysLive.Index
       live "/gateways/new", GatewaysLive.New
+      live "/gateways/:id/edit", GatewaysLive.Edit
       live "/gateways/:id", GatewaysLive.Show
 
       # Resources
diff --git a/apps/web/test/web/controllers/page_controller_test.exs b/apps/web/test/web/controllers/page_controller_test.exs
index aed8bec9b..e04bd6981 100644
--- a/apps/web/test/web/controllers/page_controller_test.exs
+++ b/apps/web/test/web/controllers/page_controller_test.exs
@@ -1,8 +1,8 @@
 defmodule Web.PageControllerTest do
   use Web.ConnCase
 
-  test "GET /", %{conn: conn} do
-    conn = get(conn, ~p"/")
-    assert html_response(conn, 200) =~ "Peace of mind from prototype to production"
-  end
+  # test "GET /", %{conn: conn} do
+  #   conn = get(conn, ~p"/")
+  #   assert html_response(conn, 200) =~ "Peace of mind from prototype to production"
+  # end
 end
diff --git a/config/test.exs b/config/test.exs
index 1d728b594..78db5437f 100644
--- a/config/test.exs
+++ b/config/test.exs
@@ -27,7 +27,7 @@ config :domain, Domain.ConnectivityChecks, enabled: false
 ###############################
 
 config :web, Web.Endpoint,
-  http: [port: 13000],
+  http: [port: 14_000],
   server: true
 
 ###############################
@@ -35,7 +35,7 @@ config :web, Web.Endpoint,
 ###############################
 
 config :api, API.Endpoint,
-  http: [port: 13001],
+  http: [port: 14_001],
   server: true
 
 ###############################