Maybe/app/views/registrations/new.html.erb

<%
  header_title @invitation ? t(".join_family_title", family: @invitation.family.name) : t(".title")
%>

<% if self_hosted_first_login? %>
  <div class="fixed inset-0 w-full h-fit bg-gray-25 p-5 border-b border-alpha-black-200 flex flex-col gap-3 items-center text-center mb-12">
    <h2 class="font-bold text-xl"><%= t(".welcome_title") %></h2>
    <p class="text-gray-500 text-sm"><%= t(".welcome_body") %></p>
  </div>
<% elsif @invitation %>
  <div class="space-y-1 mb-6 text-center">
    <p class="text-gray-500">
      <%= t(".invitation_message",
            inviter: @invitation.inviter.display_name,
            role: t(".role_#{@invitation.role}")) %>
    </p>
  </div>
<% end %>

<% if @user.errors.present? %>
  <div class="text-red-600 flex items-center gap-2">
    <%= lucide_icon "circle-alert", class: "w-5 h-5" %>
    <p class="text-sm"><%= @user.errors.full_messages.to_sentence %></p>
  </div>
<% end %>

<%= styled_form_with model: @user, url: registration_path, class: "space-y-4" do |form| %>
  <%= form.email_field :email,
      autofocus: false,
      autocomplete: "email",
      required: "required",
      placeholder: "you@example.com",
      label: true,
      disabled: @invitation.present? %>
  <%= form.password_field :password, autocomplete: "new-password", required: "required", label: true, maxlength: 72 %>
  <%= form.password_field :password_confirmation, autocomplete: "new-password", required: "required", label: true %>
  <% if invite_code_required? && !@invitation %>
    <%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %>
  <% end %>
  <%= form.hidden_field :invitation, value: @invitation&.token %>
  <%= form.submit t(".submit") %>
<% end %>