Switch to generated auth

Author: cruessler

assets/js/app.js

@@ -1,3 +1,6 @@
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import '../../deps/phoenix_html';
+
 import { Socket } from '../../deps/phoenix';
 import { LiveSocket } from '../../deps/phoenix_live_view';
 

config/test.exs

@@ -11,7 +11,7 @@ config :ex_rss, ExRssWeb.Endpoint,
   secret_key_base: String.duplicate("a", 64)
 
 # In test we don't send emails.
-config :lightweight_todo, ExRss.Mailer, adapter: Swoosh.Adapters.Test
+config :ex_rss, ExRss.Mailer, adapter: Swoosh.Adapters.Test
 
 # Disable swoosh api client as it is only required for production adapters.
 config :swoosh, :api_client, false

lib/ex_rss_web/components/core_components.ex

@@ -1,6 +1,72 @@
 defmodule ExRssWeb.CoreComponents do
   use Phoenix.Component
 
+  @doc """
+  Renders a simple form.
+
+  ## Examples
+
+      <.simple_form for={@form} phx-change="validate" phx-submit="save">
+        <.input field={@form[:email]} label="Email"/>
+        <.input field={@form[:username]} label="Username" />
+        <:actions>
+          <.button>Save</.button>
+        </:actions>
+      </.simple_form>
+  """
+  attr :for, :any, required: true, doc: "the data structure for the form"
+  attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
+
+  attr :rest, :global,
+    include: ~w(autocomplete name rel action enctype method novalidate target multipart),
+    doc: "the arbitrary HTML attributes to apply to the form tag"
+
+  slot :inner_block, required: true
+  slot :actions, doc: "the slot for form actions, such as a submit button"
+
+  def simple_form(assigns) do
+    ~H"""
+    <.form :let={f} for={@for} as={@as} {@rest}>
+      <div class="mt-10 space-y-8">
+        {render_slot(@inner_block, f)}
+        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
+          {render_slot(action, f)}
+        </div>
+      </div>
+    </.form>
+    """
+  end
+
+  @doc """
+  Renders a button.
+
+  ## Examples
+
+      <.button>Send!</.button>
+      <.button phx-click="go" class="ml-2">Send!</.button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        @class
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+
   @doc """
   Renders an input with label and error messages.
 
@@ -94,7 +160,7 @@ defmodule ExRssWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        class="mt-2 block w-full rounded-md border border-gray-300 shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
@@ -175,6 +241,31 @@ defmodule ExRssWeb.CoreComponents do
     """
   end
 
+  @doc """
+  Renders a header with title.
+  """
+  attr :class, :string, default: nil
+
+  slot :inner_block, required: true
+  slot :subtitle
+  slot :actions
+
+  def header(assigns) do
+    ~H"""
+    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+      <div>
+        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+          {render_slot(@inner_block)}
+        </h1>
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+          {render_slot(@subtitle)}
+        </p>
+      </div>
+      <div class="flex-none">{render_slot(@actions)}</div>
+    </header>
+    """
+  end
+
   @doc """
   Renders a [Heroicon](https://heroicons.com).
 

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

@@ -18,12 +18,53 @@
   </head>
 
   <body class="m-6 grid grid-cols-12">
-    <div class="col-span-12 md:col-start-3 md:col-span-8">
-      <p role="alert">{Phoenix.Flash.get(@flash, :info)}</p>
-      <p role="alert">{Phoenix.Flash.get(@flash, :error)}</p>
+    <header class="col-span-12 md:col-start-3 md:col-span-8">
+      <ul class="relative z-10 flex items-center gap-4 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>
 
+    </header>
+
+    <main class="col-span-12 md:col-start-3 md:col-span-8">
       {@inner_content}
-    </div>
-    <!-- /container -->
+    </main>
   </body>
 </html>

lib/ex_rss_web/controllers/feed_controller.ex

@@ -0,0 +1,42 @@
+defmodule ExRssWeb.UserSessionController do
+  use ExRssWeb, :controller
+
+  alias ExRss.Accounts
+  alias ExRssWeb.UserAuth
+
+  def create(conn, %{"_action" => "registered"} = params) do
+    create(conn, params, "Account created successfully!")
+  end
+
+  def create(conn, %{"_action" => "password_updated"} = params) do
+    conn
+    |> put_session(:user_return_to, ~p"/users/settings")
+    |> create(params, "Password updated successfully!")
+  end
+
+  def create(conn, params) do
+    create(conn, params, "Welcome back!")
+  end
+
+  defp create(conn, %{"user" => user_params}, info) do
+    %{"email" => email, "password" => password} = user_params
+
+    if user = Accounts.get_user_by_email_and_password(email, password) do
+      conn
+      |> put_flash(:info, info)
+      |> UserAuth.log_in_user(user, user_params)
+    else
+      # In order to prevent user enumeration attacks, don't disclose whether the email is registered.
+      conn
+      |> put_flash(:error, "Invalid email or password")
+      |> put_flash(:email, String.slice(email, 0, 160))
+      |> redirect(to: ~p"/users/log_in")
+    end
+  end
+
+  def delete(conn, _params) do
+    conn
+    |> put_flash(:info, "Logged out successfully.")
+    |> UserAuth.log_out_user()
+  end
+end

lib/ex_rss_web/controllers/session_controller.ex

@@ -6,11 +6,9 @@ defmodule ExRssWeb.FeedLive.Index do
   alias ExRss.{Entry, Feed, Repo, User}
   alias ExRss.{FeedAdder, FeedRemover}
 
-  def mount(
-        _params,
-        %{"current_user" => current_user} = _session,
-        socket
-      ) do
+  def mount(_params, _session, socket) do
+    current_user = socket.assigns.current_user
+
     ExRssWeb.Endpoint.subscribe("user:#{current_user.id}")
 
     socket =

lib/ex_rss_web/controllers/user_controller.ex

@@ -4,11 +4,9 @@ defmodule ExRssWeb.FeedLive.New do
   alias ExRss.{Repo, User}
   alias ExRss.FeedAdder
 
-  def mount(
-        %{"url" => url},
-        %{"current_user" => current_user},
-        socket
-      ) do
+  def mount( %{"url" => url}, _session, socket) do
+    current_user = socket.assigns.current_user
+
     candidate =
       case FeedAdder.discover_feed(url) do
         {:ok, candidate} -> candidate

lib/ex_rss_web/controllers/user_session_controller.ex

@@ -0,0 +1,51 @@
+defmodule ExRssWeb.UserConfirmationInstructionsLive do
+  use ExRssWeb, :live_view
+
+  alias ExRss.Accounts
+
+  def render(assigns) do
+    ~H"""
+    <div class="mx-auto max-w-sm">
+      <.header class="text-center">
+        No confirmation instructions received?
+        <:subtitle>We'll send a new confirmation link to your inbox</:subtitle>
+      </.header>
+
+      <.simple_form for={@form} id="resend_confirmation_form" phx-submit="send_instructions">
+        <.input field={@form[:email]} type="email" placeholder="Email" required />
+        <:actions>
+          <.button phx-disable-with="Sending..." class="w-full">
+            Resend confirmation instructions
+          </.button>
+        </:actions>
+      </.simple_form>
+
+      <p class="text-center mt-4">
+        <.link href={~p"/users/register"}>Register</.link>
+        | <.link href={~p"/users/log_in"}>Log in</.link>
+      </p>
+    </div>
+    """
+  end
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, form: to_form(%{}, as: "user"))}
+  end
+
+  def handle_event("send_instructions", %{"user" => %{"email" => email}}, socket) do
+    if user = Accounts.get_user_by_email(email) do
+      Accounts.deliver_user_confirmation_instructions(
+        user,
+        &url(~p"/users/confirm/#{&1}")
+      )
+    end
+
+    info =
+      "If your email is in our system and it has not been confirmed yet, you will receive an email with instructions shortly."
+
+    {:noreply,
+     socket
+     |> put_flash(:info, info)
+     |> redirect(to: ~p"/")}
+  end
+end