docbrown/app/views/users/_profile.html.erb

<%= javascript_packs_with_chunks_tag "enhanceColorPickers", "stickySaveFooter", "userProfileSettings", "validateFileInputs", defer: true %>

<%= render "users/additional_authentication" %>

<%= form_with(url: profile_path(@user.profile_id), method: "put", html: { class: "sticky-footer-form", id: "user-profile-form" }) do |f| %>

  <div class="crayons-card crayons-card--content-rows">
    <h2><%= t("views.settings.group.user") %></h2>

    <div class="crayons-field">
      <%= f.label :name, t("helpers.label.user.name"), for: "user[name]", class: "crayons-field__label" %>
      <%= f.text_field "user[name]",
                       maxlength: 30,
                       class: "crayons-textfield",
                       placeholder: t("helpers.placeholder.user.name"),
                       value: @user.name %>
    </div>

    <div class="crayons-field">
      <%= f.label :email, t("helpers.label.user.email"), for: "user[email]", class: "crayons-field__label" %>
      <%= f.text_field "user[email]",
                       maxlength: 50,
                       class: "crayons-textfield",
                       placeholder: t("helpers.placeholder.user.email"),
                       value: @user.email %>
    </div>

    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box "users_setting[display_email_on_profile]", class: "crayons-checkbox", checked: @user.setting.display_email_on_profile %>
      <%= f.label :display_email_on_profile, t("views.users.profile_fields.display_email_on_profile"), for: "users_setting[display_email_on_profile]", class: "crayons-field__label" %>
    </div>

    <div class="crayons-field">
      <%= f.label :username, t("helpers.label.user.username"), for: "user[username]", class: "crayons-field__label" %>
      <%= f.text_field "user[username]",
                       maxlength: 30,
                       class: "crayons-textfield",
                       placeholder: t("helpers.placeholder.user.username"),
                       value: @user.username %>
    </div>

    <div class="crayons-field">
      <%= f.label :profile_image, t("helpers.label.user.profile_image"), for: "user[profile_image]", class: "crayons-field__label" %>

      <div class="flex items-center">
        <% if @user.profile_image_url.present? %>
          <span class="crayons-avatar crayons-avatar--xl mr-2">
            <img alt="<%= @user.username %> profile image" src="<%= @user.profile_image_url_for(length: 50) %>" class="crayons-avatar__image" loading="lazy" />
          </span>
        <% end %>
        <%= f.file_field "user[profile_image]", accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
      </div>
    </div>
  </div>

  <% profile = @user.profile %>

  <div class="crayons-card crayons-card--content-rows">
    <h2><%= t("views.settings.group.Basic") %></h2>

    <div class="crayons-field">
      <label class="crayons-field__label" for="profile[website_url]">
        <%= t("views.users.profile_fields.website.label") %>
      </label>
      <%= f.url_field "profile[website_url]",
                      maxlength: 100,
                      value: profile.website_url,
                      placeholder: "https://yoursite.com",
                      class: "crayons-textfield",
                      aria: { describedby: "url-description" },
                      data: { character_span_id: "url-characters" } %>
      <p id="url-description" class="crayons-field__description align-right">
        <span class="screen-reader-only"><%= t("views.settings.characters") %></span>
        <span id="url-characters"></span>/100
      </p>
    </div>

    <div class="crayons-field">
      <label class="crayons-field__label" for="profile[location]">
        <%= t("views.users.profile_fields.location.label") %>
      </label>
      <%= f.text_field "profile[location]",
                       maxlength: 100,
                       value: profile.location,
                       placeholder: t("views.users.profile_fields.location.placeholder"),
                       class: "crayons-textfield",
                       aria: { describedby: "location-description" },
                       data: { character_span_id: "location-characters" } %>
      <p id="location-description" class="crayons-field__description align-right">
        <span class="screen-reader-only"><%= t("views.settings.characters") %></span>
        <span id="location-characters"></span>/100
      </p>
    </div>

    <div class="crayons-field">
      <label class="crayons-field__label" for="profile[summary]">
        <%= t("views.users.profile_fields.bio.label") %>
      </label>
      <%= f.text_area "profile[summary]",
                      maxlength: 200,
                      value: profile.summary,
                      placeholder: t("views.users.profile_fields.bio.placeholder"),
                      class: "crayons-textfield",
                      aria: { describedby: "summary-description" },
                      data: { character_span_id: "summary-characters" } %>
      <p id="summary-description" class="crayons-field__description align-right">
        <span class="screen-reader-only"><%= t("views.settings.characters") %></span>
        <span id="summary-characters"></span>/200
      </p>
    </div>
  </div>

  <% ProfileFieldGroup.non_empty_groups.each do |group| %>
    <div class="crayons-card crayons-card--content-rows">
      <h2><%= t("views.settings.group.#{group.name}", default: group.name) %></h2>
      <% if group.description.present? %>
        <div class="color-base-60"><%= group.description %></div>
      <% end %>

      <% group.profile_fields.each do |field| %>
        <% next if field.attribute_name == "display_email_on_profile" %>
        <div class="crayons-field <%= "crayons-field--checkbox" if field.input_type == "check_box" %>">
          <% if field["input_type"] == "check_box" %>
            <%= f.public_send(field["input_type"],
                              "profile[#{field.attribute_name}]",
                              checked: profile.public_send(field.attribute_name),
                              class: "crayons-checkbox") %>
            <label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
              <%= field.label %>
              <% if field.description.present? %>
                <p class="crayons-field__description"><%= field.description %></p>
              <% end %>
            </label>
          <% else %>
            <label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
              <%= field.label %>
            </label>
            <% if field.description.present? %>
              <p class="crayons-field__description"><%= field.description %></p>
            <% end %>
            <%= f.public_send(field["input_type"],
                              "profile[#{field.attribute_name}]",
                              value: profile.public_send(field.attribute_name),
                              placeholder: field["placeholder_text"],
                              aria: { describedby: "#{field.attribute_name}-description" },
                              data: { character_span_id: "#{field.attribute_name}-characters" },
                              class: "crayons-textfield") %>
            <p id="<%= field.attribute_name %>-description" class="crayons-field__description align-right">
              <span class="screen-reader-only"><%= t("views.settings.characters") %></span>
              <span id="<%= field.attribute_name %>-characters"></span>/<%= character_count_denominator(field["input_type"]) %>
            </p>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>

  <% users_setting = @user.setting %>
  <div class="crayons-card crayons-card--content-rows">
    <h2><%= t("views.settings.group.Branding") %></h2>
    <div class="crayons-field ">
      <label class="crayons-field__label" for="users_setting[brand_color1]">
        <%= t("views.logo.color_1.label") %>
      </label>
      <p class="crayons-field__description"><%= t("views.logo.color_1.description") %></p>
      <div class="flex items-center w-100 m:w-50">
        <%= f.public_send(:text_field, "users_setting[brand_color1]",
                          value: users_setting.public_send(:brand_color1),
                          placeholder: "#000000",
                          class: "crayons-textfield",
                          data: { color_picker: "true", label_text: t("views.logo.color_1.label") }) %>

      </div>
    </div>

    <div class="crayons-field ">
      <label class="crayons-field__label" for="users_setting[brand_color2]">
        <%= t("views.logo.color_2.label") %>
      </label>
      <p class="crayons-field__description"><%= t("views.logo.color_2.description_html") %></p>
      <div class="flex items-center w-100 m:w-50">
        <%= f.public_send(:text_field, "users_setting[brand_color2]",
                          value: users_setting.public_send(:brand_color2),
                          placeholder: "#000000",
                          class: "crayons-textfield",
                          data: { color_picker: "true", label_text: t("views.logo.color_2.label") }) %>
      </div>
    </div>
  </div>

  <div class="save-footer crayons-card crayons-card--content-rows">
    <button type="submit" class="crayons-btn"><%= t("views.settings.save_profile") %></button>
  </div>
<% end %>