I am working on changing the UI of the reset password form generated by phx_gen_auth. The current state of said form is as follows:
<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Reset password</h2>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
<.form let={f} for={@changeset} action={Routes.account_reset_password_path(@conn, :update, @token)} class="space-y-6">
<%= if @changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
</div>
<% end %>
<div>
<%= label f, :password, "New password", class: "block text-sm font-medium text-gray-700" %>
<div class="mt-1">
<%= password_input f, :password, required: true, id: "password", name: "password", type: "password", autocomplete: "current-password", class: "block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" %>
</div>
<%= error_tag f, :password %>
</div>
<div>
<%= label f, :password_confirmation, "Confirm new password", class: "block text-sm font-medium text-gray-700" %>
<div class="mt-1">
<%= password_input f, :password_confirmation, required: true, type: "password", autocomplete: "current-password", class: "block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" %>
</div>
<%= error_tag f, :password_confirmation %>
</div>
<%= submit "Reset password", class: "flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" %>
<div class="flex items-center justify-between">
<div class="text-sm">
<%= link "Register account", to: Routes.account_registration_path(@conn, :new), class: "font-medium text-indigo-600 hover:text-indigo-500" %>
</div>
<div class="text-sm">
<%= link "Sign in to existing account", to: Routes.account_session_path(@conn, :new), class: "font-medium text-indigo-600 hover:text-indigo-500" %>
</div>
</div>
</.form>
</div>
</div>
</div>
When the params hit the controller, the shape is as follows:
%{
"_csrf_token" => "LwoWc1UTKTp5GEJfaBAbVRERBjI2AQV7IzrB2IHxNWzi8hJbdUCznrNM",
"_method" => "put",
"account" => %{"password_confirmation" => "password"},
"password" => "password1234",
"token" => "hEo-B4dUBnuThrqBTntws_hFBmqSVMA_JDFJcMh_2sk"
}
My question is, why is only the “password_confirmation” input nested under the key “account”? Am I able to control / change this?