fix: Display nav options according to auth status

Include `current_user` in live sessions for convenience.

lib/medical_transcription_web/components/header_component.ex

@@ -0,0 +1,88 @@
+defmodule MedicalTranscriptionWeb.Components.HeaderComponent do
+  import MedicalTranscriptionWeb.CoreComponents
+
+  use Phoenix.Component
+  use MedicalTranscriptionWeb, :verified_routes
+
+  def header(assigns) do
+    ~H"""
+    <header class="hidden w-[335px] min-w-[335px] pt-6 border-r border-gray-200 lg:flex flex-col gap-12">
+      <div class="flex items-center gap-[10.5px]">
+        <img src={~p"/images/logo.svg"} width="48" />
+
+        <h1 class="text-lg leading-normal px-2 font-semibold">
+          Medical Code Transcriber
+        </h1>
+      </div>
+
+      <ul class="flex flex-col items-center gap-4 px-4">
+        <%= if @current_user do %>
+          <li class="text-[0.8125rem] leading-6 text-zinc-900">
+            <%= @current_user.email %>
+          </li>
+          <li>
+            <.link
+              href={~p"/users/settings"}
+              class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            >
+              Settings
+            </.link>
+          </li>
+          <li>
+            <.link
+              href={~p"/users/log_out"}
+              method="delete"
+              class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            >
+              Log out
+            </.link>
+          </li>
+        <% else %>
+          <li class="w-full">
+            <.link
+              href={~p"/users/register"}
+              class="text-[0.8125rem] text-left w-full block leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            >
+              Register
+            </.link>
+          </li>
+          <li class="w-full">
+            <.link
+              href={~p"/users/log_in"}
+              class="text-[0.8125rem] text-left w-full leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            >
+              Log in
+            </.link>
+          </li>
+        <% end %>
+      </ul>
+
+      <%= if @current_user do %>
+        <div class="flex-1 px-6">
+          <p class="text-xs leading-normal tracking-[0.2em] font-semibold uppercase">Today</p>
+        </div>
+
+        <div class="px-6 flex flex-col items-center">
+          <%= if MedicalTranscription.Coding.icd9_present?() do %>
+            <div
+              class="w-full px-3 py-2 bg-emerald-600 text-white text-center rounded-lg"
+              title="Precalculated vector embeddings for classification labels were found."
+            >
+              <.icon name="hero-check-circle" /> Vector embeddings found!
+            </div>
+          <% else %>
+            <div
+              class="w-full px-3 py-2 bg-red-300 text-slate-900 text-center rounded-lg"
+              title="Precalculated vector embeddings for classification labels were found."
+            >
+              <.icon name="hero-x-circle" /> Vector embeddings need to be built. Run
+              <code class="p-1 text-sm bg-slate-300 rounded-lg">mix build_code_vectors</code>
+              on the server.
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </header>
+    """
+  end
+end

lib/medical_transcription_web/components/layouts/app.html.heex

@@ -1,37 +1,5 @@
 <div class="min-h-[calc(100vh-56px)] flex gap-5">
-  <header class="hidden w-[335px] min-w-[335px] pt-6 border-r border-gray-200 lg:flex flex-col gap-12">
-    <div class="flex items-center gap-[10.5px]">
-      <img src={~p"/images/logo.svg"} width="48" />
-
-      <h1 class="text-lg leading-normal px-2 font-semibold">
-        Medical Code Transcriber
-      </h1>
-    </div>
-
-    <div class="flex-1 px-6">
-      <p class="text-xs leading-normal tracking-[0.2em] font-semibold uppercase">Today</p>
-    </div>
-
-    <div class="px-6 flex flex-col items-center">
-      <%= if MedicalTranscription.Coding.icd9_present?() do %>
-        <div
-          class="w-full px-3 py-2 bg-emerald-600 text-white text-center rounded-lg"
-          title="Precalculated vector embeddings for classification labels were found."
-        >
-          <.icon name="hero-check-circle" /> Vector embeddings found!
-        </div>
-      <% else %>
-        <div
-          class="w-full px-3 py-2 bg-red-300 text-slate-900 text-center rounded-lg"
-          title="Precalculated vector embeddings for classification labels were found."
-        >
-          <.icon name="hero-x-circle" /> Vector embeddings need to be built. Run
-          <code class="p-1 text-sm bg-slate-300 rounded-lg">mix build_code_vectors</code>
-          on the server.
-        </div>
-      <% end %>
-    </div>
-  </header>
+  <MedicalTranscriptionWeb.Components.HeaderComponent.header current_user={@current_user} />
 
   <main class="flex-1 pl-16 pr-16 pt-[25px]">
     <div class="flex flex-col h-full mx-auto max-w-5xl">

lib/medical_transcription_web/components/layouts/root.html.heex

@@ -12,47 +12,6 @@
     </script>
   </head>
   <body class="bg-white antialiased px-5 py-7">
-    <ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
-      <%= if @current_user do %>
-        <li class="text-[0.8125rem] leading-6 text-zinc-900">
-          <%= @current_user.email %>
-        </li>
-        <li>
-          <.link
-            href={~p"/users/settings"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Settings
-          </.link>
-        </li>
-        <li>
-          <.link
-            href={~p"/users/log_out"}
-            method="delete"
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Log out
-          </.link>
-        </li>
-      <% else %>
-        <li>
-          <.link
-            href={~p"/users/register"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Register
-          </.link>
-        </li>
-        <li>
-          <.link
-            href={~p"/users/log_in"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Log in
-          </.link>
-        </li>
-      <% end %>
-    </ul>
     <%= @inner_content %>
   </body>
 </html>

lib/medical_transcription_web/router.ex

@@ -18,12 +18,6 @@ defmodule MedicalTranscriptionWeb.Router do
     plug :accepts, ["json"]
   end
 
-  scope "/", MedicalTranscriptionWeb do
-    pipe_through :browser
-
-    live "/", HomeLive.Index
-  end
-
   # Other scopes may use custom stacks.
   # scope "/api", MedicalTranscriptionWeb do
   #   pipe_through :api
@@ -77,6 +71,7 @@ defmodule MedicalTranscriptionWeb.Router do
 
     live_session :require_authenticated_user,
       on_mount: [{MedicalTranscriptionWeb.UserAuth, :ensure_authenticated}] do
+      live "/", HomeLive.Index
       live "/users/settings", UserSettingsLive, :edit
       live "/users/settings/confirm_email/:token", UserSettingsLive, :confirm_email
     end
@@ -85,6 +80,8 @@ defmodule MedicalTranscriptionWeb.Router do
   scope "/", MedicalTranscriptionWeb do
     pipe_through [:browser]
 
+    live "/", UserLoginLive, :new
+
     delete "/users/log_out", UserSessionController, :delete
 
     live_session :current_user,

lib/medical_transcription_web/user_auth.ex

@@ -31,7 +31,7 @@ defmodule MedicalTranscriptionWeb.UserAuth do
 
     conn
     |> renew_session()
-    |> put_token_in_session(token)
+    |> put_token_and_current_user_in_session(token, user)
     |> maybe_write_remember_me_cookie(token, params)
     |> redirect(to: user_return_to || signed_in_path(conn))
   end
@@ -101,7 +101,8 @@ defmodule MedicalTranscriptionWeb.UserAuth do
       conn = fetch_cookies(conn, signed: [@remember_me_cookie])
 
       if token = conn.cookies[@remember_me_cookie] do
-        {token, put_token_in_session(conn, token)}
+        user = Accounts.get_user_by_session_token(token)
+        {token, put_token_and_current_user_in_session(conn, token, user)}
       else
         {nil, conn}
       end
@@ -211,9 +212,10 @@ defmodule MedicalTranscriptionWeb.UserAuth do
     end
   end
 
-  defp put_token_in_session(conn, token) do
+  defp put_token_and_current_user_in_session(conn, token, user) do
     conn
     |> put_session(:user_token, token)
+    |> put_session(:current_user, user)
     |> put_session(:live_socket_id, "users_sessions:#{Base.url_encode64(token)}")
   end