Merge pull request #235 from pow-auth/phoenix-components-template

Use Phoenix components templating

Author: danschultzer

.github/workflows/build.yml

@@ -30,8 +30,8 @@ jobs:
             elixir: 1.14.0
             os: ubuntu-latest
           - otp: 22.0
-            elixir: 1.11.0
-            # It's necessary to run on ubunto 20.04 for OTP 20 - 25
+            elixir: 1.12.0
+            # It's necessary to run on ubuntu 20.04 for OTP 20 - 25
             # See https://github.com/erlef/setup-beam
             os: ubuntu-20.04
     runs-on: ${{ matrix.os }}

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## v0.4.16 (TBA)
 
+Now uses Phoenix 1.7 components templating and requires Pow 1.0.29.
+
 ### Enhancements
 
 * [`Mix.Tasks.Pow.Ecto.Install`] Now injects `CONTEXT_PATH/users/user.ex`

config/test.exs

@@ -8,26 +8,44 @@ config :pow_assent, PowAssent.Test.Ecto.Repo,
 
 config :pow_assent, PowAssent.Test.Phoenix.Endpoint,
   secret_key_base: String.duplicate("abcdefghijklmnopqrstuvxyz0123456789", 2),
-  render_errors: [view: PowAssent.Test.Phoenix.ErrorView, accepts: ~w(html json)]
+  render_errors: [
+    formats: [html: PowAssent.Test.Phoenix.ErrorHTML],
+    layout: false
+  ]
 
 config :pow_assent, PowAssent.Test.EmailConfirmation.Phoenix.Endpoint,
   secret_key_base: String.duplicate("abcdefghijklmnopqrstuvxyz0123456789", 2),
-  render_errors: [view: PowAssent.Test.Phoenix.ErrorView, accepts: ~w(html json)]
+  render_errors: [
+    formats: [html: PowAssent.Test.Phoenix.ErrorHTML],
+    layout: false
+  ]
 
 config :pow_assent, PowAssent.Test.Invitation.Phoenix.Endpoint,
   secret_key_base: String.duplicate("abcdefghijklmnopqrstuvxyz0123456789", 2),
-  render_errors: [view: PowAssent.Test.Phoenix.ErrorView, accepts: ~w(html json)]
+  render_errors: [
+    formats: [html: PowAssent.Test.Phoenix.ErrorHTML],
+    layout: false
+  ]
 
 config :pow_assent, PowAssent.Test.NoRegistration.Phoenix.Endpoint,
   secret_key_base: String.duplicate("abcdefghijklmnopqrstuvxyz0123456789", 2),
-  render_errors: [view: PowAssent.Test.Phoenix.ErrorView, accepts: ~w(html json)]
+  render_errors: [
+    formats: [html: PowAssent.Test.Phoenix.ErrorHTML],
+    layout: false
+  ]
 
 config :pow_assent, PowAssent.Test.WithCustomChangeset.Phoenix.Endpoint,
   secret_key_base: String.duplicate("abcdefghijklmnopqrstuvxyz0123456789", 2),
-  render_errors: [view: PowAssent.Test.Phoenix.ErrorView, accepts: ~w(html json)]
+  render_errors: [
+    formats: [html: PowAssent.Test.Phoenix.ErrorHTML],
+    layout: false
+  ]
 
 config :pow_assent, PowAssent.Test.Reauthorization.Phoenix.Endpoint,
   secret_key_base: String.duplicate("abcdefghijklmnopqrstuvxyz0123456789", 2),
-  render_errors: [view: PowAssent.Test.Phoenix.ErrorView, accepts: ~w(html json)]
+  render_errors: [
+    formats: [html: PowAssent.Test.Phoenix.ErrorHTML],
+    layout: false
+  ]
 
 config :phoenix, :json_library, Jason

lib/mix/tasks/phoenix/pow_assent.phoenix.gen.templates.ex

@@ -1,5 +1,5 @@
 defmodule Mix.Tasks.PowAssent.Phoenix.Gen.Templates do
-  @shortdoc "Generates PowAssent views and templates"
+  @shortdoc "Generates PowAssent templates"
 
   @moduledoc """
   Generates PowAssent templates for Phoenix.
@@ -38,7 +38,7 @@ defmodule Mix.Tasks.PowAssent.Phoenix.Gen.Templates do
     web_prefix   = structure[:web_prefix]
 
     Enum.each(@templates, fn {name, actions} ->
-      Phoenix.create_view_file(Elixir.PowAssent, name, web_module, web_prefix)
+      Phoenix.create_template_module(Elixir.PowAssent, name, web_module, web_prefix)
       Phoenix.create_templates(Elixir.PowAssent, name, web_prefix, actions)
     end)
 

lib/pow_assent/phoenix/controllers/registration_html.ex

@@ -0,0 +1,36 @@
+defmodule PowAssent.Phoenix.RegistrationHTML do
+  @moduledoc false
+  use Pow.Phoenix.Template
+
+  if Pow.dependency_vsn_match?(:phoenix, ">= 1.7.0") do
+  template :add_user_id, :html,
+  """
+  <div class="mx-auto max-w-sm">
+    <.header class="text-center">
+      Register
+    </.header>
+
+    <.simple_form :let={f} for={<%= "@changeset" %>} as={:user} action={<%= "@action" %>} phx-update="ignore">
+      <.error :if={<%= "@changeset.action" %>}>Oops, something went wrong! Please check the errors below.</.error>
+      <.input field={<%= "f[\#{__user_id_field__("@changeset", :key)}]" %>} type={<%= __user_id_field__("@changeset", :type) %>} label={<%= __user_id_field__("@changeset", :label) %>} required />
+
+      <:actions>
+        <.button phx-disable-with="Registering..." class="w-full">
+          Register <span aria-hidden="true">→</span>
+        </.button>
+      </:actions>
+    </.simple_form>
+  </div>
+  """
+  else
+  # TODO: Remove when Phoenix 1.7 required
+  template :add_user_id, :html,
+  """
+  <h2>Register</h2>
+
+  <%= render_form([
+    {:text, {:changeset, :pow_user_id_field}}
+  ]) %>
+  """
+  end
+end

lib/pow_assent/phoenix/views/view_helpers.ex renamed to lib/pow_assent/phoenix/controllers/view_helpers.ex

@@ -7,7 +7,7 @@ defmodule PowAssent.MixProject do
     [
       app: :pow_assent,
       version: @version,
-      elixir: "~> 1.11",
+      elixir: "~> 1.12",
       elixirc_paths: elixirc_paths(Mix.env()),
       start_permanent: Mix.env() == :prod,
       compilers: Mix.compilers(),
@@ -31,13 +31,14 @@ defmodule PowAssent.MixProject do
 
   defp deps do
     [
-      {:pow, "~> 1.0.28"},
+      {:pow, "~> 1.0.29"},
       {:assent, "~> 0.1.2 or ~> 0.2.0"},
 
       {:ecto, "~> 2.2 or ~> 3.0"},
       {:phoenix, ">= 1.3.0 and < 1.8.0"},
       {:phoenix_html, ">= 2.0.0 and <= 4.0.0"},
       {:plug, ">= 1.5.0 and < 2.0.0", optional: true},
+      {:phoenix_live_view, ">= 0.18.0", optional: true},
 
       {:phoenix_ecto, "~> 4.0", only: [:dev, :test]},
       {:credo, "~> 1.1", only: [:dev, :test]},
@@ -47,6 +48,7 @@ defmodule PowAssent.MixProject do
 
       {:ecto_sql, "~> 3.1", only: :test},
       {:postgrex, "~> 0.14", only: :test},
+      {:floki, ">= 0.30.0", only: :test},
       {:ssl_verify_fun, "~> 1.1", only: :test},
       {:test_server, "~> 0.1.0", only: :test}
     ]

lib/pow_assent/phoenix/templates/registration_template.ex

@@ -14,6 +14,7 @@
   "ecto_sql": {:hex, :ecto_sql, "3.9.2", "34227501abe92dba10d9c3495ab6770e75e79b836d114c41108a4bf2ce200ad5", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.9.2", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16.0 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "1eb5eeb4358fdbcd42eac11c1fbd87e3affd7904e639d77903c1358b2abd3f70"},
   "ex_doc": {:hex, :ex_doc, "0.29.3", "f07444bcafb302db86e4f02d8bbcd82f2e881a0dcf4f3e4740e4b8128b9353f7", [:mix], [{:earmark_parser, "~> 1.4.31", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "3dc6787d7b08801ec3b51e9bd26be5e8826fbf1a17e92d1ebc252e1a1c75bfe1"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
+  "floki": {:hex, :floki, "0.34.2", "5fad07ef153b3b8ec110b6b155ec3780c4b2c4906297d0b4be1a7162d04a7e02", [:mix], [], "hexpm", "26b9d50f0f01796bc6be611ca815c5e0de034d2128e39cc9702eee6b66a4d1c8"},
   "jason": {:hex, :jason, "1.4.0", "e855647bc964a44e2f67df589ccf49105ae039d4179db7f6271dfd3843dc27e6", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "79a3791085b2a0f743ca04cec0f7be26443738779d09302e01318f97bdb82121"},
   "makeup": {:hex, :makeup, "1.1.0", "6b67c8bc2882a6b6a445859952a602afc1a41c2e08379ca057c0f525366fc3ca", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "0a45ed501f4a8897f580eabf99a2e5234ea3e75a4373c8a52824f6e873be57a6"},
   "makeup_elixir": {:hex, :makeup_elixir, "0.16.0", "f8c570a0d33f8039513fbccaf7108c5d750f47d8defd44088371191b76492b0b", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "28b2cbdc13960a46ae9a8858c4bebdec3c9a6d7b4b9e7f4ed1502f8159f338e7"},
@@ -23,14 +24,15 @@
   "phoenix": {:hex, :phoenix, "1.7.2", "c375ffb482beb4e3d20894f84dd7920442884f5f5b70b9f4528cbe0cedefec63", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.4", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "1ebca94b32b4d0e097ab2444a9742ed8ff3361acad17365e4e6b2e79b4792159"},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.0", "0672ed4e4808b3fbed494dded89958e22fb882de47a97634c0b13e7b0b5f7720", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "09864e558ed31ee00bd48fcc1d4fc58ae9678c9e81649075431e69dbabb43cc1"},
   "phoenix_html": {:hex, :phoenix_html, "3.3.1", "4788757e804a30baac6b3fc9695bf5562465dd3f1da8eb8460ad5b404d9a2178", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "bed1906edd4906a15fd7b412b85b05e521e1f67c9a85418c55999277e553d0d3"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.18.18", "1f38fbd7c363723f19aad1a04b5490ff3a178e37daaf6999594d5f34796c47fc", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a5810d0472f3189ede6d2a95bda7f31c6113156b91784a3426cb0ab6a6d85214"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.1", "ba04e489ef03763bf28a17eb2eaddc2c20c6d217e2150a61e3298b0f4c2012b5", [:mix], [], "hexpm", "81367c6d1eea5878ad726be80808eb5a787a23dee699f96e72b1109c57cdd8d9"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.1", "85f79e3ad1b0180abb43f9725973e3b8c2c3354a87245f91431eec60553ed3ef", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "157dc078f6226334c91cb32c1865bf3911686f8bcd6bcff86736f6253e6993ee"},
   "phoenix_view": {:hex, :phoenix_view, "2.0.2", "6bd4d2fd595ef80d33b439ede6a19326b78f0f1d8d62b9a318e3d9c1af351098", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "a929e7230ea5c7ee0e149ffcf44ce7cf7f4b6d2bfe1752dd7c084cdff152d36f"},
   "plug": {:hex, :plug, "1.14.1", "3148623796853ae96c628960b833bf6b6a894d6bdc8c199ef7160c41149b71f2", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a0e789be21a576b11ec55a0983e4e8f7c7b07d88dfb3b8da9e97767132271d40"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.6.0", "d1cf12ff96a1ca4f52207c5271a6c351a4733f413803488d75b70ccf44aebec2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "073cf20b753ce6682ed72905cd62a2d4bd9bad1bf9f7feb02a1b8e525bd94fa6"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"},
   "postgrex": {:hex, :postgrex, "0.16.5", "fcc4035cc90e23933c5d69a9cd686e329469446ef7abba2cf70f08e2c4b69810", [:mix], [{:connection, "~> 1.1", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "edead639dc6e882618c01d8fc891214c481ab9a3788dfe38dd5e37fd1d5fb2e8"},
-  "pow": {:hex, :pow, "1.0.28", "b2cc32673e3fd138db6bd7e0656d826b287800d60f4139ed3c3fa6df926f1250", [:mix], [{:ecto, "~> 2.2 or ~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix, ">= 1.3.0 and < 1.8.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, ">= 2.0.0 and < 4.0.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:plug, ">= 1.5.0 and < 2.0.0", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "e03f6ae9a536153f8491e3ef7bb0908f5494756905997611abb204ce23b4d64d"},
+  "pow": {:hex, :pow, "1.0.29", "9c387059af028500a339e7a334103739245dd508d2e18c41e0fcb20e4b40f02f", [:mix], [{:ecto, "~> 2.2 or ~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix, ">= 1.3.0 and < 1.8.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, ">= 2.0.0 and < 4.0.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, ">= 0.18.0", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}, {:plug, ">= 1.5.0 and < 2.0.0", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "94097ad2b79e4c44733344e04653ea424b4cbbae700ab2fa7d069d9f00364be7"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.6", "cf344f5692c82d2cd7554f5ec8fd961548d4fd09e7d22f5b62482e5aeaebd4b0", [:make, :mix, :rebar3], [], "hexpm", "bdb0d2471f453c88ff3908e7686f86f9be327d065cc1ec16fa4540197ea04680"},
   "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},

lib/pow_assent/phoenix/views/registration_view.ex

@@ -4,31 +4,34 @@ defmodule Mix.Tasks.PowAssent.Phoenix.Gen.TemplatesTest do
   alias Mix.Tasks.PowAssent.Phoenix.Gen.Templates
 
   @expected_template_files %{
-    "registration" => ["add_user_id.html.eex"]
+    "registration_html" => ["add_user_id.html.heex"]
   }
-  @expected_views Map.keys(@expected_template_files)
 
   test "generates templates", context do
     File.cd!(context.tmp_path, fn ->
       Templates.run([])
 
-      templates_path = Path.join(["lib", "pow_assent_web", "templates", "pow_assent"])
+      templates_path = Path.join(["lib", "pow_assent_web", "controllers", "pow_assent"])
       expected_dirs  = Map.keys(@expected_template_files)
+      expected_files = Enum.map(expected_dirs, &"#{&1}.ex")
 
-      assert ls(templates_path) == expected_dirs
+      assert expected_dirs -- ls(templates_path) == []
+      assert expected_files -- ls(templates_path) == []
 
       for {dir, expected_files} <- @expected_template_files do
         files = templates_path |> Path.join(dir) |> ls()
-        assert files == expected_files
+
+        assert expected_files -- files == []
       end
 
-      views_path          = Path.join(["lib", "pow_assent_web", "views", "pow_assent"])
-      expected_view_files = Enum.map(@expected_views, &"#{&1}_view.ex")
-      view_content        = views_path |> Path.join("registration_view.ex") |> File.read!()
+      for base_name <- expected_dirs do
+        content     = templates_path |> Path.join(base_name <> ".ex") |> File.read!()
+        module_name = base_name |> Macro.camelize() |> String.replace_suffix("Html", "HTML")
 
-      assert ls(views_path) == expected_view_files
-      assert view_content =~ "defmodule PowAssentWeb.PowAssent.RegistrationView do"
-      assert view_content =~ "use PowAssentWeb, :view"
+        assert content =~ "defmodule PowAssentWeb.PowAssent.#{module_name} do"
+        assert content =~ "use PowAssentWeb, :html"
+        assert content =~ "embed_templates \"#{base_name}/*\""
+      end
     end)
   end
 

mix.exs

@@ -114,7 +114,7 @@ defmodule Mix.Tasks.PowAssent.Phoenix.InstallTest do
       Install.run(options)
 
       assert File.exists?(context.paths.templates_path)
-      assert [_one] = File.ls!(context.paths.templates_path)
+      assert [_one, _two] = File.ls!(context.paths.templates_path)
     end)
   end