dwyl · SimonLab · Jun 20, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 8, 2022
diff --git a/README.md b/README.md
diff --git a/coveralls.json b/coveralls.json
@@ -6,7 +6,6 @@
     "test/",
     "lib/liveview_chat_web.ex",
     "lib/liveview_chat/application.ex",
-    "lib/liveview_chat_web/router.ex",
     "lib/liveview_chat_web/views/error_helpers.ex",
     "lib/liveview_chat_web/telemetry.ex",
     "lib/liveview_chat_web/channels/user_socket.ex"

diff --git a/lib/liveview_chat_web/controllers/auth_controller.ex b/lib/liveview_chat_web/controllers/auth_controller.ex
@@ -3,12 +3,14 @@ defmodule LiveviewChatWeb.AuthController do
   import Phoenix.LiveView, only: [assign_new: 3]
 
   def on_mount(:default, _params, %{"jwt" => jwt} = _session, socket) do
-    claims = AuthPlug.Token.verify_jwt!(jwt)
 
     socket =
       socket
       |> assign_new(:person, fn ->
-        AuthPlug.Helpers.strip_struct_metadata(claims)
+        jwt
+        |> AuthPlug.Token.verify_jwt!()
+        |> AuthPlug.Helpers.strip_struct_metadata()
+        |> Useful.atomize_map_keys()
       end)
       |> assign_new(:loggedin, fn -> true end)
 

diff --git a/lib/liveview_chat_web/live/message_live.ex b/lib/liveview_chat_web/live/message_live.ex
@@ -13,8 +13,8 @@ defmodule LiveviewChatWeb.MessageLive do
       Message.subscribe()
 
       {id, name} =
-        if socket.assigns.loggedin do
-          {socket.assigns.person["id"], socket.assigns.person["givenName"]}
+        if Map.has_key?(socket.assigns, :person) do
+          {socket.assigns.person.id, socket.assigns.person.givenName}
         else
           {socket.id, "guest"}
         end
@@ -24,8 +24,8 @@ defmodule LiveviewChatWeb.MessageLive do
     end
 
     changeset =
-      if socket.assigns.loggedin do
-        Message.changeset(%Message{}, %{"name" => socket.assigns.person["givenName"]})
+      if Map.has_key?(socket.assigns, :person) do
+        Message.changeset(%Message{}, %{"name" => socket.assigns.person.givenName})
       else
         Message.changeset(%Message{}, %{})
       end
@@ -41,7 +41,7 @@ defmodule LiveviewChatWeb.MessageLive do
   end
 
   def render(assigns) do
-    LiveviewChatWeb.MessageView.render("message.html", assigns)
+    LiveviewChatWeb.MessageView.render("messages.html", assigns)
   end
 
   def handle_event("new_message", %{"message" => params}, socket) do

diff --git a/lib/liveview_chat_web/router.ex b/lib/liveview_chat_web/router.ex
@@ -9,28 +9,15 @@ defmodule LiveviewChatWeb.Router do
     plug :protect_from_forgery
     plug :put_secure_browser_headers
   end
-
-  pipeline :api do
-    plug :accepts, ["json"]
-  end
-
+
   pipeline :authOptional, do: plug(AuthPlugOptional)
 
   scope "/", LiveviewChatWeb do
     pipe_through [:browser, :authOptional]
 
-    get "/logout", AuthController, :logout
     live "/", MessageLive
-  end
-
-  scope "/", LiveviewChatWeb do
-    pipe_through :browser
     get "/login", AuthController, :login
+    get "/logout", AuthController, :logout
     get "/ping", PingController, :ping
   end
-
-  # Other scopes may use custom stacks.
-  # scope "/api", LiveviewChatWeb do
-  #   pipe_through :api
-  # end
 end
diff --git a/lib/liveview_chat_web/templates/layout/root.html.heex b/lib/liveview_chat_web/templates/layout/root.html.heex
@@ -4,27 +4,42 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <%= csrf_meta_tag() %>
+    <meta name="csrf-token" content={csrf_token_value()}>
     <%= live_title_tag assigns[:page_title] || "LiveviewChat", suffix: " · Phoenix Framework" %>
-    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
     <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
-    <header>
-      <section class="container">
+    <header class="bg-slate-800 w-full min-h-[15%] pt-5 pb-1 mb-2">
+      <section>
         <nav>
+          <div class="text-white width-[10%] float-left ml-3 -mt-5 align-middle">
+          <b>People in Chat:</b>
           <ul>
+            <%= for name <- @presence do %>
+              <li>
+                <%= name %>
+              </li>
+            <% end %>
+          </ul>
+          </div>
+
+          <ul class="float-right mr-3">
             <%= if @loggedin do %>
               <li>
-                <img width="40px" src={@person.picture}/>
+                <img width="42px" src={@person.picture} class="-mt-3"/>
+              </li>
+              <li class="text-white">
+                <%= link "logout", to: "/logout" %>
               </li>
-              <li><%= link "logout", to: "/logout" %></li>
             <% else %>
-              <li><%= link "Login", to: "/login" %></li>
+              <li class="bg-green-600 text-white rounded-xl px-4 py-2 w-full mb-2 font-bold">
+                <%= link "Login", to: "/login" %>
+              </li>
             <% end %>
           </ul>
         </nav>
-        <h1>LiveView Chat Example</h1>
+        <h1 class="text-3xl mb-4 text-center font-mono text-white">LiveView Chat Example</h1>
       </section>
     </header>
     <%= @inner_content %>

diff --git a/lib/liveview_chat_web/templates/message/message.html.heex b/lib/liveview_chat_web/templates/message/message.html.heex
diff --git a/lib/liveview_chat_web/templates/message/messages.html.heex b/lib/liveview_chat_web/templates/message/messages.html.heex
@@ -0,0 +1,46 @@
+<ul id='msg-list' phx-update="append" class="w-full">
+   <%= for message <- @messages do %>
+     <li id={"msg-#{message.id}"} 
+      class="px-5">
+       <small class="float-right align-middle">
+         <%= message.inserted_at %>
+       </small>
+       <b><%= message.name %>:</b>
+       <%= message.message %>
+     </li>
+   <% end %>
+</ul>
+
+<footer class="fixed bottom-0 w-full bg-slate-300 pb-2 px-5 pt-2">
+<.form let={f} for={@changeset} id="form" phx-submit="new_message" phx-hook="Form">
+
+  <%= if @loggedin do %>
+    <%= text_input f, :name, id: "name", value: @person.givenName,
+    class: "hidden" %>
+  <% else %>
+    <%= text_input f, :name, id: "name", placeholder: "Name", autofocus: "true",
+      class: "border p-2 w-9/12 mb-2 mt-2 mr2" %>
+     <span class="italic text-2xl ml-4">or</span>
+     <span class="bg-green-600 text-white rounded-xl px-4 py-2 mb-2 mt-3 float-right">
+       <%= link "Login", to: "/login" %>
+     </span>
+    <%= error_tag f, :name %>
+  <% end %>
+
+   <%= text_input f, :message, id: "msg", placeholder: "Message",
+   class: "border p-2 w-10/12  mb-2 mt-2 float-left"  %>
+   <p class=" text-amber-600">
+    <%= error_tag f, :message %>
+   </p>
+   <%= submit "Send", class: "bg-sky-600 text-white rounded-xl px-4 py-2 mt-2 float-right" %>
+ </.form>
+</footer>
+
+<!-- ignore this ... -->
+<ul class="hidden">
+  <%= for name <- @presence do %>
+    <li>
+      <%= name %>
+    </li>
+  <% end %>
+</ul>
diff --git a/mix.exs b/mix.exs
@@ -13,10 +13,12 @@ defmodule LiveviewChat.MixProject do
       deps: deps(),
       test_coverage: [tool: ExCoveralls],
       preferred_cli_env: [
+        c: :test,
         coveralls: :test,
         "coveralls.detail": :test,
         "coveralls.post": :test,
-        "coveralls.html": :test
+        "coveralls.html": :test,
+        "coveralls.json": :test,
       ]
     ]
   end
@@ -68,6 +70,7 @@ defmodule LiveviewChat.MixProject do
   # See the documentation for `Mix` for more info on aliases.
   defp aliases do
     [
+      c: ["coveralls.html"],
       setup: ["deps.get", "ecto.setup"],
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],

diff --git a/test/liveview_chat_web/live/message_live_test.exs b/test/liveview_chat_web/live/message_live_test.exs
@@ -6,7 +6,7 @@ defmodule LiveviewChatWeb.MessageLiveTest do
 
   test "disconnected and connected mount", %{conn: conn} do
     conn = get(conn, "/")
-    assert html_response(conn, 200) =~ "<h1>LiveView Chat Example</h1>"
+    assert html_response(conn, 200) =~ "LiveView Chat"
 
     {:ok, _view, _html} = live(conn)
   end
@@ -57,7 +57,7 @@ defmodule LiveviewChatWeb.MessageLiveTest do
   end
 
   test "get / with valid JWT", %{conn: conn} do
-    data = %{email: "[email protected]", givenName: "Simon", picture: "this", auth_provider: "GitHub"}
+    data = %{email: "[email protected]", givenName: "Simon", picture: "this", auth_provider: "GitHub", id: 1}
     jwt = AuthPlug.Token.generate_jwt!(data)
 
     {:ok, view, _html} = live(conn, "/?jwt=#{jwt}")
@@ -78,7 +78,8 @@ defmodule LiveviewChatWeb.MessageLiveTest do
       givenName: "Simon",
       picture: "this",
       auth_provider: "GitHub",
-      sid: 1
+      sid: 1,
+      id: 1
     }
 
     jwt = AuthPlug.Token.generate_jwt!(data)
@@ -91,9 +92,9 @@ defmodule LiveviewChatWeb.MessageLiveTest do
     assert "/" = redirected_to(conn, 302)
   end
 
-  test "test login link redirect to auth", %{conn: conn} do
+  test "test login link redirect to auth.dwyl.com", %{conn: conn} do
     conn = get(conn, "/login")
-    assert redirected_to(conn, 302) =~ "dwylauth"
+    assert redirected_to(conn, 302) =~ "auth.dwyl.com"
   end
 
   test "1 guest online", %{conn: conn} do
@@ -106,6 +107,9 @@ defmodule LiveviewChatWeb.MessageLiveTest do
     {:ok, _view, _html} = live(conn, "/")
     {:ok, view2, _html} = live(conn, "/")
 
+    conn = get(conn, "/")
+    assert html_response(conn, 200) =~ "LiveView Chat"
+
     assert render(view2) =~ "2 guests"
   end
 end