Skip to content

Commit

Permalink
Unify gen.auth and phx.new menu styles (#5090)
Browse files Browse the repository at this point in the history 
* Unify application of tailwind classes across phx.new and gen.auth links

Co-authored-by: Chris McCord <chris@chrismccord.com>
  • Loading branch information
@vanderhoop @chrismccord
vanderhoop and chrismccord committed Feb 24, 2023
1 parent 1f9b1af commit db01f3d
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 74 deletions.
37 changes: 31 additions & 6 deletions lib/mix/tasks/phx.gen.auth/injector.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ defmodule Mix.Tasks.Phx.Gen.Auth.Injector do
"""
def app_layout_menu_help_text(file_path, %Schema{} = schema) do
{_dup_check, code} = app_layout_menu_code_to_inject(schema)

"""
Add the following #{schema.singular} menu items to your #{Path.relative_to_cwd(file_path)} layout file:
Expand All @@ -162,24 +163,48 @@ defmodule Mix.Tasks.Phx.Gen.Auth.Injector do
def app_layout_menu_code_to_inject(%Schema{} = schema, padding \\ 4, newline \\ "\n") do
already_injected_str = "#{schema.route_prefix}/log_in"

base_tailwind_classes = "text-[0.8125rem] leading-6 text-zinc-900"
link_tailwind_classes = "#{base_tailwind_classes} font-semibold hover:text-zinc-700"

template = """
<ul>
<ul class="flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
<%= if @current_#{schema.singular} do %>
<li>
<li class="#{base_tailwind_classes}">
<%= @current_#{schema.singular}.email %>
</li>
<li>
<.link href={~p"#{schema.route_prefix}/settings"}>Settings</.link>
<.link
href={~p"#{schema.route_prefix}/settings"}
class="#{link_tailwind_classes}"
>
Settings
</.link>
</li>
<li>
<.link href={~p"#{schema.route_prefix}/log_out"} method="delete">Log out</.link>
<.link
href={~p"#{schema.route_prefix}/log_out"}
method="delete"
class="#{link_tailwind_classes}"
>
Log out
</.link>
</li>
<% else %>
<li>
<.link href={~p"#{schema.route_prefix}/register"}>Register</.link>
<.link
href={~p"#{schema.route_prefix}/register"}
class="#{link_tailwind_classes}"
>
Register
</.link>
</li>
<li>
<.link href={~p"#{schema.route_prefix}/log_in"}>Log in</.link>
<.link
href={~p"#{schema.route_prefix}/log_in"}
class="#{link_tailwind_classes}"
>
Log in
</.link>
</li>
<% end %>
</ul>\
Expand Down
6 changes: 3 additions & 3 deletions priv/templates/phx.gen.auth/forgot_password_live_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web

describe "Forgot password page" do
test "renders email page", %{conn: conn} do
{:ok, _lv, html} = live(conn, ~p"<%= schema.route_prefix %>/reset_password")
{:ok, lv, html} = live(conn, ~p"<%= schema.route_prefix %>/reset_password")

assert html =~ "Forgot your password?"
assert html =~ "Register</a>"
assert html =~ "Log in</a>"
assert has_element?(lv, ~s|a[href="#{~p"/users/register"}"]|, "Register")
assert has_element?(lv, ~s|a[href="#{~p"/users/log_in"}"]|, "Log in")
end

test "redirects if already logged in", %{conn: conn} do
Expand Down
8 changes: 4 additions & 4 deletions priv/templates/phx.gen.auth/registration_controller_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
conn = get(conn, ~p"<%= schema.route_prefix %>/register")
response = html_response(conn, 200)
assert response =~ "Register"
assert response =~ "Log in</a>"
assert response =~ "Register</a>"
assert response =~ ~p"/users/log_in"
assert response =~ ~p"/users/register"
end

test "redirects if already logged in", %{conn: conn} do
Expand All @@ -36,8 +36,8 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
conn = get(conn, ~p"/")
response = html_response(conn, 200)
assert response =~ email
assert response =~ "Settings</a>"
assert response =~ "Log out</a>"
assert response =~ ~p"/users/settings"
assert response =~ ~p"/users/log_out"
end

test "render errors for invalid data", %{conn: conn} do
Expand Down
6 changes: 3 additions & 3 deletions priv/templates/phx.gen.auth/session_controller_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
conn = get(conn, ~p"<%= schema.route_prefix %>/log_in")
response = html_response(conn, 200)
assert response =~ "Log in"
assert response =~ "Register</a>"
assert response =~ ~p"/users/register"
assert response =~ "Forgot your password?"
end

Expand All @@ -36,8 +36,8 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
conn = get(conn, ~p"/")
response = html_response(conn, 200)
assert response =~ <%= schema.singular %>.email
assert response =~ "Settings</a>"
assert response =~ "Log out</a>"
assert response =~ ~p"/users/settings"
assert response =~ ~p"/users/log_out"
end

test "logs the <%= schema.singular %> in with remember me", %{conn: conn, <%= schema.singular %>: <%= schema.singular %>} do
Expand Down
132 changes: 108 additions & 24 deletions test/mix/tasks/phx.gen.auth/injector_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -665,23 +665,44 @@ defmodule Mix.Tasks.Phx.Gen.Auth.InjectorTest do
<li><.link href={Routes.live_dashboard_path(@conn, :home)}>LiveDashboard</.link></li>
<% end %>
</ul>
<ul>
<ul class="flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
<%= if @current_user do %>
<li>
<li class="text-[0.8125rem] leading-6 text-zinc-900">
<%= @current_user.email %>
</li>
<li>
<.link href={~p"/users/settings"}>Settings</.link>
<.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">Log out</.link>
<.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"}>Register</.link>
<.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"}>Log in</.link>
<.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>
Expand Down Expand Up @@ -738,23 +759,44 @@ defmodule Mix.Tasks.Phx.Gen.Auth.InjectorTest do
<li><.link href={Routes.live_dashboard_path(@conn, :home)}>LiveDashboard</.link></li>\r
<% end %>\r
</ul>\r
<ul>\r
<ul class="flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">\r
<%= if @current_user do %>\r
<li>\r
<li class="text-[0.8125rem] leading-6 text-zinc-900">\r
<%= @current_user.email %>\r
</li>\r
<li>\r
<.link href={~p"/users/settings"}>Settings</.link>\r
<.link\r
href={~p"/users/settings"}\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Settings\r
</.link>\r
</li>\r
<li>\r
<.link href={~p"/users/log_out"} method="delete">Log out</.link>\r
<.link\r
href={~p"/users/log_out"}\r
method="delete"\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Log out\r
</.link>\r
</li>\r
<% else %>\r
<li>\r
<.link href={~p"/users/register"}>Register</.link>\r
<.link\r
href={~p"/users/register"}\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Register\r
</.link>\r
</li>\r
<li>\r
<.link href={~p"/users/log_in"}>Log in</.link>\r
<.link\r
href={~p"/users/log_in"}\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Log in\r
</.link>\r
</li>\r
<% end %>\r
</ul>\r
Expand Down Expand Up @@ -795,23 +837,44 @@ defmodule Mix.Tasks.Phx.Gen.Auth.InjectorTest do
<title>Demo · Phoenix Framework</title>
</head>
<body>
<ul>
<ul class="flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
<%= if @current_user do %>
<li>
<li class="text-[0.8125rem] leading-6 text-zinc-900">
<%= @current_user.email %>
</li>
<li>
<.link href={~p"/users/settings"}>Settings</.link>
<.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">Log out</.link>
<.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"}>Register</.link>
<.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"}>Log in</.link>
<.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>
Expand Down Expand Up @@ -854,23 +917,44 @@ defmodule Mix.Tasks.Phx.Gen.Auth.InjectorTest do
<title>Demo · Phoenix Framework</title>\r
</head>\r
<body>\r
<ul>\r
<ul class="flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">\r
<%= if @current_user do %>\r
<li>\r
<li class="text-[0.8125rem] leading-6 text-zinc-900">\r
<%= @current_user.email %>\r
</li>\r
<li>\r
<.link href={~p"/users/settings"}>Settings</.link>\r
<.link\r
href={~p"/users/settings"}\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Settings\r
</.link>\r
</li>\r
<li>\r
<.link href={~p"/users/log_out"} method="delete">Log out</.link>\r
<.link\r
href={~p"/users/log_out"}\r
method="delete"\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Log out\r
</.link>\r
</li>\r
<% else %>\r
<li>\r
<.link href={~p"/users/register"}>Register</.link>\r
<.link\r
href={~p"/users/register"}\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Register\r
</.link>\r
</li>\r
<li>\r
<.link href={~p"/users/log_in"}>Log in</.link>\r
<.link\r
href={~p"/users/log_in"}\r
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"\r
>\r
Log in\r
</.link>\r
</li>\r
<% end %>\r
</ul>\r
Expand Down
Loading

0 comments on commit db01f3d

Please sign in to comment.