Fix "Resend Confirmation Instructions" and "Settings" Form Styling (p…

…hoenixframework#5254) * Fix confirmation_new styling * Fix Settings style in LiveView template --------- Co-authored-by: Chris McCord <[email protected]>
pshoukry · Mar 16, 2023 · e5bb16c · e5bb16c
1 parent e7f7ea3
commit e5bb16c
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 86 deletions.
diff --git a/priv/templates/phx.gen.auth/confirmation_instructions_live.ex b/priv/templates/phx.gen.auth/confirmation_instructions_live.ex
@@ -5,20 +5,27 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
 
   def render(assigns) do
     ~H"""
-    <.header>Resend confirmation instructions</.header>
-
-    <.simple_form for={@form} id="resend_confirmation_form" phx-submit="send_instructions">
-      <.input field={@form[:email]} type="email" label="Email" required />
-      <:actions>
-        <.button phx-disable-with="Sending...">Resend confirmation instructions</.button>
-      </:actions>
-    </.simple_form>
-
-    <p>
-      <.link href={~p"<%= schema.route_prefix %>/register"}>Register</.link>
-      |
-      <.link href={~p"<%= schema.route_prefix %>/log_in"}>Log in</.link>
-    </p>
+    <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"<%= schema.route_prefix %>/register"}>Register</.link>
+        |
+        <.link href={~p"<%= schema.route_prefix %>/log_in"}>Log in</.link>
+      </p>
+    </div>
     """
   end
 

diff --git a/priv/templates/phx.gen.auth/confirmation_new.html.heex b/priv/templates/phx.gen.auth/confirmation_new.html.heex
@@ -1,14 +1,21 @@
-<.header>Resend confirmation instructions</.header>
+<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 :let={f} for={@conn.params["<%= schema.singular %>"]} as={:<%= schema.singular %>} action={~p"<%= schema.route_prefix %>/confirm"}>
-  <.input field={f[:email]} type="email" label="Email" required />
-  <:actions>
-    <.button>Resend confirmation instructions</.button>
-  </:actions>
-</.simple_form>
-
-<p>
-  <.link href={~p"<%= schema.route_prefix %>/register"}>Register</.link>
-  |
-  <.link href={~p"<%= schema.route_prefix %>/log_in"}>Log in</.link>
-</p>
+  <.simple_form :let={f} for={@conn.params["<%= schema.singular %>"]} as={:<%= schema.singular %>} action={~p"<%= schema.route_prefix %>/confirm"}>
+    <.input field={f[: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"<%= schema.route_prefix %>/register"}>Register</.link>
+    |
+    <.link href={~p"<%= schema.route_prefix %>/log_in"}>Log in</.link>
+  </p>
+</div>
diff --git a/priv/templates/phx.gen.auth/settings_live.ex b/priv/templates/phx.gen.auth/settings_live.ex
@@ -5,65 +5,71 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
 
   def render(assigns) do
     ~H"""
-    <.header>Change Email</.header>
-
-    <.simple_form
-      for={@email_form}
-      id="email_form"
-      phx-submit="update_email"
-      phx-change="validate_email"
-    >
-      <.input field={@email_form[:email]} type="email" label="Email" required />
-      <.input
-        field={@email_form[:current_password]}
-        name="current_password"
-        id="current_password_for_email"
-        type="password"
-        label="Current password"
-        value={@email_form_current_password}
-        required
-      />
-      <:actions>
-        <.button phx-disable-with="Changing...">Change Email</.button>
-      </:actions>
-    </.simple_form>
-
-    <.header>Change Password</.header>
-
-    <.simple_form
-      for={@password_form}
-      id="password_form"
-      action={~p"<%= schema.route_prefix %>/log_in?_action=password_updated"}
-      method="post"
-      phx-change="validate_password"
-      phx-submit="update_password"
-      phx-trigger-action={@trigger_submit}
-    >
-      <.input
-        field={@password_form[:email]}
-        type="hidden"
-        id="hidden_<%= schema.singular %>_email"
-        value={@current_email}
-      />
-      <.input field={@password_form[:password]} type="password" label="New password" required />
-      <.input
-        field={@password_form[:password_confirmation]}
-        type="password"
-        label="Confirm new password"
-      />
-      <.input
-        field={@password_form[:current_password]}
-        name="current_password"
-        type="password"
-        label="Current password"
-        id="current_password_for_password"
-        value={@current_password}
-        required
-      />
-      <:actions>
-        <.button phx-disable-with="Changing...">Change Password</.button>
-      </:actions>
-    </.simple_form>
+    <.header class="text-center">
+      Account Settings
+      <:subtitle>Manage your account email address and password settings</:subtitle>
+    </.header>
+
+    <div class="space-y-12 divide-y">
+      <div>
+        <.simple_form
+          for={@email_form}
+          id="email_form"
+          phx-submit="update_email"
+          phx-change="validate_email"
+        >
+          <.input field={@email_form[:email]} type="email" label="Email" required />
+          <.input
+            field={@email_form[:current_password]}
+            name="current_password"
+            id="current_password_for_email"
+            type="password"
+            label="Current password"
+            value={@email_form_current_password}
+            required
+          />
+          <:actions>
+            <.button phx-disable-with="Changing...">Change Email</.button>
+          </:actions>
+        </.simple_form>
+      </div>
+      <div>
+        <.simple_form
+          for={@password_form}
+          id="password_form"
+          action={~p"<%= schema.route_prefix %>/log_in?_action=password_updated"}
+          method="post"
+          phx-change="validate_password"
+          phx-submit="update_password"
+          phx-trigger-action={@trigger_submit}
+        >
+          <.input
+            field={@password_form[:email]}
+            type="hidden"
+            id="hidden_<%= schema.singular %>_email"
+            value={@current_email}
+          />
+          <.input field={@password_form[:password]} type="password" label="New password" required />
+          <.input
+            field={@password_form[:password_confirmation]}
+            type="password"
+            label="Confirm new password"
+          />
+          <.input
+            field={@password_form[:current_password]}
+            name="current_password"
+            type="password"
+            label="Current password"
+            id="current_password_for_password"
+            value={@current_password}
+            required
+          />
+          <:actions>
+            <.button phx-disable-with="Changing...">Change Password</.button>
+          </:actions>
+        </.simple_form>
+      </div>
+    </div>
     """
   end