docbrown/app/views/shared/authentication/_email_registration_form.html.erb

<div id="sign-in-password-form" class="mt-8 mb-6 crayons-card p-7 align-left mx-auto" style="max-width:580px;">
  <% if flash[:notice] %>
    <div class="crayons-notice crayons-notice--danger mb-6" role="alert">
      <%= flash[:notice] %>
    </div>
  <% end %>

  <%= form_for(@user, as: :user, data: { testid: "registration-form" }, url: registration_path(:user)) do |f| %>

    <% if defined?(resource) && resource&.errors&.any? %>
      <div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert" data-testid="signup-errors">
        <div class="crayons-card__header">
          <h3 class="crayons-card__headline">
            <%= t("views.auth.register.errors", count: resource.errors.size) %>
          </h3>
        </div>
        <div class="crayons-card__body">
          <ul>
            <% resource.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      </div>
    <% else %>
      <p class="pb-4 fw-bold"><%= t("views.auth.register.create") %></p>
    <% end %>

    <% if Settings::Authentication.display_email_domain_allow_list_publicly &&
      Settings::Authentication.allowed_registration_email_domains.any? %>
      <div class="crayons-notice crayons-notice--info" aria-live="polite">
        <% if Settings::Authentication.allowed_registration_email_domains.one? %>
          <%= t("views.auth.register.allow.one_html", domain: Settings::Authentication.allowed_registration_email_domains.first) %>
        <% else %>
          <%= t("views.auth.register.allow.list") %>
          <ul>
            <% Settings::Authentication.allowed_registration_email_domains.each do |domain| %>
              <li>
                <strong>@<%= domain %></strong></strong>
              </li>
            <% end %>
          </ul>
        <% end %>
      </div>
    <% end %>

    <div class="crayons-field mt-3">
      <%= f.label :profile_image, class: "crayons-field__label" %>
      <%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
    </div>

    <div class="crayons-field mt-2">
      <%= f.label :name, class: "crayons-field__label", aria: { label: t("views.auth.register.field.name.aria_label") } do %>
        <%= t("views.auth.register.field.name.label") %>
        <span class="crayons-field__required crayons-hover-tooltip" data-tooltip="<%= t("views.auth.register.field.required") %>">*</span>
      <% end %>
      <%= f.text_field :name, class: "crayons-textfield", required: true %>
    </div>

    <div class="crayons-field mt-2">
      <%= f.label :username, class: "crayons-field__label", aria: { label: t("views.auth.register.field.username.aria_label") } do %>
        <%= t("views.auth.register.field.username.label") %>
        <span class="crayons-field__required crayons-hover-tooltip" data-tooltip="<%= t("views.auth.register.field.required") %>">*</span>
      <% end %>
      <%= f.text_field :username, class: "crayons-textfield", required: true %>
    </div>

    <div class="crayons-field mt-2">
      <%= f.label :email, class: "crayons-field__label", aria: { label: t("views.auth.register.field.email.aria_label") } do %>
        <%= t("views.auth.register.field.email.label") %>
        <span class="crayons-field__required crayons-hover-tooltip" data-tooltip="<%= t("views.auth.register.field.required") %>">*</span>
      <% end %>
      <%= f.email_field :email, autocomplete: "email", class: "crayons-textfield", required: true %>
    </div>

    <div class="crayons-field mt-2">
      <%= f.label :password, class: "crayons-field__label", aria: { label: t("views.auth.register.field.password.aria_label") } do %>
        <%= t("views.auth.register.field.password.label") %>
        <span class="crayons-field__required crayons-hover-tooltip" data-tooltip="<%= t("views.auth.register.field.required") %>">*</span>
      <% end %>
      <%= f.password_field :password, autocomplete: "current-password", class: "crayons-textfield", required: true %>
    </div>

    <div class="crayons-field mt-2">
      <%= f.label :password_confirmation, class: "crayons-field__label", aria: { label: t("views.auth.register.field.confirm.aria_label") } do %>
        <%= t("views.auth.register.field.confirm.label") %>
        <span class="crayons-field__required crayons-hover-tooltip" data-tooltip="<%= t("views.auth.register.field.required") %>">*</span>
      <% end %>
      <%= f.password_field :password_confirmation, autocomplete: "current-password", class: "crayons-textfield", required: true %>
    </div>

    <% if ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
      <% if params[:forem_owner_secret].present? %>
        <%= f.hidden_field :forem_owner_secret, value: params[:forem_owner_secret] %>
      <% else %>
        <div class="crayons-field mt-2">
          <%= f.label :forem_owner_secret, t("views.auth.register.secret.label"), class: "crayons-field__label" %>
          <%= f.password_field :forem_owner_secret, class: "crayons-textfield", required: true, placeholder: t("views.auth.register.secret.placeholder") %>
        </div>
      <% end %>
    <% end %>

    <% if ReCaptcha::CheckRegistrationEnabled.call %>
      <div class="recaptcha-tag-container mt-2">
        <%= recaptcha_tags site_key: Settings::Authentication.recaptcha_site_key %>
      </div>
    <% end %>

    <div class="actions pt-3">
      <%= f.submit t("views.auth.register.submit"), class: "crayons-btn" %>
    </div>
  <% end %>
</div>